I cant get javascript tooltip to work on dynamic output,
I am using backbone to populate my divsCells
<script class="bookTemplate" type="text/template">
<div class="divRow">
<div class="divCell <%= Slot.StyleClass %>"><a class="tool" data-tip-type="text" data-tip-source="<%= Slot.TooltipText %>" href="#"><%= Slot.ValueText %></a></div>
</div>
</script>
This outputs the html exactly as expected, but the tooltip wont work on it,
If I hardcode the html Cell, the tooltip works.
I call the javascript tooltip file in footer of my page (asp/mvc)
Output from Dynamic:<div class="divCell open"><a class="tool" data-tip-type="text" data-tip-source="Book it!" href="#">Open</a></div>
Output from Static: <div class="divCell open"><a class="tool" data-tip-type="text" data-tip-source="Book it Now!." href="#">Open</a></div>
<script type="text/javascript" src="/Assets/js/views/tooltip.js"></script>
I dont understand why the tooltip is not showing on the dynamic? the html is the same, (Im still new to the world of JS) so I tried moving things around, I dont know how to debug this or work around this, if i want the tooltip script to work on the dynamic field do i have to use special methods?
Your Javascript might not take into account the new elements your are creating with backbone.
You can use a jQuery function called on(), which have the ability to handle events on descendant elements not yet created
$( "#selector" ).on( "click", function() {
//do your tooltip call
});
Either that or your call to tooltip should be done after backbone has finished its inserts.
Related
I have been using Cluetip for 8 years. Was asked to spiff up the tips and realized it was abandonded 5 years ago. Tooltipster looks like its actively maintained and feature complete.
I have included the css and js files, no error on loading.
My html is generated by an xslt process but the html looks OK
<span class="handShift" data-tooltip-content="#ad1e88"> ⇉ </span>
<div class="tooltip_templates" style="display:none"><span class="tip" id="ad1e88"><span class="clueTitle">Handshift:</span><span class="clueNote">unknown</span></span></div>
<span class="handShift" data-tooltip-content="#ad1e92"> ⇉ </span>
<div class="tooltip_templates" style="display:none"><span class="tip" id="ad1e92"><span class="clueTitle">Handshift:</span><span class="clueNote">Mary Baker Eddy</span></span></div>
my js init call is
$('span.handShift').tooltipster({
animation: 'fade',
delay: 200,
trigger: 'click',
debug:true
});
Once the page loads the two span.handShift elements have "tooltipstered" added to the class attribute.
I'm using the data-tooltip-content to specify what html is in the tip but I tried using the title attribute with the same results.
When I click on the text in the span.handShift the element identified with the data-tooltip-content attribute disapears from the DOM, no tip is displayed, no error in the console. The element never returns,that I can see. Obviously something is going on as the span is removed from the DOM, but its not what is expected?
I'm using jquery 2.1.4
I've tested, your code works.
cf my jsfiddle http://jsfiddle.net/xpvt214o/405260/
Don't forget to include the main JS :
<script type="text/javascript"
src="http://iamceege.github.io/tooltipster/dist/js/tooltipster.bundle.js"></script>
I'm having some difficulty with a Javascript function I am writing. The basic function of the script is that when a specific AJAX function is called and returns successful, it loads some HTML from a file and inserts that HTML into a on the main page and then (once loaded), fades in the parent div.
jQuery.ajax({
type: "POST",
url: "fns/authenticate.php",
data: dataString,
success: function (data) {
if (data=='1') {
jQuery("#authlogin").fadeOut(500, function(){
$(this).remove();
jQuery("#result").load("fns/logic.html", function() {
jQuery('#authtrue').fadeIn(1000);
});
});
} else {
jQuery('#details-error').fadeIn(200);
}
}
});
return false;
Now the AJAX seems to function properly, in that it will execute under the correct conditions and fade out and in the correct divs, the problem seems to be that the content isn't being loaded from logic.html or it is not being bound to the #result div correctly.
The main page's html looks like:
<div id="authlogin">
<!-- HTML form -->
</div>
<div id="authtrue" style="display: none;">
<div id="result"></div>
</div>
Any help would be much appreciated.
This is one of those things that you must troubleshoot yourself, because we do not have access to your fns/logic.html and therefore cannot test fully.
However, some thoughts:
(1) The basic logic of your .load() success function seems correct. Here is a jsFiddle that approximates the AJAX success function's logic. I substituted .html() for .load() because jsFiddle cannot do ajax. Anyway, assuming that .load() is doing what it should, that part should be working.
(2) You may already know this, but note that .load() is shorthand for $.ajax() -- as are .post() and .get(). You might find $.ajax() easier to troubleshoot as the code block is more structured. As a general rule, troubleshooting the shorthand constructions is slightly more abstract/difficult than troubleshooting $.ajax()
(3) Use developer tools in Chrome (press F12 key) to verify that the contents of logic.html have been inserted into the #result div. You might find, as I did in playing with my jsFiddle, that the contents were injected but the #authtrue div remained hidden. At least you will know that the logic.html document has been found and contents inserted. Knowing exactly where the problem is, finding/fixing the rest might now be trivial.
(4) Does your logic.html file include unnecessary header information? If so, you can strip it out by only inserting the BODY of the document, or a top-level containing div. See this section of the jQuery docs:
jQuery("#result").load("fns/logic.html #container", function() {//CALLBACK IN HERE});
(5) It would be a smart idea to create a test document that just and only loads the logic.html document, using various methods:
Method A: Using PHP (or whatever server-side language you use)
<div id="authlogin">
<!-- HTML form -->
<input type="button" id="mybutt" value="Click Me to Start" />
</div>
<div id="authtrue" style="display:none;">
<div id="result"><?php include 'logic.html'; ?></div>
</div>
Method B: Using load()
HTML:
<div id="authlogin">
<!-- HTML form -->
<input type="button" id="mybutt" value="Click Me to Start" />
</div>
<div id="authtrue" style="display:none;">
<div id="result"></div>
</div>
jQuery:
jQuery('#authtrue').show();
jQuery("#result").load("fns/logic.html");
(6) Ensure you do not have a typo in the destination element jquery selector: If no element is matched by the selector — in this case, if the document does not contain an element with id="result" — the Ajax request will not be sent. (from the docs)
I managed to fix this myself, thanks to the help of everyone here. It ended up being a browser caching problem. As soon as I cleared the cache everything magically worked.
I have built a web application with multiple pages. Some of them are Knockout-driven.
I am trying to apply some Ajax-optimized page loading and stumble over the following issue.
Say I have the following general page structure
<body>
<div id="content">
</div>
</body>
And the following view, which is using Knockout. I include the call to applyBindings inline for being able to load the right ViewModel for every view.
<section id="editor">
<ul data-bind="foreach: items">
....
</form>
</section>
<script>
ko.applyBindings({items: {}}, $("#editor").el)
</script>
I load the view asynchronously into div#content for example using JQuery.load("editor.html #content")
The first page load works fine, but when navigating away (again using JQuery.load) from this view and coming back again I receive the error:
You cannot apply bindings multiple times to the same element.
I have already tried to apply ko.cleanNode but with no success. What am I missing? The #editor node should be removed from the DOM when other content is shown. So I really do not understand how to clean bindings or reinitialize knockout.
Note: I do not want the old data, I want to initialize the Bindings like on a freshly loaded page
Could you test your $("#editor").el in console? It doesn't work in standard jQuery.
If your $("#editor").el returns undefined, your ko.applyBindings({items: {}}, $("#editor").el) is essentially binding to window.document.body.
You may try
ko.applyBindings({items: {}}, $("#editor").get(0));
...
// call cleanNode before loading new page.
ko.cleanNode($("#editor").get(0));
$("#content").load( "newpage.html" );
if your bindings in "editor" section doesn't change,i suggest you to load(AJAX) only json data from server,and replace(modify) your viewModel in the browser,in that way knockout will refresh the dom automaticly.
Am trying to draw d3 charts when a button is clicked.
But all the d3 tutorials I've seen says the d3 code should be placed inside the element
you want the charts to appear. This means the d3 code will execute when the page loads but I
want the code to run only when a button is clicked.
I also want to know if I can place my d3 code in an external file wrapped in a function
that I can call when I want to. If no, how do i create button that will show a d3 chart when clicked?
HTML
<input type="button" Value="show" />
<div id="presentation">
<!-- bar charts to show up here when the "show" button is clicked.
The button makes an ajax call and gets a json that contains data
that will be used to draw the chart.
-->
</div>
Check this out: http://jsfiddle.net/rUtS5/
Edit CSS first
#presentation {
...
display: none;
}
Then add a blank class on your buttons
<input type="button" Value="show" class="example" />
Use jQuery
<script>
$(".example").click(function () {
$('#presentation').fadeIn("slow");
});
</script>
Result:
presentation div will not be seen when the page load. When someone click the button which has example class it will be seen.
You can also use toggle(), slideToggle() or fadeToggle() functions instead fadeIn() for show/hide property.
I hope it helps... :/
P.S. If you try this solution
add this code in <head> section
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
and use jQuery codes at the bottom of page before </body>
This is sort of a condensed version of the code, the real version is too long to post but this is enough to represent the concept. I am using this to switch guitar diagrams based on several choices represented by anchors with the corresponding id in the href="". After spending several days getting it to work just right on a static html page, the script won't work in a Wordpress page which is where I intend to use it. I have tried it with the script in the head or inline (which shouldn't matter) - but either way it will not function. I know that Wordpress and certain plugins use Jquery so there may be a version mismatch causing conflicts. I am not (yet) an expert in javascript but I know there are several ways to skin a cat as the saying goes, I just need to find one that plays nice with Wordpress. Any help would be greatly appreciated...
<script src="http://code.jquery.com/jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
var divswitch = $('div.diagram_container a');
divswitch.bind('click',function(event){
var $anchor = $(this);
var ids = divswitch.each(function(){
$($(this).attr('href')).hide();
});
$($anchor.attr('href')).show();
event.preventDefault();
});
});
</script>
<style>
.diagram {
margin: 0;
width: 100%;
}
.diagram_container {
width: 100%;
}
</style>
<div id="RH_RW_Div" class="diagram_container" style="float:left; display:block;">
<div class="diagram_menu">
<a class="checked" href="#RH_RW_Div"><span class="checkbox_label">Right Handed</span></a>
<a class="unchecked" href="#LH_RW_Div"><span class="checkbox_label">Left Handed</span></a>
</div>
<img class="diagram" src='images/RH_RW.gif' /><br />
</div>
<div id="LH_RW_Div" class="diagram_container" style="float:left; display:none;">
<div class="diagram_menu">
<a class="unchecked" href="#RH_RW_Div"><span class="checkbox_label">Right Handed</span></a>
<a class="checked" href="#LH_RW_Div"><span class="checkbox_label">Left Handed</span></a>
</div>
<img class="diagram" src='images/LH_RW.gif' /><br />
</div>
Wordpress uses by default jQuery.noConflict(). This is to assure that there is no conflict by other libraries using the $ variable. That's why your console says it's not a function.
However, obviously, the jQuery variable still works, and you should use that, and passing to your function the $ variable yourself to enable the shorthand version of jQuery.
So your code should look like this:
jQuery(document).ready(function($){
// Your functions go here
});
My guess is that your Wordpress install or a plugin is already loading up jQuery in the head. Check to see if it exists there, and if it does, don't call it again.
If that doesn't do it and you have this site online, send me the link and I'll take a look.
Calling jQuery twice will often lead to problems. There is also a proper way to load jQuery and override the Wordpress version if you specifically need 1.8.3 (wp_register_script and wp_enqueue_script), but I don't think you need to go down that route yet.