How to manage the java scripts references between different pages and needs

Question

Let's say I have couple of web pages where a single datepicker is used. In addition, I have another web page where I need 3 datepickers on the same page.

So how do I manage the java script id reference? Should I have single script in _layout.xml with something like this?

<script>
        $(document).ready(function () {            
            $("#datepicker1").datepicker();
            $("#datepicker2").datepicker();
            $("#datepicker3").datepicker();
        });
    </script>

And all pages (besides the multiple) will have :

 <div id="datepicker1"></div>

and the multiple will have:

 <div id="datepicker1"></div>
 <div id="datepicker2"></div>
 <div id="datepicker3"></div>

I come from OO programming and something doesn't fit here. What are the conventions in web\js world to this common use case?

Edit: the mmultiple datepicker page script has different settings...

It's possible to grab multiple IDs in jQuery with $('[id^="datepicker"]').datepicker(), but as has been noted below, the best solution is a common class. — Blazemonger
– Blazemonger, Commented Jan 16, 2014 at 16:50

Anthony Grist · Accepted Answer · 2014-01-16 16:28:18Z

1

It depends. If they all use exactly the same settings, use a class:

<div class="datepicker"></div>

then

$('.datepicker').datepicker();

That will handle everything with the class datepicker on it, no matter how many there are (one, three, ten thousand [though that might make the page incredibly slow]).

If they need different settings then you'll need to stick with IDs, and initialise them all individually, as you've shown in the question.

answered Jan 16, 2014 at 16:28

Anthony Grist

38.4k8 gold badges64 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user1025852 Over a year ago

Thanks for all the answers in this thread. I have decided to go with common class to all and for multiple (which has different settings) I'll create its own thing. cheers!

Alvaro · Accepted Answer · 2014-01-16 16:28:13Z

0

I would use a class instead of an ID if they are all going to initializate the plugin in the same way:

<script> 
$(document).ready(function () {
    $(".datepicker").datepicker();
}); 
</script>

HTML

<div class="datepicker"></div>
<div class="datepicker"></div>
<div class="datepicker"></div>

answered Jan 16, 2014 at 16:28

Alvaro

41.7k31 gold badges174 silver badges352 bronze badges

7 Comments

Katie Kilian Over a year ago

This is what I do too. But here is what I don't like about it: ReSharper and Visual Studio warn me that the class is not defined anywhere. I could always put extra markup in my CSS, but that seems like the exact wrong answer to me. Has anyone else solved this problem?

Anthony Grist Over a year ago

@CharlieKilian It's a warning, not an error, so feel free to ignore it; as far as I'm aware/concerned using classes explicitly for identifying elements (i.e. the class has no attached styling) is a standard practice.

Alvaro Over a year ago

@CharlieKilian I don't see any problem with it. Those warnings aren't suppose to be there. This is technically the good way to do it.

Katie Kilian Over a year ago

Agree with you both. I hate ignoring warnings, is the only thing. It leads to a bad mindset. But thank you both for your feedback. Good to know I'm not the only one.

Alvaro Over a year ago

@CharlieKilian are you saying that sometimes the .datepicker won't be in the HTML markup while the javasript calling it will?

|

Collectives™ on Stack Overflow

How to manage the java scripts references between different pages and needs

2 Answers 2

1 Comment

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related