Jquery toggle not working in php foreach loop

Question

I am trying to show a booking form when I click the button using jquery toggle.

HTML

foreach($result['apiAvailableBuses'] as $value){?>
    <tr>
</td>
        <td><?php echo $value['fare']; ?></td>
        <td>

            <?php echo $value['availableSeats'].'&nbsp;Seats'; ?>&nbsp;&nbsp;
            <input type="button" id="<?php echo $i; ?>" class="btn btn-primary" value="Book" name="Book">
        </td>
    </tr>
<tr class="main">
        <td colspan="5">
            <div class="well" id="result<?php echo $i; ?>">Booking form here</div>
        </td>
    </tr>
<?php $i++; } ?>

Script

$(".main").hide();
$(".btn-primary").click(function(){
        var id=$(this).attr('id');
        $('#result'+id).toggle();
    });

But when I click on the button I can't see the booking form div

You also have a closing </td> tag right after the opening <tr> tag .. — matt.
– matt., Commented Dec 29, 2015 at 4:17

Madhu · Accepted Answer · 2015-12-29 04:39:09Z

2

In your script, you are hiding the parent tr using $(".main").hide(); and hence toggle of the child element is not working. To make it work you have to make visible the parent element and then toggle the div.

$(".main").hide();
$(".btn-primary").click(function(){
       $(".main").show();
    var id=$(this).attr('id');
    $('#result'+id).toggle();
});

Now it should work.

answered Dec 29, 2015 at 4:39

Madhu

2,5513 gold badges21 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Blessan Kurien Over a year ago

it displays all the divs

Madhu Over a year ago

@Blessan, please modify the selector as per your requirement to select the correct tr element to show and not all tr element...

dann Over a year ago

$('#result'+id).closest('tr.main').toggle(); might work?

Blessan Kurien Over a year ago

Again select all the divs

dann Over a year ago

@BlessanKurien, remove $(".main").show(); and replace $('#result'+id).toggle(); with $('#result'+id).closest('tr.main').toggle();

Hemal · Accepted Answer · 2015-12-29 04:30:16Z

0

Try using .on()

$(document).ready(function(){
$(document).on("click",".btn-primary",function(){
    var id=$(this).attr('id');
    $('#result'+id).toggle();
});
});

UPDATE

Another thing I want to explain. You are clicking on a button and then getting its ID and then doing .toggle() with it.

I think you can do this way also.

$(document).ready(function(){
$(document).on("click",".btn-primary",function(){
    //var id=$(this).attr('id');
    //$('#result'+id).toggle();
    $(this).closest("tr").next("tr").find(".well").toggle();
});
});

edited Dec 29, 2015 at 4:30

answered Dec 29, 2015 at 4:16

Hemal

3,7722 gold badges27 silver badges57 bronze badges

5 Comments

Hemal Over a year ago

remove unwanted </td> from third line of your HTML code.

Blessan Kurien Over a year ago

Nop ,actually its only a small portion of the code a full HTML table is included

Blessan Kurien Over a year ago

Yeah its wroked,but the inital load all the pages display

Hemal Over a year ago

You can hide in on page load by adding $(".main").hide();

Blessan Kurien Over a year ago

when $(".main").hide() using this the first proble is occures

Collectives™ on Stack Overflow

Jquery toggle not working in php foreach loop

2 Answers 2

5 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related