jquery модальный не работает - PullRequest
Новая
       3

jquery модальный не работает

0 голосов
/ 19 февраля 2012

JQuery модальный работает, когда код находится на той же странице

index.jsp 

<script>
    function show()
    {
    $(function() {
        $( "#dialog:ui-dialog" ).dialog( "destroy" );

        $( "#dialog-modal" ).dialog({
            height: 140,
            modal: true
        });
    });
    }

    </script>
</head>
<body>
<input type="button" value="Demo" onClick="show()" >
<div id="dialog-modal" title="Demo" style="display:none">
    <p>Adding the modal overlay screen makes the dialog look more prominent because it dims out the page content.</p>
</div>

но, когда я пытаюсь отделить вышеуказанный код в другом файле, он не отображается

index.jsp 

   <script>
    function show()
    {
    $(function() {
        $( "#dialog:ui-dialog" ).dialog( "destroy" );

        $( "/dialog.jsp#dialog-modal" ).dialog({
            height: 140,
            modal: true
        });
    });
    }

    </script>
</head>
<body>
<input type="button" value="Demo" onClick="show()" >
</body>

dialog.jsp 

<div id="#dialog-modal" title="Demo">
    <p>Adding the modal overlay screen makes the dialog look more prominent because it dims out the page content.</p>
</div>

спасибо заранее !!

Ответы [ 4 ]

1 голос
/ 19 февраля 2012

Вы не можете вызвать внешний ресурс в селекторе jQuery, например $("/dialog.jsp#...").Вместо этого вам нужно загрузить ресурс с помощью вызова AJAX.

Сначала добавьте узел в ваш основной HTML, чтобы получить его.Я добавил <div id='dialog-content'></div>.Затем загрузите .dialog() на этом узле: 

   <script>
    function show()
    {
      $(function() {
        $( "#dialog:ui-dialog" ).dialog( "destroy" );

        $( "#dialog-content" ).dialog({
            height: 140,
            modal: true,
            // Use load function to populate the dialog:
            load: function() {
              $("#dialog-content").load("/dialog.jsp#dialog-modal")
            }
        });
      });
    }

    </script>
</head>
<body>
<div id='dialog-content'></div>
<input type="button" value="Demo" onClick="show()" >
</body>
0 голосов
/ 19 февраля 2012

Добавление «пути» к вашему селектору jQuery не помещает javascript в отдельный файл, и я не думаю, что видел успешное использование разметки HMTL в отдельном файле.

Переместите разметку обратно в index.jsp и переместите функцию show() в отдельный файл .js (не .jsp).

Свяжите новый файл .js с index.jsp: 

<script type="text/javascript" src="/show.js"></script
0 голосов
/ 19 февраля 2012

Это потому, что в dom нет элемента с идентификатором "dialog-modal". Ваш селектор неверен. Сделайте консольный журнал вашего результата селектора jquery, и вы увидите, что он пуст. Убедитесь, что элемент загружен вДом. Вы также можете создать его на лету: 

$('<div id="my-popup">').dialog({
 height: 140,
 modal: true
});
0 голосов
/ 19 февраля 2012

Это просто не сработает;jQuery не собирается загружать другой фрагмент страницы только потому, что вы ссылаетесь на него с помощью этого селектора;это даже не правильный синтаксис селектора.

Если вы хотите загрузить диалоговое окно из другого файла, вам придется либо сделать <jsp:include>, чтобы включить его на стороне сервера, либо сделать явный вызов ajax (сjQuery .load() или .ajax() или что-либо еще), когда что-то происходит, что заставляет вас хотеть показать диалог.

...