I want to add a popup dialogue box to provide instructions as part of a form. Turns out, the jQuery UI dialogue box doesn’t work inside a form as it creates its own form and thus original context is lost. I’d like the popup to adjust its size or provide scroll bars for too-large text.
Have you tried looking at the Twitter Bootstrap javascript components. They have modals and other cool stuff you can use without pulling the whole framework.
@manishval@JESii Where you able to use the modal successfully? I have everything working except validations. I posted this earlier, but no one responded, so is this even possible?
I should explain that validation works, but after the submit action and the modal windows closes. I want to prevent the window from closing when validation fails. I have tried some jQuery plugins, but I can’t get it to work.
Using the code below, the validation works and prevent the modal from closing or moving to the next tab. Problem is the “next” button no longer functions until the page refreshes. I have very limited experience javascript, but I think I need some sort of reload action.
$(document).ready(function() {
$('#rootwizard').bootstrapWizard({onNext: function(tab, navigation, index) {
if (index==1) {
// Make sure sa+part_1 is checked
if(!$('#sa_part1').is(":checked")) {
alert('You must certify Part 1');
$('#sa_part1').focus();
return false;
}
}
}, onTabShow: function(tab, navigation, index) {
var $total = navigation.find('li').length;
var $current = index+1;
var $percent = ($current/$total) * 100;
$('#rootwizard').find('.bar').css({width:$percent+'%'});
// If it's the last tab then hide the last button and show the finish instead
if($current >= $total) {
$('#rootwizard').find('.pager .next').hide();
$('#rootwizard').find('.pager .finish').show();
$('#rootwizard').find('.pager .finish').removeClass('disabled');
} else {
$('#rootwizard').find('.pager .next').show();
$('#rootwizard').find('.pager .finish').hide();
}
}});
Hi, @fritzrodriguez… Nope; I’ve not got the modal working yet; driving me crazy. I’ve posted a question under ‘Javascript’ and when I get my issue straightened, I’ll take a look back here.
@fritzrodriguez Can you post your html code to double check the markup?
MIght I suggest submitting the form remotely and then in your create.js.html or update.js.html update the UI accordingly. As this method takes model validations into account.
@manishval Hey! Yes, it works correctly if you click on the checkbox, but for me it hangs when I just click next, the pop up dialog renders and the next becomes inactive even after clicking the checkbox. It seems like a refresh issue…when you close the modal and reopen the next button works…So you have some screen sharing service so you can see what I am talking about? Going to try and records a video as well
@manishval, @fritzrodriguez… I gave up on a modal display, at least for my use case (terms of service). I checked around to other commercial sites, including Thoughtbot’s Airbrake, and they all just link to a new page to display the TOS. So I installed high_voltage (that’s been on my list anyway) and just took the easy road.
Some time back I had a working modal dialogue handler, but it was written for Prototype and I haven’t had the time to try to re-write it for jQuery… maybe some day. Anyway, good luck… maybe some of the Thoughtbot folks can help out. @benorenstein maybe?
$('#loginLink').fancybox
'topRatio': 0,
'margin': 65,
'padding': 0,
'minWidth': '360px',
'closeBtn': false,
'autoResize': false,
afterLoad: ->
# Get the content in the #login element and
# add it to the modal
$content = $(this.content).find('#login')
this.content = $content
beforeShow: ->
# Setup content
afterShow: ->
$('#user_email').focus()
That will grab content inside the #login container from the new_user_registration view.
@manishval Appreciate all your help on this… No errors were reported in chrome. I updated the gist with the html out of sa_part1 checkbox… I will look into FancyBox.