I'm making a webshop for a school project, and i've got an issue with the shopping cart. because the shoppingcart & webshop are in different iframes on the main page(got quite a few images on main page, don't want to reload that, thats why it's in iframes).
Basically, my issue is that when something is selected in the webshop, the shopping cart doesn't update untill the entire webpage is reloaded. I'm storing shopping cart info in an array in a SESSION variable. basically, what i want is to reload the iframe of the cart when the session variable changes.
If the answer involves anything besides PHP/javascript, please give a clear explaination/example code, i've never used anything outside of PHP/js/html/css before. Thanks in advance :) been stuck on this for a few days now :S
Create a javascript function to fire the following code when a user adds something to their cart:
document.getElementById('some_frame_id').contentWindow.location.reload();
I don't have the code in front of me, but I've done something similar where in the parent you create an event listener on "message" then in the iframe you can call parent.postMessage, works as long as they are on the same domain
Although APAD1's answer directly addresses what you asked, it sounds like your program has some deeper design problems. Using iframes for content from the same site (ie within one domain rather than content from a separate site) is bad practice.
Consider instead displaying content in <div>s with unique ids, and using javascript to update the contents of those divs. If you're using PHP on the back end, you can create a "page" that only generates the cart contents part of your page. Not only can you include it in each page without changes, but you can load it directly with javascript and insert the result into the current page to update it in place.
Whenever your user adds an item to their cart, you can call the javascript method that refreshes the <div> with the cart's contents.
Related
Im having a hard time passing data from one HTML page to another.
Im building an online store, i have one page with my items, and with their buttons for users to pick.
and i have seconde page that is my checkout page.
I want to make it so that when the user clicks on the items in the items page it will get written on the DOM on the checkout page.
2 main issues im having:
1 inside the javascript file i have for both pages, i have the variables and eventListerner for the buttons from the items page, and i also have the variable for the table in the checkout page where i want to write with the DOM.
When im on the items page, my table variable comes as null when console.log.
And when im on the checkout page i get:
itemsScript.js:44 Uncaught TypeError: Cannot read property 'addEventListener' of null
at addEventListeners (itemsScript.js:44)
at Array.map (<anonymous>)
at itemsScript.js:46
So i see that they are not comunicating properly.
2 where should i put the value and names of the items, on the buttons themself? maybe a data.js file, and the how could i get this data from the button that was clicked?
Is the checkout page a complete new site or implemented inside your product site?
In case of a complete new site you will trigger a new request. One way is using local storage/cache as one already mentioned. This would probably the best solution so you wont lose any items on a normal site reload.
In case of a implemtation direct on the product site have a look at ajax. This might help you.
I'm not a programmer and I manage for work a web platform based on php+mysql with a prototype engine, where data form are opened/passed to server using the old modalbox script.
Until let's say one year ago or so after editing ora adding data in the modal window and closing it the parent page reloaded to the same scroll point I was.. and this was very useful because the platform generate very long data list.
Actually this don't work anymore and I'can't find the way to make it work.
Here's the code I use on the form closing button:
Continue
I also add two infos:
I've parent page list with anchor generated dinamically by a db query, that could be used in the child modal..
could be great to avoid reload of page and update data dinamically, but may be this is another step beyond
use this JS function to reload or refresh current Url on body scroll
<body onscroll="location.reload();">
After some experiment I've found a custom function in the ajaxtabs.js and used it for applying a simple rewturn false;
so in the end here's the code
MYINSTANCE.onajaxpageload = function(pageurl) {
return false;
};
I need to store some dynamic variables in a Json file (i was told this would work) to be able to load them in multiple pages. Per example a customer should be able to select one thing in one page (a highlighted div) and then go to another page, select some items there and be able to go pack to the other page and that div is still selected. (Variables remembered) Now i tried to google and search here but found nothing matching my description. Please help me!
Try using localstorage, store selected values by user in localstorage and check this at page ready or load if it exists in loacalstorage show that value or div with highlight as per your functionality and if localstorage doesn't had a value then consider it as first time user come to this page.
but be careful using localstorage as you have to clear it when you done with it, it may cause memory leakage problem.
I want to create a gallery where the images link directly out to the website in a new window when clicked.
However I would also like a view (or click to be more descriptive) count to show overlayed on the image on hover.
How do I do about creating the link/view count? Since no page is actually loaded - only a link clicked?
On top of that I would also like to use a custom short URL service. Does anyone know one that is good and/or would have a solution to my problem?
Cheers!
I've made a TODO list for you :)
[JS/AJAX] catch the click event and send a message to the server what was clicked
[PHP/ROR/Python/etc] store information in the DB (increment the clicked element counter)
[PHP/ROR/Python/etc] when page is loaded, retrieve counter values from DB and put them into the HTML
[JS] use counter values to display them over images
As for short URL services I like goo.gl .
I am looking for a way to display a list of websites one at a time from a URL list. I'm fine with a very manual solution, I found an AJAX solution where each "page" is displayed in a tab but it is very heavy because if I have 50 pages I want users to page through one at a time, this solution essentially pulls all 50 pages onto the one page. Do you know of a framework which does the same thing but only loads one page at a time? Thank you very much for the advice and help. Here is the site I found - http://css-tricks.com/jquery-ui-tabs-with-nextprevious/
You could load the URLs into an array and then create a 'next' button that loads the next url into a div; replacing the previous one.
do you require doing this will javascript?
might be easier to curl the pages using php, then echo this returned data as an eval-able array into the html. Then allow user to alter which part of the returned array you are looking at using a next and prev button.
if you pre-load each one it will be heavy as you have noted.
This idea is screaming for AJAX. With proper AJAX calls, you would only load a page once it has actually been selected by tab. Any previous page loaded into the area would need to be dumped. You shouldn't actually need to physically switch tabs if you're using the src attribute of an iframe, simply changing the src and forcing it to refresh itself should accomplish the trick. If you are performing a screen scrape through a remote web service, then you could simply use jQuery/AJAX to rewrite the innerHTML of the panel in question.