Re: [ModalBox Group] jcarousel multi step form rendered in modal box

[Justinas Urbanavicius]

if you load your content with ajax, then you have to initialize all javascript associated with your jcarousel and steps, after the content is loaded into modalbox.

On Fri, Nov 16, 2012 at 5:54 AM, yaboyanees <merzi...@gmail.com> wrote:

I have a multi step quiz for the user that uses jcarousel. When the user selects his choice, the next step scrolls in from the right. It does this until the last step and submits the form. All is well.

When I integrated this into a modal box, I lost the ability to leave step 1 after clicking my first choice. Nothing happens. I have the full app over on my public github repo https://github.com/yaboyanees/gfu
Any help is greatly appreciated

--
You received this message because you are subscribed to the Google Groups "ModalBox" group.
To view this discussion on the web visit https://groups.google.com/d/msg/modalbox/-/9EkcvGV9E00J.
To post to this group, send email to moda...@googlegroups.com.
To unsubscribe from this group, send email to modalbox+u...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/modalbox?hl=en.

--
Justinas

[Anees Merzi]

I understand what you are saying but im not sure how to do it. Im still learning and sort of a noob. I have a link to the modal box that pulls up that path in the modal box. That renders all the javascript associated with jarousel so isnt that technically loaded after the modalbox? I really dont have a clue.

[Justinas Urbanavicius]

maybe, don't really understand what you mean.
jcarousel is initialized usually on document ready with the help of

jQuery('#mycarousel').jcarousel();

as you are loading content into modalbox with ajax, this init of jcarousel should be run, after the content is loaded AND visible in the modalbox, as javascript can't determine width and height

of invisible elements.

so in the afterLoad callback your should execute the jcarousel init.
afterLoad: function(){
jQuery('#mycarousel').jcarousel();

}

by the way did you set jquery to run in no conflict mode ? as prototype framework and jquery don't like to live together :)
http://api.jquery.com/jQuery.noConflict/

--
Justinas

[Anees Merzi]

tried what you suggested. I might be doing it wrong. This is my view: https://github.com/yaboyanees/gfu/blob/master/app/views/layouts/quiz.html.erb(line 19)

which yields this page: https://github.com/yaboyanees/gfu/blob/master/app/views/user_preferences/show.html.erb(

that renders this form: https://github.com/yaboyanees/gfu/blob/master/app/views/user_preferences/_form.html.erb

The form works perfect except when its rendered in the modal box in this view: https://github.com/yaboyanees/gfu/blob/master/app/views/static_pages/home.html.erb (line 102)

Maybe this will give you a hint at what im doing wrong

[Justinas Urbanavicius]

i'm not familiar with erb :) what does FF firebug console say, do you get a js error ?

--
You received this message because you are subscribed to the Google Groups "ModalBox" group.
To post to this group, send email to moda...@googlegroups.com.
To unsubscribe from this group, send email to modalbox+u...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/modalbox?hl=en.

--
Justinas