i was wondering on how to pass the selected id on a modal.
below i have the code which is located inside a table :
<a type='button' id='seemore' data-toggle='modal' idNum='".$row['marriage_id']."'
data-target='#see_more' class='glyphicon glyphicon-eye-open'></a>
$row['marriage_id']
is from my first query.
I was hoping that I could use the value inside the idNum($row['marriage_id'])
so I could use it in the second query.
I would like to use it in this query.
SELECT * FROM marriage WHERE marriage_id = idNum
and the result would be the selected id
from the first query where it would be the parameters of my where clause in the second query.
This example uses asynchronous data loading. The user clicks the button and a request is send to the server and when the server responds the next bit of your program is executed. In your case opening a modal with the marriage data in it. The advantage of this system is that the user can continue to use your webpage while the request is being resolved.
Update the link in your HTML with a onclick event.
<a type='button' id='seemore' data-toggle='modal' idNum='".$row['marriage_id']."'
data-target='#see_more' onclick='sendRequest(this.idNum)'
class='glyphicon glyphicon-eye-open'> </a>
Add a script block to your page with the following function.
JavaScript:
function sendAjax(id, e) {
var xmlhttp;
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 ) {
if(xmlhttp.status == 200){
//request is complete and loaded
//open the modal dialog or update it.
}
else if(xmlhttp.status == 400) {
alert('There was an error 400')
}
else {
alert('something else other than 200 was returned')
}
}
}
xmlhttp.open("POST", "file.php", true); //true means asynchronously.
xmlhttp.send("idnum="+id);
}
The id
is sent to the server as a post var. Replace file.php
with php file of your own. In that php file you execute the query and echo
the response as xml or JSON.
//open the modal dialog or update it.
: Beneath this line you can retrieve the data. This line is in the event handler that checks if the data is loaded. Since the server responded with 200
in this if clause, we can assume that there is a response. If it's JSON use JSON.parse(this.responseText)
. If xml use this.responseXML
.