I am trying to get to run a php loop once i press on a radio button. I realize that i have to do this using ajax. I am very new to ajax so im having a hard time getting this done. What happens now is that i cannot even press the radio button anymore and nothing shows up.
what i tried so far:
my loop(which works fine): magazines.php:
<?php
$args = array( 'post_type' => 'magazine', 'posts_per_page' => 10 );
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post();
the_title();
echo '<div class="entry-content">';
the_content();
echo '</div>';
endwhile;
}
?>
Ajax in main page:
$('radio').click(function() {
$.ajax({
url: 'magazines.php',
success: function(){
alert('success');
}
});
return false;
});
Any help would be appreciated. Thanks!
Try this
$('body').on('click','input:radio',function() {
$.ajax({
url: 'magazines.php',
success: function(data){
$('#your-selector').html(data);
}
});
})
radio
is a type selector, it matches <radio>
elements which you don't have (and which don't exist in HTML).
You need to write a selector that actually matches your elements. e.g. input
.
please try this
$('radio').click(function() {
$.get('magazines.php', {}, function(){
alert('success');
});
});
try this: its tested
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script>
$(function(){
$('input:radio').click(function() {
console.log("clicked");
$.ajax({
url: 'magazines.php',
success: function(response){
console.log(response);
alert('success');
}
});
return false;
});
});
</script>