PDA

View Full Version : [AJAX] - Adjust script - content in div



webjunky
05-08-2008, 06:42 AM
Hello,

I found this script: http://www.andreacfm.com/index.cfm

Also posted here below.
I would like this script to also show content in the div on first pageload. Now the script just shows something when a user clicks the link.
How should this be adjusted?


(function($) {
//call teh method with options arguments
$.fn.ajaxContent = function(options) {
//extend to defaults
var defaults = $.extend({}, $.fn.ajaxContent.defaults, options);
// debug if required
if(defaults.debug == 'true'){
debug(this);
};
//Initilaize any instance looping on the match element
return this.each(function(){
//set local variables and extend to the metadata plugin if loaded
var $obj = $(this);
var href = $obj.attr('href');
var o = $.metadata ? $.extend({}, defaults, $obj.metadata()) : defaults;
// add binding change events on url if required
if(o.bind != ''){
var binds = o.bind.split(',');
for(var i=0; i < binds.length ; i++){
var queryString = setQueryString(binds);
var url = href + queryString;
$obj.attr({href:url});
if ($(binds).attr('type') == "radio" || $(binds[i]).attr('type') == "checkbox"){
$('input[name=' + $(binds[i]).attr("name") + ']').change(function(){
var queryString = setQueryString(binds);
var url = href + queryString;
$obj.attr({href:url});
});
}else{
$(binds[i]).change(function(){
var queryString = setQueryString(binds);
var url = href + queryString;
$obj.attr({href:url});
});
}
}
}
var $target = $(o.target);

//bind the event
$obj.bind(o.event, function(){
// add loader if required
if(o.loader == 'true'){
if(o.loaderType == 'img'){
$target.html('<img src="' + o.loadingMsg + '"/>');
}else{
$target.html(o.loadingMsg);
}
}
//remove add current class
$('a.' + o.currentClass).removeClass(o.currentClass);
$obj.addClass(o.currentClass);
// make the call
$.ajax({

type: o.type,
url: $obj.attr('href'),
cache:'false',
beforeSend:function(){
if(typeof o.beforeSend == 'function'){
o.beforeSend($obj,$target);
}
},
success: function(msg){
$target.html(msg);
if(o.extend == 'true'){
$(o.filter,$target).ajaxContent({
target:o.ex_target,
type:o.ex_type,
event:o.ex_event,
loader:o.ex_loader,
loaderType:o.ex_loaderType,
loadingMsg:o.ex_loadingMsg,
errorMsg:o.ex_errorMsg,
currentClass:o.ex_currentClass,
success:o.ex_success,
beforeSend:o.ex_beforeSend,
error:o.ex_error,
bind:o.ex_bind
});
}
//if a callback exist pass arguments ( object,target and receive message)
if(typeof o.success == 'function'){
o.success($obj,$target,msg);
}
},
error: function(){
$target.html("<p>" + o.errorMsg + "</p>");
if(typeof o.error == 'function'){
o.error($target);
}

}
});
return false;
});
});
};
function debug($obj) {
if (window.console && window.console.log)
window.console.log('selection count: ' + $obj.size() + ' with class:' + $obj.attr('class'));
};
function setQueryString(binds){
var queryString = '?';
for(var i=0; i < binds.length; i++){
if ($(binds[i]).attr('type') == "radio"){
queryString += $('input[name=' + $(binds[i]).attr("name") + ']').fieldSerialize();
}else if($(binds[i]).attr('type') == "checkbox"){
queryString += $(binds[i]).attr("name") + '=' + $('input[name=' + $(binds[i]).attr("name") + ']').fieldValue();
}
else{
queryString += $(binds[i]).fieldSerialize();
}
if(i != binds.length - 1){
queryString += '&';
}
}
return queryString;
};
})(jQuery);

$.fn.ajaxContent.defaults = {
target: '#ajaxContent',
type:'get',
event:'click',
loader:'true',
loaderType:'text',
loadingMsg:'Loading...',
errorMsg:'An error occured durign the page requesting process!',
currentClass:'selected',
success:'',
beforeSend:'',
error:'',
bind:'',
debug:'false',
extend:'false',
filter:'',
ex_target:'',
ex_type:'get',
ex_event:'click',
ex_loader:'true',
ex_loaderType:'text',
ex_loadingMsg:'Loading...',
ex_errorMsg:'An error occured durign the page requesting process!',
ex_currentClass:'selected',
ex_success:'',
ex_beforeSend:'',
ex_error:'',
ex_bind:''
};

jscheuer1
05-08-2008, 07:07 AM
Without slogging through the code to determine how it's activated and whether or not all I need to know about it is in the part you posted -

I can tell you that there are two basic approaches to take here.

1 ) If the 'onload' content is only needed once, just hard code it into the receiving element, it will be overwritten once the user starts using the script.

2 ) If the 'onload' content will possibly be needed again without a page reload, use an onload event to activate its importation using the script.

Even in case 2, you could just hard code the content into the receiver element, and have it available in an external file for re-importation later if requested.

Dynamic Drive has at least one AJAX script that will save a hard coded initial 'Tab' for you in a variable, so that it can be recalled later. This would be a third, but not so basic approach. That code can be found here:

http://www.dynamicdrive.com/dynamicindex17/ajaxtabscontent/index.htm

webjunky
05-08-2008, 08:33 AM
Hello,

I've seen the script referred to before.
But I use JQuery and would really like to use the script in m first post.

jscheuer1
05-08-2008, 08:38 AM
Use whatever you like, the principles are still the same. In other words, use either #1 or #2 from my previous post.

webjunky
05-08-2008, 08:39 AM
Oeps sorry...
Did not see the first #1...

*shame*