0

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.

DMHohf
  • 1
  • 1
  • use single quotes for strings -> no need to escape " eg. var a= 'this is "fine"'; – Baz1nga Aug 21 '11 at 18:30
  • Ok, good tip. I was trying to find the correct etiquette based on examples around various sties and just double quotes on a fluke. I was intending to search for the most accepted js practices. – DMHohf Aug 21 '11 at 19:51
  • when you mean not working what is happeneing? also what is url referring to here.. – Baz1nga Aug 21 '11 at 20:29
  • When I make two fast requests and two DIV are created to receive the requests, the first of the two requests fail (working as intended) and when the second request comes back it gets appended into the wrong DIV (the first DIV whose request got killed). – DMHohf Aug 21 '11 at 20:39
  • The variable 'url' references the forms action attribute. url the setting withing the transform func refers to the location of one of the two files (xml or xsl). – DMHohf Aug 21 '11 at 21:02

2 Answers2

0

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..

Baz1nga
  • 15,485
  • 3
  • 35
  • 61
  • Unfortunately, due to a project constraint, I cannot request json from the webserver or make any changes whatsoever to the webserver. (It is very frustrating) You are correct, the order with which my responses return may be out of order, so this ability to assign the responses to the correct DIV's is very important. I can however see the increment correctly working. Both in the console logs, the creation of the numbered DIV's, and the unique parameter I passed on the GET submit. Is there not a way to keep each ajax "thread" properly associated with it's destination DIV? – DMHohf Aug 21 '11 at 23:16
  • I've been thinking... Reading the url of the ajax return would identify what div it is to return to, since I'm appending the incremented id of that request as a string parameter. Is there a way within my success function to reference what the URL it is parsing? – DMHohf Aug 22 '11 at 03:06
  • After I did all the work I stumbled upon this plugin... http://docs.jquery.com/AjaxQueue – DMHohf Aug 24 '11 at 01:56
0

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...

Community
  • 1
  • 1
DMHohf
  • 1
  • 1