jQuery $.post isn't working

Question

I just started using jQuery, but i can't get it working.

On the index.php page I want a search form that posts to search.php. Following next, I want that the HTML of search.php (which will only be a table with the results), is inserted into the 'results' div in the index.php.

This is the code I'm using:

<script type="text/javascript">
  /* attach a submit handler to the form */
$(document).ready(function () {
    alert("Ok - 1");
    $("#zoeken").submit(function (event) {
        alert("Ok - 2");
        event.preventDefault();
        $.post("https://nodots.nl/labs/dd/search.php", $("#zoeken").serialize() {
            alert("Ok - 3");
            success: function (html) {
                $("#result").empty().html(html);
                alert("Ok - 4");
            }
        });
    });
});
</script>

The alerts are for debugging, but none of them shows up. Can anyone tell me what I'm doing wrong?

You'll get much better information if you use the browser's developer tools for debugging. It would tell you that you have `SyntaxError`s. And `console.log()` is just so much nicer than `alert()`. — RightSaidFred, Dec 07 '11 at 15:43

score 5 · Answer 1 · answered Dec 07 '11 at 15:39

Syntax error...

 $.post("https://nodots.nl/labs/dd/search.php", $("#zoeken").serialize(){
 alert("Ok - 3"); 
 success: function(html){
 $("#result").empty().html(html);
 alert("Ok - 4");
 }
 });

On your first line, it should read instead:

$.post("https://nodots.nl/labs/dd/search.php", $("#zoeken").serialize(), function() {

score 4 · Answer 2 · answered Dec 07 '11 at 15:38

4

I am not sure what you are doing.

The proper format for $.post() is:

$.post(url, post_items, callback);

What you should have is:

    $.post("https://nodots.nl/labs/dd/search.php", $(this).serialize(), 
                                                   //this is the form!
        function(html) {
            $("#result").empty().html(html);
            alert("Ok - 4");
        }
    });

answered Dec 07 '11 at 15:38

Naftali

144,921
39
244
303

I did this now, but the result aren't showing up in the #result div. – BlueCola Dec 07 '11 at 18:35

Rion Williams · Accepted Answer · 2011-12-07T15:45:48.210

2

I believe that for $.post, the third argument is actually the success function, like so:

$.post("URL","ARGUMENTS","SUCCESS FUNCTION");

so for your needs:

$.post("https://nodots.nl/labs/dd/search.php", $("#zoeken").serialize(), 
    function(html)
    {
        $("#result").empty().html(html);
        alert("Ok - 4");
    }
});

Entire Code:

<script type="text/javascript"> 
$(document).ready(function () {
    alert("Ok - 1");
    $("#zoeken").submit(function (event) {
        alert("Ok - 2");
        event.preventDefault();
        alert("Ok - 3");
        $.post("https://nodots.nl/labs/dd/search.php", $("#zoeken").serialize(),
            function(html) {
                $("#result").empty().html(html);
                alert("Ok - 4");
            }
        });
    });
});
</script>

edited Dec 07 '11 at 15:45

answered Dec 07 '11 at 15:40

Rion Williams

74,820
37
200
327

You can see the result at: http://www.nodots.nl/labs/dd/index.php. As you can see, it still isn't working. Chrome is complaining about a 'unexpected token }', but i cant find the mistake. – BlueCola Dec 07 '11 at 18:28
Ok, i did find the mistake, and i get the alert 1 to 4. But it doesn't show the results in the #result div. – BlueCola Dec 07 '11 at 18:34
I looked through it, I was about to mention that it seemed like you fixed the syntax issue. I noticed a "XMLHttpRequest cannot load https://nodots.nl/labs/dd/search.php. Origin https://www.nodots.nl is not allowed by Access-Control-Allow-Origin." error. You might want to check out the following link to help resolve that : http://stackoverflow.com/questions/3595515/xmlhttprequest-error-origin-null-is-not-allowed-by-access-control-allow-origin Hope this helps :) – Rion Williams Dec 07 '11 at 18:38
All right! The header('Access-Control-Allow-Origin: *'); did the trick. Can you explain me how you found out the error 'XMLhttprequest etc...'? – BlueCola Dec 07 '11 at 18:45
Using Chrome I was just checking the console, it alerts any errors that occur on the page (or in jQuery / Javascript). That was the exact message it put out. You can use Firebug in Firefox and IE will often notify you of a script error in the lower left corner :) – Rion Williams Dec 07 '11 at 18:47

jQuery $.post isn't working

3 Answers3