Wednesday, May 15, 2013

Popup window on a link..

You can use below given javascript code to open popup window:

javascript:window.open('http://google.com','infoWindow','height=458px,width=992px,resizable=1,location=no,top=90px,left=90px,scrollbars=1,titlebar=no');
Let's verify it:
<html>
<head></head>
<body>
<input type="button" value="Open a Popup Window" 
  onclick="javascript:window.open('http://google.com','popUpWindow','height=458px,width=992px,resizable=1,location=no,top=90px,left=90px,scrollbars=1,titlebar=no');"/>

 <a href="javascript:void(0);" onclick="javascript:window.open('http://google.com','infoWindow','height=458px,width=992px,resizable=1,location=no,top=90px,left=90px,scrollbars=1,titlebar=no');">Click Here For Popup</a>

 </body>
</html>

Posted by at No comments:

Wednesday, May 8, 2013

Using Iframe and Ajax on links and buttons:


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>&nbsp; &nbsp;
<input type="button" id="iframeBtn" class='iframe' value="Click Here for iframe!"/>&nbsp; &nbsp;
<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">&#160;</script>
    <!-- jQuery Fancybox -->
    <script type="text/javascript" src="http://localhost:8006/js/fancybox/jquery.mousewheel-3.0.4.pack.js">&#160;</script>
<script type="text/javascript" src="http://localhost:8006/js/fancybox/jquery.fancybox-1.3.4.pack.js">&#160;</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>&nbsp; &nbsp;
<input type="button" id="iframeBtn" class='iframe' value="Click Here for iframe!"/>&nbsp; &nbsp;
<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.

 ---------------------------------------------------------------------------------------------------------------------
Posted by at No comments:
Subscribe to: Posts (Atom)