2016-12-03 3 views
0

У меня есть главная страница с тегом div, который используется для динамической загрузки (используя jquery load) bootstrap modal (независимый html-файл).jquery load выполняется до jquery read

Я передаю параметры на эту страницу, используя «полную» функцию загрузки. Когда выполняется полная функция, я устанавливаю некоторые скрытые параметры в модальном html. Этот модальный html относится к другому файлу javascript, который имеет функцию JQuery ready, чтобы инициализировать модальный параметр с параметрами, которые я установил на главной странице (используя «полную» функцию).

Проблема в том, что «полный» выполняется после загрузки модального html и модального javascript, поэтому я не могу иметь соответствующую инициализацию. Поэтому я должен быть уверен, что модальный javascript выполняется сразу после выполнения «полной» функции на главной странице.

Это большой проект, но в основном это код:

основного page.html

<!DOCTYPE html> 
<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
     <title>main-page</title> 
     <script src="./jquery-2.1.1.min.js" type="text/javascript"></script> 
     <script src="./jquery-ui.min.js" type="text/javascript"></script> 
     <script src="./bootstrap.min.js" type="text/javascript"></script> 
     <script src="./main-page.js" type="text/javascript"></script> 
     <link rel="stylesheet" href="/predial/css/bootstrap.min.css"/> 
    </head> 
    <body> 
     <h4>Maing Page</h4> 
     <button id="load-modal">Load Modal</button> 
     <div id="holder"> 
     </div> 
    </body> 
</html> 

основного page.js

$(document).ready(function(){ 
    $("#load-modal").click(function(){ 
     $("#holder").load("modal.html", function(){ 
      $("#parameter").val("a value"); 
     }); 
    }); 
} 
); 

modal.html (ради я не использую в этом примере ботстрап-модалы)

<html> 
    <head> 
     <title></title> 
     <script src="modal.js"></script> 
    </head> 
    <body> 
     <input id="parameter" name="parameter" type="text" value="uninitilized"/> 
    </body> 
</html> 

modal.js

$(document).ready(function(){ 
    var parameter = $("#parameter").val(); 
    alert(parameter); 
}  
); 

Если вы попробуете код, когда предупреждение выскакивает, он показывает «uninitilized» вместо «значение» ¿Любые предложения?

+0

поделиться своим кодом/рабочим примером – Dekel

ответ

0

Вы можете просто сохранить функцию в память (любой var) на doc.ready и запустить ее, когда вам нужно (после успешного обратного вызова).

ИЛИ

вы можете скачать вам HTML в памяти, и работать с узлами в памяти, и когда все будет сделано - просто внедрить его в DOM.

+0

Не понимаю второго подхода. Но первый абзац мог работать для меня. Мне нужно только определить функцию в modal.js, а затем вызвать эту функцию внутри «полной» функции, когда все параметры были установлены. С другой стороны, я сделал тот же пример с jQuery 3.1.1, и он работает так, как ожидалось. – Edu

+0

Во втором подходе вы можете загрузить свой частичный html в var, который делает что-то вроде: var $ dom = $ (yourHtml); а затем $ dom .... => заполните ваши данные. После этого все - просто $ ('body'). Append ($ dom); – Nigrimmist