I have iterated new DOM using jquery. But the newly manipulated DOM are not available as normal DOM. DOM is properly written to browser yet functions on those elements not working. Code is given below.   &lt;div&gt; &lt;table  id='jvcontainer'&gt;     &lt;tr id='vrtable'&gt;         &lt;td&gt;         &lt;select class="drcr"&gt;             &lt;option value="dr"&gt;Dr&lt;/option&gt;             &lt;option value="cr"&gt;Cr&lt;/option&gt;         &lt;/select&gt;                    &lt;input class="jvamt" name="parrot[]" type="text"&gt;          &lt;/td&gt;     &lt;/tr&gt;          &lt;/table&gt;      &lt;/div&gt;   &lt;script&gt;       $(".drcr").change(function(){         thisval = $(this).closest("tr").find(".jvamt").val();         //alert(thisval);         $('#jvcontainer').append("&lt;br&gt;&lt;tr id='vrtable'&gt;&lt;td&gt;&lt;select class='drcr'&gt;&lt;option value='dr'&gt;Dr&lt;/option&gt;&lt;option value='cr'&gt;Cr&lt;/option&gt;&lt;/select&gt;&lt;input class='jvamt' name='parrot[]' type='text' value='fdfdfd'&gt;&lt;/td&gt;&lt;/tr&gt; ");     }); &lt;/script&gt;
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.
48930
I read about Drupal behaviors today, and I tried writing the following code.  (function ($) {    Drupal.behaviors.mymodule = {     attach: function (context, settings) {       $('#mymodule_id', context).change(function () {         alert('Handler for .change() called.');       });     }   };  }(jQuery));    Is Drupal.behaviors.mymodule the namespace? What are the context and settings parameters passed to the Drupal behavior? Is this the equivalent of document.ready()?   Can I attach any number of functions?  Can I define JavaScript functions which will be called somewhere?
116497
Let me describe the problem in details:  I want to show an absolute positioned div when hovering over an element. That's really simple with jQuery and works just fine. But when the mouse goes over one of the child elements, it triggers the mouseout event of the containing div. How do I keep javascript from triggering the mouseout event of the containing element when hovering a child element.   What's the best and shortest way to do that with jQuery?  Here is a simplified example to illustrate what I mean:  Html:  &lt;a&gt;Hover Me&lt;/a&gt; &lt;div&gt;   &lt;input&gt;Test&lt;/input&gt;   &lt;select&gt;     &lt;option&gt;Option 1&lt;/option&gt;     &lt;option&gt;Option 2&lt;/option&gt;   &lt;/select&gt; &lt;/div&gt;   Javascript/jQuery:  $('a').hover( function() { $(this).next().show() }               function() { $(this).next().hide() } );
108198
We have updated the jQuery version that Stack Overflow and Stack Exchange use from version 1.7.1 to 1.12.4 today (Tuesday, September 27, 2016). jQuery is an infrastructure library, and we've been running on an old version for a while because it worked well. However, there are a few improvements and features that made it compelling for us to upgrade, especially since some parts of the site already used a different version.  As a user of our Q&amp;A sites, nothing should visibly change, as this is an infrastructure rather than a feature update. However, with an infrastructure update like this, there is always a chance for things to slip through the cracks.     If you encounter functionality that used to work yesterday and is broken today, please leave an answer on this thread and accept my apologies in advance.   Please be aware of our .  Do note that userscripts that rely on  (like .live() - anything in the 1.7, 1.8, 1.9 and 1.10 category, and if you can in the 3.0 as well to make a future update less likely to break your script) may need to be updated. There were no DOM or other structural changes, so selectors should still be the same.  If you're curious why we're going to jQuery 1.12.4 and not 3.1, this is a matter of incrementally upgrading and making sure things work along the way. Pretty much every 1.x version had major changes, and jQuery recommends upgrading an old 1.x version to the latest 1.12.4 and  plugin first and fix anything that is deprecated. We are in this stage now and want to make sure everything still works.
21618
I'm trying to add AJAX callback to form element that was previously rendered by AJAX but with no luck. Code below.   A bit of description. There are three main methods here:   buildForm - base form extraField - AJAX callback attached to ['month'] choosePerson - AJAX callback attached to: ['week_day']['hour']   In the buildForm method I create base form with AJAX callback on 'month' select element. In the AJAX callback you can find an extraField method. This method contains form element called 'hour' ($form['week_day']['hour']) and this element renders well. But this element also contains AJAX callback, which doesn't work, it does not generate 'person_container' element and the 'person' select.   Any idea how to ajaxify elements that previously were rendered by ajax?  class ReservationForm extends FormBase {    public function getFormId() {     return 'reservation_form';   }    public function buildForm(array $form, FormStateInterface $form_state) {      $form['month'] = array(       '#type' =&gt; 'select',       '#title' =&gt; $this-&gt;t('Select month'),       '#options' =&gt; array($this-&gt;t('January'), $this-&gt;t('February'), $this-&gt;t('March')),       '#ajax' =&gt; array(         'callback' =&gt; array($this, 'extraField'),         'event' =&gt; 'change',         'wrapper' =&gt; 'week-day',       ),     );      // Disable caching on this form.     $form_state-&gt;setCached(FALSE);      $form['week_day'] = [       '#type' =&gt; 'container',       '#attributes' =&gt; ['id' =&gt; 'week-day'],     ];   }    public function extraField(array &amp;$form, FormStateInterface $form_state) {     $month = $form_state-&gt;getValue('month');      $hour_options = array();      if ($month == '0') {       $hour_options[0] = $this-&gt;t('08:00');       $hour_options[1] = $this-&gt;t('09:00');       $hour_options[2] = $this-&gt;t('10:00');     }      if ($month == '1') {       $hour_options[0] = $this-&gt;t('12:00');       $hour_options[1] = $this-&gt;t('13:00');       $hour_options[2] = $this-&gt;t('14:00');     }      if ($month == '2') {       $hour_options[0] = $this-&gt;t('18:00');       $hour_options[1] = $this-&gt;t('19:00');       $hour_options[2] = $this-&gt;t('20:00');     }      $form['week_day']['hour'] = array(       '#type' =&gt; 'select',       '#title' =&gt; $this-&gt;t('Choose hours @month', array('@month' =&gt; $month)),       '#options' =&gt; $hour_options,       '#ajax' =&gt; array(         // tried with that callback too: [ $this, 'choosePerson']         'callback' =&gt; array($this, 'choosePerson'),         'event' =&gt; 'change',         'wrapper' =&gt; 'person',       ),     );      $form['week_day']['person_container'] = array(       '#type' =&gt; 'container',       '#attributes' =&gt; ['id' =&gt; 'person-container'],     );      $form['week_day']['person_container']['person'] = array(       '#type' =&gt; 'select',       '#title' =&gt; $this-&gt;t('Choose person'),       '#options' =&gt; ['John', 'Sarah', 'Peter'],     );      return $form['week_day'];   }    public function choosePerson(array &amp;$form, FormStateInterface $form_state) {     $form['week_day']['person_container']['person'] = array(       '#type' =&gt; 'select',       '#title' =&gt; $this-&gt;t('Choose person'),       '#options' =&gt; ['John', 'Sarah', 'Peter'],     );     return $form['week_day']['person_container'];   } }
28108
If i do jQuery(expr).change( function), then I can get an event function to fire when the user makes a change to the value.  Is it possible to get this to fire if it's changed programatically, ie if I call jQuery(expr).val("moo").  or if some Plain old JavaScript changes it's value?  Thanks for any help.
82255
I'm making a page which has some interaction provided by javascript. Just as an example: links which send an AJAX request to get the content of articles and then display that data in a div. Obviously in this example, I need each link to store an extra bit of information: the id of the article. The way I've been handling it in case was to put that information in the href link this:  &lt;a class="article" href="#5"&gt;   I then use jQuery to find the a.article elements and attach the appropriate event handler. (don't get too hung up on the usability or semantics here, it's just an example)  Anyway, this method works, but it  a bit, and isn't extensible at all (what happens if the click function has more than one parameter? what if some of those parameters are optional?)  The immediately obvious answer was to use attributes on the element. I mean, that's what they're for, right? (Kind of).  &lt;a articleid="5" href="link/for/non-js-users.html"&gt;   In  I asked if this method was valid, and it turns out that short of defining my own DTD (I don't), then no, it's not valid or reliable. A common response was to put the data into the class attribute (though that might have been because of my poorly-chosen example), but to me, this smells even more. Yes it's technically valid, but it's not a great solution.  Another method I'd used in the past was to actually generate some JS and insert it into the page in a &lt;script&gt; tag, creating a struct which would associate with the object.  var myData = {     link0 : {         articleId : 5,         target : '#showMessage'         // etc...     },     link1 : {         articleId : 13     } };  &lt;a href="..." id="link0"&gt;   But this can be a real pain in butt to maintain and is generally just very messy.  So, to get to the question, how do you store arbitrary pieces of information for HTML tags?
48199
I've got this pretty simple HTML page with a jQuery datepicker:      &lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt;     &lt;title&gt;jQuery Datepicker&lt;/title&gt;     &lt;link rel="stylesheet" href="../App_Themes/Default/ui.datepicker.css" type="text/css"         media="screen" title="Smoothness" /&gt;      &lt;script src="../Shared/Scripts/jquery-1.2.6.min.js" type="text/javascript"&gt;&lt;/script&gt;      &lt;script src="../Shared/Scripts/jquery-ui-1.5.3.min.js" type="text/javascript"&gt;&lt;/script&gt;      &lt;script language="javascript" type="text/javascript"&gt;         $(document).ready(PageLoad);          function PageLoad() {             $('#textBox').datepicker();         }     &lt;/script&gt;  &lt;/head&gt; &lt;body&gt;     &lt;input type="text" id="textBox" /&gt; &lt;/body&gt; &lt;/html&gt;   The datepicker itself seems to work perfectly but I can't apply my theme. Am I missing something really stupid here?  Thanks !!!!
77655
I'm looking for some input on how to implement custom eventhandling in jquery the best way. I know how to hook up events from the dom elements like 'click' etc, but I'm building a tiny javascript library/plugin to handle some preview functionality.  I've got a script running to update some text in a dom element from a set of rules and data/user input I got, but now I need that same text shown in other elements that this script can't possibly know of. What I need is a good pattern to somehow observe this script producing the needed text.  So how do I do this? Did I overlook some builtin functionality in jquery to raise/handle user events or do I need some jquery plugin to do it? What do you think is the best way/plugin to handle this?
38897
I'm trying to hide a div dynamically. This works for me. But when I try to do a nested div. It suddenly doesnt work anymore. Am I missing something?  Component(Working)  &lt;ui:button label="Toggle" press="{!c.toggle}"/&gt; &lt;div aura:id="text"&gt;Now you see me&lt;/div&gt;   Component(Not Working)  &lt;ui:button label="Toggle" press="{!c.toggle}"/&gt; &lt;div&gt;     &lt;div aura:id="text"&gt;Now you see me&lt;/div&gt; &lt;/div&gt;   Controller  toggle : function(component, event, helper) {         var toggleText = component.find("text");         $A.util.toggleClass(toggleText, "toggle");     },   Style  .THIS.toggle {     display: none; }
121420
I have put together the following mootools script   window.addEvent('domready', function() {     var shouts = "timed.php";     var log = $('log_res');     function updateData (url,target)     {         new Ajax(url,{         method: 'get',          update: $(target),          onComplete: function() {         log.removeClass('ajax-loading');}  }).request();         log.empty().addClass('ajax-loading');     }      var update = function(){ updateData ( shouts, 'log_res' ); };     update();           // call it immediately     update.periodical(10000);   // and then periodically   });   heres the html  &lt;div id="AJAX"&gt;     &lt;h3&gt;Ajax Response&lt;/h3&gt;     &lt;div id="log_res"&gt;exercise&lt;/div&gt; &lt;/div&gt;   its using moo 1.1.  The above works fine, the page loads then the ajax request kicks in div id log_res has a class of ajax-loading whilst its updating, and when its finished the text exercise in the div is replaced with whatever the ajax has returned (yippee). But I want to put some custom HTML into the div WHILST the page is loading, because the ajax-loading class is not enough to contain the information, i also want to put a spinny flasher into the div whilst the ajax request is retrieving the information. Hope that makes sense!
98687
If the user selects an option in a dropdown box, there must be added a label and a textbox. Using appendChild, these elements get added to the end of the container.  var newFreeformLabel = document.createElement('label'); newFreeformLabel.innerHTML = 'Omschrijving:';  var newFreeformField = document.createElement('input'); newFreeformField.className = 'textfield'; newFreeformField.name = 'factuur_orderregel[]';  var newFreeformSpacer = document.createElement('div'); newFreeformSpacer.className = 'spacer';  container.appendChild(newFreeformLabel); container.appendChild(newFreeformField); container.appendChild(newFreeformSpacer);   The issue is that these elements should be inserted at the beginning of container, not at the end.  Is there a solution to this in PrototypeJS?
98146
Every time I toggle active class in a list (to dynamically change DOM content) I find that I always go to this approach to check and clear which class is active. I'm still fairly new to using pure javascript so I'm wondering if there is a better, simpler approach?  It feels like having to run a second function to clear out all active classes seems grunty.   I've included an example of how I do it.    var specialNav = document.getElementById("special-nav");  if (specialNav) {   var navItems = specialNav.getElementsByTagName('li');   var i;   for (i = 0; i &lt; navItems.length; i++) {     navItems[i].addEventListener("click", function() {       if (!this.classList.contains('active')) {         clearActives(navItems);         this.classList.toggle('active');       }     });   } }  function clearActives(classlist) {   if (classlist) {     for (i = 0; i &lt; classlist.length; i++) {       classlist[i].classList.remove('active');     }   } } .active {   color: red }  li {   cursor: pointer; } &lt;div id="special-nav"&gt;   &lt;ul&gt;     &lt;li class="active"&gt; 1&lt;/li&gt;     &lt;li&gt;2&lt;/li&gt;     &lt;li&gt;3&lt;/li&gt;     &lt;li&gt;4&lt;/li&gt;   &lt;/ul&gt; &lt;/div&gt;
4228
As the question says, how do I add a new option to a DropDownList using jQuery?  Thanks
81099
I am tryin to create expand and collapse functionality between pageblocks.The scenario is when i click the collapse button in one pageblock ,it should render another pageblock.How this can be achieved ? I tried using java script but the pageblock is not displaying properly. My current code is   &lt;apex:page &gt;   &lt;apex:includeScript value="{!$Resource.jqueryCollapse}"/&gt;   &lt;apex:includeScript value="{!$Resource.jqueryCollapse1}"/&gt;    &lt;apex:includeScript value="{!$Resource.jqueryCollapse2}"/&gt;    &lt;apex:form &gt;    &lt;html&gt;    &lt;head&gt;     &lt;script type="text/javascript"&gt;      $(function(){     $(".header").click(function () {        alert("Loopafe");    $header = $(this);        $content = j$header.next();         $content.slideToggle(100, function () {                 $header.text(function () {                     return $content.is(":visible") ? $(this).attr("src",      "https://c.ap1.visual.force.com/resource/1404298250000/Minus") : $(this).attr("src", "https://c.ap1.visual.force.com/resource/1404298250000/plusimg");     });  });     });  });  &lt;/script&gt;  &lt;style&gt;    .container .content {   display: none;  padding : 5px;  }  &lt;/style&gt; &lt;/head&gt; &lt;apex:pageBlock &gt; &lt;apex:pageBlockSection columns="10" collapsible="True" &gt;            &lt;div class="container"&gt;     &lt;img   src="XXg"class ="   header " /&gt;           &lt;div class="content"&gt;          &lt;apex:pageBlock &gt;            &lt;apex:pageBlockSection columns="5"  &gt;         &lt;apex:outputLabel value="Collapse"  id="theSecond1"/&gt;         &lt;apex:inputText /&gt;         &lt;/apex:pageBlockSection&gt;                     &lt;/apex:pageBlock&gt;    &lt;/div&gt;    &lt;/div&gt;         &lt;apex:outputText value="First" id="theFirst"/&gt;         &lt;apex:InputText /&gt;      &lt;/apex:pageBlockSection&gt;     &lt;/apex:pageBlock&gt; &lt;body&gt;  &lt;/body&gt;  &lt;/html&gt;    &lt;/apex:form&gt;   &lt;/apex:page&gt;
16364
How can I reference the script element that loaded the javascript that is currently running?  Here's the situation. I have a "master" script being loaded high in the page, first thing under the HEAD tag.  &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"&gt; &lt;head&gt; &lt;script type="text/javascript" src="scripts.js"&gt;&lt;/script&gt;   There is a script in "scripts.js" which needs to be able to do on-demand loading of other scripts. The normal method doesn't quite work for me because I need to add new scripts without referencing the HEAD tag, because the HEAD element hasn't finished rendering:  document.getElementsByTagName('head')[0].appendChild(v);   What I want to do is reference the script element that loaded the current script so that I can then append my new dynamically loaded script tags into the DOM after it.  &lt;script type="text/javascript" src="scripts.js"&gt;&lt;/script&gt; loaded by scripts.js--&gt;&lt;script type="text/javascript" src="new_script1.js"&gt;&lt;/script&gt; loaded by scripts.js --&gt;&lt;script type="text/javascript" src="new_script2.js"&gt;&lt;/script&gt;
103418
HTML  more code here...  &lt;script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="https://example.com/sites/all/modules/ac_modules/ac_exercise/ac_exercise.js?nkuo2r"&gt;&lt;/script&gt;   more code here...  &lt;div class="form-item form-type-textfield form-item-time-start"&gt;   &lt;label for="edit-time-start"&gt;Time Start &lt;/label&gt;  &lt;input type="text" id="edit-time-start" name="time_start" value="11:28:12" size="4" maxlength="8" class="form-text" /&gt; &lt;/div&gt;   more code here...  Javascript - ac_exercise.js  $(document).ready(function(){    $("#edit-time-start").on("change paste keyup", function() {      alert($(this).val());    }); });   In Chrome's console I get the following error: Uncaught TypeError: undefined is not a function - ac_exercise.js?nkuo2r:1 which is this line of code:  $(document).ready(function(){