sammy001 sammy001 - 5 months ago 9
jQuery Question

Pass id of a row in the modal

I wish to pass the id of a particular row into a modal

code for link

<a href="#myModal" class="btn btn-default btn-small" id="custId" data-toggle="modal" data-id="<? echo $row['id']; ?>">Resume</a>


Code for modal

<div id="myModal" class="modal fade" tabindex="-1" data-width="760">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
<h4 class="modal-title">Update profile</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<div class="fetched-data"></div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-default">Close</button>
<button type="submit" name="register" alt="Login" value="Submit" class="btn blue">Save changes</button>
</div>
</div>


Code for script

<script>
$(document).ready(function(){
$('#myModal').on('show.bs.modal', function (e) {
var rowid = $(e.relatedTarget).data('id');
$.ajax({
type : 'post',
url : 'fetch.php', //Here you will fetch records
data : 'rowid='+ rowid, //Pass $id
success : function(data){
$('.fetched-data').html(data);//Show fetched data from database
}
});
});
});
</script>


Code for fetch.php

<?php
$editId = $_POST['rowid'];
echo $editId;
?>


I am supposed to get the id but instead i am getting undefined value in the modal, can anyone please tell why this is happening

Answer

Try this code

<a href="#myModal" class="btn btn-default btn-small ListId" id="custId" data-toggle="modal" data-id="<? echo $row['id']; ?>">Resume</a>

<div id="myModal" class="modal fade" tabindex="-1" data-width="760">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
            <h4 class="modal-title">Update profile</h4>
    </div>
    <div class="modal-body">
        <div class="row">
            <div class="col-md-12">
                <span class='ShowData'> </span>
            </div>
        </div>
    </div>

    <div class="modal-footer">
        <button type="button" data-dismiss="modal" class="btn btn-default">Close</button>
        <button type="submit" name="register" alt="Login" value="Submit" class="btn blue">Save changes</button>
    </div>
</div>

Script Code

<script>
$('.ListId').click(function()
    {
        var Id=$(this).attr('data-id');
        $.ajax({url:"fetch.php?Id="+Id,cache:false,success:function(result)
            {
                $(".ShowData").html(result);
            }});
    });
</script>

fetch.php Code

$id=$_GET['Id'];
echo $id;
Comments