I want to pass button ID values into a Modal popup window when user click that particular button. Later from that passed ID I can query DB values and view in that opened modal popup window.
This is the code portion for button. Id will be assigned form DB. It is working fine.
<td>
<input type="submit" name="button" id="<?php echo $row["id"];?>" value="Details" onClick="popupwindow(this.id)">
</td>
Modal Window: Here I need to get the value form popupwindow function and query DB and view:
<div id="openModal" class="modalDialog">
<div>
<a href="#" title="Close" class="close">X</a>
<h2>Modal Box</h2>
<!-- From the retrieved values I can query and view data here.-->
</div>
</div>
JavaScript Function for Passing values to Modal Popup Window
function popupwindow(id) {
// code for Pass the value to modal window
window.location="#openModal"
}
I need a code sample for popupwindow function to pass my button ID values into Modal Window. Please help me on this. I'm very new to this topic.
frogatto :
I think you should use AJAX to query your DB and retrieve data from it, the basic template of your popupwindow can be like this:\n\nfunction popupwindow(id) {\n\n $(\"#openModal .content\").load(\"yourscript.php?id=\" + escape(id), function(){\n $(\"#openModal\").show();\n })\n\n}\n\n\nAnd your HTML:\n\n<div id=\"openModal\" class=\"modalDialog\">\n <div>\n <a href=\"#\" title=\"Close\" class=\"close\">X</a>\n <h2>Modal Box</h2>\n <!-- From the retrieved values I can query and view data here.-->\n <div class=\"content\"></div>\n </div>\n</div>\n",
2013-12-11T08:39:34
Basit :
Instead of using onClick(), use jQuery click function. Here's how:\n\n$(\"[input[name = 'button']\").click(function(){\n $(this).attr('id'); // This will give the ID of the button clicked. \n});\n\n\nAlternatively, I'd suggest you to add a class to the buttons you want to have a modal displayed on. Here's how:\n\n<td><input type=\"button\" class=\"modalBtn\" name=\"button\" id=\"<?php echo $row[\"id\"];?>\" value=\"Details\"></td>\n\n\nNow, in JQuery, do the following\n\n$(\".modalBtn\").click(function(){\n $(this).attr('id'); // This will give the ID of the button clicked. \n});\n\n\nHope it answers your question.",
2013-12-11T08:38:02
Vlad Mekh :
use window.location.hash for replace hash\n\nfunction popupwindow(id) {\n window.location.hash = '#openModal'\n}\n",
2013-12-11T08:39:24