Reputation: 5539
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
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