We Keep Coding

Redirect parent document

I need to use Javascript for redirect page.
I want user to click a hyperlink which using JavaScript would redirect the parent document to a new URL.
i try to use below code but not work, anybody can give advisee ? many thanks
<p align=right style='text-align:right'>
<span style='font-size:10.0pt;font-family:Verdana'>
<a href="JavaScript:parent.document.frames.left.location.href='../xxx1.htm'; location.href='../xxx2.htm';">
<span style='text-decoration:none;text-underline:none'>
<img border=0 width=150 height=75 id="_x0000_i1025" src="../Images/xxx.gif">
</span>
<br>
</a>
<o:p></o:p>
</span>
</p>

I'm not sure whether I really understood your requirement, but I guess you can try this ( or replace location.href with src property when iframes are concerned):
...
<a href="#" onclick="redir(event);">
...
<script>
function redir(event){
var base = event.target;
base.parent.document.frames.left.location.href = '../xxx1.htm';
base.location.href = '../xxx2.htm';
}
</script>

Button to add content to other page

I'm trying to make a POS system with HTML, CSS and Javascript.
I currently have a site that loads in the inventory to an iframe and from there I want the buttons from the iframe to add their information such as "Name, price, amount etc." to another div.
Is this possible?
I already tired linking the target and such, but nothing worked.
Index page:
<wrapper>
<div id="category">
<a href="øl_soda.html" target="iframe1">
<input type="button" class="categories_button" value="Øl/Soda" />
</a>
<a href="drinks.html" target="iframe1">
<input type="button" class="categories_button" value="Drinks" />
</a>
<a href="shot.html" target="iframe1">
<input type="button" class="categories_button" value="Shots" />
</a>
<a href="diverse.html" target="iframe1">
<input type="button" class="categories_button" value="Diverse" />
</a>
</div>
<iframe name="iframe1" id="inventory" src="velkommen.html">
</iframe>
<div id="checkout">
<ul id="myList">
<li>
Ja
</li>
</ul>
<button onclick="remove()">Remove</button>
<button onclick="reset()">Reset</button>
</div>
</wrapper>
Site open in iframe:
<script>
function add_rynkeby() {
var node = document.createElement("LI");
var textnode = document.createTextNode("Rynkeby");
node.appendChild(textnode);
document.getElementById("myList").appendChild(node);
}
function add_cocio() {
var node = document.createElement("LI");
var textnode = document.createTextNode("Cocio");
node.appendChild(textnode);
document.getElementById("myList").appendChild(node);
}
function remove() {
var list = document.getElementById("myList");
list.removeChild(list.childNodes[0]);
}
</script>
<script>
function reset() {
var list = document.getElementById("myList");
while (list.hasChildNodes()) {
list.removeChild(list.firstChild);
}
}
</script>
<wrapper>
<button onclick="add_rynkeby()" class="inventory_button" target="index.html">Rynkeby</button>
</wrapper>
So I want the buttons from the iframe site to display it's name into the "checkout" div on the index page.

To have the page in the iframe communicate information to the parent page, use the postMessage API. MDN page is https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage but searching for "postmessage api" will turn up many guides.
The general idea is:
the iframed page's JS sends a message when the button is clicked
the parent page's JS listens for messages, and responds in some way when it recognizes a received message as coming from the iframe
That "recognizes a received message as coming from the iframe" is an important security point: you'll need to set things up so that the parent page only trusts the messages you intend it to trust. Most guides to the API will cover that.

Why does append.Child return me null when I use it in a Div but works when I put it on the body?

for some reason my code doesn't work. When I try to see what the console will return me it gives me the answer I want while returning me: "Uncaught TypeError: Cannot read property 'appendChild' of null" when I the same thing on for a Div.
This is my code please help me...
function addOnePropertie () {
var theUl = document.createElement ("UL");
var theText = document.createTextNode ("This is a paragraph.");
theUl.appendChild (theText);
document.getElementById('theUlDiv').appendChild (TheUl);
}
<div class="divOne">
<header>
Sign Up an Object
</header>
<ul>
<span class="spanObject"> Name of Object: </span>
<input placeholder="Type any Name...">
</ul>
<hr class="inDiv">
<ul>
<span class="spanObject"> Name plus Value of Propertie One: </span>
<input class="smallInput" placeholder="Name of Propertie...">
<input class="smallInput" placeholder="Value of Propertie">
</ul>
<div id="theUlDiv">
</div>
<button class="addPropertie" onclick="addOnePropertie ();">
Add a Propertie
<i class="material-icons" style="color: blue; font-size: 15px;">
note_add
</i>
</button>
</div>
As you see if I console.log (theUl) it returns me what I want a new Ul element, same if I try to put it in document.body.appendChild (theUl), but if I do it in the div it doesn't work, please help me out :D

The way to debug this will be, try to query in your browser console for the element, document.getElementById('theUlDiv') and you will find that it will return null because your markup doesn't have an element with id='theULDiv' either use document.getElementsByClassName('theUlDiv')[0] or change your markup to add the id to the element.
Edit:
There is another error in this line .appendChild (TheUl); inside appendChild method you are passing an undefined variable. your actual variable is theUl but you have capital 'T'

Because there's no element which id is 'theUlDiv' in your html.

Issues with find() when inserting html dynamically using jquery

I have a modal with a grid of buttons representing different html components. When one of the buttons is pressed, some html is supposed to be injected into the page once the modal closes. However, I'm having trouble targeting the specific column where the html is to be injected. Here's my code:
<div class="row" id="newRow">
<div class="col-md-12 column">
<button class="btn addElement" href="#" data-toggle="modal" data-target="#add-element"><i class="fa fa-plus fa-3x add-item"></i></button>
</div>
</div>
And in my js file I have some code to assign an id to the column div (since there could potentially be many columns with this addElement button) that looks like this:
...
$(this).parent().next().children().find('.column').assignId();
...
Up to this point, everything works well. I'm having no trouble getting the column a unique id (defined in my assignId() function).
As I mentioned, the addElement button gets clicked, opening a modal which is when this code is executed:
$(document).on('click', 'button.addElement', function (e) {
e.preventDefault();
$('#add-element').modal('show').draggable();
var col = $('button.addElement').parent();
// debugging in the browser verifies that the colId
// successfully stores the id attribute for the column
var colId = col.attr('id');
addElements(colId);
});
...
function addElements(colId) {
$('#insert-paragraph').on('click', function () {
var html_content = '<div class="box" data-type="paragraph">...</div>';
$("#newRow").find("#"+colId).html(html_content)
$('#add-element').modal('hide');
});
}
It's on this line: $("#newRow").find(colId).html(html_content); that I'm having the issue. My guess is that the formatting for find(...) is wrong and that I can't just insert a variable like that, but I've tried a few different things and nothing seems to be working.
Any help is very much appreciated.
Thanks!
UPDATE:
#juvian suggested writing a few of the variables' values to the console:
console.log(colId);
console.log($("#newRow")).length;
console.log($("#newRow").find("#"+colId).length);
console.log($("#newRow").find("#"+colId).html());
I logged these values twice. First, just before passing colId into the addElements function and in the addElements function immediately after $(#newRow").find("#"+colId).html(html_content); The results of those two tests are as follows:
Values prior to running addElements:
console.log(colId); = 8153-1076-641d-3840
console.log($("#newRow")).length; = Object[div#newRow.row.clearfix]
console.log($("#newRow").find("#"+colId).length); = 1
console.log($("#newRow").find("#"+colId).html()); = <button class="btn addElement"...>...</button>
Values after the insert-paragraph button is pressed:
console.log(colId); = 8153-1076-641d-3840
console.log($("#newRow")).length; = Object[div#newRow.row.clearfix]
console.log($("#newRow").find("#"+colId).length); = 1
console.log($("#newRow").find("#"+colId).html()); = <div class="box box-element" data-type="paragraph">...</div>
Interestingly enough, it appears like everything is working like I'd expect it to, however, when it's all said and done, the addElement button remains and the page still renders this:
<div id="newRow" class="row clearfix">
<div id="32aa-ab91-f50d-c3b3" class="col-md-12 column ui-sortable">
<button class="btn addElement" data-target="#add-element" data-toggle="modal" href="#">
<i class="fa fa-plus fa-3x add-item"></i>
</button>
</div>
</div>

.find as most jquery functions, takes a css selector as parametre. Unfortunately, colId is just a string, so it matches no elements (unless colId is html, span or something like that)
You are just missing adding the id selector at the beginning to do an id match:
.find("#"+colId)

I guess The parent of button is a div here which has no id.
var col = $('button.addElement').parent();
thus var colId is getting no value.give that div an id and it should be fine.

<a href doesn't fire after .Click jquery function call in IE. Works fine with Chrome and FF

My code:
Jquery part:
$('#yesdownloadvideo').click(function(){
var expiryTime = parseInt($('#expirytime').val());
$('#fade, #popuprel').fadeOut()
setCookie("emailpopup","cookie already set",expiryTime);
});
Html part:
<div class="yes-btn"><a id="yesdownloadvideo" href="<%=yesbuttonlink%>.html" target="_blank" style="text-decoration:none"><input type="submit" class="yesbtn-src" value="<%=yesText%>" /></a></div>

Use preventDefault() like,
$('#yesdownloadvideo').click(function(e){
e.preventDefault();
var expiryTime = parseInt($('#expirytime').val());
$('#fade, #popuprel').fadeOut()
setCookie("emailpopup","cookie already set",expiryTime);
});
Also change your html like
// Remove your submit button from link
<div class="yes-btn">
<a id="yesdownloadvideo" href="<%=yesbuttonlink%>.html" target="_blank"
style="text-decoration:none"><%=yesText%></a>
</div>
Or add submit after link
<div class="yes-btn">
<a id="yesdownloadvideo" href="<%=yesbuttonlink%>.html" target="_blank"
style="text-decoration:none"><%=yesText%></a>
<input type="submit" class="yesbtn-src" value="<%=yesText%>" />
</div>

Your HTML is invalid. You cannot have an input inside an a. Browser recovery from that error is inconstant. It looks like the input is trapping the click in IE.
You can have either a link or a submit button there, but not both.