Multiple Ajax requests issue

[deraad]

I have two functions that work fine individually, but when used together, create the other function not to work for some reason.. :'(

My first function submits a form using ajax:

$(function() {

  $("#saveList").click(function() {
  
	  var listname = $("input#listname").val();
		if (listname == "") 
		{
		    $('#listnameError').fadeIn("slow");
		    setTimeout("$('#listnameError').fadeOut('slow')", "1200");
			return false;
   		 }
   		 
         	$('#loading').fadeIn("slow");
   var hiddenid = $("input#hidden_id").val();
	  var todo1 = $("input#todo1").val();
	  var todo2 = $("input#todo2").val();
	  var todo3 = $("input#todo3").val();
	  var todo4 = $("input#todo4").val();
	  var todo5 = $("input#todo5").val();
	  var todo6 = $("input#todo6").val();
	  var todo7 = $("input#todo7").val();
	  var todo8 = $("input#todo8").val();
	  var todo9 = $("input#todo9").val();
	  var todo10 = $("input#todo10").val();
	  var dataString = 'listname='+ listname + '&hidden_id=' + hiddenid + '&todo1=' + todo1 + '&todo2=' + todo2 + '&todo3=' + todo3 + '&todo4=' + todo4 + '&todo5=' + todo5 + '&todo6=' + todo6 + '&todo7=' + todo7 + '&todo8=' + todo8 + '&todo9=' + todo9 + '&todo10=' + todo10;
		
		$.ajax({
      type: "POST",
      url: "save.php",
      data: dataString,
      success: function() 
          {				
      		$('#loading').fadeOut("slow");
      		$('#sucessAlert').fadeIn("slow"); 
        	setTimeout("$('#sucessAlert').fadeOut('slow')", "2200");
        	setTimeout('disableForm(false)', '1300');
      	  }

     });
     return false;
});
});

This function saves users lists, and works perfectly in all browsers; However, once I add my other function that updates a portion of the page, it creates a very strange result, making them both work fine at first, then after saving a few lists, the first function stops working completely...

Here is the second function which updates part of the page(and is causing the first function to stop working):

function currentLists()
{
var xmlhttp;
if (window.XMLHttpRequest)
  {
  xmlhttp=new XMLHttpRequest();
  }
else
  {
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("allLists").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","currentlists.php?t=" + Math.random(),true);
xmlhttp.send();
}

I'm guessing that something about the http requests on the second function somehow interferes with the first ajax function, and I need them to work together

thanks in advance for your help!

[ddymacek]

if you post your full form code I will try to debug it, as far as the functions they appear to be fine and I don't know why they would interfere with each other off hand.

[deraad]

Thanks ddymacek, heres the full form code, also if it helps, you can see the source on the actual site, you can log in with a dummy account i made
http://www.listbrew.com/login.php
email: [e-mail]
password: guest

<form action="" method="post" name="formNotepad" id="formNotepad">
			<span id="number">Title:</span><input type="text" id="listname" name="listname" class="text-input" value="" onFocus="javascript:this.focus();this.select();" onKeyup="checkEmpty()" maxlength="30" /><br />
			<span id="number">1.</span> <input type="text" id="todo1" name="todo1" class="text-input" onKeyup="checkEmpty()" value="" maxlength="90" /><br />			
			<span id="number">2.</span> <input type="text" id="todo2" name="todo2" class="text-input" onKeyup="checkEmpty()" value="" maxlength="90" /><br />
			<span id="number">3.</span> <input type="text" id="todo3" name="todo3" class="text-input" onKeyup="checkEmpty()" value="" maxlength="90" /><br />
			<span id="number">4.</span> <input type="text" id="todo4" name="todo4" class="text-input" onKeyup="checkEmpty()" value="" maxlength="90" /><br />
			<span id="number">5.</span> <input type="text" id="todo5" name="todo5" class="text-input" onKeyup="checkEmpty()" value="" maxlength="90" /><br />
			<span id="number">6.</span> <input type="text" id="todo6" name="todo6" class="text-input" onKeyup="checkEmpty()" value="" maxlength="90" /><br />
			<span id="number">7.</span> <input type="text" id="todo7" name="todo7" class="text-input" onKeyup="checkEmpty()" value="" maxlength="90" /><br />
			<span id="number">8.</span> <input type="text" id="todo8" name="todo8" class="text-input" onKeyup="checkEmpty()" value="" maxlength="90" /><br />
			<span id="number">9.</span> <input type="text" id="todo9" name="todo9" class="text-input" onKeyup="checkEmpty()" value="" maxlength="90" /><br />
			<span id="number">10.</span> <input type="text" id="todo10" name="todo10" class="text-input" onKeyup="checkEmpty()" value="" maxlength="90" /><br />
			<input type="hidden" id="username" name="username" value="$username" class="text-input" />
			<input type="hidden" id="hidden_id" name="hidden_id" value="$randomNumber" class="text-input" />
			<br>
			<input type="submit" id="saveList" name="submit" style="display: " value="Save List" class="button" /> 
			</form>

Thanks!

[deraad]

Sorry, forgot to give the URL
http://www.listbrew.com/login.php

[Airshow]

Deraad,

I can't see anything obvious that would give those symptoms.

Thoughts ...

Could be something in disableForm. Maybe the form becomes permanently disabled?

setTimeout : First parameter is better written as a function not string.
setTimeout : Second parameter should be an integer (milliseconds) not string.

You should be able to use .serialize() to replace the block of .val() statements and DIY string building.

It's a little odd that the first function uses jQuery.ajax while the second uses raw javascript. It would be more normal to use jQuery for both.

Tidying everything up, you should end up with something like this:

$(function() {
	var $saveList = $("#saveList");
	var $listname = $("input#listname");
	var $listnameError = $("#listnameError");
	var $hidden_id = $("input#hidden_id");
	var $loading = $("#loading");
	var $sucessAlert = $("#sucessAlert");
	var $allLists = $("#allLists");
	var $form = $("#formNotepad");
	  
	$saveList.click(function() {
		if ($listname.val() === ""){
			$listnameError.fadeIn("slow");
			setTimeout(function(){ $listnameError.stop(true,false).fadeOut('slow') }, 1200);
			return false;
		}
		$loading.fadeIn("slow");
		$.ajax({
			type: "POST",
			url: "save.php",
			data: $form.serialize(),
			success: function(){
				$loading.fadeOut("slow");
				$sucessAlert.fadeIn("slow"); 
				setTimeout(function(){ $sucessAlert.stop(true,false).fadeOut('slow'); }, 2200);
				setTimeout(function(){ disableForm(false); }, 1300);
			}
		});
		return false;
	});
	
	$("#getLists").click(function(){//assumed event, change to whatever is approprite
		$.ajax({
			type: "GET",
			url: currentlists.php,
			cache: false
			success: function(response){
				$allLists.html(response);
			}
		});
		return false;
	});
});

Airshow

[ddymacek]

yeah, I went to your site.
I see the issue that you lose your submit button. it is display:none and disabled
when you click on an existing list.
so when you call your function emptyList();
you can add something like:

document.formNotepad.saveList.disabled = false;
document.formNotepad.saveList.style.display = block;  
// or something to change the style and display of your save button.
//I also noticed in your 'saveList' function this line
disableForm(true)
//has no ending ;

It appears as the code is functioning rather well, use firebug to inspect elements in firefox it is a great debugging tool.
I would suggest, that, when a user selects an 'old' or established list, that you actually create an 'update' button, make a call similar to save and they can then update an old list, and always have one of those 2 buttons active, 'save', pertaining to a new list, or 'update'.

[deraad]

Airshow,

Thank you very much for writing all that out for me, unfortunately the code you gave me is making my form reload the page and is not working, I'm going to fiddle with it until I can make it work though, because your code looks much more efficient, thanks again

[deraad]

I found the issue, it wasn't even an error on the page it shows up on, its from the page where the lists were stored. Thanks anyways for your help everybody

[Airshow]

Deraad,

"Solved" noted.

You can simplify the javascript and HTML enormously by coding more in jQuery than just that one function.

Take the onclick handler attached to all the divs with id="listN" for example. The following code would replace the existing function show() and all the

onClick="show(this)"

statements in the HTML:

var $todoInputs = $right.find("input[name^='todo']");
$("div[id^='list']").click(function(){
	var $list = $(this).find("p");
	$list.each(function(i){
		$todoInputs.eq(i).val(this.innerHTML);
	});
});

untested

It is generally a good idea to attach event handlers in javascript rather than HTML.

Airshow

[Airshow]

Deraad,

Airshow,

Thank you very much for writing all that out for me, unfortunately the code you gave me is making my form reload the page and is not working, I'm going to fiddle with it until I can make it work though, because your code looks much more efficient, thanks again

It's easier to control form submission by attaching the handler to the form's onsubmit event rather than a submit button.

The jQuery patern is :

$myForm.submit(function(){
  //do ajax stuff here
  return false;//suppress normal HTML form submission
})

Sometimes you might want to do ajax under certain conditions and normal HTML form submission under others, in which case do as follows:

$myForm.submit(function(){
  if(myCondition){
    //do ajax stuff here
    return false;//suppress normal HTML form submission
  }
  else{
    return true;//allow normal HTML form submission
  }
})

Airshow

[deraad]

Thanks Airshow, I appreciate all those tips, I'm definitely going to use your method, instead