Develop Reference

Get ID of div created by jquery

I have two functions, where the first creates a div in the dom and the second gets the ID via getElementById(). Unfortunately, my second function is just returning null.
I looked in using $.Deffered() in either of my functions, but alas nothing I do seems to work
function one() {
var dynamicDiv = $("<div>").attr("id", 'test');
dynamicDiv.iziModal({
//modal content here
})
}
function two() {
var container = document.getElementById('test');
console.log(container.innerHTML); //not returning any data
}
enter code here
I had hoped to use this with a library that replaces images with a canvas object, but it requires that the "parent element to be a valid DOM Element". I have been searching for a while now, but I can not seem to find anything on the subject that is applicable.
** Edit**
Thank you for pointing out the error in my id (I had tried something else before I pasted). The iziModal function (http://izimodal.marcelodolza.com/) is currently pulling the content in via ajax (which I assume is the problem here):
The iziModal Function:
dynamicDiv.iziModal({
title: '',
autoOpen: 1,
width: 500,
onOpening: function (offer) {
offer.startLoading();
$.get(demoUrl, function (data) {
$('#' + id + " .iziModal-content").html(data);
offer.stopLoading();
});
}
});
Content of the other file:
<div id="test">
<img src="./bundle/images/coupon.jpg" />
</div>

function one() {
var dynamicDiv = $("<div>").attr("id", 'test');
dynamicDiv.iziModal({
//modal content here
});
$("body").append(dynamicDiv);
}

How do I use the .done() callback to run a function for new data being loaded on request?

I have a page displaying data from a json feed and I also have a button which loads more of the feed on click of a button. My aim is to append some content inside the page for each feed item. I have been able to create a function which does this on load of the page, but I am unsure how to make this work with the aysynchronous loading of more data.
I understand I need to use the .done() callback to make this work but need some guidance how to implement it correctly.
This function appends the new content initially:
function appendFeed() {
$('.feed__item').each(function (index) {
$feedItem = $('.feed__item', $(this));
$feedItem.append('<div class="feed-gallery"></div>');
for (var i = 1; i <= 5; i++) {
var $count = i;
if ($count > 1) {
$('.feed.gallery', $(this)).append('<div><img data-lazy="//placehold.it/50x50"></div>');
};
});
}
This is where the .done() callback is referred, on click of a button:
$('button').click(function(){
$.getJSON(uri, function (json, textStatus) {
// do stuff
}).done(function (json) {
// do stuff - in my case this would be appendFeed()
});
});
I have already called the appendFeed() function, but if I put it inside the .done() callback on click the button, then it appends the feed again. How do i prevent the duplication for the feed that is already on the page?

This is how you will write.
<script type="text/javascript">
$.getJSON("/waqar/file.php").done(function (data) {
$(".output").append(data);
});
</script>

Changing href attribute to generated string from API with jquery

I want to change the href attritube of link on this part of the code
I'm using this code to change the href attribute
$('a').attr('href', function() {
return this.href + update.response;
});
I tried to make a variable in this function
function update(response) {
$('#response').html(JSON.stringify(response.quoteText));
var okay = $('.author').html(JSON.stringify(response.quoteAuthor));
}
But I can't seem to access it from outside scope.
Basically I want to link to Wikipedia author page by adding the $('.author') name at the end of link.
Added the update.response to the end of link but I get undefined
CodePen Link

Just update the href at the point you get your response.
eg.
http://codepen.io/anon/pen/rrJYbJ
var a = $('a'),
wiki = a.attr('href');
function update(response) {
$('#response').html(JSON.stringify(response.quoteText));
$('.author').html(JSON.stringify(response.quoteAuthor));
a.attr('href',wiki + response.quoteAuthor);
}

Where is response coming from?
did you declare it as a global variable? eg var response;
if so then just place this code:
$('a').attr('href', function() {
return this.href + response; // you dont need update.response just response
});
after wherever you're calling update();

There's some erros in your code:
Where response came from?
You should update link href after receive data from api.
You can try to alter your code like this:
And js:
function update(response) {
$('#response').html(JSON.stringify(response.quoteText));
$('.author').html(JSON.stringify(response.quoteAuthor));
$('a').each( function () {
var newHref = $(this).data('data-base-href')+response.quoteAuthor;
$(this).attr('href',newHref );
});
}

ajaxComplete with getJSON causing loop

I am using ajaxComplete to run some functions after dynamic content is loaded to the DOM. I have two separate functions inside ajaxComplete which uses getJSON.
Running any of the functions once works fine
Running any of them a second time causes a loop cause they are using getJSON.
How do I get around this?
I'm attaching a small part of the code. If the user has voted, clicking the comments button will cause the comments box to open and close immediately.
$(document).ajaxComplete(function() {
// Lets user votes on a match
$('.btn-vote').click(function() {
......
$.getJSON(path + 'includes/ajax/update_votes.php', { id: gameID, vote: btnID }, function(data) {
......
});
});
// Connects a match with a disqus thread
$('.btn-comment').click(function() {
var parent = $(this).parents('.main-table-drop'), comments = parent.next(".main-table-comment");
if (comments.is(':hidden')) {
comments.fadeIn();
} else {
comments.fadeOut();
}
});
});

Solved the problem by checking the DOM loading ajax request URL
$(document).ajaxComplete(event,xhr,settings) {
var url = settings.url, checkAjax = 'list_matches';
if (url.indexOf(checkAjax) >= 0) { ... }
}

Super simple JQuery Question - refresh static html

I have the following two functions that work great:
$(function(){
$('.trash_can a.delete').live('click', function(event) {
event.preventDefault();
var link = $(this);
$.post(link.attr('data-href'),
{
promo_id: link.attr('data-promo_id')
},
function(data) {
$('#page').html(data.html);
});
console.log('Clicked Delete');
});
});
$(function(){
$('#add-mod-form').bind('ajax:success', function(evt, data, status, xhr){
data = $.parseJSON(data);
// console.log(data.success);
if (data.success == true) {
$('#page').html(data.html);
$('#page box_bc').html()
}
else {
}
});
});
As data is received for page, I would also like to reload a static html element, $('#page box_bc') - How do I do this simple task with Jquery? Notice, i've tried it above, and that part does not work as planned.
Thanks

Use:
var $dataHtml=$(data.html);
$('#page box_bc').html($('#page box_bc',$dataHtml));

It is not very clear to me what you are trying to achieve. If the element is static what is the point trying to refresh it ? In case its content somehow depends on other elements of page : then it has to be reconstructed.
The code you have written fails because :
$('...').html()
returns the html content of that element. It does not do anything to the content. Probably it would be better if you could elaborate more on the context and purpose of the code.