Javascript codes not working when UserControl loaded with Ajax

Question

Thanks Stilgar solved my problem. I just create a js file and write all my codes into it after i added this file to UserControl and after i get this UserControl's html i use $("#DivID").html(UserControlHTML); Its working now.

Hi everyone;

Im using Ajax and Webservice to load UserControls. Its ok i can easily get the html code of UserControl but there is a problem.

For example UserControl's html code is something like that.

<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 codes that requesting html code of usercontrol
(usage 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());
}

Webservice Codes (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();
}

When i get this html code and insert it to an div's innerHTML. html looking as it should. But javascript codes which written on usercontrol not working. It should give me alert but its not.

Are you using a [DynamicPopulate](http://www.asp.net/ajax/ajaxcontroltoolkit/Samples/DynamicPopulate/DynamicPopulate.aspx) extender to do that? Posting more of your server-side code would help a lot. — Frédéric Hamidi, Dec 19 '10 at 12:19

score 1 · Accepted Answer · edited May 23 '17 at 12:26

It seems like assigning the innerHtml property won't trigger JS execution. If this is a pattern you use often you can define some function by convention for example ajaxCallbackControlName where ControlName is the name of your current control. Then wrap the alert in that function and call the function in the place where the alert is called. This way the control will work the same when loaded normally (not via the service). On the other hand in the success function for the service you should be able to call the function like this:

window["ajaxCallback" + controlName]();

(see How to execute a JavaScript function when I have its name as a string for more details)

However with this approach you will have problems if there are multiple instances of the same control on the page because all of them will be triggered. You can work arond this by adding a random string as a parameter to the service and adding it to the function name.

All this is a super generic solution that should work for any control and with any js code in it, but in practice you may want a more specific solution like loading the callback functions in JS file and making specific functions for loading specific control via the service. Then you can call the needed callback function after you set the innerHtml property.

Edit: It seems like setting the innerHTML will not define functions. So you should eval the code yourself. Here is a simple client side only example.

<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>

Another aproach would be to select all script elements for example via JQuery and eval their content. It is also worth checking if the JQuery API has some kind of function to set the HTML and execute the scripts.

Edit 2: As it seems the JQuery html() function has exactly this behaviour. If you are using JQuery you can change your Success function like this:

function Success(result) {
    $("Icerik").html(result);
}

Itried all of things and after, I added – timu Dec 19 '10 at 15:02 — timu, Dec 19 '10 at 15:02

Javascript codes not working when UserControl loaded with Ajax

1 Answers1