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

2013-11-09 17:29:26 +00:00
Commented Nov 9, 2013 at 17:29 — BeNdErR
– BeNdErR, Commented Nov 9, 2013 at 17:29

Arun P Johny · Accepted Answer · 2013-11-09 17:29:23Z

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 9, 2013 at 17:29

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

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

1 Comment

RobinHood Over a year ago

i had tried like this "$("#brandData").html(LastweeksData.d);" but still i am facing the same problem.

Community · Accepted Answer · 2017-05-23 11:57:31Z

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, 2017 at 11:57

CommunityBot

11 silver badge

answered Nov 9, 2013 at 17:32

Venkata Krishna

15.2k5 gold badges45 silver badges57 bronze badges

3 Comments

Venkata Krishna Over a year ago

@RobinHood use $('[id$=brandData]').html()

RobinHood Over a year ago

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

Venkata Krishna Over a year ago

try this $('[id$=brandData]').html(LastweeksData.d)

Collectives™ on Stack Overflow

DIV Inner HTML in JQUERY

2 Answers 2

1 Comment

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related