CODEWITHSUNDEEP
phpjqueryajaxtwitter-bootstrap
shamon shamsudeen
shamon shamsudeen

Reputation: 5848

Ajax request with bootstrap modal in php

I am trying to display some information in a bootstrap modal based on some values.

Here is the work flow

1.Display Hyperlinks in a loop with a title.

2.When click on each hyperlink grabs the id value.

3.Make ajax request with these id as parameter and show the response in bootstrap model.

1.display hyperlinks

//display the hyperlinks in a loop
    <?php $i=0;foreach($services as $service) {?>
      <a href="#myModal" data-toggle="modal"  data-id="<?php echo $service->services_id;  ?>" class="btn-block"><?php echo $service->services_title; ?></a>
    <?php $i++;}?>

2.grabs the id value and make ajaxrequest

 $('#myModal').on('show.bs.modal',function(){
            var id=$(this).data('id');
            //undefined
            alert(id);
            //shows loading text
            //it dosent work
    $('.data-modal').html('loading');
    $.ajax({
        type: 'POST',
        url: '../Functions/form_process.php?action=getdetailsbyid',
        data:{id: id},
        success: function(data) {
          $('.data-modal').html(data);
        },
        error:function(err){
            alert("error"+JSON.stringify(err));
        }
         });
        });

The problem is cant get the id value,alert(id) returns undefined also $('.data-modal').html('loading') is not shown

modal

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">THIS IS A SAMPLE POPUP 2</h4>
            </div>
            <div class="modal-body">

            <strong>services.</strong>        
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div> 
</div>

Upvotes: 0

Views: 14002

Answers (1)

Michael Doye
Michael Doye

Reputation: 8171

Assuming your foreach outputs links like this:

 <a href="#myModal" data-toggle="modal" data-id="123" class="btn-block">title</a>
 <a href="#myModal" data-toggle="modal" data-id="1234567" class="btn-block">another title</a>

You could then invoke the click method instead of show.bs.modal in order to use $(this).

So your code will change to:

 $('.btn-block').on('click',function(){
    var id = $(this).data('id');
    alert(id);
    $('.modal-body').html('loading');

       $.ajax({
        type: 'POST',
        url: '../Functions/form_process.php?action=getdetailsbyid',
        data:{id: id},
        success: function(data) {
          $('.modal-body').html(data);
        },
        error:function(err){
          alert("error"+JSON.stringify(err));
        }
    });
 });

Here is an Example

Otherwise you will need to use a unique id on all your outputted links (which you can do using a counter in your foreach)

Upvotes: 1

Related Questions