I create some dynamically generated html by jQuery and then add some click event on this generated html.
The click event work fine and the code inside run correctly and add some anther dynamically generated html to the first dynamically generated html on the page.
So what I am trying to do is first dynamically generated html then add click event on it after the click event is triggered, add some more dynamically generated html to the fist dynamically generated html.
This all works fine but the second dynamically generated html not displaying on the screen, I inspect element on the target html and the html was generated but still not displayed on the screen.
Here is my code :
$(function () {
console.log("Category Page Script loaded");
$.post('/Category/GetCategories', {}).success(function (data) {
console.log(data);
$Category = $('ul#Category-filter');
$Category.empty();
console.log("coustom empty");
var html = '';
for (sub in data) {
console.log(data[sub].CategoryID, data[sub].CategoryName);
var html = '<li class="dropdown-tree CategorySelected" data-id="' + data[sub].CategoryID + '">'
+ '<a class="dropdown-tree-a">' + data[sub].CategoryName + ' COLLECTION </a>'
+ '<ul class="category-level-2 dropdown-menu-tree" id="category">'
+ '</ul>'
+ '</li>'
console.log(html);
$Category.append(html);
}
}).error(function () {
console.log('error');
});
//___________________________________________________________________________
$(document).on('click', 'li.CategorySelected', function () {
console.log("clickd");
// Get the id from the link
var SelectedCategoryID = $(this).attr("data-id");
console.log(SelectedCategoryID);
if (SelectedCategoryID != '') {
console.log('1');
$CategorySelected = $('#category');
console.log($CategorySelected);
console.log('2');
$CategorySelected.empty();
console.log('3');
console.log("CategorySelected empty");
console.log('4');
var html = '';
console.log('5');
$.post("/SubCategory/GetSubCategories", { SelectedCategoryID: SelectedCategoryID },
function (data) {
console.log(data);
console.log('6');
for (sub in data) {
console.log(data[sub].SubCategoryID, data[sub].SubCategoryName);
var html = '<li>' + data[sub].SubCategoryName + ' </li>'
console.log(html);
$CategorySelected.append(html);
console.log($CategorySelected);
}
});
}
});
//_________________________________________________________
});
This problem occurs only when parent element id is duplicate, please ensure that no dulipcate id is used for parent element.
Related
this is my first time here so i hope i don't break any rules.
I have a Jquery code that retrieves info from an API that is written from a .net controller. Retrieving the infomration from the API works well, but now that i have to make the user sign in to view the API(Json), it of course stopped working in jquery. Is there anyway i can let the Jquery code "sign in" so it can retrieve data from that API while it's protected with password (authorize)?
Thanks
UPDATE
here is the Jquery Code
$(document).ready(function () {
var showData = $('#show-data');
$.getJSON('url/here', function (data) {
console.log(data);
var items = data.map(function (item) {
return item.id + ': ' + item.firstName + ': ' + item.lastName;
});
showData.empty();
var content = '<li>' + items.join('</li><li>') + '</li>';
var list = $('<ul />').html(content);
showData.append(list);
});
});
I have below code within a function called render. How do I call the str variable value outside render function?
Also, please can you explain below code? I'm fairly new to js and head is hurting looking at the function calls having functions as a parameter.
My understanding is that app.getList is an object which takes function as a parameter? but it is not returning anything. Sorry, I'm lost here.
app.getList("FieldList", function(reply){
var str = "";
$.each(reply.qFieldList.qItems, function(index, value) {
str += value.qName + ' ';
});
console.log(str);
});
Full Code:
define(["jquery",
//mashup and extension interface
"qlik",
//add stylesheet
"text!./css/mystyle.css",
"client.utils/state",
"client.utils/routing"
],
function($, qlik, cssContent, clientState, clientRedirect) {
/*-----------------------------------------------------------------*/
// function redirect (sheetId){
// clientRedirect.goToSheet(sheetId, Object.keys(clientState.States)[clientState.state])
// }
/*-----------------------------------------------------------------*/
/*-----------------------------------------------------------------*/
var render = function($elem, layout) {
var html = '',
app = qlik.currApp();
//get list of tab objects and insert into div
app.getAppObjectList('sheet', function(arrayitem) {
//for each sheet in the app, create a list item
$.each(arrayitem.qAppObjectList.qItems, function(myindex, myvalue) {
//include the sheet id as the list item id to be used as a reference for active sheet
html += '<li id="' + myvalue.qInfo.qId + '">'; // onClick="redirect(' + value.qInfo.qId + ');
//wrap anchor tag to be used by bootstrap styling
html += '<a>';
//give the link the same name as the sheet
html += myvalue.qData.title;
html += '</a>';
html += '</li>';
});
html += '</ul></div>';
html += "<button id='myButton'> Click Me!! </button>";
console.log(arrayitem.qAppObjectList);
console.log(html);
//insert html into the extension object
return $elem.html(html);
});
/* Test Code Start from here */
app.getList("FieldList", function(reply) {
var str = "";
$.each(reply.qFieldList.qItems, function(key, value) {
str += value.qName + ' ';
});
console.log(str);
});
};
/*-----------------------------------------------------------------*/
return {
/*-----------------------------------------------------------------*/
paint: function($element, layout) {
console.count();
/*-----------------------------------------------------------------*/
$(function() {
$element.html("#myButton").click(function() {
// for(var mynum = 1; mynum <= 5; mynum++){
// alert('button test' + mynum);
// };
});
});
/*-----------------------------------------------------------------*/
render($element, layout);
/*-----------------------------------------------------------------*/
}
};
});
app.getList is probably asynchronous (meaning it runs in the background). The function you've passed to it is a callback. That function will be ran at some point in the future, once the AJAX call (or whatever asynchronous method is ran) is done.
Your callback is passed reply, which is the "return" value from getList(). You cannot access str from outside of this function. You need to do whatever code with reply and/or str in that function only.
This question already has answers here:
How do I attach events to dynamic HTML elements with jQuery? [duplicate]
(8 answers)
Closed 8 years ago.
i found some Answers on this question like in this link but it not working for me i don't know if i do some thing else wrong i'm trying to create some html when the page load then click on html element that has been create dynamically but the click event on the specific element don't work here is my code :
$(function () {
console.log("Category Page Script loaded");
$.post('/Category/GetCategories', {}).success(function (data) {
console.log(data);
$Category = $('ul#Category-filter');
$Category.empty();
console.log("coustom empty");
var html = '';
for (sub in data) {
console.log(data[sub].CategoryID, data[sub].CategoryName);
var html = '<li class="dropdown-tree CategorySelected">'
+ '<a class="dropdown-tree-a" data-id="' + data[sub].CategoryID + '">' + data[sub].CategoryName + ' COLLECTION </a>'
+ '<ul class="category-level-2 dropdown-menu-tree" id="' + data[sub].CategoryID + '">'
+ '</ul>'
+ '</li>'
console.log(html);
$Category.append(html);
}
}).error(function () {
console.log('error');
});
//___________________________________________________________________________
$('li.CategorySelected').on('click', function () {
console.log("clickd");
// Get the id from the link
var SelectedCategoryID = $(this).attr("data-id");
$CategorySelected = $('ul#' + SelectedCategoryID);
$CategorySelected.empty();
console.log("CategorySelected empty");
var html = '';
if (SelectedCategoryID != '') {
$.post("/SubCategory/GetSubCategories", { SelectedCategoryID: SelectedCategoryID },
function (data) {
console.log(data);
for (sub in data) {
console.log(data[sub].SubCategoryID, data[sub].SubCategoryName);
var html = '<li>' + data[sub].SubCategoryName + ' </li>'
console.log(html);
$CategorySelected.append(html);
}
});
}
});
//_________________________________________________________
});
$('ul#Category-filter').on('click', 'li.CategorySelected', function(){
//your scripts here
});
I have this JS code that is meant to display each dynamically loaded posts when clicked on:
function showPost(id) {
$.getJSON('http://hopeofgloryinternational.com/?json=get_post&post_id=' + id + '&callback=?', function(data) {
var output='';
output += '<h3>' + data.post.title + '</h3>';
output += data.post.content;
$('#mypost').html(output);
}); //get JSON Data for Stories
} //showPost
When I test the page 'http://howtodeployit.com/devotion/' on my mobile or windows browser, clicked on Daily Devotional Messages and I navigate between each posts, I notice the previously accessed post still shows for few seconds before the new post gets displayed.
How do refresh the page or DOM so it clears out previously accessed page.
Just empty() the contents of myPost while clicked on the item or on click of back button. Reason is that your previous content is still there in the mypost div, and your content page becomes visible even before the ajax call is executed which may take some time to complete say 700ms, so you will see the old content for that much period of time.
function showPost(id) {
var $myPost = $('#mypost').empty(); //emtpy it
$.getJSON('http://hopeofgloryinternational.com/?json=get_post&post_id=' + id + '&callback=?', function(data) {
var output='';
output += '<h3>' + data.post.title + '</h3>';
output += data.post.content;
$myPost.html(output);
}); //get JSON Data for Stories
function start with a line $('#mypost').html(""); before going to another request to clear display content.
Also you can add a waiting message $('#mypost').html("Please wait..."); before showing content from next request.
function showPost(id) {
$('#mypost').html(""); //add this line
//$('#mypost').html("Please wait..."); //also you can add it to show waiting message.
$.getJSON('http://hopeofgloryinternational.com/?json=get_post&post_id=' + id + '&callback=?', function(data) {
var output='';
output += '<h3>' + data.post.title + '</h3>';
output += data.post.content;
$('#mypost').html(output);
}); //get JSON Data for Stories
}
You can empty() $mypost
var $myPost = $('#mypost').empty();
I'm trying to bind on to a click event for a class but continue to get this error:
Uncaught SyntaxError: Unexpected token ;
My jquery and HTML
function loadData() {
isLoading = true;
$('#loaderCircle').show();
$.post(apiURL, { f: 'gridview', start: pgStart, end: pgEnd, params: $("#search_basic_form_id").serialize() }, function(data){
if (data.success) {
// Create HTML for the images.
var html = '';
$.each(data.profiles, function() {
html += '<li><div class="image-wrapper">';
html += '<div class="image-options">';
html += '<br>Favorite';
html += '</div>';
html += '<a href="/view_profile.php?id='+this.user_id+'">';
html += '<img src="'+this.file_name+'" width=200px; height="'+this.height+'px" style="border:0;">';
html += '</a>';
// Image title.
html += '<p>'+this.name+' '+this.age+'</p>';
html += '<p>'+this.city+', '+this.state+'</p>';
html += '</div>';
html += '</li>';
});
// Add image HTML to the page.
$('#tiles').append(html);
// Apply layout.
applyLayout();
pgStart = data.start;
pgEnd = data.end;
}
}, "json");
};
$(document).ready(function() {
// Load first data from the API.
loadData();
$('.favoriteButton').on('click', function(e) {
e.preventDefault();
alert("Favorite Clicked");
});
...
Not sure why I'm getting this error but it points to the last semi colon in the jquery call.
Ah, figured it out I think. Try this for your document ready:
$(document).ready(function() {
Difference is the lack of new.