As I've discovered with Ajax in jQuery, loaded elements are not jQuery objects. What's the best way to 'rescan' the document to make elements loaded with Ajax jQuery objects?  In the code below jq('.storyBlock button').click(function() and the other functions do not fire on the loaded Ajax html. How best to change this code so they will fire?  var jq = jQuery.noConflict();  jq(document).ready(function() {     // Disable buttons after clicking     jq('.storyBlock button').click(function() {         jq(this).addClass('selected');         jq(this).parent().addClass('disabled');         jq(this).parent().find('button').attr('disabled', true);     });     // Event Handler     jq('.storyBlock button').click(function() {         // Find link         var getID = jq(this).data('link');         console.log(getID + '.html');          // Load file and insert after last story         jq.ajax(getID + '.html').done(function(html) {         jq('#stories &gt; div:last-child').after(html);         if ( (getID) != 'start' ) {             jq('html,body').animate({ scrollTop: jq('#' + getID).offset().top },'slow');         } else {             jq('.storyBlock').remove();             jq('#stories &gt; div' ).load( "start.html" );             jq('html,body').animate({ scrollTop: jq('#start').offset().top },'slow');         }        });     }); });
112
I have a bit of code where I am looping through all the select boxes on a page and binding a .hover event to them to do a bit of twiddling with their width on mouse on/off.  This happens on page ready and works just fine.  The problem I have is that any select boxes I add via Ajax or DOM after the initial loop won't have the event bound.  I have found this plugin (), but before I add another 5k to my pages with a plugin, I want to see if anyone knows a way to do this, either with jQuery directly or by another option.
63023
I'm working on ajaxifying a form which uses Hierarchical Select widget. I need to update a text field based on the value of HS and a couple of other fields. I want to use Drupal forms Ajax API. I followed the . Now the form is updated when user fills in the text fields. But I can't cope with HS.   I was told  HS doesn't support regular Drupal #ajax mechanism. I can easily attach the handler to HS update event. So all I need now is to manually trigger Drupal Ajax machinery from my own handler. How it's best to be done?   I see there is a global Drupal.ajax object but can't figure out how to make use of it.
16631
Is there any way to get the ID of the element that fires an event?  I'm thinking something like:    $(document).ready(function() {   $("a").click(function() {     var test = caller.id;     alert(test.val());   }); }); &lt;script type="text/javascript" src="starterkit/jquery.js"&gt;&lt;/script&gt;  &lt;form class="item" id="aaa"&gt;   &lt;input class="title"&gt;&lt;/input&gt; &lt;/form&gt; &lt;form class="item" id="bbb"&gt;   &lt;input class="title"&gt;&lt;/input&gt; &lt;/form&gt;     Except of course that the var test should contain the id "aaa", if the event is fired from the first form, and "bbb", if the event is fired from the second form.
9012
I'd like to make a click event fire on an &lt;input type="file"&gt; tag programmatically.  Just calling click() doesn't seem to do anything or at least it doesn't pop up a file selection dialog.  I've been experimenting with capturing events using listeners and redirecting the event, but I haven't been able to get that to actually perform the event like someone clicked on it.
41163
I'm wondering what the preferred method is for dealing with AJAX calls. Should one use the same plugin php file to process the POST or a separate one? Which is cleaner or safer?
56223
Any idea why the piece of code below does not add the script element to the DOM?  var code = "&lt;script&gt;&lt;/script&gt;"; $("#someElement").append(code);
62447
How can I prevent ajax failure popups and instead route the failure to the console log instead?  Is this something I can do with Drupals implementation of jQuery?
10734
I'm using jQuery to wire up some mouseover effects on elements that are inside an UpdatePanel. The events are bound in $(document).ready . For example:  $(function() {         $('div._Foo').bind("mouseover", function(e) {         // Do something exciting     });     });   Of course, this works fine the first time the page is loaded, but when the UpdatePanel does a partial page update, it's not run and the mouseover effects don't work any more inside the UpdatePanel.   What's the recommended approach for wiring stuff up in jQuery not only on the first page load, but every time an UpdatePanel fires a partial page update? Should I be using the ASP.NET ajax lifecycle instead of $(document).ready?
39810
In Prototype I can show a "loading..." image with this code:  var myAjax = new Ajax.Request( url, {method: 'get', parameters: pars,  onLoading: showLoad, onComplete: showResponse} );  function showLoad () {     ... }   In jQuery, I can load a server page into an element with this:  $('#message').load('index.php?pg=ajaxFlashcard');   but how do I attach a loading spinner to this command as I did in Prototype?
26508
I have an SP2013 wiki page that I want to use a jQuery accordion on.  Just with some static content, not pulling any information from anywhere in SharePoint.  I created the page, inserted a script editor web part at the top, and inserted this snippet:  &lt;script src="//code.jquery.com/jquery-1.10.2.js"&gt;&lt;/script&gt; &lt;script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"&gt;&lt;/script&gt; &lt;script&gt;     $(function () {         $("#accordion").accordion({collapsible: true, active: false, icons:false });     }); &lt;/script&gt;   Then, I put the cursor under the script editor web part, and clicked on "Edit Source".  Then underneath the HTML that represents the script editor, I put this HTML (basically the jQuery accordion demo HTML):  &lt;div id="accordion"&gt;    &lt;h3&gt;       Section 1    &lt;/h3&gt;    &lt;div&gt;       &lt;p&gt;Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.&lt;/p&gt;    &lt;/div&gt;    &lt;h3&gt;       Section 2    &lt;/h3&gt;    &lt;div&gt;       &lt;p&gt;Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna.&lt;/p&gt;    &lt;/div&gt;    &lt;h3&gt;       Section 3    &lt;/h3&gt;    &lt;div&gt;       &lt;p&gt;Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.&lt;/p&gt;    &lt;/div&gt;    &lt;h3&gt;       Section 4    &lt;/h3&gt;    &lt;div&gt;       &lt;p&gt;Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est.&lt;/p&gt;       &lt;p&gt;Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.&lt;/p&gt;    &lt;/div&gt; &lt;/div&gt;   After I saved the page, the accordion collapsed initially (as it is supposed to), but clicking on any of the headers does not expand the section.  If I go back into edit mode for the page, it works as expected - clicking a header expands the section.  Save it again, and it stops working.  What am I missing?  I don't think what I'm trying to do is all that complicated...  EDIT 12/8: Ok, so I put the jQuery and jQuery UI scripts in the site's Site Assets folder, and the behavior is the same -- the scripts do not get loaded in IE or Firefox unless the page is in Edit mode.  Incidentally I think the other script snippet, where I hook up the accordion, is also not getting loaded unless the page is in edit mode.  The reason I think this is that I changed the way I referenced the main jQuery script (to something that didn't work), and the debugger halted on $(function () { ...., saying $ was undefined.  So if jQuery is not loaded, and the debugger thinks $ is undefined, at least it's hitting that section of code.  Which makes me think that in non-edit mode, not only is jQuery not getting loaded, but that section of script is not getting loaded either, because the debugger is not choking on $.  Can anyone provide any insight as to why the Script Editor web part seems to be not working in IE and Firefox?  (Because apparently in Chrome it works fine.)
74715
I have several input and option elements on my page, each (well almost) have an event attached to update some text on the page once they change. I use jQuery which is really really cool :)   I also use Microsofts  framework, utilizing the UpdatePanel. The reason why I do that is that certain elements are created on the page based on some server-side logic. I don't really want to explain why I use the UpdatePanel - even if it could (it can with quite some effort) be rewritten to use only  I still want that UpdatePanel.  You probably guessed it - once I have a postback on the UpdatePanel the jQuery events stops working. I actually was expecting this, since the "postback" is not really a new postback so my code in document.ready that binds the events won't be fired again. I also confirmed my suspicion by reading up on it in the jQuery help libraries.  Anyway I'm left with the problem of rebinding my controls after the UpdatePanel is done updating the . I preferably need a solution that does not require adding more .js files (jQuery plug-ins) to the page but something as simple as being able to catch the UpdatePanel's 'afterupdating' where I can just call my method to rebind all the form elements.
37689
We are using jQuery  to dynamically display an iframe when someone clicks on a picture.  In this iframe, we are using  a javascript library to display multiple pictures.  The problem seems to be that $(document).ready in the iframe seems to be fired too soon and the iframe content isn't even loaded yet, so galleria code is not applied properly on the DOM elements.  $(document).ready seems to use the iframe parent ready state to decide if the iframe is ready.  If we extract the function called by document ready in a separate function and call it after a timeout of 100&nbsp;ms. It works, but we can't take the chance in production with a slow computer.  $(document).ready(function() { setTimeout(ApplyGalleria, 100); });   My question: which jQuery event should we bind to to be able to execute our code when the dynamic iframe is ready and not just it's a parent?
119666
I'm making an AJAX call in drupal 7 via the standard AJAX Framework. My  problem is that when a status message is set by the AJAX callback, it is simply lost (or displayed at the next reload of the page). How can I display the status messages right after the AJAX callback has finished running, without reloading the page? Is there a module for that?
121190
I'm trying to use ajax to update two different parts of a drupal form from just one form input blur.  I have the standard ajax stuff on my input:  $my_form['my_input']['#ajax'] = array(   'callback' =&gt; 'my_callback',   'wrapper' =&gt; 'my_target_div',   'event' =&gt; 'blur', );   This is working well, swapping out my div when the input is updated ... however I also want to update another form input elsewhere in the form with different code as a result of the blur on my original input.  Is this possible, any ideas?  Edit: For clarity, here's my real world example:   Content type 'movie' Added field 'primary_title' When 'primary_title' is updated my ajax callback checks for similar strings and returns html. The html from the callback is inserted into an empty div.  That part is working great!   I'm trying to also modify the standard node 'title' input, giving it the value of 'primary_title' after I have done some regex to tidy up the string (removing "The" or "A" from the start etc) The result will be two title fields, one with the complete title 'primary_title' and one trimmed 'title' that will be useful for sorting and displaying records.
88861
I don't want to use jQuery, but I'd like to use Ajax to do file uploading. Is that possible?  If so, where can I find information/tutorial on it?
3057
I need to change an element's ID using jQuery.    Apparently these don't work:  jQuery(this).prev("li").attr("id")="newid" jQuery(this).prev("li")="newid"   I found out that I can make it happen with the following code:  jQuery(this).prev("li")show(function() {     this.id="newid"; });   But that doesn't seem right to me. There must be a better way, no? Also, in case there isn't, what other method can I use instead of show/hide or other effects? Obviously I don't want to show/hide or affect the element every time, just to change its ID.  (Yep, I'm a jQuery newbie.)  Edit I can't use classes in this case, I must use IDs.
85015
if you create html layout like so  &lt;ul&gt;      &lt;li class='a'&gt;&lt;/li&gt;      &lt;li class='b'&gt;&lt;/li&gt;      &lt;li class='a'&gt;&lt;/li&gt;      &lt;li class='b'&gt;&lt;/li&gt;      &lt;li class='a'&gt;&lt;/li&gt;      &lt;li class='b'&gt;&lt;/li&gt;      &lt;li class='a'&gt;&lt;/li&gt;      &lt;li class='b'&gt;&lt;/li&gt; &lt;/ul&gt;   and try to select odd elements with 'a' class like so $$('.a:odd') you will get empty array, and if you do $$('.a:even') you will get all four li elements with 'a' class.. It really strange.. But im new to mootools, maybe im doing something wrong..    So my question is how to select first and third li elements with a class. I know that i can do it with function like this  $$('.a').filter(function(item, index) { return index%2; }  but its too complicated for such small task as selecting odd or even elements..