call a method with jQuery AJAX

Question

Hello,

I have this code to try and call a method from my controller in codeigniter,

$("#Blog").click(function () {
    var url = $(this).attr("href");
     $.ajax ({
         url: "index.php/home/category",
         type: "POST",
         success : function (html) {
             $("#right-content").append(html);
         }
     });
 });

The ajax does not seem to be getting fired, is there something that I am missing, the #Blog represents the ID of a link in my navigation menu, all that happens is the link works as normal.

Someone please help :-(

Answer 1

If you are overridding clicking on anchors, remember to block the default behavior of the link (i.e. jumping to the linked page).

So you might start with a change:

$("#Blog").click(function (ev) {
           ev.preventDefault();
           var url = // ... the rest as before.

Answer 2

You need to prevent the normal link behavior from taking place.

$("#Blog").click(function (e) {
    var url = $(this).attr("href");

    // Block the normal click action
    e.preventDefault();

    // Create post
    $.post (
        "index.php/home/category", // <- request URI
        {url: url},                // <- any data goes here
        function (html) {          // <- callback
            $("#right-content").append(html);
        }
    });
});

Also, you might want to check out the documentation for $.post.

Answer 3

Try debugging your ajax request first

Make sure that you ajax request goes successfully.