CODEWITHSUNDEEP
phpjquerytwitter-bootstrapbootstrap-modal
Kez
Kez

Reputation: 209

Dynamic Bootstrap Modal with php and jQuery

I have multiple information boxes, with short info echoed from the database. at the bottom of each box is "more information" when click this triggers a modal.

The issue: at the moment when "more information" is clicked it displays the same information regardless of which info box was clicked.

The objective: When more information is clicked i need the respective information to be displayed. Some how referencing that row number X needs to be displayed when "more information" is click on that information box.

I tried is, but it didn't work:

jQuery(document).ready(function($) {
$('.moreinfo').click(function(event) {
    var a = $(this);

    // Get ID
    var currentID = parseInt(a.data('id'));

    $.ajax({
  type : 'post',
   url : 'ajax.php', // in here you should put your query 
   dataType: 'json',
  data: {'vac_id': currentID}, // here you pass your id via ajax .
             // in php you should use $_POST['post_id'] to get this value 
  success : function(json)
   {
      // Change the ID in modal
    var m = $('#moreinfo'), mBody = m.find('.panel-body');

       // Update new content
       $('#vac_id').text(json.vac_id);
       $('#vac_post_date').text(json.vac_post_date);
       $('#vac_job_title').text(json.vac_job_title);
       $('#vac_comp_name').text(json.vac_comp_name);
       $('#job_description').text(json.job_description);
       $('#vac_ess_one').text(json.vac_ess_one);
       $('#vac_ess_two').text(json.vac_ess_two);
       $('#vac_ess_three').text(json.vac_ess_three);
       $('#vac_ess_four').text(json.vac_ess_four);
       $('#vac_ess_five').text(json.vac_ess_five);
       $('#vac_ess_six').text(json.vac_ess_six);
       $('#vac_ess_seven').text(json.vac_ess_seven);
       $('#vac_ess_eight').text(json.vac_ess_eight);
       $('#vac_ess_nine').text(json.vac_ess_nine);
       $('#vac_ess_ten').text(json.vac_ess_ten);
       $('#vac_des_one').text(json.vac_des_one);
       $('#vac_des_two').text(json.vac_des_two);
       $('#vac_des_three').text(json.vac_des_three);
       $('#vac_des_four').text(json.vac_des_four);
       $('#vac_des_five').text(json.vac_des_five);
       $('#vac_des_six').text(json.vac_des_six);
       $('#vac_des_seven').text(json.vac_des_seven);
       $('#vac_des_eight').text(json.vac_des_eight);
       $('#vac_des_nine').text(json.vac_des_nine);
       $('#vac_des_ten').text(json.vac_des_ten);
       $('#vac_deadline').text(json.vac_deadline);
       $('#apply_link').text(json.apply_link);

      m.modal('show');
     }
   });

    event.preventDefault();
  });
});

Here you can see the modal and modal trigger: FIDDLE

Any help is genuinely appreciated.

Upvotes: 1

Views: 539

Answers (2)

Tuan Ha
Tuan Ha

Reputation: 630

Here's how I used to create dynamic modal/dialog:

var modal = $('#mymodal');
modal.find('.modal-title').text(newTitle); // Change modal title (optional)
modal.find('.modal-body').html(somethingNew); // Change modal content
modal.show();

For example: https://jsfiddle.net/3ey8tyz3/

Upvotes: 1

Manoz
Manoz

Reputation: 6587

I suppose when you load modal for the first time it gets cached and every time returns the same content.

You might need to clear the modal first and then reload on the basis of your id.

You can do- 

$('#myModal').on('loaded.bs.modal',function(e){
}).on('hidden.bs.modal',function(e){
   $(this).removeData('bs.modal');
});

Wrap this into a function and call it on document.ready

Upvotes: 0

Related Questions