Jump to content

odd behavior with $.ajax


Q695

Recommended Posts

Why does this source file seem to cause the ajax to crash after the first call to the function?

 

function swapContent(href, url_data, target) {
    $.ajax({
        type: 'GET',
        cache: false,
        url: href+'?' + url_data,  //add a variable to the URL that will carry the value in your i counter through to the PHP page so it know's if this is new or additional data
        success: function (data) { // this param name was confusing, I have changed it to the "normal" name to make it clear that it contains the data returned from the request
            //load more data to "target" value div
            target.innerHTML = (data); // as above, data holds the result of the request, so all the data returned from your results.php file are in this param but please see below
        }
    })
}
Link to comment
Share on other sites

It's dying after the first run.

 

Here's my jquery linking if that could cause the issue:
 

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
Link to comment
Share on other sites

You shouldn't have to append the data directly to the url - using the 'get' method will handle that for you, as well as JSON encoding the data. However, you do have to give the data to the ajax call.

$.ajax({
	type:'get',
	url:href,
	beforeSend:function(){
		$('#target').html("<p>Doing something - please wait.</p>");
	},
	data:url_data,
}).done(function(ajaxObject){
	var resp = JSON.parse(ajaxObject);
	if(resp.success == true){
		$('#target').html("<p>Woot!</p>");
	}else{
		$('#target').html('<p>Processing error - system returned false!</p>');
	}
}).error(function(){
	$('#target').html('<p>System error - not processing related!</p>');
});

Note that there' are both a done() and error() handler attached to this. sucess() will always fire as long as the call itself goes through - there's no guarantee that the processing was successful.

  • Like 1
Link to comment
Share on other sites

 The code you suggested I use broke, so I'm now trying to go from:

function swapContent(href, url_data, target) {
    $.ajax({
        type:'get',
        url:href,
        beforeSend:function(){
            target.innerHTML="Doing something - please wait.";
        },
        data:url_data,
    }).done(function(ajaxObject){
        var resp = JSON.parse(ajaxObject);
        if(resp.success == true){
            target.innerHTML="Woot!";
        }else{
            target.innerHTML='Processing error - system returned false!';
        }
    }).error(function(){
        target.innerHTML='System error - not processing related!';
    });
}

The error I get is "Uncaught SyntaxError: Unexpected token <"

crashed on:
Doing something - please wait.

 

Your $('#target') it didn't run.

Link to comment
Share on other sites

The $('#target').innerHTML was kind of a stub. I should've mentioned the code wasn't tested - sorry. My point was to get you moving in the right direction, not give you a cut and paste solution. It looks like you're passing target as a DOM reference, so the way you've got it set up now should be working. What's the output of the processing script in the console?

Link to comment
Share on other sites

You shouldn't have to append the data directly to the url - using the 'get' method will handle that for you, as well as JSON encoding the data. However, you do have to give the data to the ajax call.

$.ajax({
	type:'get',
	url:href,
	beforeSend:function(){
		$('#target').html("<p>Doing something - please wait.</p>");
	},
	data:url_data,
}).done(function(ajaxObject){
	var resp = JSON.parse(ajaxObject);
	if(resp.success == true){
		$('#target').html("<p>Woot!</p>");
	}else{
		$('#target').html('<p>Processing error - system returned false!</p>');
	}
}).error(function(){
	$('#target').html('<p>System error - not processing related!</p>');
});

Note that there' are both a done() and error() handler attached to this. sucess() will always fire as long as the call itself goes through - there's no guarantee that the processing was successful.

target is a variable, not a constant, so i can't put it in quotes.

Link to comment
Share on other sites

Right. As I said, target was just a thing - assign the value of that to a variable you can use.

 

If you're passing in a string reference to the DOM object (for instance:

swapContent('http://myURL.com', array('testing','more'), 'myDivID');

), this should work for you:

var tgt = '#' + target;

$(tgt).html('<p>Woot</p>');

If you're passing in the DOM object itself (as such:

swapContent('http://myURL.com', array('testing','more'), $('#myDivID'));

), just use it directly:

tgt.html('<p>Woot!</p>');
  • Like 1
Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.