Develop Reference

JQuery .append list items not triggering a script when clicked on

I am working on a page that loads data from an XML file that populates an HTML unordered list. An unordered list is used to make the gallery from the tutorial on this page. Unfortunately, the created thumbnails do not trigger the javascript which creates the expanding preview.
The javascript should be activated when the user clicks on an anchor in the unordered list.
Any suggestions as to how to resolve this issue would be great.
Code
<script type="text/javascript">
$(document).ready(function () {
$.ajax({
type: "GET",
url: "data.xml",
dataType: "xml",
success: xmlParser
});
});
function xmlParser(xml) {
$('#load').fadeOut();
$(xml).find("painting").each(function () {
$("ul#og-grid").append('<li> <a href="http://google.com/" data-largesrc="images/' + $(this).find("image").text() + '" data-title="' + $(this).find("title").text() + '" ' + '<>' + '<img src="images/thumbs/' + $(this).find("image").text() + '" alt="img01"/> </a> <li> ');
$(".painting").fadeIn(1000);
});
}
</script>

You need to attach the click event. You can do this whilst populating your li or after. I would do the following
$(xml).find("painting").each(function () {
$('<li> <a href="http://google.com/" data-largesrc="images/' + $(this).find("image").text() + '" data-title="' + $(this).find("title").text() + '" ' + '<>' + '<img src="images/thumbs/' + $(this).find("image").text() + '" alt="img01"/> </a> <li> ')
.click(yourClickFunction)
.appendTo('ul#og-grid');
$(".painting").fadeIn(1000);
});
Don't forget to change yourClickFunction.
Hope that helps

use this line for click event
$(document).on('click', 'element-selector', function () {
// Do Stuff Here
});

You can use following JS code for this
$(document).on('click', 'ul#og-grid li', function () {
// Do Stuff Here
});

URL Name not resolved in Jquery

I am trying to dynamically build up HTML using JQuery in ASP.NET MVC5. I have so far had success, but the URL cannot be resolved in the JQuery Code.
My code looks something like this:
$.ajax({
type: 'POST',
url: '#Url.Action("QuerySearch")',
dataType: 'json',
data: {
queryName: $("#queryText").val()
},
success: function (data) {
// var items = '';
$.each(data, function (i, item) {
var resource_Url = item.ResourceURL;
// var resource_url = item.ResourceURL;
var append_data = $('<div class="row">'
+ '<h3>' + item.ResourceTitle + '</h3>'
+ '</div>'
+ '<div class="row">'
+ '<span class="label label-primary" style="margin:3px;font-size:small;">'
+ item.ResourceEducation
+ '</span>'
+ '<span class="label label-warning" style="margin:3px;font-size:small;">'
+ item.ResourceGrades
+ '</span>'
+ '<span class="label label-info" style="margin:3px;font-size:small;">'
+ item.ResourceSubject
+ '</span>'
+ '<a href="#Url.Content("' + item.ResourceURL + '")">'
+ '<img src="#Url.Content("~/Content/Resources/download_icon.png")" alt="Download Resource" style="height:24px;width:24px;"/>'
+ '</a>'
Although this code is able to retrieve the image for the download_icon defined in my project, it is not able to display / embed the URL fetched from the server by my function which I am trying to display in the <a href> tag.
Any help is greatly appreciated.

You will need to pass the complete url value from the server as a property of the data received. Or have it stored locally
ASP code doesn't run in the browser, only on server

The trick was simple, the href tag had to be changed to:
'<a href="' + item.ResourceURL + '">'
It worked like a charm

add function onclick in json parse

Im trying to load article from json (its works) and add it link to fucntion, but when I add the a href tag with onclick function (for example - alert), the function doesn't work.
what am I missing?
$.getJSON(categoryAddr,function(data){
json=data;
jQuery(function ($) {
$.each(json, function (i, value) {
var list ="<a href='#' onclick='alert('hey!');'>"
+"<h1>" + value.title + "</h1>"
+ "<img src='" + value.image + "' alt=''/>"
+"<h2>" + value.excerpt + "</h2></a>";
$('.hold').append(list);
});
});
});

you need to escapq quotes inside the alert
change this line
var list ="<a href='#' onclick='alert('hey!');'>"
to
var list ="<a href='#' onclick='alert(\'hey!\');'>"

Use escaped double quotes around your JS
var list ="<a href='#' onclick=\"alert('hey!');\">"

Define onclick event outside instead of defining it inline as shown below
jQuery(function ($) {
var json={title:'title1'};
$.each(json, function (i, value) {
var list ="<a href='#' onclick=\"alert('hey!');\">"
+"<h1>" + value + "</h1>" ;
$('.hold').append(list);
});
});
Fiidle : https://jsfiddle.net/9qes9u8u/
Updated Fiddle based upon #rzr answer
https://jsfiddle.net/t8o56g28/

I would go for delegated events:
var list ="<a href='#' class='link'>"
Now you can use this script, and you don't need to have a nested doc ready block:
$.getJSON(categoryAddr,function(data){
json=data;
$.each(json, function (i, value) {
var list ="<a href='#' data-id='" + value.id +"' class='link'>"
+"<h1>" + value.title + "</h1>"
+ "<img src='" + value.image + "' alt=''/>"
+"<h2>" + value.excerpt + "</h2></a>";
$('.hold').append(list);
});
});
This is delegated event on newly created anchor:
$('.hold').on('click', '.link', function(){
alert($(this).data("id"));
});

jquery to append a table to div

i have a div id.i have to append a table with values to the div.
<div id="testResult" style="padding-left: 120px; "></div>
am doing follwing steps but it is not working.
$.ajax({
url: '/getReports',
cache: false
}).done(function (html) {
if (html != "") {
$('#testResult').show();
var htm = "";
var string1 = '<table border="1"><tr><td>No</td><td>Testcase</td> <td>OS</td> <td>Browser</td> <td>Result</td></tr></table>';
$.each(html, function (i, data) {
string1 + = '<tr><td rowspan="3">1</td><td rowspan="3">' + data.status.test + '</td><td rowspan="3"><!--OS--></td><td>' + data.status.bwser + '</td> <td> ' + data.status.report + ' </td></tr>';
});
$('#testResult ').append(string1);
$("#testResult").html("<br/><br/>");
$("#testResult").html("<p>" + htm + "</p>");
}
}).fail(function () {
$("#testResult").html("Failed to run the test");
$('#edit ').removeAttr("disabled");
});

$("#testResult").html("<br/><br/>") and $("#testResult").html("<p>" + htm + "</p>") will overwrite contents of your "testResult" DIV. So, replace this
$('#testResult ').append(string1);
$("#testResult").html("<br/><br/>");
$("#testResult").html("<p>" + htm + "</p>");
}
with
$('#testResult ').append(string1);
$("#testResult").append("<br/><br/>");
$("#testResult").append("<p>" + htm + "</p>");
}
.append(): Will add or append extra strings to the existing contents of the DIV
where as
.html(): Will removes or overwrite the existing contents of the DIV with newer one.
This is the main difference between .append() and .html().

edit this part
$("#testResult").append("<br/><br/>");
Remove this part-->
$("#testResult").html("<p>" + htm + "</p>");
htm is empty string, as you never concatenate any string to it

Parsing JSON data into SELECT prints UNDEFINED

My JSON being sent from the server is like this:
data[
{"userFullName":"Tim, Bill","id":"LOt3","organisation":"FAP","loginSystem":"A","userId":0},{"userFullName":"Bruce, David","id":"LNA","organisation":"ES","loginSystem":"A","userId":0}
]
In the success of my AJAX call,I am handling the data as follows :
success: function (data) {
javascript: console.log('data' + data);
$.each(data, function(key, value) {
javascript: console.log('id' + value.id);
$('#selectStaff').append('<option value="' + value.id+ '">' + value.userFullName + '</option>');
});
}
selectStaff is the ID of the SELECT control...
The SELECT control is drawing with 'undefined' populated in the drop down.
The console.log('data' + data) prints the following line:
data[{"userFullName":"Tim, Bill","id":"LOt3","organisation":"FAP","loginSystem":"A","userId":0},{"userFullName":"Bruce, David","id":"LNA","organisation":"ES","loginSystem":"A","userId":0}]
However, the line javascript: console.log('id' + value.id) prints out 'UNDEFINED'
Would someone please describe the correct syntax to me?

Error in your code val.id
Working Fine
Fiddle
Script
var user=[{"userFullName":"be, apple","id":"xdsd3","organisation":"FL ","userId":0},{"userFullName":"Mack, David","id":"lol323","organisation":"ES","userId":0}]
$.each(user, function(key, value) {
console.log('id' + value.id);
$('#selectStaff').append('<option value="' + value.id + '">' + value.userFullName + '</option>');
});