Chennakesavarao macherla Chennakesavarao macherla - 4 months ago 19
Javascript Question

How to pass the dynamic values on clicking the link?

I am using the below mentioned code.

<a href='#' onClick='$(\"div#reboot-modal\").modal();' >


calling the model code:

printf( '<div class="modal" id="reboot-modal" style="display: none; color: black;">' );
printf( '<h1>Drive Info</h1>' );
printf('<ul style="list-style-type: none;padding: 8px;margin-top: 0px;margin-bottom: 0px;">');
printf( '<li><b>Link Speed:</b></li>' );
printf( '<li><b>Serial Number:</b></li> );
printf( '<li><b>Model Number:</b></li>' );
printf( '<li><b>Boot Loader:</b></li>' );
printf( '<li><b>LightSwitch Rev:</b></li>' );
printf( '<li><b>TWIDL Version:</b></li>' );
printf( '</ul>');
printf( '</a>' );
printf( '</div>' );


Onclick Reboot-modal time
, I need to pass six values dynamically and when the dialog box call that time, this values needs to be printed here.

Any solution is appreciable.Thanks in Advance.

Answer

Its better you can loop #reboot-modal-{id} for different dynamic modal and also use proper bootstrap classes.

<?php foreach($users as $user): ?>
    <a href='#' data-toggle="modal" data-target="#reboot-modal" data-dbid="<?php echo $user['id']; ?>">Click <?php echo $user['id']; ?> Here....</a>
<?php endforeach; ?>

<div class="modal fade" id="reboot-modal" style="display: none; color: black;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button><h4 class="modal-title">Drive Info</h4>
</div>
<div class="modal-body">
<ul class="list-unstyled">
<li><b>Link Speed:</b>&nbsp;<span id='rb-link'></span></li>
<li><b>Serial Number:</b>&nbsp;<span id='rb-serial'></span></li>
<li><b>Model Number:</b>&nbsp;<span id='rb-model'></span></li>
<li><b>Boot Loader:</b>&nbsp;<span id='rb-loader'></span></li>
<li><b>LightSwitch Rev:</b>&nbsp;<span id='rb-light'></span></li>
<li><b>TWIDL Version:</b>&nbsp;<span id='rb-twidl'></span></li>
</ul>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$('#reboot-modal').on('show.bs.modal', function(e) {
        //THIS YOUR DATABASE ID COMES FROM CURRNET CLICKED LINK
        var dbId = $(e.relatedTarget).attr('data-dbid');
        $.ajax({
            cache: false,
            type: 'POST',
            url: 'newfile.php',
            data: {"dbId":dbId},
            dataType: "json",
            success: function(data) {
                $('#rb-link').html(data.rb_link);
                $('#rb-serial').html(data.rb_serial);
                $('#rb-model').html(data.rb_model);
                $('#rb-loader').html(data.rb_loader);
                $('#rb-light').html(data.rb_light);
                $('#rb-twidl').html(data.rb_twidl);
            }
        });
});
</script>

NEW PHP FILE: (newfile.php)

    // NEW PHP FILE FOR AJAX REQUEST AND RESPONSE
    include('db_connection.php');
    $sql = mysqli_query("select * from users where id=".$dbId);
    $rows = array();
    while($row = mysqli_fetch_assoc($sql)) {
        $rows['rb_link'] = $row['db_link'];
        $rows['rb_serial'] = $row['db_serial'];
        $rows['rb_model'] = $row['db_model'];
        $rows['rb_loader'] = $row['db_loader'];
        $rows['rb_light'] = $row['db_light'];
        $rows['rb_twidl'] = $row['db_twidl'];
    }
    echo json_encode($rows);

https://jsfiddle.net/t5umn3ha/38/