Using Iframe and Ajax on links and buttons:
Prerequisites:
1- Download "jquery-1.4.3.min.js" from http://jquery.com
2- Download jquery facny box plugin 'jquery.fancybox-1.3.4' from
3- Download a ajaxLoader image file and put it in imgs folder.
4- Put the below given css in css folder.
5- Put the jquery-1.4.3.min.js and jquery fancy box plugin in js folder.
###################################################################
//style.css
#ajaxBackground {
height:auto;
width:100%;
background-color:white;
top:0px;
bottom:0px;
left:0;
position:fixed;
opacity:0.45;
z-index: 499;
}
#ajaxImage {
z-index: 9999;
position: fixed;
top: 50%;
left: 50%;
margin-top: -24px;
margin-left: -24px;
}
#pagewrap {
min-width: 965px;
margin-left:auto;
margin-right:auto;
width:978px;
margin:20px auto 0px;
}
--------------------------------------------------------------------------------------------------------------------
//getData.html
"Hello"
--------------------------------------------------------------------------------------------------------------------
//Test.html
HTML PAGE >>>>
<html>
<head>
<!-- Put All Javascripts & css files in database and access them using webdav -->
<script type="text/javascript" src="js/jquery-1.4.3.min.js"></script>
<!-- jQuery Fancybox -->
<script type="text/javascript" src="js/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="js/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="js/fancybox/jquery.fancybox-1.3.4.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<script type="text/javascript">
function ajaxRequest(actionName,option){
var optionsLocal = {"showSpinner":option};
$.ajax({
url: actionName,
type: "POST",
cache: false,
data:"",
dataType:"html",
context: document.body,
success: function(data)
{
$('#pagewrap').html(data);
},
beforeSend:function (){
if(optionsLocal.showSpinner==true){
$('#ajaxImage').show();
$('#ajaxBackground').show();
}
},
complete:function (){
if(optionsLocal.showSpinner==true){
$('#ajaxImage').hide();
$('#ajaxBackground').hide();
}
},
error: function(){
//Hide the spinner div
$('#ajaxImage').hide();
$('#ajaxBackground').hide();
}
});
};
$(document).ready(function() {
$("a[class='iframe']").fancybox({
'width' : '75%',
'height' : '75%',
'autoScale' : false,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'type' : 'iframe',
'titleShow' : true,
'title' : 'Display Title Below IFrame'
});
$("#iframeBtn").fancybox({
'width' : '50%',
'height' : '50%',
'autoScale' : false,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'type' : 'iframe',
'onStart': function(){
this.href = "";
},
'onComplete': function(){
var action="getData.html?id="+$("#txtName").val();
$("#fancybox-frame").attr("src", action);
},
'onClosed' : function() {
//TODO:: Call service to clear session if required.
}
});
});
function changeUrl(actionName,attribute,id){
var action=actionName+"?id="+$("#txtName").val();
$(id).attr(attribute, action);
}
function getData(actionName,option){
actionName=actionName+"?id="+$("#txtName").val();
ajaxRequest(actionName,option);
}
</script>
</head>
<body>
Enter your name: <input type="text" id="txtName" name="txtName"/><br/><br/>
<button onclick="getData('getData.html',true);">Click Here for ajax call!</button>
<input type="button" id="iframeBtn" class='iframe' value="Click Here for iframe!"/>
<a id="iframeLink" href="" onclick="changeUrl('getData.html','href','#iframeLink')" class='iframe'>Click Here for iframe</a>
<img id="ajaxImage" src="imgs/ajax-loader.gif" alt="Loader" style="display:none;"></img>
<div id="pagewrap">
<div id="ajaxBackground" style="display:none;"></div>
<!-- OR -->
<div class="master_container"><div style="opacity: 0; display: none; position: absolute; top: 0px; left: 0px; z-index: 1000; background:#000" id="backgroundPopup"></div></div>
</div>
</body>
</html>
XQUERY AND HTML PAGE:>>
//Test.xqy
xdmp:set-response-content-type("text/html"),
<html>
<head>
<!-- Put All Javascripts & css files in database and access them using webdav -->
<script type="text/javascript" src="http://localhost:8006/js/jquery-1.4.3.min.js"> </script>
<!-- jQuery Fancybox -->
<script type="text/javascript" src="http://localhost:8006/js/fancybox/jquery.mousewheel-3.0.4.pack.js"> </script>
<script type="text/javascript" src="http://localhost:8006/js/fancybox/jquery.fancybox-1.3.4.pack.js"> </script>
<link rel="stylesheet" type="text/css" href="http://localhost:8006/js/fancybox/jquery.fancybox-1.3.4.css" media="screen" />
<link rel="stylesheet" type="text/css" href="http://localhost:8006/css/style.css"/>
<script type="text/javascript">
function ajaxRequest(actionName,option){{
var optionsLocal = {{"showSpinner":option}};
$.ajax({{
url: actionName,
type: "POST",
cache: false,
data:"",
dataType:"html",
context: document.body,
success: function(data)
{{
$('#pagewrap').html(data);
}},
beforeSend:function (){{
if(optionsLocal.showSpinner==true){{
$('#ajaxImage').show();
$('#ajaxBackground').show();
}}
}},
complete:function (){{
if(optionsLocal.showSpinner==true){{
$('#ajaxImage').hide();
$('#ajaxBackground').hide();
}}
}},
error: function(){{
//Hide the spinner div
$('#ajaxImage').hide();
$('#ajaxBackground').hide();
}}
}});
}};
$(document).ready(function() {{
$("a[class='iframe']").fancybox({{
'width' : '75%',
'height' : '75%',
'autoScale' : false,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'type' : 'iframe',
'titleShow' : true,
'title' : 'Display Title Below IFrame'
}});
$("#iframeBtn").fancybox({{
'width' : '50%',
'height' : '50%',
'autoScale' : false,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'type' : 'iframe',
'onStart': function(){{
this.href = "";
}},
'onComplete': function(){{
var action="getData.xqy?id="+$("#txtName").val();
$("#fancybox-frame").attr("src", action);
}},
'onClosed' : function() {{
//TODO:: Call service to clear session if required.
}}
}});
}});
function changeUrl(actionName,attribute,id){{
var action=actionName+"?id="+$("#txtName").val();
$(id).attr(attribute, action);
}}
function getData(actionName,option){{
actionName=actionName+"?id="+$("#txtName").val();
ajaxRequest(actionName,option)
}}
</script>
</head>
<body>
Enter your name: <input type="text" id="txtName" name="txtName"/><br/><br/>
<button onclick="getData('getData.xqy',true);">Click Here for ajax call!</button>
<input type="button" id="iframeBtn" class='iframe' value="Click Here for iframe!"/>
<a id="iframeLink" href="" onclick="changeUrl('getData.xqy','href','#iframeLink')" class='iframe'>Click Here for iframe</a>
<img id="ajaxImage" src="http://localhost:8006/imgs/ajax-loader.gif" alt="Loader" style="display:none;"></img>
<div id="pagewrap">
<div id="ajaxBackground" style="display:none;"></div>
</div>
</body>
</html>
------------------------------------------------------------------------------------------------------
Example of serializing form inputs using JQuery:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
//example of form serialize
function postData() {
var formData = $("#myFrm").serialize();
alert(formData);
//This serialized formData can be posted to any service using ajax to get the response from service.
}
</script>
</head>
<body>
<form id="myFrm" name="myFrm">
<table>
<tr><td>Name:<input type="text" id="txtName" name="txtName" value="MyName"/></td></tr>
<tr><td>Sex: <input type="text" id="txtSex" name="txtSex" value="Male"/></td></tr>
<tr><td>Age: <input type="text" id="txtAge" name="txtAge" value="26"/></td></tr>
<tr><td><input type="button" id="btn" name="btn" value="SubmitInputs" onclick="postData()"/></td></tr>
</table>
</form>
</body>
</html>
The alert will show the inputs as [txtName=MyName&txtSex=Male&txtAge=26]
Notice that using '$("#myFrm").serialize();' we are getting inputs as key value pair of each inputs from the given form.
---------------------------------------------------------------------------------------------------------------------
No comments:
Post a Comment
Thanks for your comments/Suggestions.