0

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');
});
4
  • 2
    Make an object with key/value pairs mapping the class name to the url_ values, then enumerate the object, using the key for the selector, and the value for the .load() argument. This assumes the urls don't change. If they do, you'll need to update them in the object. Commented Jul 25, 2013 at 16:59
  • ...another option is to bind the same handler to all the classes, then use .hasClass() to choose which url_ to use. Commented Jul 25, 2013 at 17:01
  • use .hasClass()? Can you show me an example? Sorry to trouble you, but I'm a bit new in this field... Commented Jul 25, 2013 at 17:03
  • Sure, I posted an answer with both examples Commented Jul 25, 2013 at 17:09

10 Answers 10

2
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");
});
Sign up to request clarification or add additional context in comments.

1 Comment

I prefer the first one. Anyway, great respond from everyone. Thank you for taking your time! Great to have you guys around here.
1

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');
});

1 Comment

I like this solution the best. If possible, attach all the information needed as data attributes when serving the page, then use a generalized function to perform a given function using the element's data attributes.
1

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');
    });
}

3 Comments

This won't work because the loop value of i won't be retained in the handler. (JavaScript doesn't have block scope.)
If you declare i outside of the loop (var i;), it should work fine, no?
No, the loop updates i with each iteration, but the current value in the loop isn't captured in the click handler. The handler creates a closure over the enclosing variable scope, which means it's going to read the current value of i when the click takes place. That value will be wherever it was left after the loop finished.
0
$(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');
  }

Comments

0

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

Comments

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

Edit: on second thoughts - do what Eltier says.

2 Comments

You're using the same url for all the elements.
Do what @eltiar says. I was just simplifying the selectors.
0

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');
});

Comments

0

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>

Comments

0

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) });

Comments

0

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.

3 Comments

Where is parameter coming from?
As i say, you can save a parameter in de caller object using .data(), you can use url if is an anchor, or you can put de parameter in de html like this: <div class=".cust-profile" data-parameter="cust-profile"></div>.
It's just confusing. You're passing the value of the parameter variable, which will be undefined. Maybe you meant .data("parameter")

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.