CODEWITHSUNDEEP
javascriptjqueryasp.net-mvc-5visual-studio-2013
user1025852
user1025852

Reputation: 2804

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

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...

Upvotes: 0

Views: 67

Answers (2)

Anthony Grist
Anthony Grist

Reputation: 38345

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.

Upvotes: 1

Alvaro
Alvaro

Reputation: 41605

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>

Upvotes: 0

Related Questions