I'm trying to dynamically add input fields based on an input field value. After adding fields, I want to add events on these dynamically added input fields, and this's what I did, but I'm not getting the result I want. Here's what I tried using jquery.  html file :  &lt;input class='cls1' id='num' /&gt; &lt;div id="samp"&gt;&lt;/div&gt;   script file  function add() {     var num = $("#num").val()     data = ""     for (i = 0; i&lt;num; i++) {         var id_name = "input_" + i         data += "&lt;input class='cls2' id='" + id_name + "' /&gt;&lt;br&gt;"     }     $("#samp").show().html(data) }  $(".cls1").on("change keyup paste", function (event) {     console.log("chng1")     // this's logging     add() // this adds input fields })  $(".cls2").on("change keyup paste", function (event) {     console.log("chng2") // not logging })  $("input[id^='input_']").on("change keyup paste", function (event) {   console.log("chng2") // not logging })   Any help would be appreciated.
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.
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?
77553
I need to dynamically add and remove values from a custom picklist using APEX code. I want this to be reflected in the picklist meta data e.g. not only appear in record details. How can I do that using my apex logic?
87646
Salesforce has functions that do a lot of basic web app functionality for you, called Event Reference. They can be found here   On the editRecord Event Reference, found here   essentaily, I create a   &lt;ui:button label="Edit" press="{!c.editRecord}"/&gt;   on my component, reference the attribute on the page and add the function from the docs in the controller  editRecord : function(component, event, helper) {     var editRecordEvent = $A.get("e.force:editRecord");      console.log("record id is: " + component.get("v.item.Id"));     console.log("editRecordEvent value is: " + editRecordEvent);      editRecordEvent.setParams({         "recordId": component.get("v.item.Id")     });      editRecordEvent.fire(); }   correct?  Here is the odd thing. From the console.logs, I get the record id, but the editRecordEvent returns undefined. What is going on? Is there something I need to reference in my component to use Event Reference?
90466
I created a custom theme (a sub-theme of  base theme).   I am loading a custom Javascript file (radix_sub.script.js) using the module libraries.yaml file like below:  style:   version: VERSION   css:     theme:       assets/css/radix_sub.style.css: {}   js:     '//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js': { type: external }     '//stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js': { type: external }     assets/js/radix_sub.script.js: {}   dependencies:     - core/drupal     - core/jquery     - core/jquery.once     - core/drupalSettings   In that file, I want to register some JavaScript events (Bootstrap modal).  (function ($, Drupal) {    Drupal.behaviors.portfolio = {      attach: function (context) {        console.log('CONTEXT', context);        $('#portfolioModal', context).once('bootstrap-modal-shown', console.log('*** REGISTER SHOWN.BS.MODAL')).each(function () {         $(this).on('shown.bs.modal', function () {           console.log('SHOWN BS MODAL EVENT TRIGGERED');         });       });        $('#portfolioModal', context).once('bootstrap-modal-hidden', console.log('*** REGISTER HIDDEN.BS.MODAL')).each(function () {         $(this).on('hidden.bs.modal', function () {           console.log('HIDDEN BS MODAL EVENT TRIGGERED');         });       });     }   } }(jQuery, Drupal));   It works. I see both SHOWN BS MODAL EVENT TRIGGERED and HIDDEN BS MODAL EVENT TRIGGERED logs when I show/hide the modal.  First, am I doing that the correct way?  This is what my developer console looks like when I load my page.        This happens only when I am logged in (as admin). When I am anon, I see the REGISTER logs only once but here my code seems to be executed 11 times.  Is this normal behavior? And/or why is it doing that?
117967
I am new to drupal and I have a problem in drupal text-box.  Question : how to give a class for text box?  my html :   &lt;input type="text" name="uname" class="uclass" id="uid"&gt;   i want the same in drupal  My code is :  function my_module_my_form($form_state) {  // This is the first form element. It's a textfield with a label, "Name"  $form['name'] = array(  '#type'  =&gt; 'textfield',                     '#title' =&gt; t('Enter Your Name'),                     '#value' =&gt; t('Enter user name'),                     '#name'  =&gt; 'uname',                     '#id'    =&gt; 'uid',                     '#class' =&gt; 'uclass',                     '#maxlength' =&gt; 5                    ); return $form;  }   Note: through inspect element , i find the class name is "form-text", but actually my class name is uclass, It is not taking, can one help me.
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?
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.
64167
I need to debug a web application that uses jQuery to do some fairly complex and messy  manipulation. At one point, some of the events that were bound to particular elements, are not fired and simply stop working.  If I had a capability to edit the application source, I would drill down and add a bunch of  console.log() statements and comment/uncomment pieces of code to try to pinpoint the problem. But let's assume I cannot edit the application code and need to work entirely in Firefox using Firebug or similar tools.  Firebug is very good at letting me navigate and manipulate the DOM. So far, though, I have not been able to figure out how to do event debugging with Firebug. Specifically, I just want to see a list of event handlers bound to a particular element at a given time (using Firebug JavaScript breakpoints to trace the changes). But either Firebug does not have the capability to see bound events, or I'm too dumb to find it. :-)  Any recommendations or ideas? Ideally, I would just like to see and edit events bound to elements, similarly to how I can edit DOM today.
3057
I need to change an element's ID using jQuery.    Apparently these don't work:  jQuery(this).prev("li").attr("id")="newid" jQuery(this).prev("li")="newid"   I found out that I can make it happen with the following code:  jQuery(this).prev("li")show(function() {     this.id="newid"; });   But that doesn't seem right to me. There must be a better way, no? Also, in case there isn't, what other method can I use instead of show/hide or other effects? Obviously I don't want to show/hide or affect the element every time, just to change its ID.  (Yep, I'm a jQuery newbie.)  Edit I can't use classes in this case, I must use IDs.
63292
I develop Joomla websites/components/modules and plugins and every so often I require the ability to use JavaScript that triggers an event when the page is loaded.  Most of the time this is done using the window.onload function.  My question is:    Is this the best way to trigger JavaScript events on the page loading or is there a better/newer way? If this is the only way to trigger an event on the page loading, what is the best way to make sure that multiple events can be run by different scripts?
67748
I have a simple html block like:  &lt;span id="replies"&gt;8&lt;/span&gt;   Using jquery I'm trying to add a 1 to the value (8).  var currentValue = $("#replies").text(); var newValue = currentValue + 1; $("replies").text(newValue);   What's happening is it is appearing like:  81  then  811  not 9, which would be the correct answer.  What am I doing wrong?
96246
I have been looking for a solution to this, have seen some sort of add on called dynamic text but I don't think that suits my needs.  Basically, I have a multi dimensional array. Basically what I want to do is pass a value from the array into the 'to' field in Contact Form 7. I know I could just write my own contact form but I'm using the plugin quite extensively on the site so for integration it would be nice to use it for this new thing I'm building too. Any clues, doesn't seem you can put php straight in to the to field, as this didn't work to well!:  &lt;?php echo $passmein;?&gt;
63684
I need to set the text within a DIV element dynamically. What is the best, browser safe approach? I have prototypejs and scriptaculous available.  &lt;div id="panel"&gt;   &lt;div id="field_name"&gt;TEXT GOES HERE&lt;/div&gt; &lt;/div&gt;   Here's what the function will look like:  function showPanel(fieldName) {   var fieldNameElement = document.getElementById('field_name');   //Make replacement here }
366
Let's say we have this code for a LWC:  &lt;!-- helloExpressions.html --&gt; &lt;template&gt;     &lt;div class="slds-m-around_medium"&gt;         &lt;lightning-input name='firstName' label="First Name" onchange={handleChange}&gt;&lt;/lightning-input&gt;         &lt;lightning-input name='lastName' label="Last Name" onchange={handleChange}&gt;&lt;/lightning-input&gt;         &lt;p class="slds-m-top_medium"&gt;Uppercased Full Name: {uppercasedFullName}&lt;/p&gt;     &lt;/div&gt; &lt;/template&gt;   and this is the JS file:  // helloExpressions.js import { LightningElement, track } from 'lwc';  export default class HelloExpressions extends LightningElement {     @track firstName = '';     @track lastName = '';      handleChange(event) {         const field = event.target.name;         if (field === 'firstName') {             this.firstName = event.target.value;         } else if (field === 'lastName') {             this.lastName = event.target.value;         }     }      get uppercasedFullName() {         return `${this.firstName} ${this.lastName}`.toUpperCase();     } }   firstName and lastName have been decorated with @track. Now as per the documentation, decorating a property with @track makes it private and reactive, while to mark a property public and reactive, use @api.  So if I just change the decorator to @api for both these variables, it should work. I am referring these from the same component only. But it's not working.  UPDATE: 27th Feb -------------------- Somehow it's working today. I just changed the decorator of the variables to api.  import { LightningElement, api } from 'lwc';  export default class HelloExpressions extends LightningElement {     @api firstName = '';     @api lastName = '';      handleChange(event) {         const field = event.target.name;         if (field === 'firstName') {             this.firstName = event.target.value;         } else if (field === 'lastName') {             this.lastName = event.target.value;         }     }      get uppercasedFullName() {         return `${this.firstName} ${this.lastName}`.toUpperCase();     } }   So it's working.
91763
I have have some code which adds new cells to a table and fills them with text boxes.   The way I've coded it so far works fine:          TableCell tCell1 = new TableCell();         TableCell tCell2 = new TableCell();         TableCell tCell3 = new TableCell();         TableCell tCell4 = new TableCell();         TableCell tCell5 = new TableCell();         TableCell tCell6 = new TableCell();         TableCell tCell7 = new TableCell();          TextBox txt1 = new TextBox();         TextBox txt2 = new TextBox();         TextBox txt3 = new TextBox();         TextBox txt4 = new TextBox();         TextBox txt5 = new TextBox();         TextBox txt6 = new TextBox();         TextBox txt7 = new TextBox();          tCell1.Controls.Add(txt1);         tCell2.Controls.Add(txt2);         tCell3.Controls.Add(txt3);         tCell4.Controls.Add(txt4);         tCell5.Controls.Add(txt5);         tCell6.Controls.Add(txt6);         tCell7.Controls.Add(txt7);          tRow.Cells.Add(tCell1);         tRow.Cells.Add(tCell2);         tRow.Cells.Add(tCell3);         tRow.Cells.Add(tCell4);         tRow.Cells.Add(tCell5);         tRow.Cells.Add(tCell6);         tRow.Cells.Add(tCell7);   As you can see there's basically 4 instructions getting repeated 7 times. I'm sure there has to be a way to accomplish this with just 4 lines of code within a FOR loop and having all the names dynamically assigned but I just can't seem to find anything that would point me in the direction of how to do it.  Something like the following is what I'm after:      for (int i = 0; i &lt; 6; i++)     {          TableCell tCell[i] = new TableCell();         TextBox txt[i] = new TextBox();         tCell[i].Controls.Add(txt[i]);         tRow.Cells.Add(tCell[i]);      }    Any help would be much appreciated.
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?