anmarti
anmarti

Reputation: 5143

Can set the div content with jquery

Why can't I put dynamic text on a div called foo? The following is on a metho in the asp.net codebehind.

StringBuilder script = new StringBuilder();
        script.Append("<script type='text/javascript'>");
        script.Append("                                $(document).ready(function () {");
        script.Append("                                    $('<div id=foo></div>').appendTo('body');");
        script.Append("                                    var dlg = $('#foo');");
        script.Append("                                    dlg.dialog({");
        script.Append("                                         autoOpen: true,");
        script.Append("                                         resizable: false,");
        script.Append("                                         draggable: false,");
        script.Append("                                         modal: true,");
        script.Append("                                         title: 'Información',");
        script.Append("                                         width: 400,");
        script.Append("                                         height: 200,");
        script.Append("                                         buttons: {");
        script.Append("                                            'Cerrar': function () {");
        script.Append("                                            $(this).dialog('close');");
        script.Append("                                         }");
        script.Append("                                       }");
        script.Append("                                   });");
        script.Append("     $('#foo').html(<p>"+info+"</p>);");
        script.Append("                                });");

        script.Append("</script>");

        ClientScript.RegisterStartupScript(this.GetType(), "launchModalWindow", script.ToString());

The problem is in this line:

script.Append("     $('#foo').html(<p>"+info+"</p>);");

Upvotes: 0

Views: 392

Answers (3)

anmarti
anmarti

Reputation: 5143

Put the dynamic text like that:

script.Append("                                    $('<div id=foo class=vw1>"+ info +"</div>').appendTo('body');");

Upvotes: -1

Rocky Pulley
Rocky Pulley

Reputation: 23301

should be <div id="foo">. You are missing quotes.

Also, you want to do your update to #foo in a

$(document).ready(function() {
    $('#foo').html('<p>hola</p>');
}

Upvotes: -1

Qpirate
Qpirate

Reputation: 2078

script.Append("$('#foo').html('<p>hola</p>');");

is outside the context of document.ready.

move it up one line so it is run when the page is ready for it to be loaded.

StringBuilder script = new StringBuilder();
    script.Append("<script language='javascript'>");
    script.Append("                                $(document).ready(function () {");
    script.Append("                                    $('<div id=foo></div>').appendTo('body');");
    script.Append("                                    var dlg = $('#foo');");
    script.Append("                                    dlg.dialog({");
    script.Append("                                         autoOpen: true,");
    script.Append("                                         resizable: false,");
    script.Append("                                         draggable: false,");
    script.Append("                                         modal: true,");
    script.Append("                                         title: 'Información',");
    script.Append("                                         width: 400,");
    script.Append("                                         height: 200,");
    script.Append("                                         buttons: {");
    script.Append("                                            'Cerrar': function () {");
    script.Append("                                            $(this).dialog('close');");
    script.Append("                                         }");
    script.Append("                                       }");
    script.Append("                                   });");
    script.Append("$('#foo').html('<p>hola</p>');");
    script.Append("                                });");
    script.Append("</script>");

Upvotes: 5

Related Questions