Jquery Ajax GET method not passing variables

Question

The below URL works fine:

index.php?page=search_result&maker=Any

I want to get into this URL from another page using Jquery Ajax function. Here is my Ajax call:

$(function(){

    $(".by_maker").on('click',function(){

        var c_maker = $(this).attr('href');

         $.ajax({
               type: "GET",
               datatype: "html",
               url: "index.php?page=search_result",
               data: "maker="+c_maker,
               success: function(response){
                       html(response);} 
           });
    });
});

I like to get the value of 'maker' from the href like below html:

<a class="by_maker" href="toyota">Toyota</a>

NB: there is not 'form' and 'input' elements. If I click on the Toyota link its not going to the desired URL!!! So, what am I doing wrong??? Any help is appreciated. Thanks in advance.

Answer 1

add return:false; to the event handler to stop the default action.

$(".by_maker").on('click',function(){

    var c_maker = $(this).attr('href');

     $.ajax({
           type: "GET",
           datatype: "html",
           url: "index.php?page=search_result",
           data: "maker="+c_maker,
           success: function(response){
                   html(response);} 
       });
       return false;
});

Alternatively, you can pass in the event to the callback function, and preventDefault();

$(".by_maker").on('click',function(event){
    event.preventDefault();

Answer 2

Please use prevent default so it will not be redirect to any where. or just remove "href" from

    $(".by_maker").on('click',function(e){
        e.preventDefault();
        var c_maker = $(this).attr('href');

         $.ajax({
               type: "GET",
               datatype: "html",
               url: "index.php?page=search_result",
               data: "maker="+c_maker,
               success: function(response){
                       html(response);} 
           });
    });

OR

Keep jquery click same as it is now <a class="by_maker">Toyota</a>

Answer 3

You can also use the event.preventDefault() to prevent the default action:

    $(function(){
    $(".by_maker").on('click',function(event){
    event.preventDefault()
    var c_maker = $(this).attr('href');

     $.ajax({
           type: "GET",
           datatype: "html",
           url: "index.php?page=search_result",
           data: "maker="+c_maker,
           success: function(response){
                   html(response);} 
       });
     });
   });