All geek questions in one place

What is the best way to organize unobtrusive JavaScript across multiple pages?

I like jQuery, but I have a problem with a large site and multiple pages. My problem is that each page has unique requirements, and I need to know how best to tell jQuery which pages to activate certain things. For example, some forms need the Validator plugin , and some do not, some tables use the DataTables plugin , and some do not, etc.

Now, I think, I could build complex logic (switch statements) into an application JavaScript file that runs different actions depending on which page they are on, but it just seems smelly. What is the best practice here?

UPDATE: There were a lot of good ideas on this, but not quite what I am looking for. Let me rephrase the question in a more general way.

I am currently using Rails and its Prototype helpers to create my AJAX components, but I want to migrate to UJS. How to tell jQuery which links / buttons to do AJAX and what to avoid? And, given that I can distinguish between those that should have AJAX, how can I give each link its own parameters (method, update, etc.), How could I with helpers?

I mean, besides creating a huge page of specific jQuery selectors for each individual link / button. :)

+3
source share
5 answers

, javascript , . , , , .

, , , , javascript , .

, , DOM? , validator() $('form'). validate(), , , . ?

, , , jQuery, . , <form> , validator(), - <form> ( <form> validator()), CSS <form>, .

<!-- HTML -->

<!-- need to apply plugin to this -->    
<form class="validator"> ... </form>

<!-- but not to this -->
<form> ... </form>

<script type="text/javascript">
// jQuery Code (in a separate file)

$(function() {
    $('form.validator').validator();
});
</script>

, <form>, .

EDIT:

, rails, jQuery, data bind() , <a> (, href). AJAX, , CSS, URL- href . jQuery, , , AJAX, -

<a class="ajax-link" href="/get/someData.php">Data retrieved through AJAX</a>

<a href="/normalLink.php">Standard link with no AJAX</a>

<script type="text/javascript">
$('a.ajax-link').bind('click',ajaxRequest);

function ajaxRequest(e) {
    e.preventDefault(); 
    $.get(e.target.href, function(data) {
      $('#loadDiv').html(data);
    });
}
</script>

, JavaScript, AJAX , JavaScript. ajaxRequest, script (, , ), , .

+1

jQuery DOM, :

$("#element").myPlugin();

, , .

, - :

if($("#element").length) $("#element").myPlugin();
+2

, , - id body , id - (<body id="contact">). javascript css .

:

<!-- HTML -->

<!-- need to apply plugin to these forms -->    
<form> ... </form> on the about.php page

<!-- but not to this -->
<form> ... </form> on the index.php page

<script type="text/javascript">
// jQuery Code (in a separate file)

$(function() {
    $('body#about form').validator();
});
</script>
0

JavaScript, , . .

<script type="text/javascript" src="scriptaculous.js?load=effects,dragdrop">

, , /, html , . Django :

class CalendarWidget(forms.TextInput):
    class Media:
        css = {
            'all': ('pretty.css',)
        }
        js = ('animations.js', 'actions.js')
0

Source: https://habr.com/ru/post/1727037/

More articles:


All Articles