Modals

I cant make RSForm working in a modal window

3 months 2 weeks ago #78497

Sukinoz's Avatar Sukinoz

First off all, hello Peter. It is a pleaure using your extensions.

Second, maybe this is an RSForm problem... I dont know.

Third, i have read several post about RSForm and Modals in this forum, but I cant solve my problem.

Ok, I go:

I have a simple RSForm (just for testing), with two fields and a submit button.

This is my code:
{modal index.php?option=com_rsform&formId=13}index.php?option=com_rsform&formId=13{/modal}

But it gets "loading" all the time.

Activating this plugin option "Load scripts/styles"=Yes, the form loads, but the modal seems smaller than the form, and i get jquery error (i am not sure about what is jquerry for).
Here an image: drive.google.com/file/d/10BFf2vxGAaG4o56...sJe/view?usp=sharing

Any idea or instruccions for RSFORMS?

PDI have try iframe=1, but is worst. The form doesnt load (modal in withe) and get mootols error.

Thanks in advanced

3 months 2 weeks ago #78498

Peter van Westen's Avatar Peter van Westen Admin

Try opening the modal in iframe mode:

{modal url="your/url" iframe="true"}
Or switch on the option in Modals plugin settings to open links in iframe mode by default.

If you lose the templates styling when opening the modal via the iframe mode, see:
www.regularlabs.com/extensions/modals#th...-the-correct-styling

3 months 2 weeks ago #78499

Sukinoz's Avatar Sukinoz

Thanks Peter,

I have tried iframe, but the form didnt loaded (modal in white) and get mootols error...

I have solved using the layout "responsive", instead of "bootstrap 3" in the RSForm configuration.

But still get this error in console:

Uncaught SyntaxError: Unexpected token :
at Object.f.exec (mootools-core.js?d5983a1201e453151df3ec3537507155:28)
at Object.success (mootools-core.js?d5983a1201e453151df3ec3537507155:168)
at Object.e.extend.$owner (mootools-core.js?d5983a1201e453151df3ec3537507155:38)
at Object.onStateChange (mootools-core.js?d5983a1201e453151df3ec3537507155:159)
at Object.e.extend.$owner (mootools-core.js?d5983a1201e453151df3ec3537507155:38)

Any idea?
I will contact RSForm team also.

3 months 2 weeks ago #78502

Peter van Westen's Avatar Peter van Westen Admin

Something on your site is loading Mootools and causing issue.
Seems to me like an RSForms issue.

3 months 2 weeks ago #78503

Sukinoz's Avatar Sukinoz

Thanks Peter.

I share here the solution i have found using tmpl=component in the urls:

{modal url="index.php?option=com_rsform&view=rsform&formId=13&tmpl=component" title="Form Iframe true" iframe="true"}Form (Iframe - Regular Labs){/modal}

Just another question:
- Do you know how to make the window to "auto-adjust" size in the iframe mode? (just like when you use "no iframe") :huh:

3 months 2 weeks ago #78504

Peter van Westen's Avatar Peter van Westen Admin

You can't use auto sizing in iframe mode. As the iframe has a fixed size. You will need to give it a width/height yourself, which can be a percentage of the screen size or a fixed pixel size.
See:
www.regularlabs.com/extensions/modals/tutorial#width-amp-height

3 months 2 weeks ago #78505

Sukinoz's Avatar Sukinoz

Peter van Westen wrote:

You can't use auto sizing in iframe mode.

I understand. Thanks.

PD: Thanks for be there on a sunday... It is supposed not to work on Sunday... but i think you love to much your job (like me) in order to consider it just "a job" ;-) Your extensions have something special... something that make me continue believing in Joomla. If I can do something for you just ask me. Have a nice day.

3 months 2 weeks ago #78506

Peter van Westen's Avatar Peter van Westen Admin

Thank you for the kind words! :)

3 months 1 week ago #78531

Sukinoz's Avatar Sukinoz

Hello,

I cant solve the mootols error.

Uncaught SyntaxError: Unexpected token :
    at Object.f.exec (mootools-core.js?9f9f78b80402aefcb96ed6527d0d99f4:28)
    at Object.success (mootools-core.js?9f9f78b80402aefcb96ed6527d0d99f4:168)
    at Object.e.extend.$owner (mootools-core.js?9f9f78b80402aefcb96ed6527d0d99f4:38)
    at Object.onStateChange (mootools-core.js?9f9f78b80402aefcb96ed6527d0d99f4:159)
    at Object.e.extend.$owner (mootools-core.js?9f9f78b80402aefcb96ed6527d0d99f4:38)


I am not sure if it is an Regular Labs problems or RSForm. I have made 3 testing, and the Regular Labs alone is ok, and RSForm along is ok. But togheter i have the motools problem

1. RegularLabs Iframe popup WITHOUT RSForm = OK

2. RSForm WITHOUT RegularLabs Iframe = OK

3. RegularLabs Iframe popup WITH RSForm = motools problem

Here Is the test page with this 3 buttons:
Confidential information:
(hidden)


Note: I only have the error in the Category Blog View, not in the Article detail view. :unsure:

I asked to RSform support and they have said:
I can however point out that mootools are quite obsolete and these were most likely loaded by a third party approach that you were using, possibly RegularLabs (you can check if mootools is loaded on your page when using this third party implementation)..

Any idea?

3 months 1 week ago #78538

Peter van Westen's Avatar Peter van Westen Admin

Probably your template is force loading the mootools.
Also: remove the tmpl=component from your url.
Then Modals will use the special modal.php subtemplate.

For more info on that:
www.regularlabs.com/extensions/modals#th...-the-correct-styling

3 months 1 week ago #78541

Sukinoz's Avatar Sukinoz

Probably your template is force loading the mootools.

yes, It seems that is Purity III, because with Protostar the error disapear :( So, i will contact template support. Thanks.

******

But I have a problem with this:
Also: remove the tmpl=component from your url.
Then Modals will use the special modal.php subtemplate.

If I remove tmpl=component , the Iframe opens, but the Form is "hidden" (i see a white window). Yo can see it:
Confidential information:
(hidden)



I have find this post, similar to mine: It speaks about the motools error and also about the hidden css
www.regularlabs.com/forum/modals/44535-s...ed-token-parse-error

You say there:
div#colorbox.hidden.complete {
    display: block !important;
}

This is a good solution for me? Where should I insert it? In the modal.php file?

3 months 1 week ago #78547

Peter van Westen's Avatar Peter van Westen Admin

No, in your templates css. Maybe it offers a custom.css file.

3 months 1 week ago #78549

Sukinoz's Avatar Sukinoz

Peter van Westen wrote:

No, in your templates css. Maybe it offers a custom.css file.

This was my first option yesterday. I tried in custom.css file, but nothing change...

Here you can see it in action with the css code inserted:
Confidential information:
(hidden)


and the css:
Confidential information:
(hidden)

3 months 1 week ago #78551

Peter van Westen's Avatar Peter van Westen Admin

The form not showing in the first is caused by a css conflict by RSForms (loading Bootstrap css).

Copy the modal.php to your templates folder and remove the 'modal' classname from the body tag in there.

For more info about how elements get their styling, you can use the Element Inspector of your browser.

For template issues, please ask the template provider for support.

3 months 1 week ago #78558

Sukinoz's Avatar Sukinoz

Thanks Peter,

Now I see the problem! With Protostar template the problem persists. So, it is a RSForm problem and their bootstrap layout. Also removing the 'modal' classname give some css problems... but I think i can solve them with css.

But, let me one last question pleeease:

1. RSForm says: "use &tmpl=component in the url"

2. But you said me:

Also: remove the tmpl=component from your url.

So, my question is: Is there any problem using &tmpl=component like RSForms says, or better donĀ“t use it (and modify modal.php and some css properties), as you said me ? :huh:


PD: Sorry if I am asking too much. My "programmer level" is very low in comparison with my goals. ;)

3 months 1 week ago #78564

Peter van Westen's Avatar Peter van Westen Admin

The component.php sub-template (triggered via tmpl=component in the url) is simply a stripped down version of the index.php.
It will only output the component area. So no surrounding modules.

The modal.php (which comes with Modals) does pretty much the same. Only has some added magic.
Mainly to be able to control extra stuff (like loading of scripts/styles) via the Modals system plugin settings.

Modals will use the modals.php for internal modal links automatically if no other tmpl is set in the url.

3 months 1 week ago #78568

Sukinoz's Avatar Sukinoz

Wow! Thanks for the joomla lesson. I have understood it perfect!!!!
You are a great programmer and better person.