I'm trying to create a form that allows user to edit the input through new window. PHP will process the input then append the new input with the new values. Apparently, when I try to edit the appended input, the JavaScript just won't fire. Please enlighten me on what I did wrong. This is my html code:  &lt;html&gt;   &lt;head&gt;     &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;     &lt;script&gt;       $(document).ready(function(){         $('.races').click(function(e){           console.log("Inside Testing");           e.preventDefault();           var currID = this.id;           var content = '&lt;form id="theForm" action="ct.php" method="post"&gt; Race: &lt;input type="text" id="race" name="race"&gt;&lt;button type="submit" onClick="OKClicked()"&gt;Click this!&lt;/button&gt;&lt;/form&gt;';                         childWin = window.open('', "_blank", "height=400, width=550, status=yes, toolbar=no, menubar=no, location=no,addressbar=no");           toBeAdded = $(this).closest('div');           childWin.document.close();           childWin.document.write(content);           popupRace = childWin.document.getElementById("race");           parentRace = document.getElementById(currID);           transferValues();         })       });       function transferValues()       {           popupRace.value = parentRace.value;       }       function setValue(text)       {         childWin.close();         toBeAdded.parent().append(text);         toBeAdded.remove();       }     &lt;/script&gt;    &lt;/head&gt;   &lt;body&gt;     &lt;div&gt;       Name: &lt;input type="text" name="name"&gt;     &lt;/div&gt;       &lt;div&gt;       &lt;div&gt;         &lt;input type="hidden" name="race-0" value="Human" id="race-0"&gt;         &lt;span&gt;race: Human&lt;/span&gt;         &lt;a href="javascript:void(0)" class="races" id="race-0"&gt;Edit&lt;/a&gt;       &lt;/div&gt;     &lt;/div&gt;     &lt;div&gt;       Name: &lt;input type="text" name="name"&gt;     &lt;/div&gt;     &lt;div&gt;         &lt;div&gt;         &lt;input type="hidden" name="race-1" value="God" id="race-1"&gt;         &lt;span&gt;race: God&lt;/span&gt;         &lt;a href="javascript:void(0)" class="races" id="race-1"&gt;Edit&lt;/a&gt;       &lt;/div&gt;      &lt;/div&gt;            &lt;/body&gt;  &lt;/html&gt;   And this is my php code:  &lt;?php     $postDataKey = array_keys($_POST);     $text = "";     foreach ( $postDataKey as $currPostKey )      {         $currValue = $_POST[$currPostKey];         $text .= '&lt;div&gt;&lt;input type="hidden" name="'.$currPostKey.'-1" value="'.$currValue.'" id="'.$currPostKey.'-1"&gt;&lt;span&gt;'.$currPostKey.': '.$currValue.'&lt;/span&gt; &lt;a href="javascript:void(0)" class="races" id="race-1"&gt;Edit&lt;/a&gt;&lt;/div&gt;';     }     echo      '     &lt;html&gt;       &lt;head&gt;         &lt;script&gt;           window.opener.setValue(\''.$text.'\');         &lt;/script&gt;         &lt;/head&gt;     &lt;/html&gt;     '     ;    ?&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.
91212
I am trying to create a form that will allow users to update their information on the front end.  I am just starting to learn PHP (I know C# very well).  If I use this code to create a form on a WordPress page, how do I get the information from the user when they press the 'Update' button and then update the database?  function Insert_AccountTable_1() {     $current_user = wp_get_current_user();      if ($current_user-&gt;ID != 0)     {         return &lt;&lt;&lt;HTML             &lt;form class="AlumniForm" method="post"&gt;             &lt;h3&gt;Name&lt;/h3&gt;             &lt;br&gt;             &lt;table&gt;                 &lt;tbody&gt;                     &lt;tr&gt;                         &lt;th&gt;&lt;label for="Username"&gt;Username&lt;/label&gt;&lt;/th&gt;                         &lt;td&gt;&lt;span&gt;$current_user-&gt;user_login&lt;/span&gt;&lt;/td&gt;                         &lt;td&gt;&lt;span class="description"&gt;Usernames cannot be changed.&lt;/span&gt;&lt;/td&gt;                     &lt;/tr&gt;                     &lt;tr&gt;                         &lt;th&gt;&lt;label for="current_user_firstname"&gt;First Name&lt;/label&gt;&lt;/th&gt;                         &lt;td&gt;&lt;input id="current_user_firstname" type="text" name="current_user_firstname" value="$current_user-&gt;user_firstname"/&gt;&lt;/td&gt;                     &lt;/tr&gt;                     &lt;tr&gt;                         &lt;th&gt;&lt;label for="current_user_lastname"&gt;Last Name&lt;/label&gt;&lt;/th&gt;                         &lt;td&gt;&lt;input id="current_user_lastname" name="current_user_lastname" type="text" value="$current_user-&gt;user_lastname"/&gt;&lt;/td&gt;                     &lt;/tr&gt;                     &lt;tr&gt;                         &lt;th&gt;&lt;label for="current_user_displayname"&gt;Display Name&lt;span class="description"&gt;(required)&lt;/span&gt;&lt;/label&gt;&lt;/th&gt;                         &lt;td&gt;&lt;input id="current_user_displayname" type="text" value="$current_user-&gt;display_name"/&gt;&lt;/td&gt;                     &lt;/tr&gt;                 &lt;/tbody&gt;             &lt;/table&gt;              &lt;h3&gt;Contact Info&lt;/h3&gt;             &lt;br&gt;             &lt;table&gt;                 &lt;tbody&gt;                     &lt;tr&gt;                         &lt;th&gt;&lt;label for="current_user_email"&gt;E-mail&lt;span class="description"&gt;(Required)&lt;/span&gt;&lt;/label&gt;&lt;/th&gt;                         &lt;td&gt;&lt;input id="current_user_email" type="text" value="$current_user-&gt;user_email"/&gt;&lt;/td&gt;                     &lt;/tr&gt;                     &lt;tr&gt;                         &lt;th&gt;&lt;label for="current_user_url"&gt;Website&lt;/label&gt;&lt;/th&gt;                         &lt;td&gt;&lt;input id="current_user_email" type="text" value="$current_user-&gt;user_url"/&gt;&lt;/td&gt;                     &lt;/tr&gt;                 &lt;/tbody&gt;             &lt;/table&gt;             &lt;input type="submit" name="current_user_submitupdates"&gt;Update&lt;/input&gt;             &lt;/form&gt; HTML;     }     else     {         return &lt;&lt;&lt;HTML         &lt;h3&gt;Error - User not logged in&lt;/h3&gt; HTML;     } }  add_shortcode('InsertAccountTableI', 'Insert_AccountTable_1');
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.
52361
Once a page has loaded, how do I create a TinyMCE editor?  Putting a wp_editor call in an AJAX request then displaying it gives this:    Visual and text tabs are nonfunctional, no toolbar, no active TinyMCE instance, just the html markup. I need to instantiate the JS component of TinyMCE, but how?  I've also tried making a call in my AJAX response PHP to _WP_Editors::editor_js();, and I can see the response in the console using console.log and I see the JS script there, but it is not inserted into the DOM and it is never executed
124177
Yes, I know the topic has been discussed before. I know that Meta already has threads that complain about how flagging doesn't work. I wanted to give a practical example.  Today, a  came in to the  chat and asked the :  Hey guys, as soon as I embed javascript, all my html elements are gone. Even if the script is empty!? ...Can anyone help out? The example is really minimalistic &lt;script type='text/javascript' src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js&quot;/&gt; &lt;script type='text/javascript' src=&quot;script.js&quot;/&gt; These lines make everything vanish. script.js is empty! I use google chrome and the file is on localhost  Some context:  The JS room encourages people to come and ask questions that are too small/badly put for main. The room encourages people to just ask questions rather than ask to ask. In fact we even have a bot that prompts users to just ask if they have a question whenever they join. The above user has a good Q to A ratio having 1K rep in the main site and over 80 answers. The user has no negative context in the chat. No previous offenses or anything like that.  That message got 7 flags  Had a mod (ThiefMaster) not been present and invalidated those flags in time that user would have probably been suspended from the chat. This is bad, it sends the wrong message and it is very rude. Now, some other rooms don't allow people to just come and ask questions right away so maybe users from other rooms validated the flag. Maybe users thought he was being rude? I don't know. I do know that we don't want this sort of negative atmosphere in the JS room (and I'm sure other useful rooms such as PHP don't want it either), we have enough on our hands trying to maintain a community while helping people joining and handing with vamps/trolls. Possible solutions:  Drop spam/offensive flags altogether. Make spam/offensive flags room specific for big enough (tm) rooms. Give room owners just the ability to invalidate spam/offensive flags.
9968
I've been making a concerted effort to improve my javascript skills lately by reading as much javascript code as I can. In doing this I've sometimes seen the javascript: prefix appended to the front of event handler attributes in HTML element tags. What's the purpose of this prefix? Basically, is there any appreciable difference between:  onchange="javascript: myFunction(this)"   and  onchange="myFunction(this)"   ?
100723
I am building an application where I want to be able to click a rectangle represented by a DIV, and then use the keyboard to move that DIV by listing for keyboard events.  Rather than using an event listener for those keyboard events at the document level, can I listen for keyboard events at the DIV level, perhaps by giving it keyboard focus?  Here's a simplified sample to illustrate the problem:  &lt;html&gt; &lt;head&gt; &lt;/head&gt; &lt;body&gt;  &lt;div id="outer" style="background-color:#eeeeee;padding:10px"&gt; outer     &lt;div id="inner" style="background-color:#bbbbbb;width:50%;margin:10px;padding:10px;"&gt;    want to be able to focus this element and pick up keypresses    &lt;/div&gt; &lt;/div&gt;  &lt;script language="Javascript"&gt;  function onClick() {     document.getElementById('inner').innerHTML="clicked";     document.getElementById('inner').focus();  }  //this handler is never called function onKeypressDiv() {     document.getElementById('inner').innerHTML="keypress on div"; }  function onKeypressDoc() {     document.getElementById('inner').innerHTML="keypress on doc"; }  //install event handlers document.getElementById('inner').addEventListener("click", onClick, false); document.getElementById('inner').addEventListener("keypress", onKeypressDiv, false); document.addEventListener("keypress", onKeypressDoc, false);  &lt;/script&gt;  &lt;/body&gt; &lt;/html&gt;   On clicking the inner DIV I try to give it focus, but subsequent keyboard events are always picked up at the document level, not my DIV level event listener.  Do I simply need to implement an application-specific notion of keyboard focus?  I should add I only need this to work in Firefox.
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?
83765
This AJAX function gets called on a click:  $.ajax({             url: 'site/ajax.php',             data: {id: $('section#single article input:last-of-type').attr('value'), cote: 'like'}         }).done(function(html) {}   It passes the ID of the post (which is contained in a hidden input) for function get_post_meta() that is located in ajax.php. This is what AJAX.php looks like:  $cote = get_post_meta($_GET['id'], 'cote', true); if($_GET['cote'] == 'like') {     $newCote = $cote++;     update_post_meta($_GET['id'], 'cote', $newCote); } else {     $newCote = $cote--;     update_post_meta($_GET['id'], 'cote', $newCote); }   It is suppose to update the custom post's "cote" field, but the problem is that function get_post_meta() is undefined in ajax.php. This is the error message:  Fatal error: Call to undefined function get_post_meta() in /home2/electro/public_html/beta... on line 2
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); }
932
Suppose I attach an blur function to an HTML input box like this:  &lt;input id="myInput" onblur="function() { ... }"&gt;&lt;/input&gt;   Is there a way to get the ID of the element which caused the blur event to fire (the element which was clicked) inside the function? How?  For example, suppose I have a span like this:  &lt;span id="mySpan"&gt;Hello World&lt;/span&gt;   If I click the span right after the input element has focus, the input element will lose its focus. How does the function know that it was mySpan that was clicked?  PS: If the onclick event of the span would occur before the onblur event of the input element my problem would be solved, because I could set some status value indicating a specific element had been clicked.  PPS: The background of this problem is that I want to trigger an AJAX autocompleter control externally (from a clickable element) to show its suggestions, without the suggestions disappearing immediately because of the blur event on the input element. So I want to check in the blur function if one specific element has been clicked, and if so, ignore the blur event.
2912
Occasionally, I've come across a webpage that tries to pop open a new window (for user input, or something important), but the popup blocker prevents this from happening.  What methods can the calling window use to make sure the new window launched properly?
95564
I am having trouble debugging an issue with a plugin that I'm writing. I want to do an Ajax request when a user changes the option on a select input. The thing is it was fully working as expected yesterday, then when I test the website today (no code changes were made at all since yesterday) I'm getting an:   domain.com/wp-admin/admin-ajax.php 400 (Bad Request)  message in my Chrome console. If I try in Internet Explorer/FireFox it doesn't give the error in console but the Ajax request is still not working.  The plugin I'm creating is on a DigitalOcean droplet which was made using their one click app for WordPress.  Here is the barebones code I'm using on the plugin for the ajax:  //This is in a class' constructor method add_action('wp_enqueue_scripts', array($this, 'plugin_prefix_scripts'));  //PLUGIN_URL is a constant created earlier in the plugin public function plugin_prefix_scripts() { wp_enqueue_script('plugin_prefix_scripts', PLUGIN_URL . 'scripts/frontend_script.js'); wp_localize_script('plugin_prefix_scripts', 'js_object',   array(     'ajax_url' =&gt; admin_url('admin-ajax.php')   ) );   }  frontend_script.js:  $('#plugin-prefix-option-one, #plugin-prefix-option-two').on('change', function() {     var data = {         'action': 'plugin_prefix_page_change',         'option_val': 'some_val',     }      $.post(js_object.ajax_url, data, function(response) {         console.log(response); });   Back in the class:  add_action('wp_ajax_plugin_prefix_page_change', array($this, 'plugin_prefix_page_change'));  public function plugin_prefix_page_change() {     $arr = array(1, 2, 3, 4, 5);      wp_send_json($arr);      //I've also tried wp_die() and no die call at all but same outcome     die(); }   I'm unsure how to debug this further. Any help is much appreciated.  Thanks
5792
I have one text input and one button (see below). How can I use JavaScript to trigger the button's click event when the Enter key is pressed inside the text box?  There is already a different submit button on my current page, so I can't simply make the button a submit button. And, I only want the Enter key to click this specific button if it is pressed from within this one text box, nothing else.  &lt;input type="text" id="txtSearch" /&gt; &lt;input type="button" id="btnSearch" value="Search" onclick="doSomething();" /&gt;
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?
49049
Error Message:  Oops! Your question couldn't be submitted because: Please add some context to explain the code sections (or check that you have not incorrectly formatted all of your question as code).  How do I fix this issue? It says that I need to explain my code more when I try to post this as google-apps-script. I have explained almost every part of the code. Also, this code was posted previously and I just added a few extra lines with explanations. What do they mean by &quot;context&quot; function doGet() {   var app = UiApp.createApplication();   //Create listBox   var listBox = app.createListBox();   //Add items to listBox   listBox.addItem(&quot;item 1&quot;).addItem(&quot;item 2&quot;).addItem(&quot;item 3&quot;).setName(&quot;myListBox&quot;);   //Create hidden app   var hidden = app.createHidden().setName('hidden').setId('hidden')   //Create button handler   var handler = app.createServerHandler(&quot;buttonHandler&quot;);   // pass the listbox into the handler function as a parameter and the hidden widget as well   handler.addCallbackElement(listBox).addCallbackElement(hidden);    //Create flextable   var table = app.createFlexTable().setId(&quot;myTable&quot;);    //Create flex table style attributes     table.setStyleAttribute(&quot;border-style&quot;, &quot;solid&quot;)     table.setStyleAttribute(&quot;border-width&quot;, &quot;1px&quot;)     table.setCellPadding(1);      //Create flex table headers   table.setWidget(0, 0, app.createLabel(&quot;Product Type&quot;)).setStyleAttribute(&quot;color&quot;, &quot;blue&quot;);   table.setWidget(0, 5, app.createLabel(&quot;Size&quot;));    var button = app.createButton(&quot;+&quot;, handler);    // add all widgets to the app   app.add(table).add(hidden);   app.add(listBox).add(button)   return app; }  function buttonHandler(e) {   var app = UiApp.getActiveApplication();   // get the position (is a string)   var pos = e.parameter.hidden;   // initial condition, hidden widget is empty    if(pos==null){pos='0'};   // convert to number    pos=Number(pos);   var table = app.getElementById(&quot;myTable&quot;);   // add the new item at the right place   table.insertRow(pos).insertCell( pos, 0).setText(pos, 0, e.parameter.myListBox);   // increment position   ++pos;   // save value   app.getElementById('hidden').setValue(pos);   // update app   return app; }
81099
I am tryin to create expand and collapse functionality between pageblocks.The scenario is when i click the collapse button in one pageblock ,it should render another pageblock.How this can be achieved ? I tried using java script but the pageblock is not displaying properly. My current code is   &lt;apex:page &gt;   &lt;apex:includeScript value="{!$Resource.jqueryCollapse}"/&gt;   &lt;apex:includeScript value="{!$Resource.jqueryCollapse1}"/&gt;    &lt;apex:includeScript value="{!$Resource.jqueryCollapse2}"/&gt;    &lt;apex:form &gt;    &lt;html&gt;    &lt;head&gt;     &lt;script type="text/javascript"&gt;      $(function(){     $(".header").click(function () {        alert("Loopafe");    $header = $(this);        $content = j$header.next();         $content.slideToggle(100, function () {                 $header.text(function () {                     return $content.is(":visible") ? $(this).attr("src",      "https://c.ap1.visual.force.com/resource/1404298250000/Minus") : $(this).attr("src", "https://c.ap1.visual.force.com/resource/1404298250000/plusimg");     });  });     });  });  &lt;/script&gt;  &lt;style&gt;    .container .content {   display: none;  padding : 5px;  }  &lt;/style&gt; &lt;/head&gt; &lt;apex:pageBlock &gt; &lt;apex:pageBlockSection columns="10" collapsible="True" &gt;            &lt;div class="container"&gt;     &lt;img   src="XXg"class ="   header " /&gt;           &lt;div class="content"&gt;          &lt;apex:pageBlock &gt;            &lt;apex:pageBlockSection columns="5"  &gt;         &lt;apex:outputLabel value="Collapse"  id="theSecond1"/&gt;         &lt;apex:inputText /&gt;         &lt;/apex:pageBlockSection&gt;                     &lt;/apex:pageBlock&gt;    &lt;/div&gt;    &lt;/div&gt;         &lt;apex:outputText value="First" id="theFirst"/&gt;         &lt;apex:InputText /&gt;      &lt;/apex:pageBlockSection&gt;     &lt;/apex:pageBlock&gt; &lt;body&gt;  &lt;/body&gt;  &lt;/html&gt;    &lt;/apex:form&gt;   &lt;/apex:page&gt;