SamuraiJack
SamuraiJack

Reputation: 5539

Unable to append HTML elements to a div dynamically

I am trying to add html elements to a div dynamically but i am unable to do so at all. I replaced var s='<a href='+hrf+'><img src='+hrf+'alt="Tulips"></a>'; with var s = '<button>click</button>'; just to check if there is anything wrong with the string i am appending and still no luck.

Script in Head

   <script type="text/javascript">

       window.onload = GetRecords();     

            function GetRecords() {      
                $.ajax({
                    type: "POST",
                    url: "Gallery.aspx/insertimg",                   
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: OnSuccess,
                    failure: function (response) {
                        alert(response.d);
                    },
                    error: function (response) {
                        alert(response.d);
                    }
                });
            }

        function OnSuccess(response) {

            var xmlDoc = $.parseXML(response.d);
            var xml = $(xmlDoc);
            var count = parseInt(xml.find("imgtable").length);
            var imageTable = xml.find("imgtable");           

            for (var i = 0; i < count; i++) {               
              var hrf = imageTable.find("ImageUrl").eq(i).text();                            
             var s='<a href='+hrf+'><img src='+hrf+'alt="Tulips"></a>';
              $('.html5gallery').append(s);               

            }           
        }

</script>

Body

<body>
    <div style="display:none; flex-align:center" class="html5gallery" data-skin="horizontal" data-width="480" data-height="272">
   </div>
</body>

XML

<NewDataSet>
  <imgtable>
    <PhotoId>4</PhotoId>
    <Name>Photo4</Name>
    <ImageUrl>photoalbum/DSCN5798.jpg</ImageUrl>
    <AlbumId>2</AlbumId>
    <Date>2013-04-03T17:03:02+05:30</Date>
  </imgtable>
  <imgtable>
    <PhotoId>5</PhotoId>
    <Name>Photo5</Name>
    <ImageUrl>photoalbum/DSCN5799.jpg</ImageUrl>
    <AlbumId>2</AlbumId>
    <Date>2013-04-03T17:03:13+05:30</Date>
  </imgtable>
  <imgtable>
    <PhotoId>6</PhotoId>
    <Name>Photo6</Name>
    <ImageUrl>photoalbum/DSCN5800.jpg</ImageUrl>
    <AlbumId>2</AlbumId>
    <Date>2013-04-03T17:03:13+05:30</Date>
  </imgtable>
</NewDataSet>

Rendered HTML

<body>
    <form method="post" action="gallery.aspx?albumid=2" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="5WcBQJLHmIC4X/c0os4kFsh4tUCcOP93YgL5uIChec+tPgpqBaWkU5jZaSmvwM4MMGjdK8G9LD+/HV8GvINckwe5HGGXFcY7BgEpkFo0CEM=" />
</div>     
    <div style="display:none; flex-align:center" class="html5gallery" data-skin="horizontal" data-width="480" data-height="272"></div>
    </form>
</body>

Upvotes: 1

Views: 1436

Answers (1)

Arun P Johny
Arun P Johny

Reputation: 388316

You have a problem in window.onload = GetRecords(); - it should be window.onload = GetRecords;.

Also in the ajax request you are saying the response is json but in the success callback it is processed as XML

But in jQuery you can use the dom ready also to achieve the same

jQuery(GetRecords)

When you use window.onload = GetRecords(); the GetRecords executed and the value returned is assigned as the onload handler, which is not what is needed. What is needed is GetRecords to be called once the window is loaded for that you need to pass the function reference to window.onload using window.onload = GetRecords;

Try

jQuery(GetRecords)

function GetRecords() {
    $.ajax({
        type : "POST",
        url : "Gallery.aspx/insertimg",
        contentType : "application/json; charset=utf-8",
        dataType : "xml",
        success : OnSuccess,
        failure : function(response) {
            alert(response.d);
        },
        error : function(response) {
            alert(response.d);
        }
    });
}

function OnSuccess(response) {

    var xmlDoc = $.parseXML(response.d);
    var xml = $(xmlDoc);
    var count = parseInt(xml.find("imgtable").length);
    var imageTable = xml.find("imgtable");

    for (var i = 0; i < count; i++) {
        var hrf = imageTable.find("ImageUrl").eq(i).text();
        var s = '<a href=' + hrf + '><img src=' + hrf + 'alt="Tulips"></a>';
        $('.html5gallery').append(s);

    }
}

Upvotes: 1

Related Questions