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.
Related
I have the following bit about shop info:
<h3 class="-center"><shop>Shop name</shop></h3>
<button type="button" id="banff" onclick="showShop(this.id)"><shop-title><b>Bakery Shop</b></shop-title></button>
<p class="move-right"><shop-info>Shop Address · Shop number</shop-info></p>
<div id="shop" class="hidden">
<p><shop-info>Opening soon</shop-info></p>
</div>
What I'm trying to do is that once the button is clicked, it will get the first div after the button and toggle the hidden class without referencing the id, there will be multiple shops so I am trying to create one function which will work for all of them rather than create an individual function for each.
I thought I could do something like:
function showShop(id) {
const elem = document.getElementById(id);
alert(id);
const div = elem.closest('div');
div.classList.toggle('hidden');
}
But it's referencing the first div on the page rather than the first one after the button, where have I gone wrong here? Or do I need to go about this a different way?
Thanks in advance for any advice
What about connecting the button id with the div id?
something like:
<h3 class="-center"><shop>Shop name</shop></h3>
<button type="button" id="button-1" onclick="showShop(this.id)">
<shop-title><b>Bakery Shop</b></shop-title>
</button>
<p class="move-right"><shop-info>Shop Address · Shop number</shop-info></p>
<div id="shop-button-1" class="hidden">
<p><shop-info>Opening soon</shop-info></p>
</div>
and in the javascript code would be possible to simplify to:
function showShop(id) {
const elem = document.getElementById(id);
const div = document.getElementById('shop-' + id);
div.classList.toggle('hidden');
}
You should try and avoid using ids as they are difficult to keep track of. Instead you should navigate relative to the clicked button. Below is a script that can easily take care of multiple shop sections without using any ids:
document.querySelectorAll("button").forEach(btn=>{
for(var div=btn;div=div.nextElementSibling;)
if(div.tagName==="DIV") break;
if(div) btn.onclick=()=>div.classList.toggle("hidden")
})
.hidden {display:none}
<h3 class="-center"><shop>Shop name</shop></h3>
<button><shop-title><b>Bakery Shop</b></shop-title></button>
<p class="move-right"><shop-info>Shop Address · Shop number</shop-info></p>
<div class="hidden">Info on bakery shop:
<p><shop-info>Opening soon</shop-info></p>
</div>
<button><shop-title><b>Iron Monger</b></shop-title></button>
<p class="move-right"><shop-info>Shop Address · Shop number</shop-info></p>
<div class="hidden">Info on iron monger's:
<p><shop-info>already open!</shop-info></p>
</div>
<button><shop-title><b>Fish Monger</b></shop-title></button>
<p class="move-right"><shop-info>Shop Address · Shop number</shop-info></p>
<div class="hidden">Info on fish monger's:
<p><shop-info>will never open!</shop-info></p>
</div>
In my latest update I tweaked the snippet again so that now I do the "relative navigation to the associated <div>" only once: at the time when I define and add the onclick eventlistener.
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>
i just created a function automatically reserve appointment
its work perfectly on jsFiddle
The problem Is i get errors when i past it on chrome console same as firefox
Error :
uncaught typeerror cannot read property 'on' of 'null'
This is the Function jQ+JS:
(function(){
$('a.dispo').on('click', function(){
var hold= setInterval(function(){
var submitclassform = document.getElementById('ajax_confirm_action');
if (submitclassform) {
var button = document.getElementById('ajaxConfirmCall_submit');
button.click();
alert("confimation success ! ");
clearInterval(hold);
}
},500);
})})();
HTML Code :
<ul>
<li class="overable initialised">2018-06-12
<a class="dispo" id ="test" type="button" href="javascript:void(0)"
onclick="AC">08<i>:30</i></a>
<a class="dispo" type="button" href="javascript:void(0)"
onclick="AC">09<i>:00</i></a>
<a class="dispo" type="button" href="javascript:void(0)"
onclick="AC">09<i>:30</i></a>
</li>
</ul>
<p>
After choosing appointment time , scenario
Confirmation Button POP Up !
</p>
<form action="action.php" id="ajax_confirm_action">
<input type="submit" name="conf" value="CONFIRMATION "
id="ajaxConfirmCall_submit" >
</form>
If you are placing your javascript before your rendered html (i.e. in the tag), then your script is executing prior to the DOM node being written. Because the node does not exist yet, you get the NULL error.
Try moving your javascript to the end of your document, (i.e. just before the tag).
Ultimately I'm wanting the user to click on the Landing Page next to an image on either Print or Mug. Then on the Order Page have the button for Print/Mug be active and then the image that's associated be marked as well.
So I have in Landing Page the following code:
<ul class="dropdown-menu">
<li>
Print
</li>
<li>
Mug
</li>
</ul>
Then in the Order Page the following code:
<div class="img-container1 image-container" image_var="main_image.jpg">
<%= image_tag('main_image.jpg') %>
<div class="wk-after">
<div class="centered-wk">
<span class="fa fa-check-circle check-circle"></span>
</div>
<div class="centered-wk wk-select">
SELECTED
</div>
</div>
</div>
My thought process was to then grab from the Order Page the image_var attribute and make it active.
So far I've been using:
<script>
function toggleActive() {
var activeElements = document.querySelectorAll('image_var');
activeElements.forEach(function (el) {
el.classList.remove('active');
});
btn.classList.add('active');
}
</script>
This isn't working. I don't know what the best way to grab the image_var or a url parameter. What am I missing?
I've also tried:
<script>
function toggleActive() {
var activeElements = document.querySelectorAll('[image-var]');
activeElements.forEach(function (el) {
el.classList.remove('active');
});
btn.classList.add('active');
}
</script>
With an update to the div on the container to be image-var to match. Still not touching the image.
I feel like this should be working with jQuery:
<script>
$(function(){
$.url.attr('image')
$.url.attr('type')
});
</script>
Wouldn't this be pulling out the main_image.jpg and then the print from type?
I have a div with an iframe in it like so:
<div>
<iframe ng-src="{{somesourceurl}}"></iframe>
</div>
The the source that gets loaded by the iframe has html with uniquely identified div tags like this:
<div id="n_1">
<div id="n_2" />
<div id="n_3" />
<div id="n_4">
<div id="n_5" />
</div>
</div>
I also have a bunch of buttons that corresponds to each of these uniquely tagged divs like so:
<button onclick="goToN1()">Go To n1</button>
<button onclick="goToN2()">Go To n2</button>
<button onclick="goToN3()">Go To n3</button>
<button onclick="goToN4()">Go To n4</button>
<button onclick="goToN5()">Go To n5</button>
What do I put in my onclick functions for each of these buttons such that they will scroll to the appropriate place in the iframe?
I think you can change the src of the iframe to make the browser scroll to the element with id:
HTML 1
<div>
<iframe id="my-iframe" ng-src="{{somesourceurl}}"></iframe>
</div>
HTML 2
<button onclick="goToId('n_1')">Go To n1</button>
<button onclick="goToId('n_2')">Go To n2</button>
<button onclick="goToId('n_3')">Go To n3</button>
<button onclick="goToId('n_4')">Go To n4</button>
<button onclick="goToId('n_5')">Go To n5</button>
JavaScript
function goToId(id) {
var iframe = document.getElementById("my-iframe");
var src = iframe.src;
if(src.indexOf('#') >= 0) src = src.substr(0, src.indexOf("#"));
iframe.src = src + "#" + id;
}