Open Form With JavaScript (PopUp/Modal)

[tiagovareta]

Hi,

I have a button element, when I enter the details of the record.
How do I click this button to open a popup / modal form?

 

[tiagovareta]

Can someone help me?

 

[burghard]

it is a bit unclear, what you wrote. can you explain it a little bit more in detail?
It seems that there is a button on the form (where you enter the details of a record). Is the button already there or do you want it there?
What should be displayed/entered in the modal form?

 

[tiagovareta]

it is a bit unclear, what you wrote. can you explain it a little bit more in detail?
It seems that there is a button on the form (where you enter the details of a record). Is the button already there or do you want it there?
What should be displayed/entered in the modal form?

Hi Burghard!

I have a list with several records. When editing a record, inside the details form I have a button (along with the remaining elements).
I want that when clicking this button open another form, in popup / modal.

How can I do this?

 

[burghard]

you wrote: "... inside de details form I have a button...". Do you really mean "I have" or do you want it there?.
If the button is really there yet, how did you get it there?
If you want the button there (and it is not yet there), are the remaining elements in the same list as these one already shown in the form?
Fabrik has something like multi-page forms, which seems to fit for your needs, but AFAIK they do not open in a popup, but in another page.
It is also possible to show popups with related data from inside a form.
Which one is yours?

 

[tiagovareta]

you wrote: "... inside de details form I have a button...". Do you really mean "I have" or do you want it there?.
If the button is really there yet, how did you get it there?
If you want the button there (and it is not yet there), are the remaining elements in the same list as these one already shown in the form?
Fabrik has something like multi-page forms, which seems to fit for your needs, but AFAIK they do not open in a popup, but in another page.
It is also possible to show popups with related data from inside a form.
Which one is yours?

Hi burghard! Thanks for the answer!
I already have the button in the list of form elements, and it appears when we edit the record.
What I intend is: "It is also possible to show popups with related data from inside a form."

Imagining that I have a list of clients, when editing the client and clicking on the button I created, it opens a popup / modal window with another form.

 

[burghard]

Ah! You have a Fabrik Button element. So you can add a Javascript to your element for the event "click". Form the url there and you can open a window using the snippet window.open(url);, Where the url is the form you want to open. You can supply some element data out of the form to the url to identify the record and the list you want to be displayed. You can get some element data with the snippet Fabrik.getBlock('form_123').formElements.get('yourtable___some_element').getValue();, where 123 is the number of the form you want to open and 'your table___some_element' refers to the element data out of the form. It must be the value of the primary key of the list where the record to display comes from.
You can find a good explanation of the Fabrik Button element at http://fabrikar.com/forums/index.php?wiki/button-element/.

 

[cheesegrits]

@burghard - if what he wants to do is open a Fabrik modal, like (say) clicking on an edit link in an AJAX-ified list, it's not as simple as that, you have to call Fabrik.getWindow() with a set of options ... I think the minimal set of options would be ...

Fabrik.getWindow({
   id: 'some-unique-id',
   contentURL: 'index.php?option=com_fabrik&view=form&formid=123&rowid=321&tmpl=component&ajax=1&format=partial',
   loadMethod: 'xhr',
   title: 'some title'
});

NOTE the '&tmpl=component&ajax=1&format=partial' on the end of the normal Fabrik form link. Those are required in order to get the correct response content for a modal popup.

And of course you'd need to get the rowid you need to load from somewhere on your form, but you don't provide enough info for us to help with that.

There's a lot of other options you can specify, the most useful is probably ...

   onContentLoaded: function() {
      this.fitToContent();
   }

-- hugh

 

[burghard]

Yes, the modality I missed to attend (and I did not know about this function before).

 

[tiagovareta]

@burghard - if what he wants to do is open a Fabrik modal, like (say) clicking on an edit link in an AJAX-ified list, it's not as simple as that, you have to call Fabrik.getWindow() with a set of options ... I think the minimal set of options would be ...

Fabrik.getWindow({
   id: 'some-unique-id',
   contentUrl: 'index.php?option=com_fabrik&view=form&formid=123&rowid=321&tmpl=component&ajax=1&format=partial',
   loadMethod: 'xhr',
   title: 'some title'
});

NOTE the '&tmpl=component&ajax=1&format=partial' on the end of the normal Fabrik form link. Those are required in order to get the correct response content for a modal popup.

And of course you'd need to get the rowid you need to load from somewhere on your form, but you don't provide enough info for us to help with that.

There's a lot of other options you can specify, the most useful is probably ...

   onContentLoaded: function() {
      this.fitToContent();
   }

-- hugh

Hi Cheesegrits,

Many thanks for the reply! I think we're close to the solution!

This is the record edit, where I have the button: http://prntscr.com/hty07d
With the code that sent me, and i removed the "rowid", opens the modal window with I intend, but places within the modal the complete site: http://prntscr.com/hty1as
I just want the modal window to open form number 34: http://prntscr.com/hty2kx

By pressing the button, I have to pass the field: http://prntscr.com/hty5wu, for form number 34, which will open in the modal window, and that will fill this field: http://prntscr.com/hty7eh
It will be possible to also pass the field: http://prntscr.com/hty8t6, for the form that opens in modal?

 

[cheesegrits]

Oops, sorry, that should be contentURL not contentUrl. That'll fix how it loads the form.

And that's as far as I can go in Community support. If you need more specific help on custom code, you'll need to get a subscription.

-- hugh

 

[tiagovareta]

Oops, sorry, that should be contentURL not contentUrl. That'll fix how it loads the form.

And that's as far as I can go in Community support. If you need more specific help on custom code, you'll need to get a subscription.

-- hugh

Hi Cheesegrits!

Many thanks for the reply! I have already put the form to open in the modal window!

But as soon as you open the form, it states the error: It was impossible to find this record.
You can see here: http://prntscr.com/hv2ec5 - I can close the error information or leave it open, that the form works in it.

But professionally, it would be interesting to know why give this information and remove. Can you tell me why the error appeared?

 

[burghard]

Which is the URL you used for opening the window? Does the record you referenced there exist?

 

[tiagovareta]

Which is the URL you used for opening the window? Does the record you referenced there exist?

Hi Burghard,

The code I use is:
var url = 'index.php?option=com_fabrik&view=form&formid=34&tmpl=component&ajax=1&format=partial';
url = url + '&numassessor=' + $('tb_contactos_geral___numero_assessor_ctg').getValue();

Fabrik.getWindow({
id: 'some-unique-id',
contentURL: url,
loadMethod: 'xhr',
title: 'Enviar SMS',
height: '50%',
width: '50%'
});

Supposedly, I'm not opening any specific record, I just want to open the form ...

 

[cheesegrits]

Don't use $(). Use the Fabrik element object.

Fabrik.getBlock('form_X').formElements.get('yourtable___yourelement').getValue()

Replace X with your form's numeric ID, and the element full name.



Sent from my HTC6545LVW using Tapatalk

 

[tiagovareta]

Don't use $(). Use the Fabrik element object.

Fabrik.getBlock('form_X').formElements.get('yourtable___yourelement').getValue()

Replace X with your form's numeric ID, and the element full name.



Sent from my HTC6545LVW using Tapatalk

Hi Cheesegrits,

Thanks for the answer!

I used the indicated change and it still gives the same error: It was impossible to find this record. (https://prnt.sc/hv2ec5)

 

[burghard]

Check the resulting URL (by debugging js with your browser). Does it contain the correct ID for tb_contactos_geral___numero_assessor_ctg?

 

[tiagovareta]

Check the resulting URL (by debugging js with your browser). Does it contain the correct ID for tb_contactos_geral___numero_assessor_ctg?

Hi Burghard,

Many thanks for the reply!

How do I do: Check the resulting URL (by debugging js with your browser)? I use chrome...

The value "tb_contactos_geral___numero_assessor_ctg" is on the same form where the button is: https://prnt.sc/hty07d (Field name: N.? Assessor).

When I click the button and open the new form, it loads the value of the field. Now I do not know why it opens the form soon with an error.

 

[burghard]

Depending on the browser...(I do not use Chrome) right click on your button and select "Inspect Element" (or similar). You can then see the source code of your button. There you will see the resulting URL. It may be the href attribute of an HTML anchor element.

 

[tiagovareta]

Depending on the browser...(I do not use Chrome) right click on your button and select "Inspect Element" (or similar). You can then see the source code of your button. There you will see the resulting URL. It may be the href attribute of an HTML anchor element.

Hi Burghard!

Thanks for the answer!

As I understand it, the cause of the error may be in the field: "tb_contactos_geral___numero_assessor_ctg", I step by URL, when I click the button, right?