Rendering Raw HTML data from a dynamically populated Json object

Question

I have a complex Json data coming as a string being part of Model.

On Document ready I am parsing some JSON into a Javascript object with the help of following code:

    JSON.parse($('#myData').val());

I am evaluating some condition in the JS function & getting a raw HTML string (something like : <h2><strong>Note :</strong> No Data found for the selection made</h2> )

I want to make the div visible & plugin this code in @Html.Raw() that is present in my HTML body after the above statement gets evaluated.

For example:

<div id="divNoDataFoundMessage" style="display: none">
     <span class="" style="padding-right: 100px;">
      @{ 
           @Html.Raw()
       }
    </span>
 </div>

Please help me how I can substitute the data from document.ready to the above code to display it dynamically.

<input type="hidden" value="@Model.MyListData"  id="myData"/>

 $(document).ready(function () {
        var jsonData = JSON.parse($('#myData').val());

        if (jsonData.NoDriversFound != "") {
            $("#divNoDataFoundMessage").show();
            $("#divNoDataFoundMessage span").text(jsonData.NoDriversFound);
        }
};

Sorry, what's @{ @Html.Raw() )? Is this some kind of delimeter/tag that you want swapping out for a message? Or, is this MVC/Razor helper code you're running on the server? Your js looks ok, providing your if condition is true and your div (with id) exists in the DOM. — Mark Graham
– Mark Graham, Commented Sep 2, 2013 at 15:56
Your question is a little bit confusing. You're dealing with some jQuery/Javascript on the client in $(document).ready() but also talking about server-side Razor markup like: @{ @Html.Raw() } I think your question might be made more clear if you tell us where the JSON data in myData is intended to come from. Looks like it is expected as soon as the page is ready. — David Tansey
– David Tansey, Commented Sep 2, 2013 at 15:57
To make my question clear, I am just trying to render <h2><strong>Note :</strong> No Data found for the selection made</h2> in a div, after the page gets loaded completely. But upon doing this the html tags are appearing as it is, instead of getting rendered. Please help me with a solution. — Biki
– Biki, Commented Sep 2, 2013 at 16:40

Jatin patil · Accepted Answer · 2013-09-02 15:55:56Z

1

To Place Html Dynamicaly inside div try as follows:

$("#divID").html(JSON.parse($('#myData').val()));

answered Sep 2, 2013 at 15:55

Jatin patil

4,2961 gold badge20 silver badges27 bronze badges

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

2 Comments

Biki Over a year ago

No luck. HTML tags are still not getting rendered.

Biki Over a year ago

Some other problem was forcing to throw the exception in jquery code, once that rectified, it started working. :)

Collectives™ on Stack Overflow

Rendering Raw HTML data from a dynamically populated Json object

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related