Javascript коды не работают, когда UserControl загружается с Ajax - PullRequest
1 голос
/ 19 декабря 2010

Спасибо, Стилгар решил мою проблему. Я просто создаю файл js и записываю в него все свои коды после того, как я добавил этот файл в UserControl и после получения html этого UserControl я использую $ ("# DivID"). Html (UserControlHTML); Это работает сейчас.

Привет всем;

Я использую Ajax и Webservice для загрузки UserControls. Хорошо, я могу легко получить HTML-код UserControl, но есть проблема.

Например, HTML-код UserControl - что-то вроде этого.

<h3>Header</h3>
<div id="content">
    <p>lorem ipsum dolor sit amet...</p>
</div>
<script type="text/javascript">
        alert("This is a message");
</script>
<h3>Footer</h3>

Javascript-коды, запрашивающие html-код usercontrol
(использование UserControlYukle ("UserControls / Article.ascx");)

//This is a function that i request UserControl's html code from WebService
function UserControlYukle(ControlPath) {
    PersonalWebPage.Services.LoadUserControl.GetControlHtml(ControlPath, Success, Failed);
}
function Success(result) {
    var RsltElem= $get("Icerik");
    RsltElem.innerHTML = result;
}
function Failed(error) {
    alert(error.get_message());
}

Коды веб-сервиса (LoadUserControl.asmx)

//This is the code block which is in WebService 
//and returning back UserControl's html code.
public string GetControlHtml(string controlLocation)
{
    Page page = new Page();
    UserControl userControl = (UserControl)page.LoadControl("~/UserControls/" + controlLocation);
    userControl.EnableViewState = false;
    HtmlForm form = new HtmlForm();
    form.Controls.Add(userControl);
    page.Controls.Add(form);
    StringWriter textWriter = new StringWriter();
    HttpContext.Current.Server.Execute(page, textWriter, false);
    return textWriter.ToString();
}

Когда я получаю этот HTML-код и вставляю его в innerHTML div. HTML выглядит так, как должно. Но JavaScript-коды, написанные на usercontrol, не работают. Это должно дать мне предупреждение, но это не так.

1 Ответ

1 голос
/ 19 декабря 2010

Похоже, что присвоение свойства innerHtml не будет запускать выполнение JS. Если вы часто используете этот шаблон, вы можете определить некоторую функцию по соглашению, например, ajaxCallbackControlName, где ControlName - это имя вашего текущего элемента управления. Затем оберните предупреждение в эту функцию и вызовите функцию в том месте, где вызывается предупреждение. Таким образом, элемент управления будет работать одинаково при нормальной загрузке (не через службу). С другой стороны, в функции успеха для службы вы должны вызывать эту функцию следующим образом:

window["ajaxCallback" + controlName]();

(см. Как выполнить функцию JavaScript, когда у меня есть имя в виде строки для получения более подробной информации)

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

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

Edit: Кажется, что установка innerHTML не будет определять функции. Таким образом, вы должны проверить код самостоятельно. Вот простой пример только на стороне клиента.

<html>
    <body>
    test
    <br />
    <div id="testDiv"></div>
    <br />
    <input type="button" onclick="insert()" value="Insert" />
       <script type="text/javascript">
       function insert(){
        var element = document.getElementById("testDiv");
        element.innerHTML = "test innerHTML  <script id='loadScript' type='text/javascript'> function foo() {alert('test'); } <\/script> ";
        eval(document.getElementById("loadScript").innerHTML);
        foo();
        }
        </script>
    </body>
</html>

Другим подходом было бы выбрать все элементы скрипта, например, через JQuery и оценить их содержимое. Также стоит проверить, есть ли в JQuery API какая-либо функция для установки HTML и выполнения сценариев.

Редактировать 2: Как кажется, функция JQuery html () имеет именно такое поведение. Если вы используете JQuery, вы можете изменить функцию успеха следующим образом:

function Success(result) {
    $("Icerik").html(result);
} 
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...