jQuery Ajax PHP issue

Question

Probably a duplicate of a question somewhere, but I don't care. I've tried googling, but have not found an answer.

What am I doing wrong?

$(document).ready(function() {
$("#foo").click(function() {
    $.ajax({
       type    : "POST",
       cache   : false,
       url     : "map.php?map=refresh",
       data    : $(this).serializeArray(),
       success: function(data) {
        $("#container").html(data); 
       }
      });
});
});

I've tried .click(function() {, .sumbit(function() {, .bind("submit", function() {, and I believe others.

<form id="foo">
    <div id="inner"><input id="move" name="left" type="button" value="LEFT" /></div>
    <div id="inner"><input id="move" name="right" type="button" value="RIGHT" /></div>
    <div id="inner"><input id="move" name="down" type="button" value="DOWN" /></div>
    <div id="inner"><input id="move" name="up" type="button" value="UP" /></div>
</form>

I've got <div id="container" style="width:660px; height:660px;"> which contains a lot of stuff, but I'd just like it to be replaced: WORKED

$("#foo").click(function() is wrong.try $("#foo input").click(function() — MIIB
– MIIB, Commented Mar 4, 2014 at 22:20
MIIB is right. And use $("#foo").on('click', function()... and not $("#foo").click(function()... Form is not clickable. The button and others elements IN this form are clickables. — Portekoi
– Portekoi, Commented Mar 4, 2014 at 22:21

Pattle · Accepted Answer · 2014-03-04 22:43:50Z

2

$("#foo").submit(function() { should work but if you are going to go the for .click event handler you want it to be on the inputs. So rather than doing this

$("#foo").click(function() {

You need to do

$("#foo input").click(function() {

Also you'll need to stop the default event so the page doesn't refresh. This could be where you are going wrong. So you need to do

$("#foo input").click(function(e) {
    e.preventDefault();

    //Ajax call
});

Please note you all of your input field contain the same id of "move" which will invalidate the HTML

edited Mar 4, 2014 at 22:43

answered Mar 4, 2014 at 22:23

Pattle

6,0358 gold badges37 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Witold Kowelski Over a year ago

I've changed the id's to move1, move2, etc. I changed the names to "l", "r", "d", and "u" since I had some anchors with id's of "left", "right", etc. (just in case there was some issue there). I've also changed it to $("#foo input").click(function() {, but it still doesn't work...

Pattle Over a year ago

What happens if you do an alert('here') inside of your .click function? Does it work? Also does the page refresh?

Witold Kowelski Over a year ago

alert('here'); does nothing. No page refreshes.

Pattle Over a year ago

try adding method and action attributes to your form like <form id="foo" method="post" action="">

Witold Kowelski Over a year ago

<form id="foo" method="post" action="map.php?map=refresh">....still nothing. If I change the buttons to submits, then it refreshes the page, but doesn't change the div.

|

Collectives™ on Stack Overflow

jQuery Ajax PHP issue

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related