We Keep Coding

Two Javascript unable to create two iframes , only last javascript creating iframe

I have these two scripts for creating iframe on page dynamically, but only last one works, but if I use them each on separate page both work fine.
<script id='vr_NTgtLxxx'>
window.options = {
api_key: 'NTgtLxxx',
height: '100%',
width: '100%',
min_height: '1000px'
};
var s = document.createElement('script');
s.src = "http://www.example.com/embed.js";
s.async = true;
document.body.appendChild(s);
</script>
<script id='vr_My0tNxxx'>
window.options_search = {
api_key_search: 'My0tNxxx',
height: '100%',
width: '100%',
min_height: '1000px',
'title': 'search'
};
var sa = document.createElement('script');
sa.src = "http://www.example.com/embed-search.js";
sa.async = true;
document.body.appendChild(sa);
</script>
Here is the iframe building code
window.onload=function(){
var container_s=document.createElement("div");
container_s.setAttribute("id", "div_");
var span_s =document.createElement("span_s");
span_s.setAttribute("id", "span_s_");
span_s.style.fontFamily="arial";
span_s.style.fontWeight="bold";
span_s.style.textAlign="center";
span_s.style.display ="Block";
var loader_message_s = document.createTextNode("....");
span_s.appendChild(loader_message_s);
container_s.appendChild(span_s);
var ifrm_s = document.createElement("iframe");
ifrm_s.setAttribute("src","SRC_URL");
ifrm_s.style.width = "100%";
ifrm_s.style.minHeight = "1000px";
ifrm_s.frameBorder=0;
if(window.options_search.width){
ifrm_s.style.width = window.options_search.width;
}
ifrm_s.style.height = "100%";
if(window.options_search.height){
ifrm_s.style.height = window.options_search.height;
}
if(window.options_search.min_height){
ifrm_s.style.minHeight = window.options_search.height;
}
if(window.options_search.border){
ifrm_s.style.border = window.options_search.border;
}
ifrm_s.setAttribute("id", key_search_s);
ifrm_s.setAttribute("onload", 'frameload_s("span_s_'+key_search_s+'")');
container_s.appendChild(ifrm_s);
var s_s = document.getElementById("vr_"+key_search_s);
s_s.parentNode.insertBefore(container_s, s_s);
}
Here I have added code for creating iframe

The issue relays in overriding window.onload function definition. Use addEventListener(event, callback) instead.
Here's a simplified example reducing the same problems.
window.onload = function(){
console.log('Window loaded #1'); // Will not excecute
}
window.onload = function(){
console.log('Window loaded #2'); // Window loaded #2
}
Working solution using addEventListener
window.addEventListener('load', function(){
console.log('Window loaded #1'); // Window loaded #1
});
window.addEventListener('load', function(){
console.log('Window loaded #2'); // Window loaded #2
});

Need to disable anchor scroll in AJAX code

https://jsfiddle.net/JTBennett/ekc6yobw/
Here's my current jQuery code:
var rel = "";
var menuUp = true;
$('.navButton').click(function () {
rel = $(this).attr('rel');
menuUp = false;
window.location.hash = rel;
$('#mainContainer').scrollTop(0);
});
$('.resetButton').click(function () {
window.location.hash = "";
menuUp = true;
});
function navigate() {
$('#mainMenu').animate({
opacity: 0,
left: '100%'
}, function () {
$(rel).animate({
top: '0px'
});
});
};
function resetNav() {
$(rel).animate({
top: '110%'
}, function () {
$('#mainMenu').animate({
opacity: 1,
left: '0px'
});
});
};
window.onhashchange = function () {
if (menuUp) {
resetNav();
} else {
navigate();
}
};
I'm attempting to disable the scrolling up to the top of the page on click. I've never done any manipulation of hashes until now...figured I'd better jump on the AJAX bandwagon.
Anyway, I've tried quite a few methods without success (links below).
The most hopeful candidate was this piece of code:
var elems = document.getElementsByClassName('mainContainer');
for (var i=0; i<elems.length; ++i) {
//add click function to each element
elems[i].addEventListener('click', clickFunc);
}
var keepScroll = false;
function clickFunc(e) {
e.preventDefault();
history.replaceState({}, '', e.target.href);
}
I placed it as a separate header script, got no relief. I'm sure the issue is related to the AJAX code relying on the hashes for commands, but I don't know why I can't disable the default action still. If anyone can fork my jsfiddle and find what's wrong, I'd greatly appreciate it.
-Joel
[1]: http://stackoverflow.com/questions/3659072/how-to-disable-anchor-jump-when-loading-a-page
[2]: http://stackoverflow.com/questions/10626814/avoid-the-page-scrolling-jumping-when-anchor-is-in-the-url
[3]: http://jsbin.com/IKoRiTeS/2/edit?html,css,js,output

Function not working for innerhtml

I have a function that moves some divs onclick of div class "close". This works fine initially, but I edit the content of those divs with output.innerHTML, and when I do so, the script doesn't work onclick anymore.
Javascript:
$(function()
{
var open = true;
$('.close').click(function() {
if (open = true)
{
$("#upper").animate({'top' : '0px'}, {duration : 400});
open = true;
$("#lower").animate({'top' : '0px'}, {duration : 400});
open = true;
$("#filler").animate({'top' : '0px'}, {duration : 400});
open = true;
}
else {
}
});
});
Also:
function enable() {
var output = document.getElementById("passwordinfo");
var sentence = '<h4>RE-ENABLE HMS MEDHOST ACCOUNT</h4>' +
'<div class="close" onclick="close()"></div>';
var open = true;
output.innerHTML = sentence;
}
The function "enable" inputs the html in the div fine, but onclick of .close doesn't work anymore. Any ideas what I'm missing here?

In the enable function you can re-add the click event:
function enable() {
var output = document.getElementById("passwordinfo");
var sentence = '<h4>RE-ENABLE HMS MEDHOST ACCOUNT</h4><div class="close" onclick="close()"></div>';
var open = true;
output.innerHTML = sentence;
$('.close').off('click')
$('.close').click(function()
{
....
....
....
....
}
}
I probably doesn't work because you add a html after you add the click event. Don't forget to use the .off('click'), otherwise the event fires twice for element that were already in the dom when you added the event for the first time

You should use .on or .live for dynamically added elements in DOM. Also the if condition is wrong.
Try this:
$(function()
{
var open = true;
$(document).on("click", ".close", function() {
if (open)
{
$("#upper").animate({'top' : '0px'}, {duration : 400});
open = true;
$("#lower").animate({'top' : '0px'}, {duration : 400});
open = true;
$("#filler").animate({'top' : '0px'}, {duration : 400});
open = true;
}
else {
}
});
});

Toggling two events on one button

I'm trying to add some functionality to be able to edit comments inline. So far it's pretty close, but I'm experiencing issues trying to trigger a second event. It works the first time, but after that, fails.
$(function() {
var $editBtn = $('.js-edit-comment-btn');
var clicked = false;
$editBtn.on('click', $editBtn, function() {
clicked = true;
var $that = $(this);
var $form = $that.closest('.js-edit-comment');
var $commentTextBody = $that.closest('div').find('.js-comment-body');
var commentText = $commentTextBody.text();
var $editableText = $('<textarea />');
if ($that.text() === 'Save Edits') {
$that.text('Saving...').attr('disabled', true);
} else {
$that.text('Save Edits').attr('alt', 'Save your edits');
}
// Replace div with textarea, and populate it with the comment text
var makeDivTextarea = function($editableText, commentText, $commentTextBody) {
$editableText.val(commentText);
$commentTextBody.replaceWith($editableText);
$editableText.addClass('gray_textarea js-edited-comment').width('100%').css('padding', '4px').focus();
};
makeDivTextarea($editableText, commentText, $commentTextBody);
var saveEdits = function($that, $editableText) {
$that.on('click', $that, function() {
if (clicked) {
var comment = $that.closest('div').find('.js-edited-comment').val();
$editableText.wrap('<div class="js-comment-body" />').replaceWith(comment);
$that.text('Edit').attr('alt', 'Edit Your Comment').attr('disabled', false);
$('#output').append('saved');
clicked = false;
return false;
}
});
};
saveEdits($that, $editableText);
return false;
});
});​
jsfiddle demo here

Hiya demo for your working solution: http://jsfiddle.net/8P6uz/
clicked=true was the issue :)) I have rectified another small thing. i.e. $('#output') is set to empty before appending another saved hence text **saved** will only appear once.
small note: If I may suggest use Id of the button or if there are many edit buttons try using this which you already i reckon; I will see if I can write this more cleaner but that will be sometime latter-ish but this should fix your issue. :) enjoy!
Jquery Code
$(function() {
var $editBtn = $('.js-edit-comment-btn');
var clicked = false;
$editBtn.on('click', $editBtn, function() {
clicked = true;
var $that = $(this);
var $form = $that.closest('.js-edit-comment');
var $commentTextBody = $that.closest('div').find('.js-comment-body');
var commentText = $commentTextBody.text();
var $editableText = $('<textarea />');
if ($that.text() === 'Save Edits') {
$that.text('Saving...').attr('disabled', true);
} else {
$that.text('Save Edits').attr('alt', 'Save your edits');
}
// Replace div with textarea, and populate it with the comment text
var makeDivTextarea = function($editableText, commentText, $commentTextBody) {
$editableText.val(commentText);
$commentTextBody.replaceWith($editableText);
$editableText.addClass('gray_textarea js-edited-comment').width('100%').css('padding', '4px').focus();
};
makeDivTextarea($editableText, commentText, $commentTextBody);
var saveEdits = function($that, $editableText) {
$that.on('click', $that, function() {
if (clicked) {
var comment = $that.closest('div').find('.js-edited-comment').val();
$editableText.wrap('<div class="js-comment-body" />').replaceWith(comment);
$that.text('Edit').attr('alt', 'Edit Your Comment').attr('disabled', false);
$('#output').text("");
$('#output').append('saved');
clicked = true;
return false;
}
});
};
saveEdits($that, $editableText);
return false;
});
});​

setInterval with other jQuery events - Too many recursions

I'm trying to build a Javascript listener for a small page that uses AJAX to load content based on the anchor in the URL. Looking online, I found and modified a script that uses setInterval() to do this and so far it works fine. However, I have other jQuery elements in the $(document).ready() for special effects for the menus and content. If I use setInterval() no other jQuery effects work. I finagled a way to get it work by including the jQuery effects in the loop for setInterval() like so:
$(document).ready(function() {
var pageScripts = function() {
pageEffects();
pageURL();
}
window.setInterval(pageScripts, 500);
});
var currentAnchor = null;
function pageEffects() {
// Popup Menus
$(".bannerMenu").hover(function() {
$(this).find("ul.bannerSubmenu").slideDown(300).show;
}, function() {
$(this).find("ul.bannerSubmenu").slideUp(400);
});
$(".panel").hover(function() {
$(this).find(".panelContent").fadeIn(200);
}, function() {
$(this).find(".panelContent").fadeOut(300);
});
// REL Links Control
$("a[rel='_blank']").click(function() {
this.target = "_blank";
});
$("a[rel='share']").click(function(event) {
var share_url = $(this).attr("href");
window.open(share_url, "Share", "width=768, height=450");
event.preventDefault();
});
}
function pageURL() {
if (currentAnchor != document.location.hash) {
currentAnchor = document.location.hash;
if (!currentAnchor) {
query = "section=home";
} else {
var splits = currentAnchor.substring(1).split("&");
var section = splits[0];
delete splits[0];
var params = splits.join("&");
var query = "section=" + section + params;
}
$.get("loader.php", query, function(data) {
$("#load").fadeIn("fast");
$("#content").fadeOut(100).html(data).fadeIn(500);
$("#load").fadeOut("fast");
});
}
}
This works fine for a while but after a few minutes of the page being loaded, it drags to a near stop in IE and Firefox. I checked the FF Error Console and it comes back with an error "Too many Recursions." Chrome seems to not care and the page continues to run more or less normally despite the amount of time it's been open.
It would seem to me that the pageEffects() call is causing the issue with the recursion, however, any attempts to move it out of the loop breaks them and they cease to work as soon as setInterval makes it first loop.
Any help on this would be greatly appreciated!

I am guessing that the pageEffects need added to the pageURL content.
At the very least this should be more efficient and prevent duplicate handlers
$(document).ready(function() {
pageEffects($('body'));
(function(){
pageURL();
window.setTimeout(arguments.callee, 500);
})();
});
var currentAnchor = null;
function pageEffects(parent) {
// Popup Menus
parent.find(".bannerMenu").each(function() {
$(this).unbind('mouseenter mouseleave');
var proxy = {
subMenu: $(this).find("ul.bannerSubmenu"),
handlerIn: function() {
this.subMenu.slideDown(300).show();
},
handlerOut: function() {
this.subMenu.slideUp(400).hide();
}
};
$(this).hover(proxy.handlerIn, proxy.handlerOut);
});
parent.find(".panel").each(function() {
$(this).unbind('mouseenter mouseleave');
var proxy = {
content: panel.find(".panelContent"),
handlerIn: function() {
this.content.fadeIn(200).show();
},
handlerOut: function() {
this.content.slideUp(400).hide();
}
};
$(this).hover(proxy.handlerIn, proxy.handlerOut);
});
// REL Links Control
parent.find("a[rel='_blank']").each(function() {
$(this).target = "_blank";
});
parent.find("a[rel='share']").click(function(event) {
var share_url = $(this).attr("href");
window.open(share_url, "Share", "width=768, height=450");
event.preventDefault();
});
}
function pageURL() {
if (currentAnchor != document.location.hash) {
currentAnchor = document.location.hash;
if (!currentAnchor) {
query = "section=home";
} else {
var splits = currentAnchor.substring(1).split("&");
var section = splits[0];
delete splits[0];
var params = splits.join("&");
var query = "section=" + section + params;
}
var content = $("#content");
$.get("loader.php", query, function(data) {
$("#load").fadeIn("fast");
content.fadeOut(100).html(data).fadeIn(500);
$("#load").fadeOut("fast");
});
pageEffects(content);
}
}

Thanks for the suggestions. I tried a few of them and they still did not lead to the desirable effects. After some cautious testing, I found out what was happening. With jQuery (and presumably Javascript as a whole), whenever an AJAX callback is made, the elements brought in through the callback are not binded to what was originally binded in the document, they must be rebinded. You can either do this by recalling all the jQuery events on a successful callback or by using the .live() event in jQuery's library. I opted for .live() and it works like a charm now and no more recursive errors :D.
$(document).ready(function() {
// Popup Menus
$(".bannerMenu").live("hover", function(event) {
if (event.type == "mouseover") {
$(this).find("ul.bannerSubmenu").slideDown(300);
} else {
$(this).find("ul.bannerSubmenu").slideUp(400);
}
});
// Rollover Content
$(".panel").live("hover", function(event) {
if (event.type == "mouseover") {
$(this).find(".panelContent").fadeIn(200);
} else {
$(this).find(".panelContent").fadeOut(300);
}
});
// HREF Events
$("a[rel='_blank']").live("click", function(event) {
var target = $(this).attr("href");
window.open(target, "_blank");
event.preventDefault();
});
$("a[rel='share']").live("click", function(event) {
var share_url = $(this).attr("href");
window.open(share_url, "Share", "width=768, height=450");
event.preventDefault();
});
setInterval("checkAnchor()", 500);
});
var currentAnchor = null;
function checkAnchor() {
if (currentAnchor != document.location.hash) {
currentAnchor = document.location.hash;
if (!currentAnchor) {
query = "section=home";
} else {
var splits = currentAnchor.substring(1).split("&");
var section = splits[0];
delete splits[0];
var params = splits.join("&");
var query = "section=" + section + params;
}
$.get("loader.php", query, function(data) {
$("#load").fadeIn(200);
$("#content").fadeOut(200).html(data).fadeIn(200);
$("#load").fadeOut(200);
});
}
}
Anywho, the page works as intended even in IE (which I rarely check for compatibility). Hopefully, some other newb will learn from my mistakes :p.