jQuery - Associate AJAX return's to specific DIV's

Question

jQuery - Associate AJAX return's to specific DIV's

295 Views Asked by DMHohf At 18 April 2025 at 10:25

I am trying to make a running list with the ability to queue up multiple requests. I'm able to make single request and have the return be append to the correct DIV. But when I make two or more requests, before the first request is returned, the first GET is discarded by the webserver (project constraints...), and the second return is inserted into the first request's DIV.

EDIT: I'd like to ensure the related request gets appended into the correct DIV. If the GET request is terminated by the webserver, then I'll add a function on the error:{textStatus} setting and append stock text into the div alerting the user of the error.

I'm using the jQuery plugin "Transform".

JS:

<script type="text/javascript">
    $(function() {
        var evtIncrmt = 0
        $("#searchForm").submit(function (event) { 
            event.preventDefault();
            evtIncrmt = evtIncrmt + 1

            var $form = $(this),
                //term = $form.find('input[name="cmdtextbox"]').val(),
                url = $form.attr('action');
                cmdInput = "<M ID=\"Input_MSGID\"><R ID=\"AscString_RECID\">OPD</R></M>"

            $( "#listContainer" ).prepend( $(document.createElement( "div" ))
                .attr({ id: evtIncrmt + "entry",  title: "photo by a cohen" })
                .text( "This is Event Number " + evtIncrmt )
            );
            $( "#" + evtIncrmt + "entry" ).append( $(document.createElement( "div" ))
                .attr({ id: evtIncrmt + "entryXmlReturn",  title: "review by w mitchell" })
                .text(  "Waiting for response. . " )
            );
            console.log("event increment before ajax call" + evtIncrmt);
            $.ajax({
                type: "GET",
                timeout: 120000,  /* 2mins */
                context: "#" + evtIncrmt + "entryXmlReturn",
                url: url,
                data: { 
                    XMLString: cmdInput ,
                    uqid: evtIncrmt
                },
                dataType: "text",
                success: function (xmlReturn) {
                    console.log("event increment inside transform" + evtIncrmt);
                    $( "#" + evtIncrmt + "entryXmlReturn" ).transform({
                        xmlstr: xmlReturn,
                        xsl: { url: "xsl/StaticStyle.xsl" }
                    });
                }
            });
        });
    });
</script>

html:

<html>
    <body>
        <div class="links">
            <form action="/" id="searchForm">
                <input type="input" name="cmdtextbox" value="OPD" />
                <input type="submit" value="Search" />
            </form>
        </div>
        <div id="loadHTMLajax"></div>
        <div id="listContainer">
            <div id="2staticEntry">This is entry two.</div>
            <div id="1staticEntry">Hello oldest entry number ONE</div>
        </div>
    </body>
</html>

Along with not working as intended, I'm sure I didn't use best practices while making this function. If you see areas where the code could be better written, please feel free to criticize.

This is my first question to the stackoverflow community, so hello, and thanks for all the anon usage I've gotten out of this resource over the years.

Original Q&A

There are 2 best solutions below

**DMHohf** · Answer 1

Zzzz, thanks for your input. It nudged me in the right direction. I re-evaluated how I was fetching the XML data. It turns out I was making the AJAX call for the .transform func, when it performs the AJAX call itself. By calling it in a seperate func, and not being able to pass the unique id of the call between the two ajax methods, I lost reference. Using just the transform method, I can maintain assignment integrity when the page receives its return from the webserver.

Below is the corrected code; summary below code:

//code above unchanged
console.log("event increment before ajax call" + evtIncrmt);

$("#" + evtIncrmt + "entryXmlReturn").transform({
    //async:false,
    success: function () {
        alert("Transform succeeded");
    },
    xml: {
        url: "/",
        data: { 
            XMLString: cmdInput ,
            uqid: evtIncrmt
        },
        //timeout: 120000  /* 2mins */
        success: function () {
            console.log("xml " + evtIncrmt + ' succeeded');
        }
    },
    xsl: {
        url: "xsl/StaticStyle.xsl",
        success: function () {
            console.log("xsl " + evtIncrmt + ' succeeded');
        }
    }
});

I still have issue with multiple calls made to the webserver. But I've decided to employ a queue, since I really can only make one request at a time, and make each AJAX call linearly.

If I get it working, I can reply with the coded queue func, but I don't know etiquette here for that, since it would be slightly off-topic...

I'm referencing stackoverflow answer: How do I store javascript functions in a queue...

**Baz1nga** · Answer 2

probably cos you are not incrementing the varible evtIncrmtl at all assuming when you say the request has failed it comes to the success function..

btw there is a vary hard dependency in here that your responses will always follow a particular order which is incorrect.. there might be a case where in you send 1,2,3 requests and the response order will be 2,3 and 1 even though 1 and 2 are failed requests.. thus this approach is kinda incorrect..

the correct appraoch would be to send in the id of the div (or the div no) to your server and you send back the same id as part of your response.. since your datatype is text you can simply achieve this by changing it to "json" (research abt json from google for your server side scripting language) and your response should be as follows:

{
"divId": "2staticEntry",  //"divCount" :2 //divid or its equivalent
xmlReturn: "<your old txt>"
}

now parse this json.. read abt parsing json in js. easiest way is to use eval() but I wouldnt recommend it..

once you parse it you can use the object returned by it as follows:

var obj= eval(respnse);  //or equivalent 
obj.divId   //represents your div to be updated
$( "#" + evtIncrmt + "entryXmlReturn" ).transform({
                        xmlstr: obj.xmlReturn,
                        xsl: { url: "xsl/StaticStyle.xsl" }
                    });

hope that made sense..

jQuery - Associate AJAX return's to specific DIV's

There are 2 best solutions below

Related Questions in JQUERY

Related Questions in JQUERY-XML

Trending Questions

Popular # Hahtags

Popular Questions