Passing typeof function

[aze]

Hello,

I need help.
I have thjis plugin

(function($){
$.fn.btnInit = function() {
  function prepare(obj, caption, action) {
    obj
        .html(caption)
        .addClass("fg-button ui-state-default ui-corner-all")
        .click(function(){
                  // run the action here when click triggered
                   alert('Do some action');});
        };

        return this.each(function(caption, action){
                obj = $(this);
                prepare(obj, caption, action);
        });

};


})(jQuery);


and the problem is how do I modify the click event so that it can
accept function as below

$(".btnA").btnInit("Button A", function () { do some action 1 });
$(".btnB").btnInit("Button B", function () { do some action 2 });

different button will have a different action.

I'm stuck here. Pls help

Thanks

[aze]

ops typo error the plugin is like this

(function($){
$.fn.btnInit = function() {
  function prepare(obj, caption, action) {
    obj
        .html(caption)
        .addClass("fg-button ui-state-default ui-corner-all")
        .click(function(){
                  // run the action here when click triggered
                   alert('Do some action');});
        };


        return this.each(function(){
                obj = $(this);
                prepare(obj, caption, action);
        });



};
})(jQuery);

[waseem sabjee]

lets assume the following markup

<a href="#" class="button">a button</a> |

<a href="#" class="button">a button</a> |

<a href="#" class="button">a button</a> |

<a href="#" class="button">a button</a> 

you want to be able to differentiate between the buttons on click event

var obj = $(".button");

obj.click(function(e) {

 e.preventDefault();

 var index = obj.index($(this));

 alert("my button index is "+index);

});

this should help

On Fri, Nov 6, 2009 at 11:19 AM, aze <aziem@...> wrote:

Hello,

I need help.
I have thjis plugin

(function($){
$.fn.btnInit = function() {
 function prepare(obj, caption, action) {
   obj
       .html(caption)
       .addClass("fg-button ui-state-default ui-corner-all")
       .click(function(){
                 // run the action here when click triggered
                  alert('Do some action');});
       };

       return this.each(function(caption, action){
               obj = $(this);
               prepare(obj, caption, action);
       });

};


})(jQuery);


and the problem is how do I modify the click event so that it can
accept function as below

$(".btnA").btnInit("Button A", function () { do some action 1 });
$(".btnB").btnInit("Button B", function () { do some action 2 });

different button will have a different action.

I'm stuck here. Pls help

Thanks

[aze]

Thanks for the reply

but as you can see I need to do initialize something and then hook the
click event. The html markup is like this

<a href="#" class="btnA"></a>
<a href="#" class="btnB"></a>

then after page load, script will execute as follow

$(".btnA").btnInit("Button A", function () { do some action 1 });
$(".btnB").btnInit("Button B", function () { do some action 2 });


different button has different action
then , I have this plugin

(function($){
$.fn.btnInit = function() {
  function prepare(obj, caption, action) {
    obj
        .html(caption)
        .addClass("fg-button ui-state-default ui-corner-all")
        .click(function(){
                  // run the action here when click triggered
                   alert('Do some action');});
        };


        return this.each(function(caption, action){
                obj = $(this);
                prepare(obj, caption, action);
        });



};
})(jQuery);


Thanks

[waseem sabjee]

markup

<a href="#" class="button buttona">A</a>

<a href="#" class="button buttonb">A</a>

on page load function

var obj = $(".button");

obj.each(function(i) {

 if(obj.eq(i).hasClass('buttona') {

  obj.eq(i).click(function() {

    alert(' I am button A ' );

  });

 }

});

does this work better for you ?

On Fri, Nov 6, 2009 at 11:34 AM, aze <aziem@...> wrote:

Thanks for the reply

but as you can see I need to do initialize something and then hook the
click event. The html markup is like this

<a href="#" class="btnA"></a>
<a href="#" class="btnB"></a>

then after page load, script will execute as follow

$(".btnA").btnInit("Button A", function () { do some action 1 });
$(".btnB").btnInit("Button B", function () { do some action 2 });

different button has different action
then , I have this plugin

(function($){
$.fn.btnInit = function() {
 function prepare(obj, caption, action) {
   obj
       .html(caption)
       .addClass("fg-button ui-state-default ui-corner-all")
       .click(function(){
                 // run the action here when click triggered
                  alert('Do some action');});
       };


       return this.each(function(caption, action){
               obj = $(this);
               prepare(obj, caption, action);
       });



};
})(jQuery);

Thanks

[waseem sabjee]

syntax error

<a href="#" class="button buttona">A</a>

<a href="#" class="button buttonb">A</a>

on page load function

var obj = $(".button");

obj.each(function(i) {

 if(obj.eq(i).hasClass('buttona')) {

  obj.eq(i).click(function() {

    alert(' I am button A ' );

  });

 }

});

On Fri, Nov 6, 2009 at 11:40 AM, waseem sabjee <waseemsabjee@...> wrote:

markup

<a href="#" class="button buttona">A</a>

<a href="#" class="button buttonb">A</a>

on page load function

var obj = $(".button");

obj.each(function(i) {

 if(obj.eq(i).hasClass('buttona') {

  obj.eq(i).click(function() {

    alert(' I am button A ' );

  });

 }

});

does this work better for you ?

On Fri, Nov 6, 2009 at 11:34 AM, aze <aziem@...> wrote:

Thanks for the reply

but as you can see I need to do initialize something and then hook the
click event. The html markup is like this

<a href="#" class="btnA"></a>
<a href="#" class="btnB"></a>

then after page load, script will execute as follow

$(".btnA").btnInit("Button A", function () { do some action 1 });
$(".btnB").btnInit("Button B", function () { do some action 2 });

different button has different action
then , I have this plugin

(function($){
$.fn.btnInit = function() {
 function prepare(obj, caption, action) {
   obj
       .html(caption)
       .addClass("fg-button ui-state-default ui-corner-all")
       .click(function(){
                 // run the action here when click triggered
                  alert('Do some action');});
       };


       return this.each(function(caption, action){
               obj = $(this);
               prepare(obj, caption, action);
       });



};
})(jQuery);

Thanks

[aze]

Thanks again but it still to hard for me to run the script if i have
several ajax calls, does the obj object (in your code) refreshes when
I do ajax calls and there are button of same type in it?

What I want actually....
I have content loaded thru ajax and inside it have buttons and i want
to simplify the button's theme, caption and at the same time passing
function to the click event. I change my code for better understanding

A) in loaded content
<a href="#" class="btnA"></a>
<a href="#" class="btnB"></a>


then after page load, script will execute as follow

B) in document.ready() of the loaded content
$(".btnA").btnInit("Button A", function () {
    alert('This is button A');
   // do some other action_1 when clicked
});
$(".btnB").btnInit("Button B", function () {
    alert ('This is button B');
    // do some action_2 when clicked
});


different button has different action
then , I have this plugin in a different file

C) included in mainpage
(function($){
$.fn.btnInit = function() {
  function prepare(obj, caption, action) {
    obj
        .html(caption)
        .addClass("fg-button ui-state-default ui-corner-all")
        .click(function(){
                  // run the function passed by the script in B)
                  //
        };


        return this.each(function(caption, action){
                obj = $(this);
                prepare(obj, caption, action);
        });



};
})(jQuery);

Sorry for this hassle.

[aze]

Thanks waseem,

I think I have found what I want

You code also give me some ideas and had used part of it.
Thanks again