This works, but when I hover the first time, nothing loads. When I mouse off then back on, ajax has loaded. I want ajax to load on the first hover.
index.html
<span title="" id="test" class="tooltip"></span>
tooltip.html
<span id="test">this is ajax</span>
jquery
$('.tooltip').hover(function () {
var id = $(this).attr('id');
$.get('tooltip.html #'+id, function(data) {
$('#'+id).attr('title', data);
});
});
Looks like you are relying on the browser's inbuilt tooltips (showing the title on hover.) That tooltip is likely triggered by the mouseover event, meaning that after you've dynamically added the title, you need another mouseover event to actually trigger the tooltip. Seems it's working as designed.
This is because the first time you hover (which is actually the mouseenter event) the ajax function loads the data and changes the title, but the mouseenter event has already fired and your tooltip is already open so it's too late.
Your best bet is to directly alter the tooltip rather than change the title of the original element.
What you should actually do is change both and alter your hover function to check for a title so that next time the hover occurs you don't need to load the information again, rather refer to the title you've already populated.
Hope that helps :)
As pointed out earier, the problem is that the browser displays the inbuilt title as soon as you hover the element, and ajax use some time to load the content and append it.
I would advice you to use one of the MANY tooltip-plugins out there: https://www.google.com/search?q=tooltip+jquery+plugin
I've had some great experience with qTip. Easy to set up and easy to restyle.
Related
Have a really strange issue that a colleague was facing which I managed to work around, but for the life of me cannot understand why his initial code did not work! - we have a legacy asp.net web application that is using MasterPages/Content controls and has jQuery mixed all over the web application providing some client interactivity.
Essentially there is a web form view that has a div containing a button which is initially hidden (display: none), upon clicking another menu item, this div is shown using jQuery BLOCKUI Plugin, blocking the rest of the UI and rendering the popup div into place - the user can then click the button, clicking the button should hide the containing div, and show another div that contains another two buttons - all should be simple.... but this is where it got funky:
Bear in mind none of this content is dynamically generated, all HTML elements are present within the .aspx view up front after the page is finished loading.
var blockUiRenderFrame = function (html, width, height) {
window.parent.$.blockUI({
message: html,
css: {
top: ($(window.parent).height() - height) / 2 + 'px',
left: ($(window.parent).width() - width) / 2 + 'px',
width: width
}
});
};
<div id="anotherContentFrame">
<p>some text</p>
</div>
<div id="contentFrame" style="display:none;">
<div id="myButtonContainingDiv">
<button id="aButton" />
</div>
<div id="myOtherButtonsContainingDiv"></div>
</div>
$(document).ready(function() {
$("#myButton").click(function() {
$("#myButtonContainingDiv").hide();
$("#myOtherButtonsContainingDiv").show();
});
});
<!-- A Button on the page calls this code -->
blockUiRenderFrame($("#contentFrame"), 200, 200);
What I observed occurring was what appears to be a complete loss of context, or executing the event under a different context all together... during the handling of the click event, the div elements, or indeed anything within the HTML div contentFrame all return undefined.
At any other time if I use the console/debugger, I can successfully return an element using say $("#myButtonContainingDiv").
The click event has its correct event element, I can use $(this) to get the button I clicked on, but even trying to select $("#myButton") within the actual click event handler code itself returns 'undefined'.
I can access $("anotherContentFrame") perfectly fine, at any time, including during the handling of the click event of #myButton.
The workaround I had to use in order to get this code to work was:
During the click event handler, use the following:
$(this).closest('div').hide()
$(this).closest('div').next().show()
As this was the only way I could get any reference to the DOM elements on the page to successfully hide/show them.
I can try to give out some more information if anyone wishes, I am not sure if anyone has ever seen an issue like this.
Thanks in advance!
Where's the code showing your button?
When you call $(element).click() it will try to bind to your element on the DOM that is already loaded (no async elements!). If you're loading the #myButton via a async call, you need to bind the click on a parent element and then filter the function call to your #myButton like this:
$(document).on('click', '#myButton', function(){});
This way you're sure that the element (in this case, document) existing when jQuery tries to bind the click event and it will only fire it when clicking on the filter you specified as the 2nd parameter to the .on() call, in this case, your #myButton element
Your event is not firing because jQuery doesn't know the element, because its state changed dynamically. In order to be sure to fire your click event, no matter the context, you can use
$(document).on('click', '#myElement', function(){});
By doing that, you are refering to the easiest "non dynamically generated" element, and jQuery will always be able to find your element.
You can then access your element properties with :
$(this)
Context: I am making a small jQuery library for modals (in-window popups): https://github.com/hypesystem/d_modal.js
When creating a new modal, it is possible to also fade the page. This is done by adding a div with a semi-transparent black background.
When the modal is removed I want the "fade" to disappear as well. But not just when the modal is .remove()'d - I want the fade to disappear in the same way as the modal on any action that makes the modal disappear: fadeOut(), hide(), etc.
Here is a jsFiddle to test in (if you have any ideas): http://jsfiddle.net/n5fqS/
What I'm looking for is one solution that handles all the cases.
there are many ways of hidding elements (removing content of div, changing css "display" property, fadeOut(), hide(), etc, etc) and Jquery does not have a universal event listener that would group all these events. I think you will have to manually trigger a "hide" event as a callback function in all the places where your first div is being hidden. For example:
$(".dismiss").click(function() {
$("#div-one").hide(function(){
$(this).trigger('hide');
});
});
Then you only have to have once the event handler:
$("#div-one").on('hide', function(){
//code that hides my second div
)};
Of course, you will have to manually add the trigger every place where relevant. So its not "the one solution".
you can use jquery dialog to achieve this functionality.
The short answer seems to be: jQuery does not emit events on hide.
In order to combat this, I have used the best solution I could find, and started an open project to enable sending of the required events: https://github.com/hypesystem/showandtell.js
This should cover, at the moment, the most common use-cases. Any feedback on this is appreciated.
try like this
$(".dismiss").click(function() {
$("#div-one").hide(function(){
$("#div-two").hide('slow');
});
});
Hi i am using a function called LoadCoordinates. My first thougt was i need to read this onload.. but after trying a lot of different codes, i cant..
This is how its triggered normally
$("#address1").blur(function()
{
loadCoordinates("");
});
The problem is to "run" this i have to click the input and then clic the body (so address1 lost focus and blur is triggered)
I have tried to load this on page load using seveeral different codes like
$(loadCoordinates(""));
or this
$(function(){
loadCoordinates();
$("#address1").blur( loadCoordinates );
});
This is not working, i think it has to do something because my select lists are using "SELECT BOX IT" http://gregfranko.com/jquery.selectBoxIt.js/
Anyway..
How can i make or trigger the same as is triggering "blur()" on the address1 input.. but when the page is ready. and after selectbox it has loaded & builded the lists with options..
Thanks
This will trigger blur. You need to make sure you do this before applying any plugin to the element, or have to use the API of the plugin to affect and changes
$("#address1").blur( loadCoordinates ).blur();
DEMO
I'm using the JEditable plugin for in-place editing.
I have a "setup" function which calls .editable() on all the relevant classes. The problem is, I have newly appended elements which I'd like to make editable as well. Obviously, being newly added, .editable() never gets called on them.
In other words, I'm looking to get the effect that jquery's live() function does, but for the editable() function.
My current workaround seems kinda ugly to me (redscribe_button is the button that needs to be clicked to edit the text):
$(".redescribe_button").live("click", function(click_event) {
click_event.preventDefault();
$(".editable", $(this).parent().parent()).editable("/temp/", {
event: "make_editable",
indicator : 'Saving...',
tooltip : 'Click to edit...'
});
$(".editable", $(this).parent().parent()).trigger('make_editable');
});
In other words, I'm just calling .editable every time the edit button is clicked.
Any ideas for a better solution?
I just came to this question as well and solved it in a more elegant way (IMHO).
$('.jqEdit').live('click',function(event) {
event.preventDefault();
$(this).editable('save.php')
});
Calling editable more than once on an element has no adverse side effects, right? So why not just re-do the setup each time anything changes.
Heres my link:
http://tinyurl.com/6j727e
If you click on the link in test.php, it opens in a modal box which is using the jquery 'facebox' script.
I'm trying to act upon a click event in this box, and if you view source of test.php you'll see where I'm trying to loacte the link within the modal box.
$('#facebox .hero-link').click(alert('click!'));
However, it doesn't detect a click and oddly enough the click event runs when the page loads.
The close button DOES however have a click event built in that closes the box, and I suspect my home-grown click event is being prevented somehow, but I can't figure it out.
Can anyone help? Typically its the very last part of a project and its holding me up, as is always the way ;)
First, the reason you're getting the alert on document load is because the #click method takes a function as an argument. Instead, you passed it the return value of alert, which immediately shows the alert dialog and returns null.
The reason the event binding isn't working is because at the time of document load, #facebox .hero-link does not yet exist. I think you have two options that will help you fix this.
Option 1) Bind the click event only after the facebox is revealed. Something like:
$(document).bind('reveal.facebox', function() {
$('#facebox .hero-link').click(function() { alert('click!'); });
});
Option 2) Look into using the jQuery Live Query Plugin
Live Query utilizes the power of jQuery selectors by binding events or firing callbacks for matched elements auto-magically, even after the page has been loaded and the DOM updated.
jQuery Live Query will automatically bind the click event when it recognizes that Facebox modified the DOM. You should then only need to write this:
$('#facebox .hero-link').click(function() { alert('click!'); });
Alternatively use event delegation
This basically hooks events to containers rather than every element and queries the event.target in the container event.
It has multiple benefits in that you reduce the code noise (no need to rebind) it also is easier on browser memory (less events bound in the dom)
Quick example here
jQuery plugin for easy event delegation
P.S event delegation is pencilled to be in the next release (1.3) coming very soon.