CODEWITHSUNDEEP
phpjqueryajaxgetmodal-dialog
spyder
spyder

Reputation: 330

AJAX get method doesn't work on second click

I am using jQuery v1.7.2.

The following code generates applicable checkboxes in bootstrap (2.2.1) modal form:

    $sql1="Select $sub_listing_id,$sub_listing_name FROM $sub_listing";
    $results=$wpdb->get_results($sql1,ARRAY_A);

    $html_code= '<form id="multiselect">';
    $num=0;
    foreach($results as $key=>$value)
    {
        foreach($value as $k1=>$v1)
        {        
            if($k1==$sub_listing_id)
            {
                $sub_listing_id_val=$v1;
            }
            if($k1==$sub_listing_name)
            {
                $sub_listing_name_val=$v1;

    $html_code.= '<input type="checkbox" name="list" value="'.$sub_listing_id_val.'">&nbsp;&nbsp;'.$sub_listing_name_val.'&nbsp;&nbsp;&nbsp;&nbsp;';
    $num=$num + 1;
    if($num%5==0)
    $html_code.= '<br/><br/>';
            }
        }
    }
    $html_code.= '</form>';
    echo $html_code;

Now, i select some checkboxes and pass the selected values through the following jQuery:

$('#btn-add-sub-listing-save').click(function (e){
    e.preventDefault();
    var ajax_url='add_sub-listing.php';
    var dataString=$('#multiselect').serialize();
    showLoader('.modal-body');
    dataString=dataString.replace(/&/g,' AND ');

    $.ajax({
    url: ajax_url + '?' + dataString,
    type: 'GET',
    dataType: 'html',
    success: function(data){
        $('.modal-body').html(data);
    }
});
});

If i edit the jQuery:

$('.modal-body').html(dataString);

it works just fine. This means #multiselect gets serialized all the time, but it won't get appended second time onwards. So, i can't get the values on mu landing page and hence can't progress.

I have used cache: false and async:false. Still, it won't work! Please give your suggestions.

Maybe the bootstrap-modal-cache has something to do with this. I had overcome this situation before by using the following jQuery:

$('.btn-add-sub-listing').click(function (e){
    e.preventDefault();
    $('#add-sub-listing-modal').removeData("modal");
    $('#add-sub-listing-modal').modal({remote: $(this).attr("href")})
    $('#add-sub-listing-modal').modal('show');

});

Here, i used "href". Can i do it for buttons where "href" doesn't apply?

Upvotes: 0

Views: 707

Answers (3)

Shaan Khan
Shaan Khan

Reputation: 13

This worked for me 

$('body').on('click', '#btn', function(e)
{
    // you code here
});

Upvotes: 0

user2042844
user2042844

Reputation: 1

Add a Temp variable and check it before ajax is

Upvotes: 0

Tim Rogers
Tim Rogers

Reputation: 21713

You are most likely, when you replace the HTML, replacing the button with a new button which will unwire the click event.

You should rewire the click event each time you replace the HTML contents, or use the jQuery on method to wire the event. This will work with whatever button element you have matching under body at the time the event is fired.

$('body').on('click', '#btn-add-sub-listing-save', function(e)
{
    // handler as before
});

Upvotes: 1

Related Questions