DIV Inner HTML in JQUERY

Question

I am having a div. I am passing a HTML string to that div using INNERHTML in JSON. The div is not coming in the output.

Here is my code

$('#<%=btnSubmitData.ClientID %>').live('click', function () {
     var jsonParameters = '{"startProductLevelId":"' + prdLvlId1 + '"}';
       $.ajax({
            type: "POST",
            url: "../Test/Test.aspx/PopulateData",
            context: this,
            cache: false,
            data: jsonParameters,
            contentType: 'application/json',
            dataType: "json",
            "success": function (LastweeksData) {
             $("#brandData").css("display", "block");
             alert(LastweeksData.d); //Here i am getting the value
             document.getElementById('<%=brandData.ClientID%>').innerHTML = LastweeksData.d;
             },
             "error": function (request, status, error) {
              alert(error);
             }
          })
        });

My div - "brandData"

  <asp:UpdatePanel ID="UpdatePanel2" runat="server">
    <ContentTemplate>
     <div id="dummy1" style="width: 100%; height: 20px; float: left">
     </div>
     <div id="Div2" style="width: 100%; height: 20px; float: right; border-style: solid; border-width: 0px;">
       <table id="Table1" align="center" cellspacing="0" border="0" cellpadding="0" width="950">
         <tr>
             <td width="500" align="left" valign="top">
                  <div id="brandData" runat="server">
                   </div>
             </td>
         </tr>
       </table>
   </div>

I had also tried like this.

$("#brandData").innerHTML = LastweeksData.d;

I cant able the see the div in the output. I dont know where i am wrong.

the alert inside the success callback is firing? – BeNdErR Nov 09 '13 at 17:29 — BeNdErR, Nov 09 '13 at 17:29

score 0 · Answer 1 · answered Nov 09 '13 at 17:29

0

$("#brandData").innerHTML will not work as $("#brandData") returns a jQuery object not a dom element reference so it does not have the innerHTML property.

You can use .html() utility method provided by jQuery to set the html content of an element.

Try

$("#brandData").html(LastweeksData.d)

answered Nov 09 '13 at 17:29

Arun P Johny

384,651
66
527
531

i had tried like this "$("#brandData").html(LastweeksData.d);" but still i am facing the same problem. – RobinHood Nov 09 '13 at 18:25

score 0 · Answer 2 · edited May 23 '17 at 11:57

0

You have runat="server" to the id brandData, so you cannot use $("#brandData") as a selector since the ID gets changed when it renders in the DOM with the prepended master and page information.(ex: master_page_ctl100_brandData)

<div id="brandData" runat="server">

Instead use $('[id$=brandData]') or $('#<%=brandData.ClientID %>') as your selector. There are few other options too.

A comprehensive list on how to target asp.net controls in jquery are listed here

edited May 23 '17 at 11:57

Community

1
1

answered Nov 09 '13 at 17:32

Venkata Krishna

14,926
5
42
56

@RobinHood use $('[id$=brandData]').html() – Venkata Krishna Nov 09 '13 at 23:06
I had tried like this "$('[id$=brandData]').innerHTML = LastweeksData.d;" and also tried '$('[id$=brandData]').html = LastweeksData.d;' and also "$('[id$=brandData]').html() = LastweeksData.d;"....Nothing seems to be working.... – RobinHood Nov 10 '13 at 05:03
try this `$('[id$=brandData]').html(LastweeksData.d)` – Venkata Krishna Nov 10 '13 at 13:59

DIV Inner HTML in JQUERY

2 Answers2