odd behavior with $.ajax

[Q695]

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

[denno020]

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

[Q695]

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>

[scootstah]

"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?

[maxxd]

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.

[Q695]

 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.

[scootstah]

So, somewhere you have a stray "<". Find it.

[Q695]

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

[scootstah]

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

[Q695]

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

[maxxd]

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?

[Q695]

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.

[maxxd]

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>');