JQuery UI: How to pass values to dialog
I am very new to JQuery UI. I am facing issue while loading modal dialog window using JQuery. Here I am trying simple example that will open dialog and will load a new page on onClick event of radio button. The new page thats getting loaded in to dialog is dynamic page which takes some values from database based on user in put provided through text box of main page.
I am not sure how to pass the value of text box from main page? Alsosd I tried to pass the value of text box by appending url attributes to url.. but no luck:(. i.e. my url is regressionTestCustomMetadataSelection.action and I am trying to pass it as regressionTestCustomMetadataSelection.action*?consumer* where consumer is value from text box.Is this the right way? Provinding code below
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" language="javascript" src="JS/jquery-1.6.1.js"></script>
<script type="text/javascript" language="javascript" src="JS/jquery-ui-1.8.14.custom.min.js"></script>
<style type="text/css" title="currentStyle">
@import "css/jquery-ui-1.8.4.custom.css";
</style>
<script type="text/javascript">
$(document).ready( function(){
$("#CUSTOM").click( showDialog );
//variable to reference window
myWindow = $('#dialog');
}
);
//function to show dialog
var showDialog = function() {
//instantiate the dialog
myWindow.load("regressionTestCustomMetadataSelection.action?consumer").dialog({ height: 350,
width: 400,
modal: true,
position: 'center',
autoOpen:false,
title:'Hello World',
overlay: { opacity: 0.5, background: 'black'}
});
//if the contents have been hidden with css, you need this
myWindow.show();
//open the dialog
myWindow.dialog("open");
}
开发者_开发技巧 //function to close dialog, probably called by a button in the dialog
var closeDialog = function() {
myWindow.dialog("close");
}
</script>
<script>
function setSession()
{
$(document).ready(function() {
$("#dialog").load("regressionTestCustomMetadataSelection.action?as").dialog({ modal: true, resizable: false, draggable: false, width: 515, height: 245 });
});
$("#dialog").dialog('open');
}
</script>
</head>
<body style="font-size:62.5%;">
<div>
<input type="radio" name="submittedMetadataSelection" id="DEFAULT" value="DEFAULT" checked/>
<label for="DEFAULT">DEFAULT</label>
<input type="radio" name="submittedMetadataSelection" id="CUSTOM" value="CUSTOM" "/>
<label for="CUSTOM">CUSTOM</label>
</div>
<div id="dialog" title="Dialog Title"></div>
</body>
</html>
Instead of "load", try to use the $.ajax method and send the parameters with "data" object:
$.ajax({
url: "regressionTestCustomMetadataSelection.action",
data: ({customer: "John"}),
traditional: true,
success: function(loadedData) {
// assuming that the contents of loadedData is html
myWindow.html(loadedData);
myWindow.dialog();
}
});
加载中,请稍侯......
精彩评论