Using jquery directly in html (and twig)

Question

Short Version

Normally, I include jquery by writing a xy.js an including it in html/twig. This file than uses ready() or maybe load().

Are there any disadvantages, if I use jquery directly in a scipt-tag in twig and than - in some case - call that function directly in an other script-tag directly in the twig-file?

Long Version

While working on a problem (if you like to look...), I found out, that I need some really basic knowing:

When include jquery via an own js-file, you can do:

$(document).ready() should be used to do things, when the DOM is loaded - OK

$(document).load() should be used, if js depends on resources, that may not be fully loaded at ready()

But what, if I include some code directly in the html (or twig in my case). I.e. that:

   ...
   {% block subtitleRechts %}
        {% if app.user %}
            <span id="add">
                <a href="{{ path('add') }}" alt="add Item">
                    <img height="20" src="{{ asset('bundles/myBundle/images/plus.png') }}"></a>
            </span>
            <script>
                $("#add a").each(function() {
                    var url = $("#add a").attr("href");
                    var $dialog = $('<div class="modalerDialog"></div>').
                        dialog({
                            autoOpen: false,
                            modal: true,
                            width: 460
                        });

                    $(this).click(function() {
                        $dialog.load(url, null, function (responseText, textStatus, XMLHttpRequest) {
                            var title = $('#addPage').attr('title')
                            $dialog.dialog('option', 'title', title);
                        }).dialog('open');
                        return false;
                    });
                });
             </script>
             {% if whatever %}
                $("#add a").trigger("click");
             {% endif %}
        {% endif %}
    {% endblock %}
    ...

This should add an ajax dialog to a link an in the case of 'whatever' directly execute it.

This works local, but I just don't know, if there are any disadvantages (beside mixing twig, html an js in one file). In my case, there will also be an included js-file

Thx in advice.

Answer 1

I guess one disadvantage would be the difficulty to maintain the code. Perhaps the better solution would be to create a model, with single flags from server-side code like this:

//this one goes to separate .js file
function MyModel (){

        this.Init = function () {
            $("#add a").each(function() {
                var url = $("#add a").attr("href");
                var $dialog = $('<div class="modalerDialog"></div>').
                    dialog({
                        autoOpen: false,
                        modal: true,
                        width: 460
                    });

                $(this).click(function() {
                    $dialog.load(url, null, function (responseText, textStatus, XMLHttpRequest) {
                        var title = $('#addPage').attr('title')
                        $dialog.dialog('option', 'title', title);
                    }).dialog('open');
                    return false;
                });
            });
        }();
        this.TriggerClick = function(boolean) {
            if(boolean){
                $("#add a").trigger("click");
            }

        };
}

//this one stays on the page
var model = new MyModel();
model.TriggerClick({% whatever %});