call ajax in separate javascript function

Question

I am new in jquery, ajax but I want to call ajax in separate javascript function because that JSP file is dynamically created and button id in JSP file is also created using for loop. I sharing my code and is there is a solution for this to pass button id to jquery function and pass that id to ajax calling through Jquery.

Here is code for .js file to call ajax through jquery :

function insertData(idvalue)
{
var forsplit = idvalue.id.split("_");
var qtsrl = forsplit[2];
var qtno = forsplit[3];

var queryid=idvalue.id;

var qtsrl_id = document.getElementById("qstn_srl_"+qtsrl+"_"+qtno).value;
var qstn_no_id = document.getElementById("qstn_no_"+qtsrl+"_"+qtno).value;

$.ajax(
{
    type: "GET",
    url: "aftermarksave.jsp",
    data:{setvalues : qtsrl_id},
    contentType: "application/json",
    async: false,
    success: function (data) 
    {
        alert("Data passed");
    },
    error: function(data) 
    {
        alert('Not passed Data: '+qtsrl_id);
    }   
});

}

Here I want to pass"qtsrl_id" to "aftermarksave.jsp" through Jquery:Ajax

And here is my dynamically generated .JSP file that "this" is passed to javascript function and extract current id from "this" object

fw1.write("<td><lable for='marksimilar'>"+getmarkentry+"</lable>");
                fw1.write("<input type='hidden'    id='markentry_"+getmarkentry+"' value="+getmarkentry+">");
                fw1.write("<br>");
                fw1.write("<label>Serial No</label>");
                fw1.write("<br>");
                fw1.write("<input type='text' size='10' id='qstn_srl_"+queserial+"_"+queno+"' onBlur='makecapital();doOnBlur(this)'>");
                fw1.write("<br>");  
                fw1.write("<label>Question No</label>");
                fw1.write("<br>");
                fw1.write("<input type='text' size='10' id='qstn_no_"+queserial+"_"+queno+"' onBlur='doOnBlur(this)'>");
                fw1.write("<br>");
                fw1.write("<input type='button' id='btn_mark_"+queserial+"_"+queno+"' onClick=**'insertData(this)'** value='Mark'>");                                   
                fw1.write("<br>");
                if(getmarkentry.equals(""))
                {
                    fw1.write("<input type='button' id='btn_delete' onClick='mark_same()' value='UnMark' disabled='disabled'></td>");                                   
                }
                else
                {
                    fw1.write("<input type='button' id='btn_delete' onClick='mark_same()' value='UnMark'></td>");                                   
                }
                fw1.write("</tr>");
                fw1.write("<tr>");

In above code "insertData(this)" is called when clicked on button and I want on that click that ajax is called through jquery. how we achieve this in javascript function.

Answer 1

You can use something like this the following:

Put your Ajax script in a function:

function functionWithAjaxScript(qtsrl_id){
$.ajax(
{
    type: "GET",
    url: "aftermarksave.jsp",
    data:{setvalues : qtsrl_id},
    contentType: "application/json",
    async: false,
    success: function (data) 
    {
        alert("Data passed");
    },
    error: function(data) 
    {
        alert('Not passed Data: '+qtsrl_id);
    }   
});

}

trigger the function with .on() when your button is clicked:

$(function() {
    $("#mybuttonid").on("click",function(){
        functionWithAjaxScript(param);
    });
})

I hope this helps.