I'm fetching some data using JSON. According to data the HTML table is created. Each item has button. When I click on specific button I want to show alert window with button ID.  This is how I'm fetching data and populating HTML table:  function updateStations(){     $.ajax({         url: "scanstations.php",         type: 'POST',         cache: false,         success: function (data){             var jsonData = JSON.parse(data);              var tabledata;             for (var i = 0; i &lt; jsonData.stations.length; i++){                 tabledata += '&lt;tr styls="padding-top:4px"&gt;&lt;td&gt;' + jsonData.stations[i].ID + '&lt;/td&gt;&lt;td&gt;' + jsonData.stations[i].IP + '&lt;/td&gt;&lt;td&gt;&lt;button class="btn btn-primary margin-top-5px" ';                 tabledata += ' id="' + jsonData.stations[i].IP + '"&gt; &lt;span &gt;ButtonTitle&lt;/span&gt;&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;';             }             console.log(jsonData);             $('#listOfStations').html(tabledata);         }     }) }   How to create event for buttons?  I had  tried on this way:   $(document).ready(function () {      $('.btn-primary').on('click', () =&gt;{         alert($(this).attr("id"));     }); });   But doesn't work.
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.
100032
How exactly do you make an auto-refreshing div with JavaScript (specifically, jQuery)?  I know about the setTimeout method, but is it really a good practice ? Is there a better method?  function update() {     $.get("response.php", function(data) {         $("#some_div").html(data);     });     window.setTimeout("update();", 10000); }
39132
I created a custom button for custom object to place in the related list. The custom object has two look-ups, one for case and one for account. This button, when clicked, should open in a new window to save a record of the custom object, with the default values for each look-up to populate automatically depending on the record where the button was clicked. It works for every record so far, except one case. It then throws the error: A problem with the Onclick Javascript for this button or link was encountered: Unexpected identifier.  I couldn't find any differences between records where it works and doesn't.  Code:  window.open('a2U/e?CF00N600000037HI4={!Account.Name}&amp;CF00N600000037HI4_lkid={!Account.Id}&amp;retURL=%2F{!Account.Id}&amp;CF00N600000037HI5={!Case.CaseNumber}&amp;CF00N600000037HI5_lkid={!Case.Id}&amp;retURL=%2F{!Case.Id}','','scrollbars=no,menubar=no,height=600,width=800,resizable=yes,toolbar=yes,location=yes,status=yes');
33695
I have a Java bean like this:  class Person {   int age;   String name; }   I'd like to iterate over a collection of these beans in a JSP, showing each person in a HTML table row, and in the last row of the table I'd like to show the total of all the ages.  The code to generate the table rows will look something like this:  &lt;c:forEach var="person" items="${personList}"&gt;   &lt;tr&gt;&lt;td&gt;${person.name}&lt;td&gt;&lt;td&gt;${person.age}&lt;/td&gt;&lt;/tr&gt; &lt;/c:forEach&gt;   However, I'm struggling to find a way to calculate the age total that will be shown in the final row without resorting to scriptlet code, any suggestions?
32675
I have a VF page that is the 'edit' page for a certain object. I have a button 'Clone'. Upon clicking this button, I wish to be redirected to a new edit page with all the previous objects fields still intact (except for a few that should be cleared and set to default). Note that this new object should not be inserted until I click 'Save'. The Id of the object should be different compared to the previous object, so that on Save, the previous object is not overwritten.   I am thinking I will split this up into two parts, an apex method, and a javascript method for resetting the fields:  &lt;apex:commandButton action="{!saveAsTemplate}" onclick="initTemplate();" value="Clone" /&gt;   The javascript portion is easy enough, but I'm having trouble of figuring out what to do on the apex side, besides for setting the id of the record to null.
60861
I have an AJAX button that should update form fields according to data already provided by user:   'ajax_button' =&gt; array(     '#type' =&gt; 'button',     '#value' =&gt; t("Scan for tags"),     '#ajax' =&gt; array(       'callback' =&gt; 'ajax_tag',       'wrapper' =&gt; 'dynamic-tags-fieldset',       'method' =&gt; 'replace',       'event' =&gt; 'click',       'prevent' =&gt; 'submit click mousedown',     ),   ),   It works, but only if form is valid. Of course I do not want to validate it just yet. I don't care if all fields are filled, I only need my form to be updated at this very moment. How can I make form api not to invoke hook_form_validate() and not test #required fields?
85206
I have this below code where i am trying to first search an account name and on hit button it displays the result set.  On the button click i am also loading an child component which is displaying the id of the record.  I need the child component should get displayed once i click on the record.  How can i achieve this -   Parent Component -   &lt;aura:component controller="SimpleAccountController"&gt;     &lt;aura:attribute name="account" type="account[]"/&gt;     &lt;ui:outputText aura:id="outName" value="" class="text"/&gt;     &lt;ui:inputText aura:id="name" label="Enter Name:" placeholder="Your Name" /&gt;     &lt;ui:button aura:id="button" buttonTitle="Click to see what you put into the field" class="button" label="Click me" press="{!c.getInput}"/&gt;     &lt;aura:iteration var="acc" items="{!v.account}"&gt;             &lt;a onclick="{!c.accountselected}" data-recId="{!acc.Id}"&gt;         &lt;p&gt;{!acc.Name} : {!acc.Type} : {!acc.Industry} : {!acc.Rating}&lt;/p&gt;             &lt;/a&gt;         &lt;c:HelloWorkdChildCmp selectedaccount="{!acc.Id}" /&gt;     &lt;/aura:iteration&gt; &lt;/aura:component&gt;   COntroller -   ({     getInput : function(cmp, evt) {         var myName = cmp.find("name").get("v.value");         var myText = cmp.find("outName");         var greet = "Hi, " + myName;         myText.set("v.value", greet);         var action = cmp.get("c.seaAcc");         action.setParams({ "s" : myName });         action.setCallback(this, function(response) {             var state = response.getState();             if (state === "SUCCESS") {                 cmp.set("v.account", response.getReturnValue());                 //alert("From server: " + response.getReturnValue());             }         });         $A.enqueueAction(action);     },      accountselected : function(cmp, evt) {        console.log(evt.currentTarget.getAttribute("data-recId")) ;     }  })   Child component -   &lt;aura:component &gt;     &lt;aura:attribute name="selectedaccount" type="String"/&gt;     &lt;div&gt;Id: {!v.selectedaccount}&lt;/div&gt; &lt;/aura:component&gt;
121438
I am using jQuery library in my visual force page, but I've faced a major problem when I tried to use tabs "apex:tabPanel".  &lt;script src="{!$Resource.jQuery}"&gt;&lt;/script&gt; &lt;!-- If I delete this script the tabs work !! --&gt;  &lt;apex:tabPanel tabClass="activeTab" inactiveTabClass="inactiveTab"&gt;   &lt;apex:tab label="Tab#1" id="tab1"&gt;&lt;/apex:tab&gt;   &lt;apex:tab label="Tab#2" id="tab2"&gt;&lt;/apex:tab&gt; &lt;/apex:tabPanel&gt;   I get a "JS" errors in the console when I try to click on any tab, but if I delete jQuery library it works. So I guess there is a conflict between jQuery and apex:tabPanel functionality.    Here's what I got in the console   Uncaught ReferenceError: initViewstateTab is not defined  Uncaught TypeError: Object [object Object] has no method 'dispatchEvent'  Uncaught ReferenceError: initViewstateTab is not defined  event.returnValue is deprecated. Please use the standard event.preventDefault() instead. Uncaught TypeError: Object [object Object] has no method 'hasClassName'  Uncaught TypeError: Cannot call method 'replace' of undefined
61070
Today I got requirement to get the list data using rest and bind to html drop down . I am getting the information by filtering it from browser  (_api/web/lists/GetByTitle('Tabletop%20Sessions')/items?Select=Title";)   . As this is my first program can any one help me what's wrong in my below code in binding the data to drop-down.  &lt;style type="text/css"&gt;  .textbox{      font-family : inherit;      font-size   : 100%;width: 275px;      border: 4px solid #F7F9FA;      -webkit-border-radius: 3px;      -moz-border-radius: 3px;      border-radius: 3px;      -moz-box-shadow: 2px 3px 3px rgba(0, 0, 0, 0.06) inset, 0 0 1px #95a2a7 inset;      -webkit-box-shadow: 2px 3px 3px rgba(0, 0, 0, 0.06) inset, 0 0 1px #95A2A7 inset;      box-shadow: 2px 3px 3px rgba(0, 0, 0, 0.06) inset, 0 0 1px #95A2A7 inset;      height: 30px;      width: 275px;      display: block;  } .fontsize{     font-style: arial;font-size:17px; } .select{     width: 285px;height: 25px; } &lt;/style&gt;  &lt;script src="//ajax.aspnetcdn.com/ajax/4.0/1/MicrosoftAjax.js" type="text/javascript"&gt; &lt;/script&gt; &lt;script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"&gt; &lt;/script&gt; &lt;script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js "&gt;&lt;/script&gt; &lt;script type="text/javascript" src="http://code.jquery.com/jquery-1.9.0.js"&gt;&lt;/script&gt;  &lt;script src="https://code.jquery.com/jquery-1.10.2.js"&gt;&lt;/script&gt;  &lt;link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"&gt;  &lt;script src="//code.jquery.com/jquery-1.10.2.js"&gt;&lt;/script&gt;  &lt;script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"&gt;&lt;/script&gt;  &lt;link rel="stylesheet" href="/resources/demos/style.css"&gt;  &lt;body&gt; &lt;table&gt; &lt;tr&gt;    &lt;td colspan="2"&gt;&lt;img align="right" src=" Image URL"/&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt;    &lt;td colspan="2"&gt;&lt;img src=""/&gt; &lt;/td&gt; &lt;/tr&gt;  &lt;/tr&gt; &lt;tr&gt;  &lt;td class="fontsize"&gt;Months:&lt;/td&gt;  &lt;td&gt;        &lt;select id="drbfunction" class="select"&gt;        &lt;option selected="selected"&gt;Select&lt;/option&gt;        &lt;/select&gt;  &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt;  &lt;td class="fontsize"&gt;&lt;br&gt;Programes:&lt;/td&gt;  &lt;td&gt;&lt;br&gt;        &lt;select id="drbprogrames" class="select"&gt;        &lt;option selected="selected"&gt;Select&lt;/option&gt;  &lt;/tr&gt; &lt;/table&gt; &lt;script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js "&gt;&lt;/script&gt; &lt;script type="text/javascript" src="http://code.jquery.com/jquery-1.9.0.js"&gt;&lt;/script&gt; &lt;script&gt; SP.SOD.executeFunc('sp.js', 'SP.ClientContext', getprogrames); function getprogrames(sender, args) {     alert("in Programes");     var userid = _spPageContextInfo.userId;     var requestUri = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/GetByTitle('Tabletop%20Sessions')/items?Select=Title";     var requestHeaders = { "accept": "application/json;odata=verbose" };     $.ajax({         url: requestUri,         contentType: "application/json;odata=verbose",         headers: requestHeaders,         success: onprogramQuerySucceeded (data) {          var listData = data.d.results;          var itemCount = listData.length;          var processedCount = 0;          var functions = document.getElementById("drbprogrames");          for (var i = 0; i &lt; result.length; i++)            {                var option = document.createElement('option');                option.text = option.value = result[i].Title;                functions.add(option);            }       },         error: function (data) {            alert(failure(data));        }     }); }  &lt;/script&gt;
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
23314
I need to implement alert popup on standard page layout on click of standard button "Save".How can i achieve it.I tried google but not getting a valid implementation.Any idea would be much appreciated.
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?
8401
I have a drop-down list with known values. What I'm trying to do is set the drop down list to a particular value that I know exists using jQuery.  Using regular JavaScript, I would do something like:  ddl = document.getElementById("ID of element goes here"); ddl.value = 2; // 2 being the value I want to set it too.   However, I need to do this with jQuery, because I'm using a CSS class for my selector (stupid  client ids...).  Here are a few things I've tried:  $("._statusDDL").val(2); // Doesn't find 2 as a value. $("._statusDDL").children("option").val(2) // Also failed.      How can I do it with jQuery?     Update  So as it turns out, I had it right the first time with:  $("._statusDDL").val(2);   When I put an alert just above it works fine, but when I remove the alert and let it run at full speed, I get the error     Could not set the selected property. Invalid Index   I'm not sure if it's a bug with jQuery or Internet Explorer 6 (I'm guessing Internet Explorer 6), but it's terribly annoying.
7024
As title says, How do I assign dynamic Ids for ui:inputDate elements inside aura:iteration?  Here is the reproducible version of the problem I am facing:  HelloWorldApp.app  &lt;aura:application &gt;     &lt;c:inputDateExample /&gt; &lt;/aura:application&gt;   inputDateExample.cmp  &lt;aura:component &gt;     &lt;aura:handler name="init" value="{!this}" action="{!c.doInit}"/&gt;     &lt;aura:attribute name="datesList" type="List" /&gt;     &lt;table&gt;         &lt;aura:iteration items="{!v.datesList}" var="dateItem"&gt;             &lt;tr&gt;                 &lt;ui:inputDate aura:id="date-id"                                value="{!dateItem}"                                displayDatePicker="true"                               blur="{!c.fldChanged}"/&gt;             &lt;/tr&gt;         &lt;/aura:iteration&gt;     &lt;/table&gt; &lt;/aura:component&gt;   inputDateExampleController.js  ({     fldChanged : function(component, event, helper) {         console.log('Value changed');         //How do I find from which date element, event is fired??         //The below method finds both date elements because the Id is not unique         var dateComponent = component.find('date-id');         console.log(dateComponent);         console.log(dateComponent[0].get("v.value"));     },     doInit : function(component,event,helper){         var datesArray = [];         datesArray.push("2017-01-01");         datesArray.push("2017-01-31");         component.set("v.datesList",datesArray);     } })   This produces the below output and I need to find which element user is clicking on??    Notes:   I can assign unique Id for tr element but not sure how to use that inside component.find() method. I can assign dynamic id for plain input tags but there is too much markup involved for making these similar to lightning date element. I tried giving html5 data attributes for ui:inputDate but it doesn' accept.   Any workarounds or anything I am missing here?
112886
I am building a menu component.  One menu-item is a sub-menu with list of opportunities, this list is created with aura:iteration over a list of opportunities.  When selecting a menu or a sub-menu, I need to make it look selected (change css attribute). For this to happen, I need to find this menu item in my controller.  If I add id attribute to my item markup and use the event attribute on my controller (event.currentTarget.id), I can catch the item itself and change it's style, this works:  MARKUP       &lt;aura:iteration items="{!v.opportunities}" var="opp"&gt;     &lt;li class="slds-dropdown__item" role="presentation"&gt;         &lt;a href="javascript:void(0);" role="menuitem" tabindex="-1" id="{!opp.Id}" onclick="{!c.openItemFromMenu}"&gt;             &lt;span class="slds-truncate" title="{!opp.Name}"&gt;{!opp.Name}&lt;/span&gt;         &lt;/a&gt;     &lt;/li&gt; &lt;/aura:iteration&gt;   CONTROLLER    openItemFromMenu: function(component, event, helper) {     // get the id     var oppId = event.currentTarget.id;     // choose it (select menu)     var selectedItemNew = component.find(oppId);     selectedItemNew.style = "background: rgb(216, 237, 255);" }   PROBLEM  when I try to change the menu selected not from the click of the item (event that is triggered from another page) - I have added an event handler to change the menu item, and I send the opportunity id through that event. Then (after adding aura:id to my item, I am trying to find this menu item of this oppId with component.find in my controller - this does not work:  CHANGED MARKUP  add: &lt;aura:handler name="eventSelectMenuItem" event="c:myEvent" action="{!c.openItemFromMenu}" /&gt; change: &lt;a href="javascript:void(0);" role="menuitem" tabindex="-1" id="{!opp.Id}" onclick="{!c.openItemFromMenu}" aura:id="{!opp.Id}"&gt;   CHANGED CONTROLLER  openItemFromMenu: function(component, event, helper) {     // get the id from the event     var oppId = event.getParam("recordId");     // choose it (select menu)     var selectedItemNew = component.find(oppId);     selectedItemNew.style = "background: rgb(216, 237, 255);" }   QUESTION  Does component.find for aura:id within an aura:iteration suppose to work?  If not - is there a workaround?  If it does suppose to work - what am I doing wrong?
17067
I have three rows on a Visualforce page. The requirement is that when any value of this field is blank it will show the error message on the page. I have to do this with the help of JSON and by using the following javascript function but I'm stuck. I am new on salesforce and JSON  &lt;script type="text/javascript"&gt;    var text = '{"val":['{"TValueFields"}' ] }';     obj = JSON.parse(text);              function findBlank() {             debugger;                        for (i=0; i&lt; obj.length; i++)               {                         var js = JSON.stringify(obj);              if(document.getElementById(js).value == " ")               {                          alert("TValueFields must be select");               }                     i++        } &lt;/script&gt;
13208
I have a very simple jQuery Datepicker calendar:  $(document).ready(function(){     $("#date_pretty").datepicker({      }); });   and of course in the HTML...  &lt;input type="text" size="10" value="" id="date_pretty"/&gt;   Today's date is nicely highlighted for the user when they bring up the calendar, but how do I get jQuery to pre-populate the textbox itself with today's date on page load, without the user doing anything?  99% of the time, the today's date default will be what they want.