Question

I’m building my first jquery plugin and would like some tips to do it better. I also have an error in my code which I like to get rid off. I’m trying to refresh the content of my widget via a setTimeout in my ajax success callback. it is working (without argument) but I like to pass an argument like so

setTimeout(refresh(o.refresh), 5000);

I’m not sure it is done like that but I followed my intuition. I have the following error in firebug

useless setTimeout call (missing quotes around argument?)

I don’t understand this error because the argument provided to the refresh function is a variable. I need to pass an argument to see if the event is triggered by a user double click (widget toggles open) or by the setTimeout method (widget is open so there is no need to close it). I’m not sure that what I’m trying to do is even possible. I could solve my problem by adding a conditional ajax call for the refresh option but I don’t want duplicate code. hope anyone can give me some hints ‘n’ tips, not only for my error but also in general (plugin development). as a jquery starter I’m not sure my code is conventional.

peace

        /**
 * @author kasperfish
 */
(function($){
    $.fn.extend({

    widgetIt: function(options) {

        var defaults = {
            title: 'Widget Title',
            load:'',
            top: '50px',
            left: '400px',
            width: '500px',
            afterLoad: function(){},
            reload:false,
            refresh:true
        };

        var options = $.extend(defaults, options);
        var o=options;

        return this.each(function() { 

              var container=$(this).css({'z-index':3, display:'inline-block',position:'absolute',top:o.top,left:o.left,'max-width':o.width})
                            .addClass('widget_container');
              var header = $('<div></div>')
                            .addClass('ui-widget-header widgethead')
                            .css({'min-width':'130px'});

              var title =$('<div></div>').addClass("w_tit").html(o.title);
              var content =$('<div></div>')
                           .addClass("w_content")
                           .hide();


              //append
              $(title).appendTo(header) ;
              $(header).appendTo(container) ;
              $(content).appendTo(container) ;

              //make draggable
              $(container).draggable({
                cancel: 'input,option, select,textarea,.w_content',
                opacity: 0.45,
                cursor: 'move'
                });

              //binding
                var display=$(content).css('display'); //check if widget is open=block or closed=none
                var reload=true ; //set initially to true->reload content every time widget opened
                var refreshcontent=false;
              $(header).dblclick(function refresh(refreshcontent){

                if(!refreshcontent)//if it's not a refresh
                $(content).fadeToggle();//open or close widget
                //[show ajax spinner]

                    if(display="block" && reload){//only load on widget open event

                      $.ajax({
                        url: o.load,
                        context: content,
                        success: function(data){
                        $(content).html(data);
                        reload=false;
                        //[hide ajax spinner]
                        setTimeout(refresh(o.refresh), 5000);//refresh every 5s
                        o.afterLoad.call();},
                        error: function(){
                        // error code here
                        }
                        }); 
                    }else if(display="none"){reload=o.reload;}//set reload true or false
              });


             $(header).click(function (){
                $(container).topZIndex('.widget_container');

             });
             //close all open widgets and animate back to original position
             $('#deco').click(function (){
                        $(content).hide();
                        $(container).animate({ "left": o.left, "top": o.top}, "slow");

             });  
        });
    }
});
})(jQuery);

Answer 1

You’re passing the result of refresh(o.refresh) to setTimeout, which is why it’s useless. Instead, you need to pass a function that calls refresh(o.refresh) when the setTimeout fires:

setTimeout(function () { refresh(o.refresh); }, 5000);

As for “tips” to make your code better, I suggest you ask that part of your question on Code Review, which is more suited to that type of question.