jQuery - связывает возврат AJAX с определенным DIV - PullRequest
Новая
       23

jQuery - связывает возврат AJAX с определенным DIV

0 голосов
/ 21 августа 2011

Я пытаюсь создать рабочий список с возможностью поставить в очередь несколько запросов.Я могу сделать один запрос, и возврат будет добавлен в правильный DIV.Но когда я делаю два или более запросов, перед возвратом первого запроса веб-сервер отбрасывает первый GET (ограничения проекта ...), а второй возврат вставляется в DIV первого запроса.

РЕДАКТИРОВАТЬ: Я хотел бы убедиться, что соответствующий запрос добавляется в правильный DIV.Если GET-запрос завершается веб-сервером, я добавлю функцию в настройку error:{textStatus} и добавлю стандартный текст в div, предупреждая пользователя об ошибке.

Я использую плагин jQuery«Преобразование».

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>

Несмотря на то, что я не работал должным образом, я уверен, что не использовал лучшие практикиделая эту функцию.Если вы видите области, где код может быть лучше написан, пожалуйста, не стесняйтесь критиковать.

Это мой первый вопрос к сообществу stackoverflow, так что привет, и спасибо за все то, что я использовал в течение многих лет из этого ресурса.

Ответы [ 2 ]

0 голосов
/ 22 августа 2011

Zzzz, спасибо за ваш вклад.Это подтолкнуло меня в правильном направлении.Я переоценил, как я извлекал данные XML.Оказывается, я выполнял вызов AJAX для функции .transform, когда он сам выполняет вызов AJAX.Вызвав его в отдельной функции и не имея возможности передать уникальный идентификатор вызова между двумя методами ajax, я потерял ссылку.Используя только метод transform, я могу сохранить целостность присваивания, когда страница получает свой ответ от веб-сервера.

Ниже приведен исправленный код;Резюме ниже код: 

//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');
        }
    }
});

У меня все еще есть проблема с несколькими звонками на веб-сервер.Но я решил использовать очередь, так как действительно могу сделать только один запрос за раз и сделать каждый AJAX-вызов линейным.

Если у меня получится, я могу ответить с помощью функции закодированной очереди, но здесь я не знаю этикета, поскольку это будет немного не по теме ...

Iссылаюсь на stackoverflow ответ: Как хранить функции JavaScript в очереди ...

0 голосов
/ 22 августа 2011

возможно, потому что вы вообще не увеличиваете переменную evtIncrmtl, предполагая, что когда вы говорите, что запрос не выполнен, приходит функция успеха.

Кстати, здесь есть жесткая зависимость, что ваши ответы всегда будутследуйте определенному порядку, который является неправильным .. может быть случай, когда вы отправляете 1,2,3 запроса, и порядок ответов будет 2,3 и 1, даже если 1 и 2 являются неудачными запросами. Таким образом, этот подход является своего роданеверно ..

правильной оценкой будет отправка идентификатора div (или div no) на ваш сервер, и вы отправите тот же идентификатор в качестве части вашего ответа .., так как ваш тип данных - текстВы можете просто добиться этого, изменив его на «json» (ищите abt json от google для вашего языка сценариев на стороне сервера), и ваш ответ должен быть следующим: 

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

Теперь проанализируйте этот json .. read abtРазбор JSON в JS.Самый простой способ - использовать eval (), но я бы не стал его рекомендовать ..

как только вы проанализируете его, вы можете использовать возвращаемый им объект следующим образом: 

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" }
                    });

надеюсь, что это имеет смысл..

...