Calling a Function thats inside a plugin from another .js file
Question
I have reviewed many other related question, but still am unable to get this to work.
This is the Plugin:
(function($){
$.fn.smartWizard = function(action) {
var options = $.extend({}, $.fn.smartWizard.defaults, action);
var args = arguments;
return this.each(function(){
var obj = $(this);
var curStepIdx = options.selected;
var steps = $("ul > li > a[href^='#step-']", obj); // Get all anchors in this array
var contentWidth = 0;
var loader,msgBox,elmActionBar,elmStepContainer,btNext,btPrevious,btFinish;
elmActionBar = $('.actionBar',obj);
if(elmActionBar.length == 0){
elmActionBar = $('<div></div>').addClass("actionBar");
}
msgBox = $('.msgBox',obj);
if(msgBox.length == 0){
msgBox = $('<div class="msgBox"><div class="content"></div><a href="#" class="close">X</a></div>');
elmActionBar.append(msgBox);
}
$('.close',msgBox).click(function() {
msgBox.fadeOut("normal");
return false;
});
// Method calling logic
if (!action || action === 'init' || typeof action === 'object') {
init();
}else if (action === 'showMessage') {
//showMessage(Array.prototype.slice.call( args, 1 ));
var ar = Array.prototype.slice.call( args, 1 );
showMessage(ar[0]);
return true;
}else if (action === 'setError') {
var ar = Array.prototype.slice.call( args, 1 );
setError(ar[0].stepnum,ar[0].iserror);
return true;
} else {
$.error( 'Method ' + action + ' does not exist' );
}
function init(){
var allDivs =obj.children('div'); //$("div", obj);
obj.children('ul').addClass("anchor");
allDivs.addClass("content");
// Create Elements
loader = $('<div>Loading</div>').addClass("loader");
elmActionBar = $('<div></div>').addClass("actionBar");
elmStepContainer = $('<div></div>').addClass("stepContainer");
btNext = $('<a>'+options.labelNext+'</a>').attr("href","#").addClass("buttonNext");
btPrevious = $('<a>'+options.labelPrevious+'</a>').attr("href","#").addClass("buttonPrevious");
btFinish = $('<a>'+options.labelFinish+'</a>').attr("href","#").addClass("buttonFinish");
// highlight steps with errors
if(options.errorSteps && options.errorSteps.length>0){
$.each(options.errorSteps, function(i, n){
setError(n,true);
});
}
elmStepContainer.append(allDivs);
elmActionBar.append(loader);
obj.append(elmStepContainer);
obj.append(elmActionBar);
if (options.includeFinishButton) {
elmActionBar.append(btFinish);
}
elmActionBar.append(btNext).append(btPrevious);
contentWidth = elmStepContainer.width();
$(btNext).click(function() {
if($(this).hasClass('buttonDisabled')){
return false;
}
doForwardProgress();
if ($.isFunction(options.onNext)) {
if (!options.onNext.call(this, $(steps))) {
}
}
return false;
});
$(btPrevious).click(function() {
if($(this).hasClass('buttonDisabled')){
return false;
}
doBackwardProgress();
if ($.isFunction(options.onPrevious)) {
if (!options.onPrevious.call(this, $(steps))) {
}
}
return false;
});
$(btFinish).click(function() {
if(!$(this).hasClass('buttonDisabled')){
if($.isFunction(options.onFinish)) {
if(!options.onFinish.call(this,$(steps))){
return false;
}
}else{
var frm = obj.parents('form');
if(frm && frm.length){
frm.submit();
}
}
}
return false;
});
$(steps).bind("click", function(e){
if(steps.index(this) == curStepIdx){
return false;
}
var nextStepIdx = steps.index(this);
var isDone = steps.eq(nextStepIdx).attr("isDone") - 0;
if(isDone == 1){
LoadContent(nextStepIdx);
}
return false;
});
// Enable keyboard navigation
if(options.keyNavigation){
$(document).keyup(function(e){
if(e.which==39){ // Right Arrow
doForwardProgress();
}else if(e.which==37){ // Left Arrow
doBackwardProgress();
}
});
}
// Prepare the steps
prepareSteps();
// Show the first slected step
LoadContent(curStepIdx);
}
function prepareSteps(){
if(!options.enableAllSteps){
$(steps, obj).removeClass("selected").removeClass("done").addClass("disabled");
$(steps, obj).attr("isDone",0);
}else{
$(steps, obj).removeClass("selected").removeClass("disabled").addClass("done");
$(steps, obj).attr("isDone",1);
}
$(steps, obj).each(function(i){
$($(this).attr("href"), obj).hide();
$(this).attr("rel",i+1);
});
}
function LoadContent(stepIdx){
var selStep = steps.eq(stepIdx);
var ajaxurl = options.contentURL;
var hasContent = selStep.data('hasContent');
stepNum = stepIdx+1;
if(ajaxurl && ajaxurl.length>0){
if(options.contentCache && hasContent){
showStep(stepIdx);
}else{
$.ajax({
url: ajaxurl,
type: "POST",
data: ({step_number : stepNum}),
dataType: "text",
beforeSend: function(){ loader.show(); },
error: function(){loader.hide();},
success: function(res){
loader.hide();
if(res && res.length>0){
selStep.data('hasContent',true);
$($(selStep, obj).attr("href"), obj).html(res);
showStep(stepIdx);
}
}
});
}
}else{
showStep(stepIdx);
}
}
function showStep(stepIdx){
var selStep = steps.eq(stepIdx);
var curStep = steps.eq(curStepIdx);
if(stepIdx != curStepIdx){
if($.isFunction(options.onLeaveStep)) {
if(!options.onLeaveStep.call(this,$(curStep))){
return false;
}
}
}
if (options.updateHeight)
elmStepContainer.height($($(selStep, obj).attr("href"), obj).outerHeight());
if(options.transitionEffect == 'slide'){
$($(curStep, obj).attr("href"), obj).slideUp("fast",function(e){
$($(selStep, obj).attr("href"), obj).slideDown("fast");
curStepIdx = stepIdx;
SetupStep(curStep,selStep);
});
} else if(options.transitionEffect == 'fade'){
$($(curStep, obj).attr("href"), obj).fadeOut("fast",function(e){
$($(selStep, obj).attr("href"), obj).fadeIn("fast");
curStepIdx = stepIdx;
SetupStep(curStep,selStep);
});
} else if(options.transitionEffect == 'slideleft'){
var nextElmLeft = 0;
var curElementLeft = 0;
if(stepIdx > curStepIdx){
nextElmLeft1 = contentWidth + 10;
nextElmLeft2 = 0;
curElementLeft = 0 - $($(curStep, obj).attr("href"), obj).outerWidth();
} else {
nextElmLeft1 = 0 - $($(selStep, obj).attr("href"), obj).outerWidth() + 20;
nextElmLeft2 = 0;
curElementLeft = 10 + $($(curStep, obj).attr("href"), obj).outerWidth();
}
if(stepIdx == curStepIdx){
nextElmLeft1 = $($(selStep, obj).attr("href"), obj).outerWidth() + 20;
nextElmLeft2 = 0;
curElementLeft = 0 - $($(curStep, obj).attr("href"), obj).outerWidth();
}else{
$($(curStep, obj).attr("href"), obj).animate({left:curElementLeft},"fast",function(e){
$($(curStep, obj).attr("href"), obj).hide();
});
}
$($(selStep, obj).attr("href"), obj).css("left",nextElmLeft1);
$($(selStep, obj).attr("href"), obj).show();
$($(selStep, obj).attr("href"), obj).animate({left:nextElmLeft2},"fast",function(e){
curStepIdx = stepIdx;
SetupStep(curStep,selStep);
});
} else{
$($(curStep, obj).attr("href"), obj).hide();
$($(selStep, obj).attr("href"), obj).show();
curStepIdx = stepIdx;
SetupStep(curStep,selStep);
}
return true;
}
function SetupStep(curStep,selStep){
$(curStep, obj).removeClass("selected");
$(curStep, obj).addClass("done");
$(selStep, obj).removeClass("disabled");
$(selStep, obj).removeClass("done");
$(selStep, obj).addClass("selected");
$(selStep, obj).attr("isDone",1);
adjustButton();
if($.isFunction(options.onShowStep)) {
if(!options.onShowStep.call(this,$(selStep))){
return false;
}
}
}
function doForwardProgress(){
var nextStepIdx = curStepIdx + 1;
if(steps.length <= nextStepIdx){
if(!options.cycleSteps){
return false;
}
nextStepIdx = 0;
}
LoadContent(nextStepIdx);
}
function doBackwardProgress(){
var nextStepIdx = curStepIdx-1;
if(0 > nextStepIdx){
if(!options.cycleSteps){
return false;
}
nextStepIdx = steps.length - 1;
}
LoadContent(nextStepIdx);
}
function adjustButton(){
if(!options.cycleSteps){
if(0 >= curStepIdx){
$(btPrevious).addClass("buttonDisabled");
}else{
$(btPrevious).removeClass("buttonDisabled");
}
if((steps.length-1) <= curStepIdx){
$(btNext).addClass("buttonDisabled");
}else{
$(btNext).removeClass("buttonDisabled");
}
}
// Finish Button
if(!steps.hasClass('disabled') || options.enableFinishButton){
$(btFinish).removeClass("buttonDisabled");
}else{
$(btFinish).addClass("buttonDisabled");
}
}
function showMessage(msg){
$('.content',msgBox).html(msg);
msgBox.show();
}
function setError(stepnum,iserror){
if(iserror){
$(steps.eq(stepnum-1), obj).addClass('error')
}else{
$(steps.eq(stepnum-1), obj).removeClass("error");
}
}
});
};
// Default Properties and Events
$.fn.smartWizard.defaults = {
selected: 0, // Selected Step, 0 = first step
keyNavigation: true, // Enable/Disable key navigation(left and right keys are used if enabled)
enableAllSteps: false,
updateHeight: true,
transitionEffect: 'fade', // Effect on navigation, none/fade/slide/slideleft
contentURL:null, // content url, Enables Ajax content loading
contentCache:true, // cache step contents, if false content is fetched always from ajax url
cycleSteps: false, // cycle step navigation
includeFinishButton: false, // whether to show a Finish button
enableFinishButton: false, // make finish button enabled always
errorSteps:[], // Array Steps with errors
labelNext:'Next',
labelPrevious:'Previous',
labelFinish:'Finish',
onLeaveStep: null, // triggers when leaving a step
onShowStep: null, // triggers when showing a step
onFinish: null, // triggers when Finish button is clicked
onNext: null, // triggers when Finish button is clicked
onPrevious: null // triggers when Finish button is clicked
};
})(jQuery);
This is how I am calling:
<span class="LinkMe" onclick="showStep(0);">
I understand that using a selector to grab the click event is preferable.
How do I properly call the showStep() function, or is it not possible?
EDIT:
<script type="text/javascript">
(function ($) {
$(document).ready(function () {
$('#wizard').smartWizard({
selected: 0, // Selected Step, 0 = first step
keyNavigation: true, // Enable/Disable key navigation(left and right keys are used if enabled)
enableAllSteps: true, // Enable/Disable all steps on first load
transitionEffect: 'fade', // Effect on navigation, none/fade/slide/slideleft
contentURL: null, // specifying content url enables ajax content loading
contentCache: true, // cache step contents, if false content is fetched always from ajax url
cycleSteps: false, // cycle step navigation
enableFinishButton: true, // makes finish button enabled always
errorSteps: [], // array of step numbers to highlighting as error steps
labelNext: 'Next', // label for Next button
labelPrevious: 'Previous', // label for Previous button
labelFinish: 'Buy Now', // label for Finish button
// Events
onLeaveStep: null, // triggers when leaving a step
onShowStep: ShowComp_Price, // triggers when showing a step
onFinish: null, // triggers when Finish button is clicked
onNext: NextBtnClick, // triggers when Next button is clicked
onPrevious: PrevBtnClick // triggers when Previous button is clicked
});
})
})(jQuery)
</script>
1 answers
solution1
1 ACCPTED 2013-04-25 22:33:42
showStep is not visible in the global scope, which is why DOM0 binding doesn't work.
The only way this will work is if you expose the showStep function in the global scope, which requires changing the source code inside the plugin.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
JS: calling a function from another JS file
Calling a javascript function from another .js file
Titanium, calling a function in one JS file from another JS file
calling public method from another js function inside service
Calling a function from another javascript file inside a javascript file
Calling Function from another JS file(not a game state) Phaser js
problem calling namespaced function from javascript function in another js file
Calling a function inside another on Class JS
Calling a js function from another content script file
Calling a function from another JS file And Node Directory Structure
Related Tags