Close Rokbox from my own button
-
-
- Vitor boica
- Jr. Rocketeer
- Posts: 37
- Thanks: 0
-
Hello again,
My name is Antero Duarte and im developing a product configurator in javascript, opening it up on a rokbox with several pages, but i reach the final page and the user will have to click rokbox's close button or out of the window to close the box and see the outputted results, how can i add a button to my javascript that will call rokbox's function to close the lightbox? Also, can i make the button refresh the parent page upon clicking? you see, im using cookies to store the data of the choices on the several steps of the configurator, and then when you exit the configurator, the choices are outputted to a table, can i make it so when you exit the configurator(close the lightbox), the parent page refreshes?
here is the configurator if you want to check it out, i have it online but no links in the page link to it yet, so, it is live, but unconscious xD
Thanks in advance,
Antero Duarte - Last Edit: 9 years 4 months ago by Kat05.
-
-
-
- Shazdeh
- Elite Rocketeer
- Posts: 4984
- Thanks: 29
-
Hi,
you can stimulate the click event on the RokBox's close button to close the popup when you want:Right now this will fail on your website because the dollar variable has been reassigned to jQuery object. This is a very bad idea and will cause JavaScript errors on the page.$('rokbox-close').fireEvent('click'); - Last Edit: 9 years 4 months ago by Kat05.
- Please don't PM unless requested
Consider using the custom stylesheet for all your CSS customizations: gantry-framework.org/documentation/wordp...custom_stylesheet.md .
Please provide the URL to the issue.
And please mark the thread as solved if the issue is resolved.
-
-
-
- Vitor boica
- Jr. Rocketeer
- Posts: 37
- Thanks: 0
-
Hi,
Thank you so much for your input, as always, but the configurator stopped working as soon as i got rid of that jquery.js file, the links from page to page stop being made. as soon as i put back the file, everything is working again, also, the button with that code you said is working, i just need to do the refresh on the page after exiting, i will try a few different options.
in the meantime, i think i need help with something, although it has nothing to do with gantry, do you think you can help me out?
the thing is: as you might have noticed, above the car configuration window, i have a "progress bar" that shows the options you have made so far, but it's only working in the rims page, on the color page it should show the model you choose on the first page, what do you think this is? some problem with the cookies? or maybe javascript? the only thing i dont believe is not working is the html, because it is just equal to the rims page (well, then again, so is the javascript, actually, it is all in the main.js file, so it should be working, im calling the same function on different places and it works in one place and fails in the other...)
Thanks in advance,
Antero Duarte
-
-
-
- Shazdeh
- Elite Rocketeer
- Posts: 4984
- Thanks: 29
-
Hi,
the parent window is accessible from the iFrame by "window.parent" so this should work:window.parent.location.reload(true);
For the jQuery issue, I think you need to update your codes as well to make sure they all reference the "jQuery" object instead of "$". That should fix it. The safe way to use the dollar variable in jQuery is to wrap your code in a self invoking anonymous function ( + ) like so:(function($){ // put your code here // safe to use $ variable as the jQuery object })(jQuery);
Sorry, what progress bar? - Please don't PM unless requested
Consider using the custom stylesheet for all your CSS customizations: gantry-framework.org/documentation/wordp...custom_stylesheet.md .
Please provide the URL to the issue.
And please mark the thread as solved if the issue is resolved.
-
-
-
- Vitor boica
- Jr. Rocketeer
- Posts: 37
- Thanks: 0
-
thank you, i will try this and get back to you
in your browser it doesnt show a bar above the car where it would show the choices you have made? you probably have the old version cached, it happened to me too, that's why i started testing with a private navigation tab on chrome, that way cache wont be loaded and everytime it will open the new version of whatever file i just uploaded,
but in case it is showing and i didnt explain myself well enough for you to understand what i mean, this is what i mean:
This image is hidden for guests.
Please log in or register to see it.
it is basically a navigation bar that should show your progress based on the cookies that were used
thank you,
Antero Duarte
-
-
-
- Vitor boica
- Jr. Rocketeer
- Posts: 37
- Thanks: 0
-
again, thank you for your help, but there was a couple of things i couldnt do like you told me to:
first, i couldnt use that "safe $ variable as the jQuery object" code, maybe im being stupid or something, but i couldnt run that code, but it didnt cause me any trouble, except when using the
$('rokbox-close').fireEvent('click');
im assuming this line wouldnt work because of how my code's jQuery is "all messed up", but anyway, after searching, and searching, and searching a little more all over the web, i found this:
window.parent.rokbox.close(null);
this, combined with window.parent.location.reload(true); does everything i wanted to do, so now my configurator form goes through each step and then closes the rokbox on the last one and outputs the results to a table.
thank you so much for your help, and i hope i wont be needing it again soon
no offense, but i only come to you when i fuck up xD
thank you,
Antero Duarte
-
-
-
- Shazdeh
- Elite Rocketeer
- Posts: 4984
- Thanks: 29
-
Hehe, no worries, happy to help
- Please don't PM unless requested
Consider using the custom stylesheet for all your CSS customizations: gantry-framework.org/documentation/wordp...custom_stylesheet.md .
Please provide the URL to the issue.
And please mark the thread as solved if the issue is resolved.
-
-
-
- Thomas Venugopal
- Sr. Rocketeer
- Posts: 118
- Thanks: 0
-
Just in case someone stumpled over this thread via Google like I did and just wanted a button within the Rokbox to close the RokBox.
This is what works for me:
<button onclick="window.parent.rokbox.close(null);">Close</button>
Place that html somewhere in your RokBox content, that's it.
getimo
-
Time to create page: 0.068 seconds