On click open dynamic popup div modal div used mysql ajax php
Technology 0 Comments
Fitch dynamic value and show in popup modal window in PHP. Display data and value from database in popup modal using PHP MySQL Ajax. Open a pop up modal get values from MySQL PHP dynamic value select text div and open in popup modal div. Bootstrap and responsive Modal popup with Dynamic MySQL Database used with Ajax. PHP dynamic variable pass from popup modal.
We cannot pass Dynamic value in Modal popup in bootstrap responsive tag.If we can fetch and display data in row table and then we click on value and open the popup modal and then dynamic value show in popup Modal (dynamic value is changeable value display and fetch on database) so this code used with event .on and pass value with ajax
Logic wise code display in this page read and implement
Main point: All code work on ID base. So be carefully check all ID and class
$(document).on(‘click’, ‘#getUser’, function(e){ }
If you are used dynamic database so add this code
<div data-id=”<?php echo $row[‘mbl’]; ?>” id=”getUser” class=”launch-modal”><?php echo $row[‘mbl’]; ?></div>
If you are static value so add this code
<div data-id=”12″ id=”getUser” class=”launch-modal”>12</div>
<div data-id=”12″ id=”getUser” class=”launch-modal”>12</div>
<div id= “addshownew1” > </div> // if you are save data in database and then show massage
<!—– Stop closed for outside click——–>
<script type=”text/javascript”>
$(document).ready(function(){
$(‘.launch-modal’).click(function(){
$(‘#view-modal’).modal({
backdrop: ‘static’
});
});
});
</script>
<!—– stop closed for outside click——–>
<div id=”view-modal” class=”modal fade” tabindex=”-1″ role=”dialog” aria-labelledby=”myModalLabel” aria-hidden=”true” style=”display: none;”>
<div class=”modal-dialog”>
<div class=”modal-content”>
<div class=”modal-header”>
<button type=”button” class=”close” data-dismiss=”modal” aria-hidden=”true”>×</button>
<h4 class=”modal-title”>
<i class=”glyphicon glyphicon-user”></i> User Profile
</h4>
</div>
<div class=”modal-body”>
<!– mysql data will be load here –>
<div id=”dynamic-content”></div>
</div>
<div class=”modal-footer”>
<button type=”button” class=”btn btn-default” data-dismiss=”modal”>Close</button>
</div>
</div>
</div>
</div>
<!—– onclick dynamic popup div modal open ——–>
<script type=”text/javascript”>
$(document).ready(function(){
$(document).on(‘click’, ‘#getUser’, function(e){
e.preventDefault();
var uid = $(this).data(‘id’); // get id of clicked row
// alert(uid);
$(‘#dynamic-content’).html(”); // leave this div blank
$(‘#modal-loader’).show(); // load ajax loader on button click
$.ajax({
url: ‘popaddview.php’,
type: ‘POST’,
data: ‘id=’+uid,
dataType: ‘html’
})
.done(function(data){
console.log(data);
$(‘#dynamic-content’).html(”); // blank before load.
$(‘#dynamic-content’).html(data); // load here
$(‘#modal-loader’).hide(); // hide loader
})
.fail(function(){
$(‘#dynamic-content’).html(‘<i class=”glyphicon glyphicon-info-sign”></i> Something went wrong, Please try again…’);
$(‘#modal-loader’).hide();
});
});
});
</script>
<!—– onclick dynamic popup div modal stop ——–>
Page 2 popaddview.php
If you are pass value and save in database with ajax so add this code
<!—– This code only used if you save onclick submit save value in database ——–>
<script>
$(document).ready(function(){
$(“#subcomment”).click(function() {
var phonenoadd = $(“#country_name”).val();
alert(phonenoadd);
$.ajax({
url:’popadd.php’,
data:”phonenoadd=”+phonenoadd+””,
type:’POST’,
success:function(data){
$(“#addshownew1”).html(data);
}
});
//document.getElementById(“phonenoc”).value = “”;
});
});
</script>
<!—– This code only used if you save onclick submit save value in database ——–>
<div>
<?php require_once ‘config.php’;
echo $_REQUEST[‘id’];
$id = $_REQUEST[‘id’];
?>
<input type=”text” id=’country_name’ value=”<?php echo $_REQUEST[‘id’]; ?>” class=”form-control boxed” name=”phonecode” placeholder=”Enter Phone” style=”font-size:28px; color: #000000; height:65px;” maxlength=”15″ onKeyUp=”if (/\D/g.test(this.value)) this.value = this.value.replace(/\D/g,”)”/>
// onKeyUp=”if (/\D/g.test(this.value)) this.value = this.value.replace(/\D/g,”)”
// This event used for only numeric value add not character value add in input box.
</div>
3 rd page code popadd.php
<?php
$row_num = $_POST[‘phonenoadd’];
echo $row_num;
?>
Buy online Rajasthan gk book Railway JE CBT REET PAtwari Book SSC CGL Clerk GD Book Buy online Rajasthan gk book Railway JE CBT REET PAtwari Book SSC CGL Clerk GD Book
0
0
0