asked on
<input type="hidden" name="<%=RecFldNm%>" value="<%=vPRecID%>">
<input type="button" name="<%=AddBtn%>" value="Add" onClick='window.open("http://youdomain.com/page.asp?id=<%=vPRecID%>")'>
<input type="hidden" name="RecFldNm1" value="39471" >
<input type="button" name="AddBtn1" value="Add" onclick="window.open( 'popup.asp?fld=' + document.frmName.RevFldNm1.value")
<input type="hidden" name="RecFldNm1" value="39471" />
<button type="button" class="btn btn-primary" name="AddBtn1" data-RecFldNm="39471" data-toggle="modal" data-target="#addRecords">Add</button>
<input type="hidden" name="RecFldNm2" value="39472" />
<button type="button" class="btn btn-primary" name="AddBtn2" data-RecFldNm="39472" data-toggle="modal" data-target="#addRecords">Add</button>
<input type="hidden" name="RecFldNm3" value="39473" />
<button type="button" class="btn btn-primary" name="AddBtn3" data-RecFldNm="39473" data-toggle="modal" data-target="#addRecords">Add</button>
$(function() {
$('#addRecords').on('show.bs.modal', function (e) {
var recfldnm = $(e.relatedTarget).data('recfldnm');
$('.modal-title').text('Please update for '+recfldnm);
});
});
<!DOCTYPE html>
<html>
<head>
<link href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
<script>
$(function() {
$( "#dialog" ).hide();
$('.open').click(function(){
$( "#dialog" ).dialog();
});
});
</script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<!--<input type="hidden" name="RecFldNm1" value="39471" >
<input type="button" class="open" name="AddBtn1" value="Add">
<!--<input type="hidden" name="RecFldNm2" value="39472" >
<input type="button" name="AddBtn2" value="Add">
<!--<input type="hidden" name="RecFldNm3" value="39473" >
<input type="button" name="AddBtn3" value="Add">-->
<button class="open" data-rec="39471">Add 39471</button>
<button class="open" data-rec="39472">Add 39472</button>
<button class="open" data-rec="39473">Add 39473</button>
<div id="dialog" title="Basic dialog">
<p>Your ajax response will go here</p>
</div>
</body>
</html>
The next step is to create a blank asp page than can accept a post or get and output the needed data. Then via ajax the content from that page will appear in the #dialog. Example next.
<%
response.write "You selected "&request.form("id")
%>
Then your main page will look like this<!DOCTYPE html>
<html>
<head>
<link href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
<script>
$(function() {
$("#dialog").hide();
$('.open').click(function() {
//GET THE ID TO PASS FROM THE ATTRIBUTE DATA-REC
myID = $(this).attr('data-rec');
//SET UP THE POST TO YOUR AJAX PAGE
$.ajax({
type: "POST",
url: "the_ajax_page.asp",
data: {
id: myID
}
})
.done(function(data) {
$("#dialog").html(data); //PLACE THE RESPONSE TO THE #dialog
$("#dialog").dialog(); // OPEN THE DIALOG
});
});
});
</script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<!--<input type="hidden" name="RecFldNm1" value="39471" >
<input type="button" class="open" name="AddBtn1" value="Add">
<!--<input type="hidden" name="RecFldNm2" value="39472" >
<input type="button" name="AddBtn2" value="Add">
<!--<input type="hidden" name="RecFldNm3" value="39473" >
<input type="button" name="AddBtn3" value="Add">-->
<button class="open" data-rec="39471">Add 39471</button>
<button class="open" data-rec="39472">Add 39472</button>
<button class="open" data-rec="39473">Add 39473</button>
<div id="dialog" title="Basic dialog">
<!-- no content on the page -->
</div>
</body>
</html>
ASKER
ASKER
JavaScript is a dynamic, object-based language commonly used for client-side scripting in web browsers. Recently, server side JavaScript frameworks have also emerged. JavaScript runs on nearly every operating system and in almost every mainstream web browser.
TRUSTED BY
Open in new window