Basically the point of the code is that its a dropdown. The dropdown is initially displayed to none and when it is clicked a active dropdown class is added on to it. The problem is that once its added its not working when I try to use jquery to hear for a click. html &lt;button onclick=&quot;dropdown_btn()&quot; type=&quot;button&quot; style=&quot;background: none; border:none; font-size: 25px;          font-weight: bold; position: relative; top: 29%; cursor: pointer; outline: none&quot; id=&quot;user-page&quot; class = 'user-dashboard-dropdown'&gt;         &lt;img width=&quot;50&quot; src=&quot;{% static 'imgs/user-icon.png' %}&quot;&gt; &lt;/button&gt;  &lt;div class=&quot;dropdown-for-user&quot; style=&quot;display:none&quot;&gt;      &lt;ul style=&quot;list-style-type: none;&quot;&gt;      &lt;li&gt;&lt;a href=&quot;{% url 'profile' %}&quot;&gt;Profile&lt;/a&gt;&lt;/li&gt;      &lt;li&gt;&lt;a href=&quot;{% url 'account' %}&quot;&gt;Account&lt;/a&gt;&lt;/li&gt;      &lt;li&gt;&lt;a href=&quot;{% url 'saved-items' %}&quot;&gt;Saved Items&lt;/a&gt;&lt;/li&gt;      &lt;li&gt;&lt;a href=&quot;{% url 'listed-items' %}&quot;&gt;Listed Items&lt;/a&gt;&lt;/li&gt;      &lt;li style=&quot;border-bottom: none;&quot;&gt;&lt;a href=&quot;{% url 'logout' %}&quot;&gt;Logout&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;  jquery/javascript    function dropdown_btn(){         $('.user-dashboard-dropdown').addClass('active-dropdown');         $('.dropdown-for-user').css('display', '');          }          $('.user-dashboard-dropdown.active-dropdown').click(function(){         alert('ran');         $(this).removeClass('active-dropdown');         $('.dropdown-for-user').css('display', 'none');     });
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.
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.
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!
78667
I am trying to hide a column on page load and when a value is selected from a drop-down list, have the hidden dropdown appear. I am able to hide the column but when I choose the value in the drop-down, nothing happens.   This is the code I'm using:    $(document).ready(function(){   //Define which columns to show/hide by default  $("h3.ms-standardheader:contains('Project Subtype')").closest("tr").hide();  //Show/hide columns based on Drop Down Selection   $("select[title='Project Type']").change(function() { if ($("select[title='Project Type']").val() === "Photo")  {      $("h3.ms-standardheader:contains('Project Subtype')").closest("tr").show(); }  else {       $("h3.ms-standardheader:contains('Project Subtype')").closest("tr").hide(); }     }); });       I've also tried to use this one with the same results:  $('nobr:contains("Project Subtype")').closest('tr').hide();    UPDATE: I've added alerts to try and filter out the issue and it seems like   $("select[title='Project Type']").change(function() {   seems to be the issue. But I have no idea why it's not being read.  Thank in advance for any ideas on this one!
43196
Found this when subscribing to jQuery tag. "unsubscribe | rss" is not shown correctly.
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.
122548
I have a submit button in my form and I want to implement it using ajax:  function myid_user_page_form(){      drupal_add_library('system', 'drupal.ajax');     $form = array();     $form['id'] = array(        '#type' =&gt; 'fieldset',        '#title' =&gt; t('ID Information'),        '#prefix' =&gt; '&lt;div id="myid_search_id_number_wrapper"&gt;',        '#suffix' =&gt; '&lt;/div&gt;'    );       $form['submit'] = array(       '#type' =&gt; 'button',       '#value' =&gt; 'Save',          '#ajax' =&gt; array(          'event' =&gt; 'click',          'callback' =&gt; 'myid_user_page_form_ajax_submit',          'wrapper' =&gt; 'myid_search_id_number_wrapper'       ),        '#attributes' =&gt; array(         'id' =&gt; 'myid_save',                    ), );  function myid_user_page_form_ajax_submit($form, &amp;$form_state) {      watchdog('Wow','Wow'); }   After executing the code above, the page still has it's refresh after it's clickfunctionality. The ajax doesnt work and no Wow message log in my watchdog table from my database, which means the ajax callback function isn't called. Where am I missing?
8344
I'm working with a bit of html and Javascript code that I've taken over from someone else. The page reloads a table of data (via an asynchronous request) every ten seconds, and then re-builds the table using some DOM code. The code in question looks something like this:  var blah = xmlres.getElementsByTagName('blah'); for(var i = 0; i &lt; blah.length; i++) {     var td = document.createElement('td');     var select = document.createElement('select');     select.setAttribute("...", "...");     select.onchange = function() {         onStatusChanged(select, callid, anotherid);     };     td.appendChild(select); }   When the onchange event is fired for a &lt;select&gt; element however, it seems like the same values are being passed to the onStatusChanged() method for every &lt;select&gt; in the table (I've verified that in each iteration of the loop, callid and anotherid are being given new, distinct values).   I suspect this is occuring because of the nature of how I am setting the event handler, with the select.onchange = function() syntax. If I understand how this is working correctly, this syntax sets a closure for the onchange event to be a function which refers to these two references, which end up having a final value of whatever they are set to on the last iteration of the loop. When the event fires, the value referenced by callid and anotherid is the value set in the last iteration, not the value set at the individual iteration.  Is there a way that I can copy the value of the parameters I am passing to onStatusChanged()?  I've changed the title to better reflect the question and the accepted answer.
24835
Can someone confirm that its not possible to change the height of a dropdown that is shown when you click on a select box.   The size attribute of the select makes it look like a list, the height attribute in the CSS doesnt do much good either.
67914
I am creating an element with document.createElement(). Now how can I pass it to a function that only takes a Jquery object?  $("#id")    I can not use it, as the element has not been rendered in the page yet.
4059
The situation is somewhat like-  var someVar = some_other_function(); someObj.addEventListener("click", function(){     some_function(someVar); }, false);   The problem is that the value of someVar is not visible inside the listener function of the addEventListener, where it is probably being treated as a new variable.
7091
I know that jQuery is loaded, because I can switch out the $ for 'jQuery' and everything behaves as expected, but this will be a messy script if I can't fix this  This script:  jQuery(document).ready(function(){     $("ul.vimeo_desc_feed li a").click(function(){         alert($(this).attr('href'));         return false;     }) });   Produces the error $ is not a function  This script:  jQuery(document).ready(function(){     jQuery("ul.vimeo_desc_feed li a").click(function(){         alert(jQuery(this).attr('href'));         return false;     }) });   works fine.
10870
For this dropdownlist in HTML:  &lt;select id="countries"&gt; &lt;option value="1"&gt;Country&lt;/option&gt; &lt;/select&gt;   I would like to open the list (the same as left-clicking on it). Is this possible using JavaScript (or more specifically jQuery)?
67449
I have a view that has three expose filters (Manufacturer, Type, Model), three options list (term reference to Printer vocabulary) .  Vocabulary: Printer (3 levels)   -- HP            ---- xxx      ------ xxxx   -- Apple ---- xxxx ------ xxxxxx -- Dell ---- xxxx ------- xxxxx -- ... -- ... (thousands of terms)   Since Form API AJAX doesn't work on views expose form, I am unable to make the them dependent select for exposed form fields. So I used jQuery to make the exposed form fields "dependent select / cascading select".    Basically, I empty all the options in views_exposed_form_alter() firstly:  $form['manufacturer_id']['#options'] = $form['type_id']['#options'] = $form['model_id']['#options'] = array();   then populate the option lists with my jQuery code accordingly.  However I get "An illegal choice has been detected." on page load, and form submit.  Form submission is prevented due to Drupal form validation mechanism .    It's the form validation detect the options generated by jQuery are not come with the original form data, as I removed the options in form alter. Value of a select box is not present in its defined options .  So I tried to remove form validation in form alter as:  unset($form['#validate']);   still doesn't work, the illegal choice error remains.  ============ UPDATED =================  Inspired by @kiamlaluno 's answer below, the only solution I came up is hack/patch the core.  Here is what I done:  Edited /includes/form.inc : (line 2014)    I removed the code:  $element['#needs_validation'] = TRUE;   and added:  // if not these fields, mark for validation as usual.  // so if are these fields, validation will be passed.   if ($element['#name'] != 'manufacturer_id'  &amp;&amp;      $element['#name'] != 'type_id'          &amp;&amp;      $element['#name'] != 'model_id' ) {    $element['#needs_validation'] = TRUE; }   It works, the exposed form select option bypassed the validation.   But my solution is very ugly which modified the core.   I wonder if there is any other solution without touching the core? How can I bypass the validation of these exposed form fields?  Thanks!
32885
I have some html like this:  &lt;div id="1"&gt;     &lt;p&gt;         Volume = &lt;input type="text" /&gt;         &lt;button rel="3.93e-6" class="1" type="button"&gt;Check answer&lt;/button&gt;     &lt;/p&gt;     &lt;div&gt;&lt;/div&gt; &lt;/div&gt;   and some JS like this:  $("button").click(function () {     var buttonNo = $(this).attr('class');     var correct = Number($(this).attr('rel'));      validate (Number($("#"+buttonNo+" input").val()),correct);     $("#"+buttonNo+" div").html(feedback); });   What I'd really like is if I didn't have to have the class="1" on the button (I know numeric classes aren't valid, but this is a WIP!), so I could determine buttonNo based on the id of the parent div. In real life there are multiple sections looking like this.   How do I find the id of the div parenting the button. What would be a more semantic way to store the answer in the button code. I want to make this as foolproof as possible for a non programmer to copy and paste without breaking things!
107230
I need to do some custom theming on the search block in Drupal 7.  Specifically, I need to add a class to the submit button that makes it invisible and removes it from the content flow.  So:  &lt;div class="form-actions form-wrapper" id="edit-actions"&gt;   &lt;input type="submit" id="edit-submit" name="op" value="Search" class="form-submit"&gt; &lt;/div&gt;   Becomes...  &lt;div class="form-actions form-wrapper element-invisible" id="edit-actions"&gt;   &lt;input type="submit" id="edit-submit" name="op" value="Search" class="form-submit"&gt; &lt;/div&gt;   I added element-invisible to the edit-actions div element.  However, I can't figure out how to do this.  What's the best practice for doing this sort of thing?
82828
I've searched and found variations of this question but I've never found an answer that seemed to work. I need to add a class to the &lt;li&gt; elements, currently the main menu is rendered like this:  print theme('links__system_main_menu', array(     'links' =&gt; $main_menu,     'attributes' =&gt; array(         'id' =&gt; 'slidemenu',         'class' =&gt; array(             'links',             'inline',             'clearfix'         )     ),     'heading' =&gt; t('') ));   As far as I can tell, this only sets up the &lt;ul&gt; element of the main menu, so I was wondering if there's a way to edit the attributes of the 'links' part.  ---EDIT---  Alright, I think I solved it. Apparently you can use theme_links__system_main_menu in templates to override the whole thing. I ended up doing this:  function mytheme_links__system_main_menu($variables) {     $html = '&lt;div id="mainmenu"&gt;';     $html .= '  &lt;ul id="slidemenu" class="clearfix"&gt;';      static $linkClass = 1;      foreach ($variables['links'] as $link) {                         $html .= '&lt;li class="themastyle' . $linkClass . '"&gt;' . l($link['title'], $link['href'], $link) . '&lt;/li&gt;';         ++$linkClass;     }      $html .= '  &lt;/ul&gt;';     $html .= '&lt;/div&gt;';      return $html; }   Not entirely sure if this is correct Drupal, though it did solve my issue!