Javascript, слои, ограничение области видимости

Question

[Alexandr Sulimov]

Изучаю Javascript.
Есть код
Основная страница:

<a class="btn" onclick="Dialog()">@R.R.Actions</a>

<script>
    function Dialog() {

        $.ajax({
            type: 'GET',
            url: '@Url.Content("~/Home/Test")',
            success: function (data) {
                var div = $(data.html);
                div.dialog({
                    width: 'auto',
                    height: 'auto',
                    title: new Date().toLocaleTimeString()
                });
            }
        });
    }
</script>

Код который подгружается:

<div>
    <div id="text"></div>

    <a class="btn" onclick="Dialog()">Dialog</a>
    <a class="btn" onclick="Dialog2()">Dialog2</a>
</div>

<script>
    $("#text").html(new Date().toLocaleTimeString());
    
    function Dialog2() {
        $("#text").html(new Date().toLocaleTimeString());
    }
</script>

Основная задача. По кнопке создать диалог из полученного html, и заставить его работать независимо.
Есть ряд вопросов, к текущему коду:
1. Почему открывается 3 диалога, 2 из них пусты?
2. Почему после 2 нажатия и получения 2 диалога, текст обновляется в 1?
2.1. Почему нажатие в Dialog2 изменяет текст в диалоге 1?
3. Какой принцип нужно использовать, чтобы 2… х диалогов, созданных из одинакового html были независимы?

Answer 1

[mayorovp]

Ответ: потому что используются id-шники. Любой кусок кода, в котором есть id="..." по определению не может быть нормально подгружен два раза.

Comments

[Alexandr Sulimov]

т.е. кроме генерации такого кода

<div id="UniqueDialogID0001">
    <div id="text"></div>

    <a class="btn" onclick="Dialog(this)">Dialog</a>
    <a class="btn" onclick="Dialog2(this)">Dialog2</a>
</div>
<script>
    $("#text").html(new Date().toLocaleTimeString());
    
    function Dialog2() {
        console.log('Dialog2()');
        $("#text").html(new Date().toLocaleTimeString());
    }
</script>

И работы с ним по принципу $("#UniqueDialogID0001 > ...")
Вариантов нет?

[mayorovp]

Есть. Надо использовать относительную адресацию.

<div>
    <div class="text"></div>

    <a class="btn" onclick="Dialog(this.parentNode)">Dialog</a>
    <a class="btn" onclick="Dialog2(this.parentNode)">Dialog2</a>
<script>
    function Dialog2(ctx) {
        console.log('Dialog2()');
        $(".text", ctx).html(new Date().toLocaleTimeString());
    }
</script>
</div>

Либо можно не хардкодить parentNode, а искать его по цепочке родителей, например, задав класс.
Сложнее с начальной инициализацией диалога. Лучше не добавлять ее в script, а производить на сервере или добавлять отдельным ресурсом:

$.ajax({
            type: 'GET',
            url: '@Url.Content("~/Home/Test")',
            success: function (data) {
                var div = $(data.html);
                new Function(data.js)(div);
                div.dialog({
                    width: 'auto',
                    height: 'auto',
                    title: new Date().toLocaleTimeString()
                });
            }
        });

(это я так написал для примера, поскольку конструкция @Url.Content("~/Home/Test") для меня остается загадкой).

Answer 2

[wa_Nadoo]

Пока Вы только изучаете JS, не забывайте, что это синтетический пример для демонстрации определенных фишек языка. За подобный код в продакшне Вас просто руками и ногами побьют)

Comments

[Alexandr Sulimov]

Уточните что здесь не так.

[wa_Nadoo]

1. Не подгружайте HTML с JS внутри. Подгружать можно только HTML, либо JSON с последующей шаблонизацией, иначе в большом проекте просто не сможете разобраться какие скрипты работают и что делают. Собственно у Вас проблемы уже сейчас, раз правильный на первый взгляд код не работает и не ясно почему. Не ясно будет и остальным.
2. Если верстальщик и JS-программер разные люди, то получится, что JS-код будет размыт между ними. <a class="btn" onclick="Dialog()">@R.R.Actions</a> будет у верстальщика, который часто в JS не разбирается. Раз Вы используете jQuery, то обработчик кнопки вешается вот так $('.btn').click(Dialog);, либо $('.btn').on('click', Dialog);
3. С большой буквы называются только функции-конструкторы. Пока не знаете, что это такое, озаглавливайте только с маленькой (Dialog -> dialog).