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.

Use e.preventDefault(); for 'a' click. – Eswara Reddy Aug 23 '13 at 08:28 — Eswara Reddy, Aug 23 '13 at 08:28

score 1 · Accepted Answer · answered Aug 23 '13 at 08:26

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();

answered Aug 23 '13 at 08:26

Ohgodwhy

49,779
11
80
110

As described here: http://stackoverflow.com/questions/1357118/event-preventdefault-vs-return-false return false and preventDefault are not the same – Sergey Kochetov Aug 23 '13 at 08:31
@SergeyKochetov It's a nice write up, but I never said `the same`, i said, alternatively, he may do choose to use this. People are such head hunters. – Ohgodwhy Aug 23 '13 at 08:48
1

Thanks for your reply. But sorry to say I tried with both the options; putting "return false" and preventDefault(). It seems nothing is working ... – Muhd S A Siddiquee Aug 23 '13 at 10:25

score 0 · Answer 2 · answered Aug 23 '13 at 08:30

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>

score 0 · Answer 3 · answered Aug 23 '13 at 08:33

0

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);} 
       });
     });
   });

answered Aug 23 '13 at 08:33

krishna kinnera

1,543
12
10

after adding the preventDefault() event nothing changes. Now if I click on that 'a', it goes no where... – Muhd S A Siddiquee Aug 23 '13 at 10:32

Jquery Ajax GET method not passing variables

3 Answers3