How to make javascript execute after using jQuery to dynamically load user control to div?

Question

I have a Web User Control with javascript and css blocks. I'm using jQuery to dynamically load it into the main page. How do I make the alert('haha') to execute when the user control is loaded into the div called "divTable"?

In my .ascx file, I have

<script type="text/javascript">
  function pageLoad(sender, args) {
    alert('haha');
  }
</script>

In the .aspx file, I have

<script type="text/javascript">
    $(function () {
        $('button').click(GetTable);
    });

    function GetTable() {
        debugger;
        var id_1 = $('#txtID1').val();
        var id_2 = $('#txtID2').val();
        $.ajax({
            url: 'Services/Data.svc/RenderUC',
            data: JSON.stringify({ path: 'Controls/ParameterizedTableControl.ascx', id1: id_1, id2: id_2 }),
            type: "POST",
            contentType: "application/json",
            dataType: "json",
            success: function (data) {
                debugger;
                $('#divTable').html(data);
            },
            error: function showError(xhr, status, exc) {
                debugger;
                alert('error');
            }
        });
    }
</script>

In the .svc file, I have

    [OperationContract]
    public string RenderUC(string path, string id1, string id2)
    {
        Page pageHolder = new Page();
        var viewControl = (ParameterizedTableControl)pageHolder.LoadControl(path);
        viewControl.ID1= id1
        viewControl.ID2 = id2;
        pageHolder.Controls.Add(viewControl);
        StringWriter output = new StringWriter();
        HttpContext.Current.Server.Execute(pageHolder, output, true);

        return output.ToString();
    }

jrummell · Accepted Answer · 2012-02-22 19:10:46Z

1

Any javascript that you want to run once the ajax operation is complete should go in the success handler.

function GetTable() {
    debugger;
    var id_1 = $('#txtID1').val();
    var id_2 = $('#txtID2').val();
    $.ajax({
        url: 'Services/Data.svc/RenderUC',
        data: JSON.stringify({ path: 'Controls/ParameterizedTableControl.ascx', id1: id_1, id2: id_2 }),
        type: "POST",
        contentType: "application/json",
        dataType: "json",
        success: function (data) {
            debugger;
            $('#divTable').html(data);

            //
            // insert whatever you want here
            //

        },
        error: function showError(xhr, status, exc) {
            debugger;
            alert('error');
        }
    });
}

answered Feb 22, 2012 at 19:10

jrummell

43.2k18 gold badges116 silver badges179 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Laguna Over a year ago

If possible, I'd like the javascript to be encapsulated inside the usercontrol. I would rather not move/copy them into the aspx page.

jrummell Over a year ago

That could get complicated very quickly :) I suppose you could inject a script tag into your service return value.

Lucas Lopes · Accepted Answer · 2012-02-22 19:13:49Z

1

You can call your function inside your <script> block in the ascx control like this:

<script type="text/javascript">
  function pageLoad(sender, args) {
    alert('haha');
  }
  pageLoad();
</script>

This will make your script run when the browser renders your script tag.

answered Feb 22, 2012 at 19:13

Lucas Lopes

861 silver badge8 bronze badges

2 Comments

Laguna Over a year ago

hm it didn't work. when i examed the html injected in divTable, the css blocks are there, but javascript blocks are not...wondering why.

Lucas Lopes Over a year ago

Try injecting the javascript on the onload event of your ascx with a RegisterScriptBlock or something.

Collectives™ on Stack Overflow

How to make javascript execute after using jQuery to dynamically load user control to div?

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related