I am trying to get the value of table row using jQuery. When I try the same jQuery code on console and after I try to click, that is selecting that row and give proper value what I expect. But I don't know why it is not running from my JavaScript file. But the other functions are working on the same JavaScript file    $(".chequeTable tbody tr").click(function() {   alert('Vendor ID ==');   $('.selected').removeClass('selected');   $(this).addClass("selected");    alert('Vendor ID ==' + $('.tdVendorID').html());    $(this).css("background-color", "#000000"); }); &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt; &lt;table class="table table-hover FilterTable chequeTable table-striped" id="queryTable"&gt;   &lt;thead&gt;     &lt;tr&gt;       &lt;th&gt;S.No&lt;/th&gt;       &lt;th&gt;VendorID&lt;/th&gt;       &lt;th&gt;VendorName&lt;/th&gt;       &lt;th&gt;ReqNo&lt;/th&gt;       &lt;th&gt;ChequeAmount&lt;/th&gt;       &lt;th&gt;VendorBalance&lt;/th&gt;       &lt;th&gt;Balance&lt;/th&gt;       &lt;th&gt;Description&lt;/th&gt;       &lt;th&gt;StockValue&lt;/th&gt;       &lt;th&gt;Yes/No&lt;/th&gt;     &lt;/tr&gt;   &lt;/thead&gt;   &lt;tbody&gt;     &lt;tr class=""&gt;       &lt;td class="tdSno"&gt;1&lt;/td&gt;       &lt;td class="tdVendorID"&gt;6000 &lt;/td&gt;       &lt;td class="tdVendorName"&gt;john&lt;/td&gt;     &lt;/tr&gt;   &lt;/tbody&gt; &lt;/table&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.
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!
102242
I want to display popup with the data item, such as: name, coordinates, stationID, Attribute.  But my code has some problem that can't run.  &lt;html lang="en-US" xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head profile="http://gmpg.org/xfn/11"&gt;     &lt;link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css"           integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="           crossorigin="" /&gt;     &lt;script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"             integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og=="             crossorigin=""&gt;&lt;/script&gt;     &lt;script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"&gt;&lt;/script&gt;     &lt;script src="https://code.jquery.com/jquery-2.1.1.min.js"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt;     &lt;div id="map" style="height: 500px; border: 1px solid #AAA;"&gt;&lt;/div&gt;     &lt;script&gt;          var osmUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',             osmAttrib = '&amp;copy; &lt;a href="https://www.openstreetmap.org/copyright"&gt;OpenStreetMap&lt;/a&gt; contributors',             osm = L.tileLayer(osmUrl, { maxZoom: 20, attribution: osmAttrib });         var map = L.map('map').setView([24.151687694799833,120.64116954803465               ], 15).addLayer(osm);              //顯示地圖         L.control.scale().addTo(map);          $.getJSON("https://sta.ci.taiwan.gov.tw/STA_Rain/v1.0/Things?$expand=Locations&amp;$select=name,properties&amp;$count=true", function (data) {             var markerGroup = L.featureGroup();             data.value.forEach(function (itemData, itemInd) {                 var latLng = L.latLng(itemData.Locations[0].location.coordinates[1], itemData.Locations[0].location.coordinates[0]);                 var myMarker = L.marker(latLng).addTo(markerGroup);                 myMarker.bindPopup('ID: ' + itemData.properties.stationID + '&lt;br /&gt;Name: ' + itemData.properties.stationName);                    onEachFeature (itemData, layer) {                     layer.bindPopup("&lt;p&gt;&lt;/p&gt;"                         + itemData.name + "&lt;/p&gt;"                         + itemData.properties.Attribute +                         "&lt;/p&gt;Attribute: "                     );                 };             }).addTo(map);              markerGroup.addTo(map);             map.fitBounds(markerGroup.getBounds());                   });     &lt;/script&gt; &lt;/body&gt; &lt;/html&gt;   This is my GeoJSON:  https://sta.ci.taiwan.gov.tw/STA_Rain/v1.0/Things?$expand=Locations&amp;$select=name,properties&amp;$count=true
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(){
36235
I am after documentation on using wildcard or regular expressions (not sure on the exact terminology) with a jQuery selector.  I have looked for this myself but have been unable to find information on the syntax and how to use it. Does anyone know where the documentation for the syntax is?  EDIT: The attribute filters allow you to select based on patterns of an attribute value.
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.
49395
In jQuery when you do this:  $(function() {    alert("DOM is loaded, but images not necessarily all loaded"); });   It waits for the DOM to load and executes your code. If all the images are not loaded then it still executes the code. This is obviously what we want if we're initializing any DOM stuff such as showing or hiding elements or attaching events.  Let's say though that I want some animation and I don't want it running until all the images are loaded. Is there an official way in jQuery to do this?  The best way I have is to use &lt;body onload="finished()"&gt;, but I don't really want to do that unless I have to.  Note: There is a  in Internet Explorer which actually does wait for all images to load before executing code inside $function() { }. So if you're using that platform you'll get the behavior I'm looking for instead of the correct behavior described above.
66978
I have got a problem with JavaScript. I want to add a drop down list control with a link as Value of it. After it will be choosen and clicked button it schould redirect me to chosen link. I tried this code from this Article:       &lt;select name="list" id="list" accesskey="target"&gt;     &lt;option value='none' selected&gt;Choose a theme&lt;/option&gt;     &lt;option value="index.html"&gt;Theme 1&lt;/option&gt;     &lt;option value="theme2.html"&gt;Theme 2&lt;/option&gt;     &lt;option value="theme3.html"&gt;Theme 3&lt;/option&gt; &lt;select&gt; &lt;input type=button value="Go" onclick="goToNewPage()" /&gt;  &lt;script type="text/javascript"&gt; function goToNewPage() {     var url = document.getElementById('list').value;     if(url != 'none') {         window.location = url;     } }     but when I tried to add by the script, or by html on site, or by designer its erase me that sort of text:  &lt;input type=button value="Go" onclick="goToNewPage()" /&gt;   It's live only:  &lt;input type=button value="Go" /&gt;
96273
I need to implement a custom block using JavaScript. These are the steps I took.   I created a custom module I created a custom block by creating a class which extends blockbase I created a JavaScript file I defined a library in libraries.yml file and included the JavaScript file I attached the library to the block using #attached   So far so good. In the JavaScript file, I am trying to use the open source Datatables library, but I am unable to add it.  This is the code that implements the block.  /**  * @file  * Contains \Drupal\custom_cms_blocks\Plugin\Block\TopNewsBlock.  */  namespace Drupal\custom_cms_blocks\Plugin\Block;  use Drupal\Core\Block\BlockBase;  /**  * Provides an 'Active forum topics' block.  *  * @Block(  *   id = "top_news_min_block",  *   admin_label = @Translation("Top News Min Block"),  *   category = @Translation("Custom CMS blocks"),  * )  */ class TopNewsBlock extends BlockBase {    /**    * {@inheritdoc}    */   public function build() {      //Fetch data      return array(       'type' =&gt; 'markup',       '#markup' =&gt; '&lt;table id="example_table"&gt;&lt;thead&gt;&lt;tr&gt;&lt;th&gt;Artist / Band&lt;/th&gt;&lt;th&gt;Album&lt;/th&gt;&lt;th&gt;Song&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td&gt;Muse&lt;/td&gt;&lt;td&gt;Absolution&lt;/td&gt;&lt;td&gt;Sing for Absolution&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;',       '#attached' =&gt; array(         'library' =&gt;  array(                 'https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js',           'custom_cms_blocks/top-news-library'         ),       ),      );    }   }   Can you explain me how I can include an external JavaScript file in a block?
23225
I am attempting to set a value in a textarea field using jquery with the following code:  $("textarea#ExampleMessage").attr("value", result.exampleMessage);   The issue is, once this code executes, it is not altering the text in the textarea?  However when performing an alert($("textarea#ExampleMessage").attr("value")) the newly set value is returned?
43780
I want to pass the java-script value to controller.I am using repeat on VF page.  VF page      &lt;apex:repeat value="{!listAdj}" var="Adj" id="hrs"&gt;       &lt;td&gt;&lt;div class="requiredInput"&gt;&lt;div class="requiredBlock"&gt;&lt;/div&gt;     &lt;apex:inputField id="decimal" value="{!Adj.Hours_Decimal__c}" onchange="setHidden5(this);" &gt;       &lt;/apex:inputField&gt;     &lt;/div&gt;&lt;/td&gt;             &lt;apex:inputField id="hours" value="{!Adj.Hours__c}" /&gt; &lt;apex:inputField id="decimal" value="{!Adj.Hours_Decimal__c}" onchange="setHidden5(this);"/&gt;              &lt;/apex:repeat&gt;   Javascript code  function setHidden5(element){     //split the id of the inputField by ':' and then use the 5th index in the array to exact position of the inputField in the apex:repeat.   var idArray = element.id.split(':');     var hiddenRep1 =document.getElementById("thePage:form:hrs:hrs:"+idArray[4]+":decimal");          var hiddenRep2 = document.getElementById("thePage:form:hrs:hrs:"+idArray[4]+":hours");       if(element.value.length &gt;=1){        document.getElementById("thePage:form:hrs:hrs:"+idArray[4]+":hours").disabled = true; **hiddenRep2.value=hidden1.value;**                }                             }     }   I want to pass the hiddenRep2.value to controller.How to pass that. Hidden2.value is same as hidden1.value + some addition subtraction.i dont know how to pass that value. Can someone me sort out this.  Thanks
92519
I have HTML like the following on my website:  &lt;div class="groups"&gt;   &lt;div class="group"&gt;     Group 1 priority:     &lt;select&gt;       &lt;option value="1.0"&gt;1&lt;/option&gt;       &lt;option value="2.0" selected="selected"&gt;2&lt;/option&gt;       &lt;option value="3.0"&gt;3&lt;/option&gt;     &lt;/select&gt;   &lt;/div&gt;   &lt;div class="group"&gt;     Group 2 priority:     &lt;select&gt;       &lt;option value="1.0"&gt;1&lt;/option&gt;       &lt;option value="2.0"&gt;2&lt;/option&gt;       &lt;option value="3.0" selected="selected"&gt;3&lt;/option&gt;     &lt;/select&gt;   &lt;/div&gt;   &lt;div class="group"&gt;     Group 3 priority:     &lt;select&gt;       &lt;option value="1.0" selected="selected"&gt;1&lt;/option&gt;       &lt;option value="2.0"&gt;2&lt;/option&gt;       &lt;option value="3.0"&gt;3&lt;/option&gt;     &lt;/select&gt;   &lt;/div&gt; &lt;/div&gt;   I am looking for a way to sort the order these groups appear in the browser using jQuery, based on the what is selected in the dropdown. It should resort when the user selects a new value in any of the dropdowns, or on page load.  What would be the easiest approach to this problem?  I have jQuery UI available, if the sortable thing can be used in any way. I couldn't not find a way to use that.  Update: There is other data in the &lt;div class="group"&gt; that should follow the dropdowns wherever they are moved. The number of groups varies from 0 to 20.
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.
92799
Several of my pages use both JQuery and Protoype. Since I upgraded to version 1.3 of JQuery this appears to be causing problems, because both libraries define a function named '$'.  JQuery provides a function noConflict() which relinquishes control of $ to other libraries that may be using it. So it seems like I need to go through all my pages that look like this:  &lt;head&gt;           &lt;script type="text/javascript" src="/obp/js/prototype.js"&gt;&lt;/script&gt;     &lt;script type="text/javascript" src="/obp/js/jquery.js"&gt;&lt;/script&gt; &lt;/head&gt;   and change them to look like this:  &lt;head&gt;           &lt;script type="text/javascript" src="/obp/js/prototype.js"&gt;&lt;/script&gt;     &lt;script type="text/javascript" src="/obp/js/jquery.js"&gt;&lt;/script&gt;     &lt;script type="text/javascript"&gt;         jQuery.noConflict();         var $j = jQuery;     &lt;/script&gt; &lt;/head&gt;   I should then be able to use '$' for Prototype and '$j' (or 'jQuery') for JQuery. I'm not entirely happy about duplicating these 2 lines of code in every relevant page, and expect that at some point somebody is likely to forget to add them to a new page. I'd prefer to be able to do the following    Create a file jquery-noconflict.js which "includes" jquery.js and the 2 lines of code shown above Import jquery-noconflict.js (instead of jquery.js) in all my JSP/HTML pages   However, I'm not sure if it's possible to include one JS file in another, in the manner I've described? Of course an alternate solution is simply to add the 2 lines of code above to jquery.js directly, but if I do that I'll need to remember to do it every time I upgrade JQuery.
23360
I want to use jQuery inside a firefox extension, I imported the library in the xul file like this:  &lt;script type="application/x-javascript" src="chrome://myExtension/content/jquery.js"&gt; &lt;/script&gt;   but the $() function is not recognized in the xul file neither do the jQuery().  I googled about the problem and found some solutions but no one did work with me:    I've also tried to pass the 'content.document' object(which refrences the 'document' object) as the context parameter to the jQuery function like this:  $('img',content.document);   but still not working, does any one came across this problem before?
92503
I have a lightning component that is using ui:inputSelect.   The component code:              &lt;div class="slds-form-element__control"&gt;                 &lt;ui:inputSelect class="slds-select" aura:id="quals" change="{!c.getPreCodes}"&gt;                     &lt;aura:iteration items="{!v.questions}" var="q"&gt;                          &lt;ui:inputSelectOption aura:id="question" text="{!q.Id}" label="{!q.Question_Text__c}"/&gt;                     &lt;/aura:iteration&gt;                 &lt;/ui:inputSelect&gt;             &lt;/div&gt;   The controller:      getPreCodes : function(cmp, event, helper){         var selected = cmp.find("quals").get("v.value");          var action = cmp.get("c.getPreCodes");         action.setParams({             "qualID" : selected         });         action.setCallback(this, function(response){             var state = response.getState();             if (state === "SUCCESS") {                  console.log('precodes: ', response.getReturnValue());              }         });          $A.enqueueAction(action);     }   The basic logic is that the uiSelect is dynamically populated on init (this works fine). When a user makes a selection the "change" parameter function is fired to retrieve a list from the database and pass it to another component.   However, the change function {!c.getPreCodes} seems to be called recursively causing a      "Something has gone wrong. AuraClientService.postProcess: error in   processing [RangeError: Maximum call stack size exceeded] . Please try   again."   error. If I comment out the enqueueAction the function only runs once (nothing is called recursively) so I suspect it has something to do with the controller call.
92276
I have a form that is dynamically generated, and has dynamically generated id's (and potentially classes). The forms are the same but they have the related id tacked on to the end.  How can I select each set of inputs and apply code to each one?  I was experimenting with $('input[id^=@id_airline_for_]') but could not get it to fly. I suspect I am missing some fundamental jQuery knowledge that is holding me back since I am sure this is a common problem with dynamic forms.   &lt;form method='POST'&gt;     &lt;label for="id_airline_for_8"&gt;Airline&lt;/label&gt;:     &lt;input id="id_airline_for_8" class="arrival_transfer_toggle_8" type="text" maxlength="30" name="airline_for_8"/&gt;     &lt;label for="id_flight_number_for_8"&gt;Flight Number&lt;/label&gt;:     &lt;input id="id_flight_number_for_8" class="arrival_transfer_toggle_8" type="text" maxlength="30" name="flight_number_for_8"/&gt;      &lt;label for="id_airline_for_17"&gt;Airline&lt;/label&gt;:     &lt;input id="id_airline_for_17" class="arrival_transfer_toggle_17" type="text" maxlength="30" name="airline_for_17"/&gt;     &lt;label for="id_flight_number_for_17"&gt;Flight Number&lt;/label&gt;:     &lt;input id="id_flight_number_for_17" class="arrival_transfer_toggle_17" type="text" maxlength="30" name="flight_number_for_17"/&gt;      -- snip --  &lt;/form&gt;   EDIT: I should update that i want to be able to perform some action when the input is clicked but only for classes with a matching id at the end.  To make it easy, lets say I want all inputs with a matching id at the end of the #id to disappear when one is clicked (just for arguments sake).