CODEWITHSUNDEEP
phpjqueryajax
0123456789
0123456789

Reputation: 21

jQuery Ajax Call inside of PHP

I'm clearly doing something wrong here, but I can't figure out why the Ajax isn't firing and instead insists upon a page load. The newBatable() fires fine, I just can't seem to get the vote to respect the ajax call.

HTML - not sure how to put html in here as code :/ - I feel dumb. 

<form class="form-horizontal" id="batable1" action="vote.php" method="GET">
    <div id="success-vote-1"></div>
    <input type="radio" name="batableResult" value=" include ()" /> include ()<br/>
    <input type="radio" name="batableResult" value="require ()" />require ()<br/>
    <input type="radio" name="batableResult" value="both of above" />both of above<br/>
    <input type="radio" name="batableResult" value="None of above" />None of above<br/>
    <button class="btn btn-primary" onClick="vote(1)">Vote</button>
    <input type="hidden" name="batableId" id="batable-id" value="1"/>
</form>

JS - the console display everything I want, the php script processes everything nicely and functions perfectly, it is just it has to load the php in the browser so it's not using AJAX

/***************************************/
function newBatable() {
var batableData = $('#new-batable').serialize();
//console.log(batableData);
    $.ajax({
        url: "process.php",
        data: batableData,
        success: function(data){
            $('#success-new-batable').html(data);
        }
    });
}

/***************************************/
function vote(poll_id) {
//console.log(poll_id)
var batableId = "#batable" + poll_id;
//console.log(batableId)
var pollData = $(batableId).serialize();
//console.log(pollData);
    $.ajax({
        url: "vote.php",
        data: pollData,
        success: function(data){
            var batable_success_id = "#success-vote" + poll_id;
            $(batable_success_id).html(data);
        }
    });
}

Upvotes: -1

Views: 746

Answers (3)

Kyle
Kyle

Reputation: 2872

Since you're already using jQuery, as SubstanceD, you should use jQuery's on() method and stop the event propagation and prevent the default action (submitting the form).

I also noticed a possible bug in your code. It looks like there is a typo. You have

var batable_success_id = "#success-vote" + poll_id;

and <div id="success-vote-1"></div>. You have a dash after vote in the div's ID while you are concatenating batable_success_id into #success-vote1, for example. So even if the AJAX call is made, it probably won't update your HTML like you're expecting.

Upvotes: 1

azzy81
azzy81

Reputation: 2289

how about attaching a click event via jquery to the button?

$(".btn").on('click', function(e){
    e.stopPropagation()
    e.preventDefault();
    vote(1);
});

this would usually be placed in document .ready jquery in an external file or somewhere near the bottom of your page inside script tags.

Does this help?

Upvotes: 2

Quentin
Quentin

Reputation: 944455

The submit button fires the JavaScript and then immediately submits the form.

If you are using onclick, then return false to stop that.

You would be better off using a more modern event binding technique though.

Upvotes: 3

Related Questions