PimenTech-scripts : jquery.jframe.js
Thanks to jQuery library, jFrame provides an easy way to get an HTML frame-like behaviour on DIV Elements with AJAX. It comes with Pimentech Scripts library. Also alvaiable on jQuery_site .
With jFrame, you can build smart, complex modern, internet apps without leaving the main page, without a single line of JavaScript !
Requirements
The following JavaScript files must be included in the head section of your HTML page :
- jquery.js : http://docs.jquery.com/Downloading_jQuery
- jquery.form.js : http://www.malsup.com/jquery/form/#download
- jquery.jframes.js : http://ftp.pimentech.net/src/pimentech-scripts/scripts/src/js/jquery.jframe.js
Usage Example
Here a demo.
index.html
<?xml version="1.0" encoding="utf-8"?>
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.form.js"></script>
<script type="text/javascript" src="jquery.jframe.js"></script>
</head>
<body>
<div id="jframe1" src="#">
<a href="index.html" target="jframe2">
on click, index.html will be loaded in "jframe2" div
</a>
<a href="test.html">
Without target, test.html will be loaded in the first parent jFrame : jframe1
</a>
Form inside jFrame. Note the target attribute on submit button.
<form method="post" action="test.html">
<input name="toto" value="popo" />
<input type="submit" name="submit" value="Search" target="jframe2" />
</form>
</div>
<div id="jframe2" src="test.html">
Second jFrame. This content will be replaced by "test.html"
</div>
<a href="index.html">Normal link outside jframe</a>
</body>
</html>
A jFrame is a DIV tag with a src attribute. In a jFrame, click events on <a> and <input type="submit"> tags will be handled by jframe and loaded in ajax.
Elements
jFrame : DIV with src attribute
Attributes
- id : jFrame id, required.
- src : url or "#", required. After a jFrame load, the src attribute value is replaced by the loaded url.
Links and Submit Buttons
Inside jFrames, onclick events on each link and submit button are redirected to jFrame plugin.
A link
With target attribute, the href value is loaded by an xmlhttprequest in <div id=target>. Without target attribute, the href value is loaded in the current jframe. JFrame can be desactivated on a particular link with jframe="no" attribute (same for submit buttons).
INPUT type="submit"
The submit buttons also support a target attribute, like <A> tags.
jFrame forms support get and post method, onsubmit form attribute.
BUTTON type="submit" are also supported.
jQuery API
$(div element).loadJFrame(url, callback) : like ajax.load function.
$(div element).activateJFrames() : the div element becomes a jFrame.
$(element).getJFrameTarget() : if exists, return the first jFrame parent element.
$(element).waitingJFrame() : Overload this function in your code if you want for example a "waiting" message. Example :
jQuery.fn.waitingJFrame = function () { $(this).html("<b>loading...</b>"); }
Source
// jFrame
// $Revision: 1.111 $
// Author: Frederic de Zorzi
// Contact: fredz@_nospam_pimentech.net
// Revision: $Revision: 1.111 $
// Date: $Date: 2008-07-10 16:30:20 $
// Copyright: 2007 PimenTech SARL
// Tags: ajax javascript pimentech english jquery
jQuery.fn.waitingJFrame = function () {
// Overload this function in your code to place a waiting event
// message, like : $(this).html("<b>loading...</b>");
}
jQuery.fn.onUnloadJFrame = function () {
jQuery(this).find("div[src][onunload]").add(jQuery(this))
.each(
function(i) {
if (eval(jQuery(this).attr("onunload")) == false) {
return false;
}
});
}
function jFrameSubmitInput(input) {
var target = jQuery(input).getJFrameTarget();
if (target.length) {
var form = input.form;
if (form.onsubmit && form.onsubmit() == false
|| target.preloadJFrame() == false) {
return false;
}
jQuery(form).ajaxSubmit({
target: target,
beforeSubmit: function(formArray) {
formArray.push({ name:"submit", value: jQuery(input).attr("value") });
},
success: function() {
target.attr("src", jQuery(form).attr("action"));
eval(target.attr("onload"));
target.activateJFrame();
}
});
return false;
}
return true;
}
jQuery.fn.preloadJFrame = function () {
if (jQuery(this).onUnloadJFrame() == false) {
return false;
}
jQuery(this).waitingJFrame();
}
jQuery.fn.getJFrameTarget = function () {
// Returns first parent jframe element, if exists
var div = jQuery(this).parents("div[@src]").get(0);
if (div) {
var target = jQuery(this).attr("target");
if (target) {
return jQuery("#" + target);
}
}
return jQuery(div);
};
jQuery.fn.loadJFrame = function(url, callback) {
// like ajax.load, for jFrame. the onload attribute is supported
var this_callback = jQuery(this).attr("onload");
callback = callback || function(){};
url = url || jQuery(this).attr("src");
if (url && url != "#") {
if (jQuery(this).preloadJFrame() == false) {
return false;
}
jQuery(this).load(url,
function() {
jQuery(this).attr("src", url);
jQuery(this).activateJFrame();
jQuery(this).find("div[@src]").each(function(i) {
jQuery(this).loadJFrame();
} );
eval(this_callback);
callback();
});
}
else {
jQuery(this).activateJFrame();
}
};
jQuery.fn.activateJFrame = function() {
// Add an onclick event on all <a> and <input type="submit"> tags
jQuery(this).find("a")
.not("[jframe='no']")
.unbind("click")
.click(function() {
var target = jQuery(this).getJFrameTarget();
if (target.length) {
var href = jQuery(this).attr("href");
if (href && href.indexOf('javascript:') != 0) {
target.loadJFrame(href);
return false;
}
}
return true;
} );
jQuery(":image,:submit,:button", this)
.not("[jframe='no']")
.unbind("click")
.click(function() {
return jFrameSubmitInput(this);
} );
// Only for IE6 : enter key invokes submit event
jQuery(this).find("form")
.unbind("submit")
.submit(function() {
return jFrameSubmitInput(jQuery(":image,:submit,:button", this).get(0));
} );
};
jQuery(document).ready(function() {
jQuery(document).find("div[@src]").each(function(i) {
jQuery(this).loadJFrame();
} );
} );
PDF version
Mike Septembre 23, 2007 at 12:39 après-midi
Hi.
This is really very useful. Thanks a lot !
I just saw one problem :
To select submits, you use
$(this).find("input[@type='submit']")
but submit can also be buttons with type =submit.
(thats what is use with struts2 ....)
So you should put instead
$(this).find("input[@type='submit'], button[@type='submit']")
I tested and it works.