Customizing the c5 dialog box
Permalink
I've got some links setup that send the user to another site. When they click one of the links, I want a dialog box to fire, like an alert, and inform the user they're about to be redirected. However, I want the redirect to not occur until the user presses the "OK" button.
That being said, I've used Andrew Embler's most excellent post on the dialog window, found here:http://www.concrete5.org/documentation/how-tos/developers/javascrip...
I'm using Example #3: Loading the contents of an on-page element into a dialog from within a JavaScript function.
I've got it working. However, the dialog just shows for a fraction of a second then redirects to the other website. How can I pause it and force the user to press an "OK" button? I've tried 'delay', 'show', and 'pause', but none of them seem to work.
Here's the code I have so far. I also don't know how to insert the button. Any help there would really help me out alot!
[code]
<!-- * HIDDEN CONTENT: Alert Dialog Box * -->
<div id="myDialogContent" style="display: none">
You will now be redirected to our main site to complete your rental reservation.
</div>
<script type="text/javascript">
// V1
loadMyDialog = function() {
jQuery.fn.dialog.open({
dialogClass: 'alert',
title: 'Redirecting. . .',
href: $(this).attr('data-url'),
element: '#myDialogContent',
width: 550,
modal: false,
height: 380,
//delay: 8000,
//show: 8000,
//pause: 8000,
onClose: function() {
alert('This will fire when the dialog is closed.');
}
});
}
</script>
That being said, I've used Andrew Embler's most excellent post on the dialog window, found here:http://www.concrete5.org/documentation/how-tos/developers/javascrip...
I'm using Example #3: Loading the contents of an on-page element into a dialog from within a JavaScript function.
I've got it working. However, the dialog just shows for a fraction of a second then redirects to the other website. How can I pause it and force the user to press an "OK" button? I've tried 'delay', 'show', and 'pause', but none of them seem to work.
Here's the code I have so far. I also don't know how to insert the button. Any help there would really help me out alot!
[code]
<!-- * HIDDEN CONTENT: Alert Dialog Box * -->
<div id="myDialogContent" style="display: none">
You will now be redirected to our main site to complete your rental reservation.
</div>
<script type="text/javascript">
// V1
loadMyDialog = function() {
jQuery.fn.dialog.open({
dialogClass: 'alert',
title: 'Redirecting. . .',
href: $(this).attr('data-url'),
element: '#myDialogContent',
width: 550,
modal: false,
height: 380,
//delay: 8000,
//show: 8000,
//pause: 8000,
onClose: function() {
alert('This will fire when the dialog is closed.');
}
});
}
</script>
I'm not that experienced w/ jQuery, so I'm not exactly sure what you mean by "returning false, like a href". Please elaborate.
It does work okay if I have a target="_blank" on the links. The dialog shows, but almost immediately the browser jumps to the new tab, so you don't really have time to ready it still.
I just want a pause and the user to confirm they understand the redirection. Long story short, they're redirected to an old site that nowhere near as polished as the one they're leaving, so I don't want shock factor to play a role. The old site is tied up to databases that are updated from servers at the business, via Microsoft stuff, and I don't want to mess w/ that system at all.
I'm just looking to create an alert for the user that they're being redirected to complete their order. It could fade out, but I'd prefer an "OK" and "Cancel" button to help avoid user shock or distrust.
It's possible the link is being fired onLoad rather than on click of the "OK" button.
But I don't even have an "OK" button yet, I could use a little advice there. An example of the link is this:
Not sure how to revise it any other way. In a perfect world, everyone would operate like us and I wouldn't have to do this. But in this case, I think it's very necessary, esp. considering the obsolete look of the site the link sends them to.
Thanks for your input though! Suggestions?
It does work okay if I have a target="_blank" on the links. The dialog shows, but almost immediately the browser jumps to the new tab, so you don't really have time to ready it still.
I just want a pause and the user to confirm they understand the redirection. Long story short, they're redirected to an old site that nowhere near as polished as the one they're leaving, so I don't want shock factor to play a role. The old site is tied up to databases that are updated from servers at the business, via Microsoft stuff, and I don't want to mess w/ that system at all.
I'm just looking to create an alert for the user that they're being redirected to complete their order. It could fade out, but I'd prefer an "OK" and "Cancel" button to help avoid user shock or distrust.
It's possible the link is being fired onLoad rather than on click of the "OK" button.
But I don't even have an "OK" button yet, I could use a little advice there. An example of the link is this:
<a href="http://somesite.com/product.asp?action=category&category=53&key=12345" class="Links2Action" target="_blank" onclick="loadMyDialog()">
Not sure how to revise it any other way. In a perfect world, everyone would operate like us and I wouldn't have to do this. But in this case, I think it's very necessary, esp. considering the obsolete look of the site the link sends them to.
Thanks for your input though! Suggestions?
ahh ok I understand, the return false is something I add to links when I am using ajax to do something. It prevents the browser from doing its default behaviour, I think its more commonly referred to as an event handler.
it would look like this (using your example link)
The href here I imagine is loading the onClick function, and then returning true(by default); which then follows the link.
The nice thing about this is that if javascript is turned off then the link would just go to the page.
The ok cancel I was referring to was on the dialogue(or at least I thought it was), like the confirm window that pops up in javascript using confirm()
it would look like this (using your example link)
<a href="http://somesite.com/product.asp?action=category&category=53&key=12345" class="Links2Action" target="_blank" onclick="loadMyDialog(); return false;" >
The href here I imagine is loading the onClick function, and then returning true(by default); which then follows the link.
The nice thing about this is that if javascript is turned off then the link would just go to the page.
The ok cancel I was referring to was on the dialogue(or at least I thought it was), like the confirm window that pops up in javascript using confirm()
Thanks Sean!
That did the trick.
However, I've got 2 more small issues that arise from my jQuery ignorance.
1) I manually added an OK button to the text that's displayed in the dialog:
However, I have no idea how to make it's onClick event pass the remote URL so it would go to it. It could be an <a href> for that matter, probably more reliable than a <button>, but I still wouldn't know how to pass the correct URL to it so the user is taken to the page that the link specifies. If you could show me an example I would be eternally grateful!
I tried entering the OK button in the jQuery code, but I couldn't get anything to work, and I'm not sure if it's me or the c5 custom jQuery code, as I was referring to the jQuery dialog UI, which I understand is different to c5's as it was created later.
My jQuery code now is:
2) The dialog only fires w/ content on the first link clicked. Every other link after that opens a dialog w/ the Title and that's all. After researching, I realize it's jQuery thinking it's already done it's job after the first link was clicked, but I'm not sure how to force it to work on every link. I thought the autoOpen would work, but no dice.
Thanks in advance for your help!
Kevin
That did the trick.
However, I've got 2 more small issues that arise from my jQuery ignorance.
1) I manually added an OK button to the text that's displayed in the dialog:
<!-- * HIDDEN CONTENT: Alert Dialog Box * --> <div id="myDialogContent" style="display: none"> You will now be redirected to our main site — <a href="http://www.somesite.com" target="_blank">Some Site</a> — to complete your rental reservation. <button type="submit" value="OK" onClick="????????????">OK</button> </div>
However, I have no idea how to make it's onClick event pass the remote URL so it would go to it. It could be an <a href> for that matter, probably more reliable than a <button>, but I still wouldn't know how to pass the correct URL to it so the user is taken to the page that the link specifies. If you could show me an example I would be eternally grateful!
I tried entering the OK button in the jQuery code, but I couldn't get anything to work, and I'm not sure if it's me or the c5 custom jQuery code, as I was referring to the jQuery dialog UI, which I understand is different to c5's as it was created later.
My jQuery code now is:
<script type="text/javascript"> // V1 loadMyDialog = function() { jQuery.fn.dialog.open({ title: 'Redirecting. . .', //href: $(this).attr('data-url'), element: '#myDialogContent', width: 250, height: 'auto', modal: false, autoOpen: false, onClose: function() { close; //alert('This will fire when the dialog is closed.'); }
Viewing 15 lines of 17 lines. View entire code block.
2) The dialog only fires w/ content on the first link clicked. Every other link after that opens a dialog w/ the Title and that's all. After researching, I realize it's jQuery thinking it's already done it's job after the first link was clicked, but I'm not sure how to force it to work on every link. I thought the autoOpen would work, but no dice.
Thanks in advance for your help!
Kevin
I don't know if the dialogue has a pass back function? which could pass back either true or false or if you would need to do the actual redirection from the pop up
in its most crude format, return confirm("Message in here - are you sure etc") would do what you want but would not be in the c5 dialogue.
If it could pass back in theory you could use return youPopup();
Im afraid for the c5 implementation though you will need someone with better knowledge of how the dialogue works. Im at my jquery/javascript limit here sorry
Sean
in its most crude format, return confirm("Message in here - are you sure etc") would do what you want but would not be in the c5 dialogue.
If it could pass back in theory you could use return youPopup();
Im afraid for the c5 implementation though you will need someone with better knowledge of how the dialogue works. Im at my jquery/javascript limit here sorry
Sean
no problem Sean,
You've been a great help so far steering me in the right direction.
My jQuery knowledge reached it's limit at the beginning of this post, so thanks for giving me some of yours!
I'm working w/ something like this. This close works fine, but no dice on proceeding to the clicked URL.
Anyone else out there got an idea?
Thanks again Sean!
You've been a great help so far steering me in the right direction.
My jQuery knowledge reached it's limit at the beginning of this post, so thanks for giving me some of yours!
I'm working w/ something like this. This close works fine, but no dice on proceeding to the clicked URL.
<input type="button" onclick="jQuery.fn.dialog.closeTop()" value="<?php echo t('Close')?>" /> <input type="button" onclick="jQuery.fn.dialog.open({$(this).attr('data-url')},)" value="OK" />
Anyone else out there got an idea?
Thanks again Sean!
To grab the url of the link we have clicked on we should be able to grab its attributes I think your on the right lines using jQuery?
try tweaking it to be
$(this).attr('href')
try tweaking it to be
$(this).attr('href')
That looks like it'd work. But still no go.
Maybe someone out there w/ a little more jQuery knowledge can fine tune it for us!
I feel it's almost correct, but I'm not sure.
Any idea on the autoOpen feature and how to get the dialog to fire for any link?
Maybe someone out there w/ a little more jQuery knowledge can fine tune it for us!
I feel it's almost correct, but I'm not sure.
Any idea on the autoOpen feature and how to get the dialog to fire for any link?
thinking about it $this-> wont work as we are calling a function, from within the link, maybe if you change it to use
loadDialogue(this.value);
then in the loadDialogue function(varHref){
href: varHref
}
you could select the id of the value using $('link-id').attr('href') but this assumes you know the id and only want one?
I assume if you ware trying to pass the link dynamically then it may change.
Im not on the best pc here, but ill have a play and see if I can work something out so Im not filling this thread with useless ideas.
loadDialogue(this.value);
then in the loadDialogue function(varHref){
href: varHref
}
you could select the id of the value using $('link-id').attr('href') but this assumes you know the id and only want one?
I assume if you ware trying to pass the link dynamically then it may change.
Im not on the best pc here, but ill have a play and see if I can work something out so Im not filling this thread with useless ideas.
Thanks Sean,
Not sure if I coded this right, but it didn't produce any results. It actually made the dialog not work, so I'm sure my paltry jQuery skills are to blame.
I don't have an id for the links, but I do have a class: "Links2Action".
I don't think an ID would work, b/c all the links need it and that would defeat the purpose of the ID, it wouldn't be unique and I have no idea what would happen if all the links had the same id.
However, I can augment the links w/ just about anything else using PHP DOM functions.
I'll flip through my jQuery cookbook this evening and see if anything occurs to me. That's were I'm at in jQuery right now, studying books and doing examples.
I think we're close though.
Thanks for your advice!
Not sure if I coded this right, but it didn't produce any results. It actually made the dialog not work, so I'm sure my paltry jQuery skills are to blame.
<!-- * HIDDEN CONTENT: Alert Dialog Box * --> <div id="myDialogContent" style="display: none"> You will now be redirected to our main site — <a href="http://www.actionrentalkpt.com" target="_blank">ActionRentalKPT.com</a> — to complete your rental reservation. <input type="button" onclick="jQuery.fn.dialog.closeTop()" value="<?php echo t('Close')?>" /> <input type="button" onclick="loadDialogue(this.value);" value="<?php echo t('OK')?>" /> </div> <script type="text/javascript"> // V1 loadDialogue function(varHref){ href: varHref} loadMyDialog = function() { jQuery.fn.dialog.open({ title: 'Redirecting. . .', href: $(this).attr('href'), element: '#myDialogContent', width: 250,
Viewing 15 lines of 24 lines. View entire code block.
I don't have an id for the links, but I do have a class: "Links2Action".
I don't think an ID would work, b/c all the links need it and that would defeat the purpose of the ID, it wouldn't be unique and I have no idea what would happen if all the links had the same id.
However, I can augment the links w/ just about anything else using PHP DOM functions.
I'll flip through my jQuery cookbook this evening and see if anything occurs to me. That's were I'm at in jQuery right now, studying books and doing examples.
I think we're close though.
Thanks for your advice!
mmm, just a thought. . . Can jQuery add an ID to the clicked link?
So when you click a link, jQuery gives it an id of "clicked", then retrieves it's href attribute?
Would that work?
No idea how to code it, but thought it was worth throwing out there. I'm sure I can figure out the coding if you think that idea has potential.
So when you click a link, jQuery gives it an id of "clicked", then retrieves it's href attribute?
Would that work?
No idea how to code it, but thought it was worth throwing out there. I'm sure I can figure out the coding if you think that idea has potential.
I think I have it?
it would need your content added but give this a whirl see if it works for you?
Using $('#formSubmit').attr('action',url); I am attempting to change the action url of the form onClick so that when the form is submitted it is sent to a custom url instead of itself
it would need your content added but give this a whirl see if it works for you?
<a id="link" href="http://somesite.com/product.asp?action=category&category=53&key=12345" class="Links2Action" target="_blank" onClick="return false;">Some Link</a> <!-- * HIDDEN CONTENT: Alert Dialog Box * --> <div id="myDialogContent" style="display: none"> You will now be redirected to our main site to complete your rental reservation. <form id="formSubmit" method="post" action=""> <div class="ccm-buttons"> <a href="javascript:void(0)" onClick="ccm_blockWindowClose();" class="ccm-button-left cancel"><span><em class="ccm-button-close">Cancel</em></span></a> <a href="javascript:$('#ccm-form-submit-button').get(0).click()" class="ccm-button-right accept"><span><em class="ccm-button-add">Ok</em></span></a> <!-- we do it this way so we still trip javascript validation. stupid javascript. //--> <input type="submit" name="ccm-add-block-submit" value="submit" style="display: none" id="ccm-form-submit-button"> </div> </form> </div> <script type="text/javascript"> var el = document.createElement('div')
Viewing 15 lines of 38 lines. View entire code block.
Using $('#formSubmit').attr('action',url); I am attempting to change the action url of the form onClick so that when the form is submitted it is sent to a custom url instead of itself
You would want to add a class of clicked rather then an Id of clicked but I have changed it to fire on a click from a link with the link2action then open dialogue. I've pinched various bits from across the forum and it may not be the best solution to insert the URL into the form ?
Sent from my pretentious device
Sent from my pretentious device
Thanks for all your effort Sean,
I tried your code, and it worked the first time, except it submitted to itself and didn't redirect.
After that I couldn't get it to work again.
I'm just discovering jQuery dialog features. Hopefully c5 will be able to gracefully upgrade to the full-blown version.
I figured out a simple workaround that works great:
I'm going to take a dose of good advice and concur that the simplest solution is often the best. It works and does exactly what I need. Just wish I could utilize dialog to get the job done.
Thanks for all your hard work. I certainly learned a thing or four!
I tried your code, and it worked the first time, except it submitted to itself and didn't redirect.
After that I couldn't get it to work again.
I'm just discovering jQuery dialog features. Hopefully c5 will be able to gracefully upgrade to the full-blown version.
I figured out a simple workaround that works great:
<script type="text/javascript"> function showAlert() { var Title = "Redirecting . . ."; var Text = "You will now be redirected to our main site to complete your reservation request."; alert(Title + Text); } $().customAlert(); $(document).ready(function() { alert('Style your alert boxes without any browser restrictions!'); }); </script>
I'm going to take a dose of good advice and concur that the simplest solution is often the best. It works and does exactly what I need. Just wish I could utilize dialog to get the job done.
Thanks for all your hard work. I certainly learned a thing or four!
If you use confirm("Text here") you will also get a cancel option
then in your <a href="link" onClick="showAlert();">Link</a>
it may need to be onClick"return showAlert();"
Ive not tested it but it should show your information give the ok/cancel option if they hit cancel it should return false if they click ok it should return true so then load the link.
here is the link for my previous code, I did notice it only works when logged in,(demo,demo -if you want to try it)
http://demo.realnet.co.uk/index.php/test...
function showAlert() { var Title = "Redirecting . . ."; var Text = "You will now be redirected to our main site to complete your reservation request."; return confirm(Title + Text); }
then in your <a href="link" onClick="showAlert();">Link</a>
it may need to be onClick"return showAlert();"
Ive not tested it but it should show your information give the ok/cancel option if they hit cancel it should return false if they click ok it should return true so then load the link.
here is the link for my previous code, I did notice it only works when logged in,(demo,demo -if you want to try it)
http://demo.realnet.co.uk/index.php/test...
Hey Sean,
Just wanted to drop you a line and say thanks for your time and help!
Unfortunately, I never was able to get the dialog to work just right.
I ended up going w/ this version:
http://nadiana.com/jquery-confirm-plugin...
It does exactly what I need, just not in a pretty dialog window, but not an ugly and threatening standard alert box either. It strikes a nice balance in between. Problem solved. Thanks for your help!
Just wanted to drop you a line and say thanks for your time and help!
Unfortunately, I never was able to get the dialog to work just right.
I ended up going w/ this version:
http://nadiana.com/jquery-confirm-plugin...
It does exactly what I need, just not in a pretty dialog window, but not an ugly and threatening standard alert box either. It strikes a nice balance in between. Problem solved. Thanks for your help!
Maybe the href in this situation is being fired on load rather then onClick of the OK?
Im afraid Im just throwing ideas out there I don't know for certain.
Could you just not use a title on the links informing users they will open a new window?, Then open in a new window using target or rel?.
Of topic is there a reason you are doing it this way, I am not a big fan of those stay on this page dialogue, but I suppose I am somewhat of a power user you cant put it past a basic user.