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