Search code examples
javascriptphpjquerypdotablesorter

How to send href value in tablesorter to dialog modal?

Problem

I have problem in sending/passing href value in tablesorter to my dialog modal. It's become complicated when the target location is the dialog modal.

Example (table.php)

This is a partial of my code since above it is a PDO PHP query to get my data from database. Important point is at the href code inside foreach

    if($stmt->rowCount() > 0){
    $r=$stmt->fetchAll(); 
    echo "<table class='tablesorter-dropbox' id='myTable' style='width:97%; table-border: 1'>";
    echo "<thead>";
    echo "<tr style='text-align: center;'>";
    echo "<th style='text-align: center;'>No.</th>";
    echo "<th style='text-align: center;'>Conference Name</th>";
    echo "<th style='text-align: center;'>Conference Sponsor</th>";
    echo "<th style='text-align: center;'>Date (Start)</th>";
    echo "<th style='text-align: center;'>Date (End)</th>";
    echo "<th style='text-align: center;'>Budget</th>";
    echo "<th style='text-align: center;'>Status</th>";
    echo "<th style='text-align: center;'>Approve</th>";
    echo "<th style='text-align: center;'>Reject</th>";
    echo "</tr>";
    echo "</thead>";
    echo "<tbody>";
    
    
    //echo "<td><a href='reject.php?idstudent=".$row['matricno']."&idbook=".$row['serialno']."'><img src='pic/remove-icon-png-15.png' width=15px></a></td>";
    
    foreach ($r as $row){
        echo "<tr align='center'><td>".$row['id']."</td><td>". $row['conf_name'] ."</td><td>". $row['conf_sponsor'] ."</td><td>". $row['conf_fDate'] ."</td><td>". $row['conf_lDate'] ."</td><td>RM ". $row['conf_budget'] ."</td><td>". $row['conf_status'] ."</td><td><a href='#' onclick='this.href='indexSuperUser.php?idconf=".$row['id']."' role='button' data-toggle='modal' data-target='#login-modal3?idconf=".$row['id']."'><img src='images/good.png' width=15px></a></td><td><a href='#?idconf=".$row['id']."' role='button' data-toggle='modal' data-target='#login-modal4'><img src='pic/remove-icon-png-15.png' width=15px></a></td></tr>";
        //$startrow++;
    }

    echo "</tbody>";
    echo "</table>";
}
else{
    echo "<p align='center'>Nothing to show you :( I am really sorry for this T_T </p>";
}

Example #2 (dialogmodal.php)

Now here is where i want to display the variable from the table. Just for testing purpose i am trying to display the idconf to see if the id displayed successfully.

    <!-- BEGIN # MODAL LOGIN -->
<div class="modal fade" id="login-modal3" 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" align="center">
                    <img style="position:relative; LEFT:20px; WIDTH:100px; HEIGHT:100px"  id="img_logo" src="images/logofpeNEW2.png">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
                    </button>
                </div>
                
                <!-- Begin # DIV Form -->
                <div id="div-forms">
                    
                    <!-- Begin # Register Super User Form -->
                    <form id="approved-form">
                        <div class="modal-body">
                            <div id="div-register-msg">
                                <div id="icon-register-msg" class="glyphicon glyphicon-chevron-right"></div>
                                <span id="text-register-msg">Approve this event?.</span>
                            </div>
                            <input type="text" id="idconf" class="form-control" value="<?php echo $_GET['idconf']; ?>">
                        </div>
                        <div class="modal-footer">
                            <div>
                                <button type="submit" class="btn btn-primary btn-lg btn-block" style="background-color: green">Approve</button>
                            </div>
                        </div>
                    </form>
                    <!-- End # Register Super User Form -->
                    
                    
                </div>
                <!-- End # DIV Form -->
                
            </div>
        </div>
    </div>
    <!-- END # MODAL LOGIN -->
<!--END LOGIN AREAD--------------------------------->

Result

The result? Its either undefined index: idconf or nothing. Means that im trying to send variable like this #?idconf=".$row['id']."....... since if i put like this dialogmodal.php?idconf=".$row['id'].".. my dialog ends up opening another dialog that is weird to say.

Flow

The flow is simple. Start from the table.php where it will grab the data from my database and display using tablesorter plugins. Then it will open at the dialog modal. Right side of the table have approved and rejected. So this two things comes from the href itself. Just like on the picture.

enter image description here

Duplicated?

Maybe yes. but its a little bit different. I give here two link almost the same problem as me: Dynamically load information to Twitter Bootstrap modal

Send parameter to Bootstrap modal window?

However. My problem a bit slightly difficult i think. Mine is not about show the data when button clicked. But instead, i need to click the button to open the modal dialog first then clicked href button to open each row with unique id.

my stackoverflow account could be blocked at any time since i got many downvoted question. I dont know what happen to people nowadays. So i try to do proper and detailed here. If still downvoted, it will be my last here.. :)

Solution

  • Oh never mind. I got it work out by using from someone. I can't remember the link but credit to him for mentioning about using "data-your variable" and call it using jquery and send it back to the modal dialog id. Like this

    <a id='approved' href='#' role='button' data-toggle='modal' data-target='#login-modal3' data-id='".$row['idconf']."' data-confname='".$row['conf_name']."' data-confsponsor='".$row['conf_sponsor']."' data-conffdate='".$row['conf_fDate']."' data-confldate='".$row['conf_lDate']."' data-confbudget='".$row['conf_budget']."' data-confstatus='".$row['conf_status']."' data-useremail='".$row['email']."' data-username='".$row['name']."' data-balanceuser='".$row['balance']."' data-m='".$row['matricNo_fk']."'><img src='images/good.png' width=15px></a>

    See how many data i send? Then call it using jquery like this..

    $(document).on("click", "#approved", function () {
        var idconf = $(this).data('id');
        var confname = $(this).data('confname');
        var confsponsor = $(this).data('confsponsor');
        var conffdate = $(this).data('conffdate');
        var confldate = $(this).data('confldate');
        var confbudget = $(this).data('confbudget');
        var confstatus = $(this).data('confstatus');
        var useremail = $(this).data('useremail');
        var username = $(this).data('username');
        var balanceuser = $(this).data('balanceuser');
        var m = $(this).data('m');

    After declare this variable, then on the next line of this code, send it to the modal dialog id such as this.

    $(".modal-body #idconf").val( idconf );
$(".modal-body #nameconf").val( confname );
$(".modal-body #sponsorconf").val( confsponsor );
$(".modal-body #dateSconf").val( conffdate );
$(".modal-body #dateEconf").val( confldate );
$(".modal-body #budgetconf").val( confbudget );
$(".modal-body #statusconf").val( confstatus );
$(".modal-body #emailuser").val( useremail );
$(".modal-body #nameuser").val( username );
$(".modal-body #balanceuser").val( balanceuser );
$(".modal-body #m").val( m );
$('#addBookDialog').modal('show');

    On the modal dialog, use the id mentioned.

    <form id="approved-form">
                    <div class="modal-body">
                        <div id="div-register-msg">
                            <div id="icon-register-msg" class="glyphicon glyphicon-chevron-right"></div>
                            <span id="text-register-msg">Approve this event?.</span>
                        </div>
                        <input type="hidden" id="idconf" class="form-control" value="" disabled>
                        <input type="text" id="nameconf" class="form-control" value="" disabled>
                        <input type="text" id="sponsorconf" class="form-control" value="" disabled>
                        <input type="text" id="dateSconf" class="form-control" value="" disabled>
                        <input type="text" id="dateEconf" class="form-control" value="" disabled>
                        <input type="text" id="balanceuser" class="form-control" value="" disabled>
                        <input type="text" id="budgetconf" class="form-control" value="" disabled>
                        <input type="text" id="statusconf" class="form-control" value="" disabled>
                        <input type="text" id="emailuser" class="form-control" value="" disabled>
                        <input type="text" id="nameuser" class="form-control" value="" disabled>
                        <input type="hidden" id="m" class="form-control" value="" disabled>
                    </div>

    I am not saying this is efficient in terms of speed or whatever. but it solved my problem and user problem. Case solved