How to use ajax in wordpress

Is jquery.min.js queued in the page? if not, then consider doing it:

add_action('wp_enqueue_scripts', 'enqueue_jquery_min');
function enqueue_jquery_min() {

	wp_deregister_script('jquery');
	wp_register_script('jquery', "//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js", false, null);
	wp_enqueue_script('jquery');

}

An example:

<?php

add_action('wp_enqueue_scripts', 'enqueue_jquery_min');
function enqueue_jquery_min() {

	wp_deregister_script('jquery');
	wp_register_script('jquery', "//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js", false, null);
	wp_enqueue_script('jquery');

}
add_action('wp_footer', 'my_ajax_code');
function my_ajax_code() {
	?>
		<script>
		$(document).ready(function(){
			$('button').click(function() {
				$('button').css('opacity','.7');
				$.ajax({
					url : "<?php echo home_url('/'); ?>",
					type : "post",
					success: function(){
						alert("Success!");
						$('button').css('opacity','1');
					}
				})
				event.preventDefault();
			})
		})
		</script>
	<?php
}
?>
	<button>Click meh!</button>

Hello. I don’t know if its queued

I just added it like this to one of my pages. I can use j query fine anywhere on any page on my site.

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js”></script&gt;

I put my java script functions in my footer.php file. That is where the function where i call my Ajax query in at. Jquery works well. I tried what you said in my footer.php it looks like this

[insert_php]

add_action(‘wp_enqueue_scripts’, ‘enqueue_jquery_min’);
function enqueue_jquery_min() {

wp_deregister_script(‘jquery’);
wp_register_script(‘jquery’, “//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js”, false, null);
wp_enqueue_script(‘jquery’);

}

[/insert_php]

<script type=”text/javascript”>

$(document).ready(function(){

$.ajax({

url: “https://www.google.com&#8221;,
success: function( data ) {
alert( ‘hi!’);
}
});

});

</script>

not working still ,thanks

Try to test it with your own site instead of Google, if you are the last code I pasted didn’t work as well..

still doesn’t work.

the
$(document).ready(function(){

works

anything else thanks.

This is little confusing, sometimes queuing scripts not in the right way causes conflicts, and things not working ( the example I provided worked for me )

To enqueue inline JS the right way, use wp_footer hook instead of throwing everything in theme’s footer file, same thing with the jquery.min.js if you don’t queue it with wp_enequeue_scripts.. hopefully there was a conflict and this solves it..

By the way, is this the script you actually use? how do you tell jQuery to recognize that button?

<script type="text/javascript">

$(document).ready(function(){

$.ajax({

url: "https://www.google.com",
success: function( data ) {
alert( 'hi!');
}
});

});

</script>

I would highlight using a selector:

$('selector(class, id, tag, name, .. )').click(function() {
  // ajax
})

By the way, when I put Google on the url parameter, it doesn’t respond, maybe Google is blocking those requests so I use my own site and it works..

No i had a button hooked up to it, but i usd the code above to prove that jquery is working fine. Where is wp_footer hook can you show me how to use it with my js functions in my footer.php

is wp_footer for php? or js

Oh, I see.

wp_footer outputs any markup you put through a function hooked to it, in the footer of your site (before body closing tag), like this from previous example:

add_action('wp_footer', 'my_ajax_code');
function my_ajax_code() {
	?>
		<script>
		$(document).ready(function(){
			$('button').click(function() {
				$('button').css('opacity','.7');
				$.ajax({
					url : "<?php echo home_url('/'); ?>",
					type : "post",
					success: function(){
						alert("Success!");
						$('button').css('opacity','1');
					}
				})
				event.preventDefault();
			})
		})
		</script>
	<?php
}

add_action('wp_footer', 'add_my_js');
function add_my_js() {
	?>
		<script type="text/javascript">// your inline scripts go here</script>
	<?php
}

And those codes could be added to your child theme’s functions file.

can i put this code on any page and in the php tags like this

[insert_php]

[/insert_php]

i use them with a php plugin to support php

I dont understand why are you php tags upside down

add_action(‘wp_footer’, ‘add_my_js’);
function add_my_js() {
?>
<script type=”text/javascript”>// your inline scripts go here</script>
<?php
}

is add_action(‘wp_footer’, ‘add_my_js’); php?

haha yes everything’s PHP! you have a theme out there? then use its functions.php file ( beware, post it in the end of the file, if there is a php closing tag ?> remove it before adding code )

worked thanks alot. love ya

Awesome! wasn’t expecting things to work this fast, but yeah, the conflict between scripts is now gone!

Thank you too, you’ve been helpful! mark this as resolved and have a nice day ?? !!

excuse me how come when i do this

var username=”johnboyman”
var password=”french”;
$.ajax({
type: “POST”,
url: “https://www.mysite.ca/wordpress/wp-admin/admin-ajax.php&#8221;,
data: “name=”+username+”&password=”+password,
success: function(html){

if(html==’true’) {
$(“#add_err”).html(“right username or password”);

}
else {
$(“#add_err”).css(‘display’, ‘inline’, ‘important’);
$(“#add_err”).html(“<img src=’images/alert.png’ />Wrong username or password”);
}
},
beforeSend:function()
{
$(“#add_err”).css(‘display’, ‘inline’, ‘important’);
$(“#add_err”).html(“<img src=’images/ajax-loader.gif’ /> Loading…”)
}
});
return false;

it works but when I do

var username=”johnboyman”
var password=”french”;
$.ajax({
type: “POST”,
url: “https://www.mysite.ca/wordpress/wp-admin/login.php&#8221;,
data: “name=”+username+”&password=”+password,
success: function(html){

if(html==’true’) {
$(“#add_err”).html(“right username or password”);

}
else {
$(“#add_err”).css(‘display’, ‘inline’, ‘important’);
$(“#add_err”).html(“<img src=’images/alert.png’ />Wrong username or password”);
}
},
beforeSend:function()
{
$(“#add_err”).css(‘display’, ‘inline’, ‘important’);
$(“#add_err”).html(“<img src=’images/ajax-loader.gif’ /> Loading…”)
}
});
return false;

it doesnt work

i can only use this ajax query on admin-ajax.php and no other files

why is that, i am trying to query login and sign in scripts how do i make this work. thanks

even if i put the login.php right next to the admin-ajax.php file