in my page I have an add button to add a new field into a table:  $("#add").click(function () {  var rowCount = $('#scale tr').length + 1;  var newRow = '&lt;tr id="row' + rowCount + '"&gt;&lt;td&gt;IP:&lt;/td&gt;&lt;td&gt;                &lt;input type="text" **class="ip"** id="ip' + rowCount + '" name="ip' + rowCount + '"&gt; &lt;/input&gt;&lt;/td&gt;&lt;td&gt;Name:&lt;/td&gt;&lt;td&gt;  &lt;input type="text" id="n' + rowCount + '" name="n' + rowCount + '"&gt; &lt;/input&gt;&lt;/td&gt;&lt;td id="ip' + rowCount + 'ave"&gt;&lt;/td&gt;&lt;td id="add"&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;';  console.log(newRow);  $("#scale  tr:last").after(newRow); });   The row is added beautifully.  I also have the following function in document ready:   $(".ip").focusout(function(){     alert("here");     var id =this.id;     console.log(id);     if(!ipcheck(id)){         console.log("after function");         $("#"+id).css("color","red");        }     else(pinging(id)); });   This code alerts me whenever I go to the first row of the table (the one which was initially existed) however for the new rows it doesn't work. My idea is to wrap all the listeners in a function and run the function whenever anything changes however as I have a lot of such a thing in my code I was wondering if there is a better/easier way to do it.
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.
3010
I have created a panel page (i.e using panels). I can add html content to it from the panel itself using add content->New custom content. I can also add css classes (add body css classes).  Now I would like to add a jquery button to that panel page. I could add a javascript to my theme but then it would be called on every page load not only this specific panel-page. So I would like to add my javascript through my module.   But how do I programatically check that the current page beeing viewed is that specific page panel? Is there a hook that lets me check that?  Thanks,  baba
101849
I have a toggle map (like ) with sublayers. I want all the sublayers to be visible when you open the map, but I would like to hide some sublayers when the toggle buttons are clicked. I've tried adding a hide sublayer code into the LayerActions section of my code, but it's not hiding the sublayers (the button does the same function no matter whether the 'layer.getSubLayer(1).hide()' is there or not). This is the code I'm using:  var LayerActions = {  all: function(){   layer.getSubLayer(1).hide();   sublayers[0].setSQL("SELECT * FROM spreadsheet");   return true;  },  2011: function(){   layer.getSubLayer(1).hide();   sublayers[0].setSQL("SELECT * FROM spreadsheet WHERE year IN ('2011') AND year IS NOT NULL");   return true;  },  2012: function(){   layer.getSubLayer(1).hide();   sublayers[0].setSQL("SELECT * FROM spreadsheet WHERE year IN ('2012', '2012/2013') AND year IS NOT NULL");   return true;  } }   $('.button').click(function() {  $('.button').removeClass('selected');  $(this).addClass('selected');  LayerActions[$(this).attr('id')](); });   Could someone point me to where I'm messing up with my code? Or is it not possible to hide a sublayer using the LayerActions?    I'm now loading my layers differently, and this is my new code:   cartodb.createLayer(map, url1)     .addTo(map, 0)     .done(function (layer) {         console.log('added url1 ',url1);         cartodb.createLayer(map, url2)         .addTo(map, 1)         .done(function (layer) {             console.log('added url2 ',url2);         })         .error(function (){             console.log('problem adding 2nd layer');         });     })     .error(function () {         console.log('There is something wrong with requested data!');     });   So if I wanted to hide the first layer that's loaded (url1) and select only certain points from the second layer (url2), how would I code that in my LayerActions section? I've tried the following, but nothing changes when I click the buttons:  var LayerActions = { all: function(){   layer.getLayer(0).hide;   layer[1].setSQL("SELECT * FROM spreadsheet");   return true; }, 2011: function(){   layer.getLayer(0).hide;   layer[1].setSQL("SELECT * FROM spreadsheet WHERE year IN ('2011') AND year IS NOT NULL");   return true; }, ...
54604
Is there a way to search across all rows/columns in a lightning:datatable to narrow down the list, just like jQuery DataTables? If so, how do implement that?  Can I somehow do it all on the client-side to make it super fast (some sort of DOM manipulation)  I'm having some issues with the lightning:datatable not updating. I have attached my code below, maybe you can help me spot the issue:  Markup:  &lt;aura:component extends="c:Base" controller="AccountBrowserForm"&gt; &lt;aura:handler name="init" value="{! this }" action="{! c.doInit }"/&gt; &lt;aura:attribute name="selectedAccountId" type="Id" access="public" /&gt; &lt;aura:attribute name="accounts" type="Object"/&gt; &lt;aura:attribute name="mycolumns" type="List"/&gt; &lt;aura:attribute name="sortedBy" type="String" /&gt; &lt;aura:attribute name="sortedDirection" type="Boolean" default="true" /&gt;  &lt;aura:registerEvent name="AccountFilterChange" type="c:AccountFilterChange" /&gt;  &lt;aura:attribute name="backingdata" type="List" /&gt; &lt;aura:attribute name="filter" type="String" /&gt; &lt;lightning:input type="text" onchange="{!c.filter}" value="{!v.filter}" label="Filter" /&gt;  &lt;lightning:datatable aura:id="lightningTable"                      data="{! v.accounts }"                      columns="{! v.mycolumns }"                      keyField="Id"                      onrowaction="{! c.handleRowAction }"                      onsort="{!c.updateColumnSorting}"                      sortedBy="{!v.sortedBy}"                      sortedDirection="{!v.sortedDirection}"                      hideCheckboxColumn="true" /&gt;     Controller:  doInit: function (component, event, helper) {     helper.callServer(component, "c.getAccounts", $A.getCallback(function (response) {         component.set("v.accounts", response);         component.set("v.backingdata", response);         console.log(component.get("v.backingdata") + " /// BACKING DATA INSIDE ")         console.log(component.get("v.accounts") + " // ACCOUTN DATA INSIDE")          component.set('v.mycolumns', [{                 type: "button",                 typeAttributes: {                     label: '',                     iconName: 'utility:add',                     name: 'selectRecord',                     title: 'selectRecord',                     disabled: false,                     value: 'edit',                     variant: {                         fieldName: 'variantValue'                     },                 }             },             {label: 'Name', fieldName: 'Name', type: 'text', sortable: true},             {label: 'Street', fieldName: 'BillingStreet', type: 'text', sortable: true},             {label: 'Postal Code', fieldName: 'BillingPostalCode', type: 'text', sortable: true},             {label: 'City', fieldName: 'BillingCity', type: 'text', sortable: true},             {label: 'Country', fieldName: 'BillingCountry', type: 'text', sortable: true},         ]);          console.log(component.get("v.backingdata") + " *** BACKING DATA OUTSIDE *** ")         console.log(component.get("v.accounts") + " *** ACCOUNT DATA OUTSIDE *** ")     })) },  filter: function (component, event, helper) {     var data = component.get("v.backingdata"),         term = component.get("v.filter"),         results = data,         regex;     try {         regex = new RegExp(term, "i");         // filter checks each row, constructs new array where function returns true         results = data.filter(row =&gt; regex.test(row.name) || regex.test(row.age.toString()));     } catch (e) {         // invalid regex, use full list     }     component.set("v.accounts", results); },   For some reason the filter function is completely unresponsive. Also, does it matter that I'm populating the component with a response from a callback function. @sfdcfox, I noticed in your example that you simple created an array with dummy data. My "myaccounts" attribute is of type object
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?
12181
Is there a best-practice or common way in JavaScript to have class members as event handlers?  Consider the following simple example:  &lt;head&gt;     &lt;script language="javascript" type="text/javascript"&gt;          ClickCounter = function(buttonId) {             this._clickCount = 0;             document.getElementById(buttonId).onclick = this.buttonClicked;         }          ClickCounter.prototype = {             buttonClicked: function() {                 this._clickCount++;                 alert('the button was clicked ' + this._clickCount + ' times');             }         }      &lt;/script&gt; &lt;/head&gt; &lt;body&gt;     &lt;input type="button" id="btn1" value="Click me" /&gt;     &lt;script language="javascript" type="text/javascript"&gt;         var btn1counter = new ClickCounter('btn1');     &lt;/script&gt; &lt;/body&gt;   The event handler buttonClicked gets called, but the _clickCount member is inaccessible, or this points to some other object.  Any good tips/articles/resources about this kind of problems?
92658
I'm using Jquery's toggle event to do some stuff when a user clicks a checkbox, like this:  $('input#myId').toggle( function(){ //do stuff   }, function(){ //do other stuff     } );   The problem is that the checkbox isn't being ticked when I click on the checkbox. (All the stuff I've put into the toggle event is working properly.)  I've tried the following:  $('input#myId').attr('checked', 'checked');   and  $(this).attr('checked', 'checked');   and even simply  return true;   But nothing is working. Can anyone tell me where I'm going wrong?  Edit - thanks to all who replied. Dreas' answer very nearly worked for me, except for the part that checked the attribute. This works perfectly (although it's a bit hacky)  $('input#myInput').change(function () {     if(!$(this).hasClass("checked"))     {         //do stuff if the checkbox isn't checked         $(this).addClass("checked");         return;     }      //do stuff if the checkbox isn't checked     $(this).removeClass('checked'); });   Thanks again to all who replied.
97201
I have something like this:  &lt;div class="content"&gt;     &lt;a href="#"&gt;A&lt;/a&gt; &lt;/div&gt; &lt;div class="content"&gt;     &lt;a href="#"&gt;B&lt;/a&gt; &lt;/div&gt; &lt;div class="content"&gt;     &lt;a href="#"&gt;C&lt;/a&gt; &lt;/div&gt;   When one of these links is clicked, I want to perform the .hide() function on the links that are not clicked. I understand jQuery has the :not selector, but I can't figure out how to use it in this case because it is necessary that I select the links using $(".content a")  I want to do something like  $(".content a").click(function() {     $(".content a:not(this)").hide("slow"); });   but I can't figure out how to use the :not selector properly in this case.
28536
I have a Google Spreadsheet that contains a script to count a number of cells by color. The script works perfectly but seems like when ever I change the color of the cell, the count is not updated. How to update/refresh the cell count?  The script I'm using is from :  function getBackgroundColor(rangeSpecification) {   var sheet = SpreadsheetApp.getActiveSpreadsheet();   return sheet.getRange(rangeSpecification).getBackgroundColor();      }  function sumWhereBackgroundColorIs(color, rangeSpecification) {        var sheet = SpreadsheetApp.getActiveSpreadsheet();   var range = sheet.getRange(rangeSpecification);        var x = 0;        for (var i = 1; i &lt;= range.getNumRows(); i++) {     for (var j = 1; j &lt;= range.getNumColumns(); j++) {                var cell = range.getCell(i, j);                if(cell.getBackgroundColor() == color) {         x += parseFloat(cell.getValue());       }     }   }        return x; }  function countCellsWithBackgroundColor(color, rangeSpecification) {        var sheet = SpreadsheetApp.getActiveSpreadsheet();   var range = sheet.getRange(rangeSpecification);   var x = 0;   for (var i = 1; i &lt;= range.getNumRows(); i++) {     for (var j = 1; j &lt;= range.getNumColumns(); j++) {       var cell = range.getCell(i, j);       if(cell.getBackgroundColor() == color) {         x++;       }               }   }        return x; }
25453
I have created a 'control' using jQuery and used jQuery.extend to assist in making it as OO as possible.  During the initialisation of my control I wire up various click events like so  jQuery('#available input',              this.controlDiv).bind('click', this, this.availableCategoryClick);   Notice that I am pasing 'this' as the data argument in the bind method. I do this so that I can get at data attached to the control instance rather from the element that fires the click event.   This works perfectly, however i suspect there is a better way  Having used Prototype in the past, I remember a bind syntax that allowed you to control what the value of 'this' was in the event.  What is the jQuery way?
24846
I am trying to work out how to get the value of table cell for each row using jQuery.  My table looks like this:  &lt;table id="mytable"&gt;   &lt;tr&gt;     &lt;th&gt;Customer Id&lt;/th&gt;     &lt;th&gt;Result&lt;/th&gt;   &lt;/tr&gt;   &lt;tr&gt;     &lt;td&gt;123&lt;/td&gt;     &lt;td&gt;&lt;/td&gt;   &lt;/tr&gt;   &lt;tr&gt;     &lt;td&gt;456&lt;/td&gt;     &lt;td&gt;&lt;/td&gt;   &lt;/tr&gt;   &lt;tr&gt;     &lt;td&gt;789&lt;/td&gt;     &lt;td&gt;&lt;/td&gt;   &lt;/tr&gt; &lt;/table&gt;   I basically want to loop through the table, and get the value of the Customer Id column for each row.  In the code below I have worked out that I need to do this to get it looping through each row, but I'm not sure how to get the value of the first cell in the row.  $('#mytable tr').each(function() {     var cutomerId =  }
81559
Unfortunately, as a new user I am not allowed to comment. This is why I need to do a new post regarding to this topic:   This is my code in Google Sheets Script:  function onEdit(e) {   if (e.range.getSheet().getSheetName() == 'Tabellenblatt1' &amp;&amp; e.range.getColumn() == 1) {     e.range.offset(0,1).setValue(new Date());   } }   It works perfectly when I enter data in cell 1 manually, but when data is added via API (in this case when data is added via Zapier) it does not work. Anybody can give me a hint why?
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?
39221
So, I can create an input button with an image using &lt;INPUT type=&quot;image&quot; src=&quot;/images/Btn.PNG&quot; value=&quot;&quot;&gt;  But, I can't get the same behavior using CSS. For instance, I've tried &lt;INPUT type=&quot;image&quot; class=&quot;myButton&quot; value=&quot;&quot;&gt;  where &quot;myButton&quot; is defined in the CSS file as .myButton {     background:url(/images/Btn.PNG) no-repeat;     cursor:pointer;     width: 200px;     height: 100px;     border: none; }  If that's all I wanted to do, I could use the original style, but I want to change the button's appearance on hover (using a myButton:hover class). I know the links are good, because I've been able to load them for a background image for other parts of the page (just as a check). I found examples on the web of how to do it using JavaScript, but I'm looking for a CSS solution. I'm using Firefox 3.0.3 if that makes a difference.
75034
I have an input form that lets me select from multiple options, and do something when the user changes the selection. Eg,  &lt;select onChange="javascript:doSomething();"&gt;   &lt;option&gt;A&lt;/option&gt;   &lt;option&gt;B&lt;/option&gt;   &lt;option&gt;C&lt;/option&gt; &lt;/select&gt;   Now, doSomething() only gets triggered when the selection changes.  I want to trigger doSomething() when the user selects any option, possibly the same one again.  I have tried using an "onClick" handler, but that gets triggered before the user starts the selection process.  So, is there a way to trigger a function on every select by the user?  Update:  The answer suggested by Darryl seemed to work, but it doesn't work consistently. Sometimes the event gets triggered as soon as user clicks the drop-down menu, even before the user has finished the selection process!
65086
Steps to reproduce:   Open the reputation on a profile () Click on the date next to the arrow.   The details aren't expanded, even though the td has cursor:pointer. If you click the arrow, the details are toggled as expected.  I think the click function should be bound to the parent td rather than the arrow a.    Note this issue still exists on the  since  rolled out on Meta.
10974
I'm using Drupal 8.  What I'm trying to do is:   Access the active node From the node get the value of field_test and assign it to a variable Pass the variable to the drupalSettings function and subsequently to a custom module 'mycustommodule' that triggers an alert   In my content type, I created a field_test field, which is the field I reference in my code. The block is placed on a page of this content type.  This is the JavaScript code I am using.  mycustomblock.libraries.yml  custom:   version: 1.x   js:     js/custom.js: {}   dependencies:     - core/jquery     - core/drupalSettings   custom.js  (function ($, Drupal, drupalSettings) {   Drupal.behaviors.mycustomblock = {     attach: function (context, settings) {       var testMe = drupalSettings.mycustomblock.test;       alert(testMe);    } }; })(jQuery, Drupal, drupalSettings);   The error I get from the JavaScript console is this.    The error message is referring to this line.     Why is the instance of Drupal in the closing parenthesis throwing this error?