Jump to content
Q695

odd behavior with $.ajax

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

Share this post


Link to post
Share on other sites

What error do you get? What is the response data from the server?

Share this post


Link to post
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>

Share this post


Link to post
Share on other sites

"Dying" does not mean anything. We cannot problem solve from "it's dying".

 

Is there an error? What is the expected server response? What response are you getting?

  • Like 1

Share this post


Link to post
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

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

i knew that already, i was hoping that maxxd would be able to advise me on what i missed.

Share this post


Link to post
Share on other sites

It's not in what you posted. The error should give you a line number or reference.

Share this post


Link to post
Share on other sites

my function works, but they're suggesting improvements to it.

Share this post


Link to post
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?

Share this post


Link to post
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.

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

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.