0

I have a page that uses AJAX to call for some html from a php script. In that html are many forms of a certain class with unique id's. Upon clicking the submit button the desire is to submit the form to a php script through AJAX so the page doesn't reload or redirect.

I have followed the examples of many tutorials ( Here for example ) and they all work... If i throw an alert in the $(document).ready(function(){...}); that wraps them. I have attempted at least three or four methods and the result is the always the same. Without an alert() in the .ready() the form POSTS to the current page.

So what I'm looking for is the fix for needing to throw up an alert() before calling the function that sends the POST since without it the POST is not caught by AJAX and just posts to the current .php file.

AJAX

function formSubmit(form) {

    var element = $(form);
    var id = element.attr("id");
    var form = new FormData($('#' + id)[0]);

    $.ajax({
        type: "POST",
        url: "deleter.php",
        data: form,
        cache: false,
        contentType: false,
        processData: false,

    });
}

$(document).ready(function () {
    alert(''); // Taking this out causes problems

    $('.delete_form').on('submit', function (event) {
        event.preventDefault();
        formSubmit(this);

    });
});

HTML

<div class="box">
    <div class="image">
        <a href='.htmlspecialchars($string).'><img src="blank.gif" data-src="'.htmlspecialchars($small).'" width="250" height="376"></a>
    </div>
    <div class="boxOffice">
        <form class="delete_form" id="'.$form_count.'">
            <input  type="hidden" name="delete_link" id="delete_link"value="'.  $string .'" />
            <input  type="submit" name="submit" class="submitButton" id="deleteLinkButton" value=""/>
        </form>
    </div>
</div>

I realize there are about 200 questions related to this... i know because i tried their solutions. I'm very new to AJAX ( this is my first project with it ) and I'm out of ways to re-arrange the code with the same result.

If it's needed I'll include the code i use to get the html i included.

--EDIT-- Someone pointed out that the problem may be other JS on the page interfering with the call etc. So I'm attaching all the JS code on the page exactly how it currently is. In this state the POST is executing as expected but as soon as I remove the alert() it doesn't.

Interesting note, as I was grabbing the code I moved the getImages() call in and out of the ready() and it does seem to affect if the POST code works correctly. I have no clue why but it may be a clue.

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="jquery.unveil.js"></script>

<script>
    $(document).ready(function () {
        alert(''); // Taking this out causes problems


            $('.delete_form').on('submit', function (event) {
                event.preventDefault();

                var element = $(this);
                var id = element.attr("id");
                var form = new FormData($('#' + id)[0]);

                $.ajax({
                    type: "POST",
                    url: "deleter.php",
                    data: form,
                    cache: false,
                    contentType: false,
                    processData: false,

                });
            });

    });

    getImages(); // Moving this inside the .ready(func(){...}) breaks the POST ?? 

    function getImages() {
        $.ajax({
            type: "GET",
            url: "http://localhost/linkler/get_images.php?tag=chubby",
            cache: false,
            timeout: 30000,
            success: function(html){
                $('body').append(html);
                $("img").unveil(); 
            }
        });
        return false;
    }

</script>
Community
  • 1
  • 1
user3589547
  • 3
  • 2

3 Answers3

0

Not sure exactly what's the issue, but your js can be simplified: 

$(document).ready(function() {

    $('body').on('submit', '.delete_form', function (ev) {
        ev.preventDefault();
        $.ajax({
              type: "POST",
              url: "deleter.php",
              data: $( this ).serialize(),
              success:function(data){
                   alert(data);
              },
              error:function(data){
                   alert(data);
              },


        });

    });
});

EDIT you are loading the forms via ajax correct? In which case you must bind your function to the parent element (body). See my syntax change.

BenMorel
  • 34,448
  • 50
  • 182
  • 322
Steve
  • 20,703
  • 5
  • 41
  • 67
  • Tried to use this. Didn't work even with an `alert()`. – user3589547 Apr 30 '14 at 17:16
  • @user3589547 then something else is interfering somewhere. Perhaps you have some other js on the page? – Steve Apr 30 '14 at 17:54
  • Please also check the javascript console in your browser for errors – Steve Apr 30 '14 at 17:58
  • The console shows a `getPreventDefault() is deprecated` warning from `"http://code.jquery.com/jquery-1.9.1.js"`. There are no other errors and with the `alert()` everything works as expected... See the edit on the question for the current set of code I'm working with. – user3589547 Apr 30 '14 at 19:26
  • @user3589547 what happens if you completely remove the getImages() function? – Steve Apr 30 '14 at 19:51
  • @user3589547 See my edit. Im guessing your getImages call is creating the html forms. It works with alert because it gives time for the getimages ajax to complete before you attempt to attach handlers to the dynamic html. – Steve Apr 30 '14 at 19:58
  • I removed the function and threw up a simple form as a place holder for what would have been generated and it seemed to work correctly. I'm making the changes in your edit now. – user3589547 Apr 30 '14 at 20:49
  • This is the solution. Once I knew what to search for I found [this tutorial](http://www.learningjquery.com/2008/03/working-with-events-part-1/) that works through what is going on and it was clear what the issue was. – user3589547 Apr 30 '14 at 21:07
  • @user3589547 We got there in the end! Glad you have it working now. – Steve Apr 30 '14 at 21:18
0

Just take this method out of document ready part

 $('.delete_form').on('submit', function (event) {
        event.preventDefault();
        formSubmit(this);

    });
Samy Massoud
  • 4,295
  • 2
  • 35
  • 48
  • This didn't work. I pulled those exact lines out of the doc ready. Section and left everything else the same. Same issue. – user3589547 Apr 30 '14 at 17:15
0

I think its about timing. Thats why the "alert('')" cannot be removed . Change the script to something like 

function delete_form_init(){
 $('.delete_form').on('submit', function (event) {
    event.preventDefault();
    formSubmit(this);
    }



function formSubmit(form) {

var element = $(form);
var id = element.attr("id");
var form = new FormData($('#' + id)[0]);

$.ajax({
    type: "POST",
    url: "deleter.php",
    data: form,
    cache: false,
    contentType: false,
    processData: false,

});
}

$(document).ready(function () {
   delete_form_init();

});

});

This way the function delete_form_init will be insert into the model before the .ready calls it

user2583714
  • 1,097
  • 2
  • 11
  • 18
  • I was hopeful for this response, it seemed to make sense based on other tutorials I had read ( and foolishly didn't save the url to. ). However this didn't work... Though could you check the code again since you have a floating `});`... – user3589547 Apr 30 '14 at 17:19
  • Is this the only form on the page. If you dont mind you can kill all the forms $( document ).ready ( function () { $( "form" ).submit ( function ( e ) { e.preventDefault ( ) ; } ) ; } ) ; – user2583714 May 01 '14 at 12:52