Error: The variable is not declared in the AJAX/JQuery code

I'm encountering an issue with my code that involves grabbing HTML from an AJAX request. I am trying to hide one row of a table and show another based on the response, but for some reason, the variable holding the HTML content seems to disappear when I try to use it in the next function after the AJAX call.

Can anyone point out where I might be making a mistake?

/** Perform an AJAX request to retrieve quick edit html */
var load_quick_edit = jQuery.post(MyAjax.ajaxurl, data, function(response){
    var quick_edit_html = response;
});

/** Display the appropriate quick edit row */
load_quick_edit.done(function(){

    /** Hide the row that needs to be edited */
    jQuery('tr#display-'+slug).hide();

    /** Show the quick edit row requested by the user */
    jQuery('tr#quick-edit-'+slug).show();
    jQuery('tr#quick-edit-'+slug).html(quick_edit_html);

});

Any help is appreciated.

jqueryajaxvar

Answer №1

The declaration of your var is contained within the anonymous ajax callback function, which confines the scope of the var to that specific function and prevents it from being accessed elsewhere.

To resolve this issue, consider declaring the var outside of your functions.

var custom_edit_html;

/** Proceed with the AJAX request to retrieve the custom edit html */
var get_custom_edit = jQuery.post(MyAjax.ajaxurl, data, function(response){
    custom_edit_html = response;
});

/** Display the appropriate custom edit row */
get_custom_edit.done(function(){

    /** Conceal the row to be edited */
    jQuery('tr#display-'+slug).hide();

    /** Reveal the requested custom edit row */
    jQuery('tr#custom-edit-'+slug).show();
    jQuery('tr#custom-edit-'+slug).html(custom_edit_html);

});

Answer №2

The item is currently unavailable as it falls outside the specified scope. To address this, declare it outside of the post() function:

var quick_edit_html;

    /** Initiating the AJAX request to retrieve the quick edit html */
var load_quick_edit = jQuery.post(MyAjax.ajaxurl, data, function(response){
    quick_edit_html = response;
});

    /** Presenting the appropriate quick edit row */
load_quick_edit.done(function(){
    /** Conceal the row that needs editing */
    jQuery('tr#display-'+slug).hide();

    /** Reveal the quick edit row requested by the user */
    jQuery('tr#quick-edit-'+slug).show();
    jQuery('tr#quick-edit-'+slug).html(quick_edit_html);
});

Answer №3

By that point, quick_edit_html should have already left the scope. Consider either storing it in the global scope or prototype scope using the this keyword.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Optimizing Image Loading: Using jQuery and JavaScript to Load Images On Demand

Similar to the functionality on this site: I am interested in implementing a feature that only loads images when they are visible on the screen on my own website. Thank you. If possible, I would also like to add a preloader using jQuery. ...

jquery

Exploring the getJSON function within jQuery

{ "Emily":{ "Math":"87", "Science":"91", "Email":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1d6f7e767c51767b727e737f764f747879">[email protected]</a>", "City":"Chicago" }, "Sa ...

javascriptjqueryjsonjsonp

Learn the process of using calc to rotate images on hover with CSS and Jquery

Is there a way to implement the rotate on hover function for images, similar to what is seen on this website under 'our Latest Publications'? I attempted using calc and skew, however, I was unsuccessful in achieving the desired hovering effect o ...

jqueryhtmlcssmousehover

Starting a tab just once

I have successfully created 4 static HTML pages that include: Home About Services Contact Each page contains a link that leads to another static page named myVideo.html, which plays a video about me in a new tab. The link is available on every page so ...

javascriptphpjqueryhtml

How can I send a Vue.js object to a Laravel controller?

I am working with a Vue component that includes an object like this - dataObj = [{id:1,name:'sanaulla'},{id:1,name:'parvez'}] When I try to send a post request to the Laravel Controller using the following code - axios.post("/api/ ...

javascriptphpajaxlaravelvue.js

Using Javascript to apply styling only to the first class element in the document

I am facing a challenge with styling programmatically generated classes and inputs. Here is an example of the structure: <div class="inputHolder"> <input type="button" class="inputclss" value="1"> </ ...

javascriptjquery

Placing a new item following the child of a different element

How can I use jQuery to add a div inside id123 after sth2, but only for one specific occurrence? I understand how to do it after every sth2, but not just once. <div class="id123"> <div class="a"></div> .. <div class="sth1">< ...

jqueryhtmljsp

"Unveiling the Power of PWI: Integrating Picasa Web Albums with the Magic of jQuery

I am currently having an issue with the script found here: http://code.google.com/p/pwi/ It's a fantastic Picasa jQuery Gallery! Could someone please provide guidance on how to run this script in jQuery.noConflict() mode? I have already included the ...

gallerypicasajquery

How to position collapsible buttons in Twitter's Bootstrap framework

I have successfully created two buttons on the same line. The second button is collapsible and when clicked, it adds a row of two more buttons to the view. However, the newly collapsed row of buttons appears aligned with the second button. I would like th ...

jqueryhtmlcsstwitter-bootstrap

The variable is constantly reverting back to its initial value

Here is the code snippet: function send() { var nop = 6; var send_this = { nop: nop }; $.ajax({ type: "GET", data: send_this, url: "example.com", success: function(r) { ...

javascriptjqueryjson

What is the order of reflection in dynamic classes - are they added to the beginning or

Just a general question here: If dynamic classes are added to an element (e.g. through a jQuery-ui add-on), and the element already has classes, does the dynamically added class get appended or prepended to the list of classes? The reason for my question ...

javascriptjqueryjquery-uijquery-plugins

Sending data from an AJAX POST request to a Grails Controller

Currently, I am in the process of developing a social networking platform using Grails. However, I have encountered a roadblock when it comes to allowing users on their edit profile page to input a YouTube URL into a text field. By clicking a button, a Jav ...

javascriptjqueryajaxgrailsparameters

Exploring the Best Methods to Retrieve the data-id in jstree JSON data

My goal is to retrieve the data-id from a dynamically generated tree form using JsTree (which has checkboxes), but unfortunately, my current approach isn't working. To iterate over the checkboxes and account for multiple selections, I am utilizing the ...

jqueryjstree

Utilizing jQuery to compute dynamic fields depending on selection in a dropdown menu

Creating a Ruby app for tracking bets, I have designed a small form that captures various details including date and match. However, the most crucial components of this form are the "stake" and "odd" text fields. To enhance user experience, I have incorpor ...

javascriptjqueryrubyajax

Utilizing Jquery to transform characters into visual representations

Do you think it is wise to utilize a jQuery function that replaces each character in a text with custom character images? For instance, when using the function, you need to specify which element you would like the characters replaced in, and jQuery will d ...

jqueryhtmlfonts

How does Angular5 perform with Bootstrap4?

Currently working on an Angular5 application and considering integrating bootstrap into it. I imported Bootstrap4, which includes dependencies on JQuery and Popper.js. Another option I came across is utilizing CSS grid for more versatility compared to boo ...

jqueryhtmlcsstwitter-bootstrapcss-grid

javascript code not functioning properly

Something simple! In my asp.net-MVC project, I have a button and an external JavaScript file called mydata.js. This file contains a function called checkJS(). function checkJs() { debugger; alert("your output!!!"); } Here is my code: <div id="m ...

javascriptjqueryasp.net-mvc-5

Learn how to implement form validation on a sliding form in just 5 easy steps using jQuery

I am new to programming and I struggle to comprehend complex JavaScript code written by others. Instead of using intricate code that I don't understand, I would like to request help in creating a simplified jQuery script for me to implement. Current ...

javascriptjqueryslider

Learn the steps to successfully select a drop-down option by clicking on a button

Below is the HTML code for my select options: <select id="font"> <option value="School">School</option> <option value="'Ubuntu Mono'">SansitaOne</option> <option value="Tangerine">Tange ...

javascriptjquery

jQuery insert custom text into HTML and eliminate malfunctioning elements

Using jQuery, I have created a form where the entered text is appended to certain elements. This functionality works correctly. Additionally, I have included a remove link with each added element. When someone clicks on the remove button, it should remove ...

jqueryhtmlcss