Being fairly new to jQuery and the AJAX basics, I've been trying to set up some fairly simple dynamic loading.  I include a .js file setting up the click event handler, and it looks like this:  var baseurl = document.getElementById("baseurl").getAttribute("href"); var pattern = new RegExp("[^/]+"); var page = "cnt/" + pattern.exec(window.location.href.substr(baseurl.length)) + ".php";  $(document).ready(function(){     $('a.ajax').bind('click',function(event){         event.preventDefault();         $('#content').load("cnt/" + pattern.exec(this.href.substr(baseurl.length)) + ".php")     }) });   Note that I do some changes to the file so the relative href "testing/" would turn into an absolute path to the file "cnt/testing.php".  My anchor tags look like this:  &lt;a href="testing/" class="ajax"&gt;Link to testing page&lt;/a&gt;   My problem is, that whenever new content is loaded into div#content the handler in my .js file is not registered for any links that may have appeared using AJAX. In other words the links will simply act as ordinary anchor-tags. I want it to load the next page using AJAX, just like it does with the first page.
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.
18084
Im creating a visit/page views counter with ajax,jquery and php, I have been reading a few articles that recommend the use of nonces for data manipulation through ajax, however i am not sure if i need to integrate the use of nonces for my simple counter?  my code looks somewhat like this;  jquery  jQuery.ajax({         type: 'POST',         url: ajaxurl,         data: {action: 'countHits', status: 'true'},         });   php  //ajax functions add_action('wp_ajax_countHits', 'countHits'); add_action('wp_ajax_nopriv_countHits', 'countHits'); function countHits() {      if($_POST['status'] != "") {        $status= $_POST['status'];      if(!isset($_COOKIE['UNIQUEUSER'] &amp;&amp; $status == 'true'){        $uniqueUser= get_option('stats');        $uniqueUser['uniqueUser']+=1;        update_option('stats', $uniqueUser);     } die();  }   So as you can see it is very simple, do I need to use nonces for each ajax request?(i have two separate request in my jquery which return variables one for false one for true) furthermore, if I wanted to implement nonces how would i go about doing that?
114745
I am trying to Preview and download document from LWC, From apex controller i am returning Map&lt;> contains ID and Document name, and iteration that map data in html file and passing map.key value to href url, but dynamic is not populating in URL.    &lt;template for:each={mapData} for:item="mapkey"&gt;                            Test: {mapkey.key}                                                         &lt;lightning-button-icon key={mapkey} icon-name="utility:download"  variant="bare" alternative-text="Settings"&gt;&lt;/lightning-button-icon&gt;                                &lt;a key={mapkey} style="color: #000000"  href ="/sfc/servlet.shepherd/document/download/{mapkey.Key}?operationContext=S1" target="_blank" preview= "{mapkey.value}"&gt;{mapkey.value}&lt;/a&gt;                          &lt;/template&gt;    JS Code:      .then(data =&gt; {            /// var conts = data;                   console.log('data map---&gt;'+data);     if(data){     // eslint-disable-next-line guard-for-in     for(let key in data) {    this.mapData.push({value: data[key], key:key}); //Here we are creating the array to show on UI.    }       } })   Apex Code:   @auraenabled /* Method will return a Map Contains Document ID and Name */ public static Map&lt;string,string&gt; getUrls( string searchstr){     Map&lt;string,string&gt; contdocidandtitle = new Map&lt;string,string&gt;();     system.debug('searchstr'+searchstr);             For(Document cd :[select id,folderid,name from document where folder.name =:searchstr]){         contdocidandtitle.put(cd.id,cd.name);                 }     return contdocidandtitle; }   Error is: sfc/servlet.shepherd/document/download/%7Bmapkey.Key%7D?operationContext=S1 in URL "mapkey.key" priniting instead of ID Help me with valuable suggestions.
10734
I'm using jQuery to wire up some mouseover effects on elements that are inside an UpdatePanel. The events are bound in $(document).ready . For example:  $(function() {         $('div._Foo').bind("mouseover", function(e) {         // Do something exciting     });     });   Of course, this works fine the first time the page is loaded, but when the UpdatePanel does a partial page update, it's not run and the mouseover effects don't work any more inside the UpdatePanel.   What's the recommended approach for wiring stuff up in jQuery not only on the first page load, but every time an UpdatePanel fires a partial page update? Should I be using the ASP.NET ajax lifecycle instead of $(document).ready?
30976
It looks like if I load dynamic content using $.get(), the result is cached in browser.  Adding some random string in QueryString seems to solve this issue (I use new Date().toString()), but this feels like a hack.   Is there any other way to achieve this? Or, if unique string is the only way to achieve this, any suggestions other than new Date()?
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.
76419
I'm using jQuery to hide and show elements when a radio button group is altered/clicked. It works fine in browsers like Firefox, but in IE 6 and 7, the action only occurs when the user then clicks somewhere else on the page.  To elaborate, when you load the page, everything looks fine. In Firefox, if you click a radio button, one table row is hidden and the other one is shown immediately. However, in IE 6 and 7, you click the radio button and nothing will happen until you click somewhere on the page. Only then does IE redraw the page, hiding and showing the relevant elements.  Here's the jQuery I'm using:  $(document).ready(function () {   $(".hiddenOnLoad").hide();    $("#viewByOrg").change(function () {     $(".visibleOnLoad").show();     $(".hiddenOnLoad").hide();   });    $("#viewByProduct").change(function () {     $(".visibleOnLoad").hide();     $(".hiddenOnLoad").show();   }); });   Here's the part of the XHTML that it affects. The whole page validates as XHTML 1.0 Strict.  &lt;tr&gt;   &lt;td&gt;View by:&lt;/td&gt;   &lt;td&gt;     &lt;p&gt;       &lt;input type="radio" name="viewBy" id="viewByOrg" value="organisation"       checked="checked" /&gt;Organisation&lt;/p&gt;     &lt;p&gt;       &lt;input type="radio" name="viewBy" id="viewByProduct" value="product" /&gt;Product&lt;/p&gt;   &lt;/td&gt; &lt;/tr&gt; &lt;tr class="visibleOnLoad"&gt;   &lt;td&gt;Organisation:&lt;/td&gt;   &lt;td&gt;     &lt;select name="organisation" id="organisation" multiple="multiple" size="10"&gt;       &lt;option value="1"&gt;Option 1&lt;/option&gt;       &lt;option value="2"&gt;Option 2&lt;/option&gt;     &lt;/select&gt;   &lt;/td&gt; &lt;/tr&gt; &lt;tr class="hiddenOnLoad"&gt;   &lt;td&gt;Product:&lt;/td&gt;   &lt;td&gt;     &lt;select name="product" id="product" multiple="multiple" size="10"&gt;       &lt;option value="1"&gt;Option 1&lt;/option&gt;       &lt;option value="2"&gt;Option 2&lt;/option&gt;     &lt;/select&gt;   &lt;/td&gt; &lt;/tr&gt;   If anyone has any ideas why this is happening and how to fix it, they would be very much appreciated!
116319
I am trying to add jQuery to my page (it is not being added by default). The file is adding to the page but after drupal.js causing the error:  SCRIPT5009: 'jQuery' is undefined  drupal.js, line 5 character 1    The code that adds drupal.js to the page in common.inc  ... 'misc/drupal.js' =&gt; array(           'data' =&gt; 'misc/drupal.js',           'type' =&gt; 'file',           'scope' =&gt; 'header',           'group' =&gt; JS_LIBRARY,           'every_page' =&gt; TRUE,           'weight' =&gt; -1,           'preprocess' =&gt; TRUE,           'cache' =&gt; TRUE,           'defer' =&gt; FALSE,         ), ...   In my module hook_init I have:    drupal_add_js('misc/jquery.js', array(     'group' =&gt; JS_LIBRARY,     'weight' =&gt; -20,     'cache' =&gt; TRUE,   ));   I would think with a lower weight it would load before drupal.js?  The header of the page contains the following scripts:  &lt;script type="text/javascript" src="http://mysite.com/misc/drupal.js?mqdxrf"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="http://mysite.com/misc/jquery.js?mqdxrf"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="http://mysite.com/misc/jquery.once.js?mqdxrf"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="http://mysite.com/sites/default/files/languages/nl_c9aC92_wtuULa79-hTFcGPM53oqk1yKwciOa_Q3yO28.js?mqdxrf"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="http://mysite.com/sites/all/modules/lang_dropdown/msdropdown/jquery.dd.js?mqdxrf"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="http://mysite.com/sites/all/modules/lang_dropdown/lang_dropdown.js?mqdxrf"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="http://mysite.com/sites/all/modules/devel/devel_krumo_path.js?mqdxrf"&gt;&lt;/script&gt;
41163
I'm wondering what the preferred method is for dealing with AJAX calls. Should one use the same plugin php file to process the POST or a separate one? Which is cleaner or safer?
48996
I'd like to implement a simple AJAX function locally that allows me to autocomplete node titles of already existing nodes as the user types. To that end, I need the ability to have an API that I can search on node titles. The problem is that when I output raw JSON, it comes surrounded by tags. So, no matter what I do, I keep getting...  &lt;html&gt;     &lt;head&gt;     &lt;/head&gt;     &lt;body&gt;         &lt;pre style="word-wrap: break-word; white-space: pre-wrap;"&gt; {json here}&lt;/pre&gt;     &lt;/body&gt; &lt;/html&gt;   I've tried implementing a custom page template that only outputs content already, that produced the same results. Here is how I am currently doing this, in my module file...  &lt;?php  /**  * Implementation of hook_menu()  */ function content_relation_menu() {     $items = array();     $items['api'] = array(         'title' =&gt; 'Search',         'page callback' =&gt; 'content_relation_get',         'access callback' =&gt; TRUE,         'type' =&gt; MENU_CALLBACK,     );      return $items; }  function content_relation_get($term = '') {     drupal_add_http_header('Content-Type', 'application/javascript; utf-8');     $var = json_encode(         db_query("SELECT nid,title FROM {node} WHERE title LIKE :title LIMIT 5", array(":title" =&gt; $term.'%'))-&gt;fetchAll()     );     echo $var;     exit(0); }   How can I return JUST raw JSON?
54685
In the module I am developing I need to add script which require jQuery.The will be added depending on configuration settings. Hence I am using template_preprocess_module(&amp;$variables) where I am trying to add script by doing something like this:  function template_preprocess_module(&amp;$variables) {   if (TRUE) {     $variables['jquery'] = ?;     $variables['script'] = 'path to script in module';   } }   Then in the template I will simply be rendering these variable in the head section. But I am facing trouble in adding jQuery, because I don't know its source (obviously I know its source in core but I need something over here which automates path). Can the source be known by using something like drupal_get_path() ? I am also not sure if this is the best way to add script conditionally, any suggestion regarding this? Thanks.
103050
My website has the same header/sidebar/footer on every page, so I have been importing them using PHP. To do this I forced all html files to be processed through the apache servers PHP handler via htaccess. I have come to understand that is not necessarily the best thing to do and so found out how to do everything I need using simple JavaScript. I also store a variable in the initial page that then gets used in the imported html.  Questions: By switching from:  &lt;?php include "_header.html";?&gt;   to  &lt;script type="text/javascript" src="_header.js"&gt;&lt;/script&gt;   I am noticing that the "view source" shows the header.js link, whereas the PHP method will show the source as if the html had been there all along. Will search engines recognize the html in the JavaScript just as they would when loaded with PHP?  I understand it is bad practice to alter the page contents -after- it is downloaded, but this doesn't fall into that category does it? That would detail things like after a wait function, or after user interaction, correct?  Are there any other foreseeable downfalls to switching to JavaScript and turning off the forced PHP processing?
115646
I have a page that uses   $(id).show("highlight", {}, 2000);   to highlight an element when I start a ajax request, that might fail so that I want to use something like  $(id).show("highlight", {color: "#FF0000"}, 2000);   in the error handler. The problem is that if the first highlight haven't finished, the second is placed in a queue and wont run until the first is ready. Hence the question: Can I somehow stop the first effect?
26203
I'm trying to direct a browser to a different page. If I wanted a GET request, I might say  document.location.href = 'http://example.com/q=a';   But the resource I'm trying to access won't respond properly unless I use a POST request. If this were not dynamically generated, I might use the HTML  &lt;form action="http://example.com/" method="POST"&gt;   &lt;input type="hidden" name="q" value="a"&gt; &lt;/form&gt;   Then I would just submit the form from the DOM.  But really I would like JavaScript code that allows me to say  post_to_url('http://example.com/', {'q':'a'});   What's the best cross browser implementation?  Edit   I'm sorry I was not clear. I need a solution that changes the location of the browser, just like submitting a form. If this is possible with , it is not obvious. And this should not be asynchronous, nor use XML, so Ajax is not the answer.
75718
I'm dynamically adding &lt;script&gt; tags to a page's &lt;head&gt;, and I'd like to be able to tell whether the loading failed in some way -- a 404, a script error in the loaded script, whatever.  In Firefox, this works:  var script_tag = document.createElement('script'); script_tag.setAttribute('type', 'text/javascript'); script_tag.setAttribute('src', 'http://fail.org/nonexistant.js'); script_tag.onerror = function() { alert("Loading failed!"); } document.getElementsByTagName('head')[0].appendChild(script_tag);   However, this doesn't work in IE or Safari.  Does anyone know of a way to make this work in browsers other than Firefox?  (I don't think a solution that requires placing special code within the .js files is a good one. It's inelegant and inflexible.)
65332
Is it possible to catch an error when using JSONP with jQuery? I've tried both the $.getJSON and $.ajax methods but neither will catch the 404 error I'm testing. Here is what I've tried (keep in mind that these all work successfully, but I want to handle the case when it fails):  jQuery.ajax({     type: "GET",     url: handlerURL,     dataType: "jsonp",     success: function(results){         alert("Success!");     },     error: function(XMLHttpRequest, textStatus, errorThrown){         alert("Error");     } });   And also:  jQuery.getJSON(handlerURL + "&amp;callback=?",      function(jsonResult){         alert("Success!");     });   I've also tried adding the $.ajaxError but that didn't work either:  jQuery(document).ajaxError(function(event, request, settings){    alert("Error"); });   Thanks in advance for any replies!
91117
I'm looking for a good approach to manipulate some JS code from within a module call. (Using Drupal 6.)  I have a set of JavaScript functions I need to add to a page. (Regular JavaScript, no jQuery.) Unfortunately they rely on some variables from the page they are shown on. So my current approach is to generate all the JavaScript from within PHP code which results in a whole lot of escaped strings like $output .= '  var url = "'. $url . '";' . "\n";, which is not so nice after 20-30 lines of code.  So I would like to move all the JavaScript code into it's own .js file, and find a way to inject my variables. So far, the only solution I could come up with is putting it in a temporary file, read that, modify and save it to the /files directory. But is there another, more preferred way?