CODEWITHSUNDEEP
javascriptjquery
rolodex
rolodex

Reputation: 530

Simplifying a jQuery functions

I was wondering the method of simplifying this script, because somehow I am repeating myself all over again...

$('.userprofile').click(function(){
    card_profile.load(url_settings).dialog('open');
});
$('.cust-profile').click(function(){
    card_profile.load(url_customer).dialog('open');
});
$('.my-profile').click(function(){
    card_profile.load(url_my).dialog('open');
});

Upvotes: 0

Views: 102

Answers (10)

Aarón Cárdenas
Aarón Cárdenas

Reputation: 342

You can save a parameter in de caller object and then do something like this:

$('.userprofile, .cust-profile, .my-profile').on('click',function(){
    var parameter = $(this).data( 'parameter' );
    card_profile.load( parameter ).dialog( 'open' );
});

You can find more information about storing data here, is very easy.

Upvotes: 0

Alex Hornbake
Alex Hornbake

Reputation: 50

Throwing another hat in the ring here...

var links = [{profile: '.userprofile', url: url_settings, clickDialog: 'open'},
             {profile: '.cust-profile', url: url_customer, clickDialog: 'open'},
             {profile: '.my-profile', url: url_my, clickDialog: 'open'}];

function clickOpen(url,value) {
    card_profile.load(url).dialog(value);
}

links.forEach(function(element) { $(element.profile).click(
clickOpen(element.url,element.clickDialog) });

Upvotes: 0

lando
lando

Reputation: 440

One way to do this would be to iterate over an array (or two) of strings.

Edit: declared i outside of for loop to address comment from @crazytrain

arr = ['user', 'cust', 'my'];
url_arr = [urlA, urlB, urlC];
var i;
for (i in arr){
    $('.' + arr[i] + '-profile').click(function(){
        card_profile.load(url_arr[i]).dialog('open');
    });
}

Upvotes: 1

user2437417
user2437417

Reputation: 

var obj = {
    '.userprofile' : url_settings,
    '.cust-profile': url_customer,
    '.my-profile'  : url_my
};

$.each(obj, function(sel, url) {
    $(sel).click(function(){
        card_profile.load(url).dialog('open');
    });
});

or

$(".userprofile,.cust-profile,.my-profile").click(function() {
    var url = $(this).hasClass("userprofile")  ? url_settings :
              $(this).hasClass("cust-profile") ? url_customer :
                                                 url_my;
    card_profile.load(url).dialog("open");
});

Upvotes: 2

iConnor
iConnor

Reputation: 20189

You could use the html data attribute and have it simple like this

$('.userprofile, .cust-profile, .my-profile').click(function(){
    var url = $(this).attr('data-url');
    card_profile.load( url ).dialog('open');
});

<div class="userprofile" data-url="settings.php">Settings</div>

And to make it even better you could add a class to all load items like this 

$('.load-box').click(function(){
    var url = $(this).attr('data-url');
    card_profile.load( url ).dialog('open');
});

<div class="userprofile load-box" data-url="settings.php">Settings</div>

Upvotes: 0

Nishu Tayal
Nishu Tayal

Reputation: 20830

Assign a url attribute to each element. Then you can retrieve that value and use in your code in this way.

$('.userprofile').attr('url',url_settings);
$('.cust-profile').attr('url',url_customer);
$('.my-profile').attr('url',url_my);
$('.my-profile, .userprofile, .cust-profile').click(function(){
    var url = $(this).attr('url');
    card_profile.load(url).dialog('open');
});

Upvotes: 0

fred2
fred2

Reputation: 1110

$('.my-profile, .userprofile, .cust-profile').click(function(){
    card_profile.load(url).dialog('open');
});

Edit: on second thoughts - do what Eltier says.

Upvotes: 0

DACrosby
DACrosby

Reputation: 11440

It's a little better with a function:

$('.userprofile').click(function(){
    loadDiag(url_settings);
});
$('.cust-profile').click(function(){
    loadDiag(url_customer);
});
$('.my-profile').click(function(){
    loadDiag(url_my);
});

function loadDiag(url){
    card_profile.load(url).dialog('open');
}

You could also switch through the parameter and do multiple things per click

Upvotes: 0

steo
steo

Reputation: 4656

$(document).on('click', function(e){
  if($(e.target).hasClass('userprofile')){
    card_profile.load(url_settings).dialog('open');
  }
  if($(e.target).hasClass('cust-profile')){
    card_profile.load(url_costumer).dialog('open');
  }
  if($(e.target).hasClass('myprofile')){
    card_profile.load(url_my).dialog('open');
  }

Upvotes: 0

Balint Bako
Balint Bako

Reputation: 2560

This is somewhat better, but you can't get significant gain I guess:

$('.userprofile').data('url',url_settings);
$('.cust-profile').data('url',url_customer);
$('.my-profile').data('url',url_my);
$('.userprofile, .cust-profile, .my-profile').click(function(){
    card_profile.load($(this).data('url')).dialog('open');
});

If you assign URL to every button, then you don't have to repeat the classes:

$('button').click(function(){
    card_profile.load($(this).data('url')).dialog('open');
});

Upvotes: 1

Related Questions