need help on jquery ajax

[funbinod]

hello all! greetings!

 

​i'm trying to learn jquery ajax request. before i was using xml http request.

 

after learning online, i tried the following code but its not working.

	$('#vname').blur(function(e) {
		alert('checking');
		$.ajax({
			url:"ajax/aid.php",
			data: {
				$('#vname').val();
			},
			error: function() {
				$('#vname').focus();
				$('#vname').css('background-color', '#F00');
			},
			dataType:"jsonp",
			success: function(result) {
				$('#vaid').val(result);
				$('#vname').css('background-color', '#1CDC06');
				$('#vamt').focus();
			},
			type:POST
		});
    });

please anyone help me learning this.

 

thank u.

[Ingolme]

"POST" should be wrapped in quotes.

type:POST

Have you checked the Javascript console for errors? You should always do that when developing in Javascript. If you're on Firefox I would recommend downloading the Firebug extension, but with or without that, most browsers will display the Javascript console by pressing the F12 key.

 

Instead of alert() use console.log() for debugging, you will see useful information shown in the Javascript console.

[funbinod]

thank u. its much helpfull.

 

i checked the console and it said there is a "syntax error" on the following line

			data: {
				$('#vname').val();
			},

after i delete the line and execute the blur function, i receive the data from error function

 

what could be the problem on the line?

[Ingolme]

The issue is a semi-colon inside an object declaration. Just remove the semi-colon. If you remove the whole line then no data will be sent.

[funbinod]

no. its not working even after removing the semi-column

	$('#vname').blur(function(e) {
		$.ajax({
			url:"ajax/aid.php",
			data: {
				$('#vname').val()
			},
			error: function() {
				$('#vname').focus();
				$('#vname').css('background-color', '#F00');
			},
			dataType:"jsonp",
			success: function(result) {
				$('#vaid').val(result);
				$('#vname').css('background-color', '#1CDC06');
				$('#vamt').focus();
			},
			type:'GET'
		});
    });

[Ingolme]

You should have the Javascript console open while the request is happening. There should be information about the request there, on the network tab. Firebug also shows any AJAX requests in the console tab itself.

[funbinod]

the console says

 

Uncaught SyntaxError: Unexpected string

[Ingolme]

Check the network tab and see what the response to the HTTP request was. The code expects a JSON response and the server probably is returning something different.

[funbinod]

i found the error that i forgot to give a name to the data to be sent.

			data: {
				name: $('#vname').val(),
				format: 'json'
			},

and i've to use comma inside the object declaration.

 

i found this on http://api.jquery.com/jquery.ajax/

 

thank u for ur support

[funbinod]

sorry! i again need to come back in this topic.

 

the error in the ajax request is solved (i think) but its each time returning error function.

 

 

this is the ajax request

$(document).ready(function(e) {
	$('#vname').blur(function(e) {
		$.ajax({
			url:"ajax/aid.php",
			dataType:"jsonp",
			contentType:"text/xml",
			type:'GET',
			data: {
				name: $('#vname').val()
			},
			success: function(result) {
				$('#vaid').val(result);
				$('#vname').css('background-color', '#1CDC06');
				$('#vamt').focus();
			},
			error: function() {
				$('#vname').focus();
				$('#vname').css('background-color', '#FF0');
			}
		});
    });
});

and this is the url where i send data and get data back...

header("content-type: text/xml");
$name = trim($_GET['name']);
if ($stmt =  $mysqli->prepare("SELECT aid FROM account WHERE name=? AND cid=?")) {
	$stmt->bind_param('si', $name, $cid);
	$stmt->execute();
	$stmt->bind_result($aid);
	$stmt->fetch();
	echo $aid;
}

i also checked network tab as you suggested. it shows status 200. but still returns the error function. please guide me..

[Ingolme]

Check the response body in the network tab.

[funbinod]

its "48" there...

[justsomeguy]

"48" isn't valid XML.

[funbinod]

then what is the suggestion @justsomeguy?

[Ingolme]

You have set the data type to "jsonp". If it's not proper JSON it won't be interpreted properly. You should set the data type to "text" or "html" if the JSON.

[funbinod]

uhhhh! thank u! it worked.

 

actually i'm new to jquery ajax and i don't know every part of this. thank u for guiding me to this.

[Ingolme]

You should read the documentation of any function before using it.

 

Here's the documentation for $.post(): http://api.jquery.com/jquery.post/

 

You can see the documentation for all the other functions here: http://api.jquery.com/