Guide on passing a variable from AJAX response to a JavaScript function when a user clicks

Question

Guide on passing a variable from AJAX response to a JavaScript function when a user clicks

I need to send the value of a variable as a parameter to a javascript function when clicking on a link. The value is obtained from an AJAX response. However, I am encountering an error in the console stating that 'test' is not defined.

var test = data.fileName;

alert('Hello world ' + test); // outputs Hello world download/15__Priority____4x6__Label.JPEG
var lbDownHtml = '';
lbDownHtml += "<div><a href='" + data.functpath + "' ><span>Download Label</span></a>";
lbDownHtml += "</div>";
lbDownHtml += "<div><a id='print_Link' onclick='print_funct(test);return false;'><span>Print Label</span></a>";
lbDownHtml += "</div>";

function print_funct (test) {
    alert('Hello world '+test);
}

Is there a way for me to successfully pass the 'test' variable to my function?

javascript

Answer 1

Answer №1

To combine the test variable with the given string, you can follow this code snippet:

htmlOutput += '<div><a id="print_Link" onclick="printer_function(' + test + ');return false;"><span>Print Label</span></a></div>';

Answer 2

To combine the test variable with the given string, you can follow this code snippet:

htmlOutput += '<div><a id="print_Link" onclick="printer_function(' + test + ');return false;"><span>Print Label</span></a></div>';

Answer 3

Answer №2

Your code treats test as a string, but it would be better to assign it to a variable like this:

lbDownHtml += "<div><a id='print_Link' onclick='print_funct(" + test + ");return false;'><span>Print Label</span></a></div>;"

By doing this, the value that test holds will be correctly passed into the function call.

EDIT: per your request, when test should be a string

lbDownHtml += "<div><a href='" + data.functpath + "' ><span>Download Label</span></a>";
lbDownHtml += "</div>";
lbDownHtml += "<div><a id='print_Link' onclick='print_funct(\"" + test + "\");return false;'><span>Print Label</span></a>";
lbDownHtml += "</div>";

Answer 4

Your code treats test as a string, but it would be better to assign it to a variable like this:

lbDownHtml += "<div><a id='print_Link' onclick='print_funct(" + test + ");return false;'><span>Print Label</span></a></div>;"

By doing this, the value that test holds will be correctly passed into the function call.

EDIT: per your request, when test should be a string

lbDownHtml += "<div><a href='" + data.functpath + "' ><span>Download Label</span></a>";
lbDownHtml += "</div>";
lbDownHtml += "<div><a id='print_Link' onclick='print_funct(\"" + test + "\");return false;'><span>Print Label</span></a>";
lbDownHtml += "</div>";

Guide on passing a variable from AJAX response to a JavaScript function when a user clicks

Answer №1

Answer №2

Similar questions

Can access parent refs when exporting a child component with withStyles by following these steps:

What sets apart $document from $window.document in Angular?

Ways to determine cleanliness or filthiness in an Angular 5 modal form?

Remove the Prisma self-referencing relationship (one-to-many)

Using Grails to create remote functions with multiple parameters

Complete the modal window form

The HTML grid is causing an irritating excess space on the right side of my website

The onClick event cannot be triggered within a div that is generated dynamically

Issue: Unable to assign type 'FormDataEntryValue' to type 'string'. Type 'File' cannot be assigned to type 'string'

Replicating a tag and inputting the field content

What is the best way to create a "check all" feature in React using child components?

Utilizing a form on numerous occasions prior to its submission

What methods can I use to prevent caching of XMLHttpRequest requests without relying on jQuery?

How come the use of a timeout causes the this variable to seemingly lose its reference?

Updating views with AJAX after database updates without the use of jQuery via PHP

Enter the Kannada language into the HTML text box or input field

Despite correctly declaring jquery-ui.js and numeric.js, the jQuery datepicker and numeric plugins are not working as expected

Prevent typing in text box when drawer is activated by pressing a button

Error: The use of "let" as a lexically bound identifier is not permitted

After clicking the create button in AngularJS, the ngModel values become empty