Stuck on weird jQuery error_问答_开发者_运维开发者技术经验分享

Ok, here is my code, it is stored in an external js file, and properly included in the main html in head section.

$(document).ready(function(){
    var checkForConfirmation = function(){
    for(var i=0; i<myOrders.length; i++){
        $.ajax({
            type: "GET",
            url: "orderStatus.php",
            data: {action: 'get', id: myOrders[i]},
            success: function(data){
                if (data){
                    var reply = jQuery.parseJSON(data);
                    $("#fancyAlertLink").fancybox().trigger('click');
                    myOrders.splice(myOrders[i], 1);
                }
            }
        });
        if (myorders.length == 0){
            clearInterval(waitForRestourantInterval);
        }
    }
}
if (myOrders.length > 0){
    var waitForRestourantInterval = setInterval(function(){checkForConfirmation()}, 5000);
}
});

As you can see, I'm trying to display a fancybox when the back-end script ("orderStatus.php"), gets the right data.

Everything works fine if I don't use jQuery (example: window.alert instead of fancybox), but when I try to use jQuery inside this function, I get a weird error.

Firebug says that there is an error on line $("#fancyAlertLink").fancybox().trigger('click');

There is no error description, just"$("

What am I doing wrong???

Sorry. I know this is not an answer, but I can't put it all in comment. Here is the "updated" code. Error is gone now, but fancybox still will not trigger from my script.

EDIT: The trigger doesn't work when inside the success function. I tried to move it outside and it works. The problem is I really need it inside the success. I tried to move the trigger invoke in separate function and call the function from success, but same result. Doesn't work! Any suggestions?

confirmationDaemon.js

$(document).ready(function(){
var checkForConfirmation = function(){
    for(var i=0; i<myOrders.length; i++){
        $.ajax({
            type: "GET",
            url: "orderStatus.php",
            data: {action: "get", id: myOrders[i]},
            context: i,
            success: function(data){
                if(data!="null"){
                    var reply = jQuery.parseJSON(data);
                    $("#fancyAlertLink").trigger("click");
                    myOrders.splice(this, 1);
                }
            }
        });
        if (myOrders.length == 0){
            clearInterval(waitForRestourantInterval);
        }
    }
}
if (myOrders.length>0){
    var waitForRestourantInterval = setInterval(function(){checkForConfirmation()}, 5000);
}
});

main html file: (smarty+html, smarty {literal} tags ignored in this post)

<html>
    <head>
        <script src="jquery-1.4.4.min.js" type="text/javascript"></script>
        <script src="fancyBox/jquery.fancybox-1.3.4.pack.js" type="text/javascript"></script>
        <link rel="开发者_高级运维stylesheet" href="fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
        <script type="text/javascript">
            var myOrders = new Array();
            {foreach from=$smarty.session.my_orders item=id}
                myOrders.push({$id}):
            {/foreach}
        </script>
        <script type="text/javascript">
            $(document).ready(function{
                $("#fancyAlertLink").fancybox();
            });
        </script>
        <script src="confirmationDaemon.js" type="text/javascript"></script>
    </head>
    <body>
        --- some content here ---
        <a id="fancyAlertLink" href="#fancyAlert">Show fancy</a>
        <div style="display:none">
            <div id="fancyAlert">Fancybox hell yeah!!!</div>
        </div>
    </body>
</html>

Set intervals and AJAX work as expected. The fancybox shows when I click on the "Show fancy" link. But it doesn't get triggered from the external js. I debugged it. It should work, it executes that line, but nothing appears

Here's one problem you're going to have: when you set up those AJAX calls inside your "for" loop, the code in the "success" handler references the variable "i" that's used for the loop iterations. That's going to be a big problem, because all of the functions will reference the same variable "i". Thus when the functions are actually invoked, asynchronously when the HTTP requests complete, they'll all see the same value of "i" (which will be the last value "i" had when the loop ran).

To get around that problem, set up your "success" handlers a little differently:

        success: (function(i) {
          return function(data) {
            if (data){
                var reply = jQuery.parseJSON(data);
                $("#fancyAlertLink").fancybox().trigger('click');
                myOrders.splice(myOrders[i], 1);
            }
          };
        })(i)

Doing it like that will ensure that each separate handler has its own copy of "i", and a copy with the correct value.

EDIT: There's likely a few problems.

You're passing myOrders[i] to .splice(). I assume it doesn't contain an index number like .splice() requires.
The value of i problem described below.
Even with those two problems resolved, you still have an issue because .splice() modifies the Array, so any index number higher than one that was used in the splice is obsolete, because your .splice() is removing items from the Array.

You're doing:

myOrders.splice(myOrders[i], 1);

in a success: callback to an asynchronous AJAX call. By the time this code fires, i is the same value of length, so there's no item at that index.

In other words the last item is length - 1, but i == length so myOrders[i] == undefined.

One simple and efficient fix would be to set myOrders[i] as the context parameter of the AJAX call.

    $.ajax({
        type: "GET",
        url: "orderStatus.php",
        context: myOrders[i],

Then in the success: callback, this will refer to that item.

       success: function(data){
            if (data){
                var reply = jQuery.parseJSON(data);
                $("#fancyAlertLink").fancybox().trigger('click');

                 //  -------------v-----references the proper item
                myOrders.splice( this, 1);
            }
        }

try to trigger the click on the element, e.g $('#fancyAlertLink').trigger('click');