I am creating some &lt;div&gt; elements for my chat box application. The following is the HTML part, in which on clicking a button the &lt;div&gt; elements are created.   &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt; &lt;html&gt; &lt;head&gt;   &lt;link rel="stylesheet" type="text/css" href="../chat/style.css"/&gt; &lt;/head&gt; &lt;body&gt;   &lt;h1&gt;Jquery div example&lt;/h1&gt;   &lt;button&gt;&lt;i&gt;click to create div&lt;/i&gt;&lt;/button&gt; &lt;/body&gt; &lt;/html&gt;   The creation of &lt;div&gt; elements seems OK. But I am unable to do anything on the created box.  This is the JQuery code for creating the div:  $(document).ready(function(){     var chat_box_title = 'jaya chandra';     $("button").click(function(){         $('&lt;div/&gt;')             .attr({id:'chat_box_'+chat_box_title})             .addClass('chat_box')             .html('&lt;div class="chat_head"&gt;jaya chandra&lt;span class="chat_close"&gt;&lt;a class="chat_close" href="javascript:void(0)" onclick="javascript:closeChatBox(\''+chat_box_title+'\')"&gt;X&lt;/a&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class="chat_wrapper"&gt;&lt;div class="chat_body"&gt;&lt;/div&gt;&lt;div class="chat_footer"&gt;&lt;textarea rows="4" placeholder="Your message here..." class="chat_input"&gt;&lt;/textarea&gt;&lt;/div&gt;&lt;/div&gt;')             .appendTo('body');           });     });   When the class .chat_head is clicked then the .chat_wrapper has to toggle. I am trying to bind the click function using the following code..  $('body').on('click','div.chat_head&gt;div.chat_wrapper',function(){     //$('.chat_wrapper').slideToggle('slow');     console.log('clicked'); });   I have tried all of my ideas for it, but I am unable to solve the problem.
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.
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?
26508
I have an SP2013 wiki page that I want to use a jQuery accordion on.  Just with some static content, not pulling any information from anywhere in SharePoint.  I created the page, inserted a script editor web part at the top, and inserted this snippet:  &lt;script src="//code.jquery.com/jquery-1.10.2.js"&gt;&lt;/script&gt; &lt;script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"&gt;&lt;/script&gt; &lt;script&gt;     $(function () {         $("#accordion").accordion({collapsible: true, active: false, icons:false });     }); &lt;/script&gt;   Then, I put the cursor under the script editor web part, and clicked on "Edit Source".  Then underneath the HTML that represents the script editor, I put this HTML (basically the jQuery accordion demo HTML):  &lt;div id="accordion"&gt;    &lt;h3&gt;       Section 1    &lt;/h3&gt;    &lt;div&gt;       &lt;p&gt;Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.&lt;/p&gt;    &lt;/div&gt;    &lt;h3&gt;       Section 2    &lt;/h3&gt;    &lt;div&gt;       &lt;p&gt;Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna.&lt;/p&gt;    &lt;/div&gt;    &lt;h3&gt;       Section 3    &lt;/h3&gt;    &lt;div&gt;       &lt;p&gt;Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.&lt;/p&gt;    &lt;/div&gt;    &lt;h3&gt;       Section 4    &lt;/h3&gt;    &lt;div&gt;       &lt;p&gt;Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est.&lt;/p&gt;       &lt;p&gt;Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.&lt;/p&gt;    &lt;/div&gt; &lt;/div&gt;   After I saved the page, the accordion collapsed initially (as it is supposed to), but clicking on any of the headers does not expand the section.  If I go back into edit mode for the page, it works as expected - clicking a header expands the section.  Save it again, and it stops working.  What am I missing?  I don't think what I'm trying to do is all that complicated...  EDIT 12/8: Ok, so I put the jQuery and jQuery UI scripts in the site's Site Assets folder, and the behavior is the same -- the scripts do not get loaded in IE or Firefox unless the page is in Edit mode.  Incidentally I think the other script snippet, where I hook up the accordion, is also not getting loaded unless the page is in edit mode.  The reason I think this is that I changed the way I referenced the main jQuery script (to something that didn't work), and the debugger halted on $(function () { ...., saying $ was undefined.  So if jQuery is not loaded, and the debugger thinks $ is undefined, at least it's hitting that section of code.  Which makes me think that in non-edit mode, not only is jQuery not getting loaded, but that section of script is not getting loaded either, because the debugger is not choking on $.  Can anyone provide any insight as to why the Script Editor web part seems to be not working in IE and Firefox?  (Because apparently in Chrome it works fine.)
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.
104040
&lt;div aria-hidden="false" aura:id="newClientSectionId" role="dialog" class="slds-modal slds-modal--large slds-fade-in-open slds-hide"       style="width: 60%; margin: auto; "&gt;     &lt;div class="slds-m-bottom--xx-large"&gt;&lt;/div&gt;     &lt;div class="slds-modal__container"&gt;         &lt;div class="slds-modal__header"&gt;             &lt;button class="slds-button slds-button--icon-inverse slds-modal__close" onclick="{!c.showModalBox}"&gt;                 &lt;span class="slds-assistive-text"&gt;Close&lt;/span&gt;             &lt;/button&gt;             &lt;h2 class="slds-text-heading--medium"&gt;Create Opportunity&lt;/h2&gt;         &lt;/div&gt;         &lt;div class="slds-modal__content slds-p-around--medium"&gt;             &lt;div class="slds-m-top--xx-large"&gt;&lt;/div&gt;         &lt;/div&gt;         &lt;div class="slds-modal__footer"&gt; &lt;button class="slds-button slds-button--neutral" onclick="{!c.showModalBox}"&gt;Cancel&lt;/button&gt;             &lt;ui:button class="slds-button slds-button--brand" press="{!c.saveOpportunity}" label="Save" /&gt;         &lt;/div&gt;     &lt;/div&gt; &lt;/div&gt;  &lt;div class="slds-backdrop slds-backdrop--open slds-hide" id="backGroundSectionId"&gt;&lt;/div&gt;   Controller  //for showing modal $A.util.removeClass(component.find("newClientSectionId"), "slds-hide"); $A.util.removeClass(component.find("backGroundSectionId"), "slds-hide");   CSS  .THIS.slds-hide {    display:none; }
23400
How do I remove items from, or add items to, a select box? I'm running jQuery, should that make the task easier. Below is an example select box.  &lt;select name="selectBox" id="selectBox"&gt;     &lt;option value="option1"&gt;option1&lt;/option&gt;     &lt;option value="option2"&gt;option2&lt;/option&gt;     &lt;option value="option3"&gt;option3&lt;/option&gt;     &lt;option value="option4"&gt;option4&lt;/option&gt;     &lt;/select&gt;
85862
This page does it the way I want it to:   But I want to find a better way using jQuery, can anyone point me to a good script that uses jQuery to accomplish this?
56223
Any idea why the piece of code below does not add the script element to the DOM?  var code = "&lt;script&gt;&lt;/script&gt;"; $("#someElement").append(code);
34246
I have a layout similar to this:  &lt;div id="..."&gt;&lt;img src="..."&gt;&lt;/div&gt;   and would like to use a jQuery selector to select the child img inside the div on click.  To get the div, I've got this selector:  $(this)   How can I get the child img using a selector?
15530
By adding use-ajax to a link we can open a modal using the Drupal ajax library as per the . E.g. &lt;a class=&quot;use-ajax&quot;      data-dialog-options=&quot;{&amp;quot;width&amp;quot;:400}&quot;      data-dialog-type=&quot;modal&quot;      href=&quot;/node/1&quot;&gt;     First article displayed in modal dialog. &lt;/a&gt;  This will use the ajax library to fetch node/1 and then display it in a modal. There is also a  which allows opening modals using JavaScript. E.g. var myDialog  = Drupal.dialog(ADOMElement, settings); myDialog.show();  The problem with this API is you need to pass in a existing DOM element. My question is can I trigger opening a modal with JavaScript and utalise the internal Drupal ajax library to actually fetch the content? E.g Can I do something like this? var myDialog  = Drupal.dialog('/node/1', {useAjax: true}); myDialog.show();  I could just create an html link as per my first code block, hide it with css, and then trigger a click on it with JS but this seems a bit hacky - there must be a way to trigger this action using pure JS.
4670
I have an element that already has a class: &lt;div class=&quot;someclass&quot;&gt;     &lt;img ... id=&quot;image1&quot; name=&quot;image1&quot; /&gt; &lt;/div&gt;  Now, I want to create a JavaScript function that will add a class to the div (not replace, but add). How can I do that?
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
15466
&lt;apex:page standardController="Employee__c" extensions="testPage" id="p"&gt; &lt;apex:form id="f"&gt;        &lt;div&gt;         &lt;input type="radio" name="acc" value="Existing" checked="checked"                 onclick="show(true, false);"&gt;Existing&lt;/input&gt;         &lt;input type="radio" name="acc" value="NEWAcc"                 onclick="show(false, true);"&gt;New&lt;/input&gt;     &lt;/div&gt;     &lt;apex:pageBlock id="pb1" title="Pg Block 1"&gt;     &lt;apex:pageBlockButtons &gt;  &lt;apex:commandButton value="save" action="{!saving}"/&gt;    &lt;/apex:pageBlockButtons&gt;     &lt;apex:pageBlockSection columns="1"&gt;    &lt;apex:inputField value="{!pme.Name}" /&gt;    &lt;apex:inputField value="{!pme.Address__c}"/&gt;       &lt;apex:inputField value="{!pme.Phone__c}"/&gt; &lt;apex:inputField value="{!pme.type__c}"/&gt;     &lt;/apex:pageBlockSection&gt;     &lt;/apex:pageBlock&gt;     &lt;apex:pageBlock id="pb2" title="Pg Block 2"&gt;     &lt;apex:pageBlockButtons &gt;  &lt;apex:commandButton value="save" action="{!saving}"/&gt;   &lt;/apex:pageBlockButtons&gt;     &lt;apex:pageBlockSection columns="1"&gt;    &lt;apex:inputField value="{!pme.Name}" /&gt; &lt;apex:inputField value="{!pme.Job_Title__c}"/&gt;    &lt;apex:inputField value="{!pme.Salary__c}"/&gt;    &lt;apex:inputField value="{!pme.type__c}"/&gt;     &lt;/apex:pageBlockSection&gt;     &lt;/apex:pageBlock&gt; &lt;/apex:form&gt;    &lt;script&gt; function show(showPb1, showPb2) {     // Match Visualforce's prefixing pattern     document.getElementById('p:f:pb1').style.display = showPb1 ? 'block' : 'none';     document.getElementById('p:f:pb2').style.display = showPb2 ? 'block' : 'none'; } show(true, false); &lt;/script&gt; &lt;/apex:page&gt;   Controller  public with sharing class testPage { public string Existing{get; set;} public string NEWAcc{get; set;} public Boolean radioexisting{get; set;} public Boolean radionew{get; set;} public Employee__c pmepme{get;set;} List&lt;SelectOption&gt; ownershipValues;     public Employee__c emp{get;set;}     public Employee__c pme{get;set;}     public Employee__c emplist{get;set;}     public String var {get;set;}         public boolean editSection {get;set;}          public testPage(ApexPages.StandardController controller) {         radioexisting=true;         radionew=false;             Employee__c emp=new Employee__c();             pme=(Employee__c )controller.getRecord();             editSection =true;             var= ApexPages.currentPage().getParameters().get('Id');              system.debug('erecrrrtrtrt');                  system.debug('erecrrrtrtrt'+NEWAcc);             if(var!=null){             emplist=[select Name,Address__c,Phone__c,Job_Title__c,Salary__c,type__c  From Employee__c where id=:var];             }             }          public PageReference saving(){                         system.debug('erecrrrtrtrt'+Existing);                  system.debug('erecrrrtrtrt'+NEWAcc);             upsert pme;             PageReference p=new PageReference ('/'+pme.id);             p.setRedirect(true);             return p;             }     public PageReference pbBlockRender() {     return null;     }     public PageReference EdittheSection (){ editSection = true; PageReference pf=new PageReference('https://c.ap2.visual.force.com/apex/test6');  pf.setredirect(true); return pf;           }      public String mypbBlock { get; set; } }   iam getting the following please help to fix it     System.SObjectException: SObject row was retrieved via SOQL without   querying the requested field: Employee__c.Name
72086
I'm refactoring some old JavaScript code and there's a lot of DOM manipulation going on.  var d = document; var odv = d.createElement("div"); odv.style.display = "none"; this.OuterDiv = odv;  var t = d.createElement("table"); t.cellSpacing = 0; t.className = "text"; odv.appendChild(t);   I would like to know if there is a better way to do this using jQuery. I've been experimenting with:  var odv = $.create("div"); $.append(odv); // And many more   But I'm not sure if this is any better.
61491
What is the best method for adding options to a &lt;select&gt; from a JavaScript object using jQuery?  I'm looking for something that I don't need a plugin to do, but I would also be interested in the plugins that are out there.  This is what I did:  selectValues = { "1": "test 1", "2": "test 2" };  for (key in selectValues) {   if (typeof (selectValues[key] == 'string') {     $('#mySelect').append('&lt;option value="' + key + '"&gt;' + selectValues[key] + '&lt;/option&gt;');   } }   A clean/simple solution:  This is a cleaned up and simplified :  $.each(selectValues, function(key, value) {      $('#mySelect')           .append($('&lt;option&gt;', { value : key })           .text(value)); });   Changes from matdumsa's: (1) removed the close tag for the option inside append() and (2) moved the properties/attributes into an map as the second parameter of append().
80057
I'm writing a web page in ASP.NET. I have some JavaScript code, and I have a submit button with a click event.  Is it possible to call a method I created in ASP with JavaScript's click event?
34496
I have the following html code:   &lt;h3 id="headerid"&gt;&lt;span onclick="expandCollapse('headerid')"&gt;&amp;uArr;&lt;/span&gt;Header title&lt;/h3&gt;   I would like to toggle between up arrow and down arrow each time the user clicks the span tag.   function expandCollapse(id) {        var arrow = $("#"+id+" span").html(); // I have tried with .text() too     if(arrow == "&amp;dArr;") {              $("#"+id+" span").html("&amp;uArr;");                    } else {                 $("#"+id+" span").html("&amp;dArr;");                    } }   My function is going always the else path. If I make a javacript:alert of arrow variable I am getting the html entity represented as an arrow. How can I tell jQuery to interpret the  arrow variable as a string and not as html.