Button to open iframe with set value

[Mono]

I am finding this challenging but I'm learning everything as I go.
I have a button (New Model) on a form (Vehicle), when its clicked I want to open my "New Model form", with the "Make" dropdown already populated with the raw data from the (tbl_vehicle___fk) dropdown on the form (Vehicle).

I managed to get the value of (tbl_vehicle___fk)

and I can enter raw data into the url to achieve my goal, but I can't bring them together.

Here is what I have already.

var MakeIdVar = Fabrik.getBlock('form_9').formElements.get('tbl_vehicle___fk').getValue();

Fabrik.getWindow({id:'uniqueid', 'loadMethod': 'iframe', 'contentURL':'http://192.168.16.5/joomla/index.php?Itemid=&option=com_fabrik&task=form.view&formid=8&rowid=&tbl_model___FK_raw="MakeIdVar"&tmpl=component', 'title': 'window title'});

 

[cheesegrits]

Try ...

var MakeIdVar = Fabrik.getBlock('form_9').formElements.get('tbl_vehicle___fk').getValue();

Fabrik.getWindow({id:'uniqueid', 'loadMethod': 'iframe', 'contentURL':'http://192.168.16.5/joomla/index.php?Itemid=&option=com_fabrik&task=form.view&formid=8&rowid=&tbl_model___FK_raw=' + MakeIdVar + '&tmpl=component', 'title': 'window title'});

-- hugh

 

[Mono]

Works a treat!
I tried all sorts of combinations of ' and " .

Thanks

 

[Mono]

So this worked a treat and thanks again,
although I get a red bar on the form but I feel sure I can fix that.

I can use this to add a new 'model' in the pop up, click save all good.

How can I close the popup on submit and refresh the page I came from to include the new model??

 

[cheesegrits]

LOL. I knew you were going to ask that.

You'll have to add a ./components/com_fabrik/js/form_X.js (where X is your numeric form ID) for both forms (the parent and the one in the iframe). In the parent you'll have to add a function to close the iframe, and in the iframe target form, add an Fabrik event listener for the form submit event.

Parent ...

function closeIFrame()
{
   var iframe = document.getElementById('youriframe');
   iframe.parentNode.removeChild(iframe);
}

Iframe ...

requirejs(['fab/fabrik'], function() {
   Fabrik.addEvent('fabrik.form.submit.end', function (form) {
       // replace 123 with numeric ID of form in iframe
      if (form.id == 123) {
         parent.closeIFrame();
      }
   });
});

See if that works, then I think there's a better way of refreshing your CDD without reloading the whole page.

-- hugh

 

[Mono]

I'm trying with that code but not having much success. I'll keep bashing it around, best way to learn.
Thank you

 

[cheesegrits]

I've never actually tried it, so I can't even guarrantee it'll work. It should ... but ...

-- hugh

 

[Mono]

For me it doesn't, but I may not be implementing it correctly.
From looking on the net it appears to be correct, so I think it will be something I'm overlooking.
Having never coded in js before i'm just learning.

 

[cheesegrits]

Put a console.log('hey!') in the event listener, so you can see if it's firing.

-- hugh

 

[Mono]

I didn't know about console.log but I put an alert('Thank F**k'); and it did fire.

 

[Mono]

Hugh, as I expected you were spot on with your code, I was implementing the names incorrectly.
In that in the code for the Iframe I wasn't using the name of the Iframe that I created, incorrectly I was using 'form_8' or just 8

Thanks for your help so far

 

[Mono]

I have just noticed though when working on refreshing the element on the parent, that the new record does not save if the iframe closes

 

[cheesegrits]

If you look at the network tab in the browser's dev console, is the AJAX call that submits the iframe returning succesfully? It should be, otherwise that fabrik.form.submit.end event wouldn't fire.

-- hugh

 

[Mono]

I have to confess that I don't really know what I'm looking at on the network tab.
I don't however see anything that gives an error.
What should I be looking for?

 

[Mono]

I've done some work on learning the console .
I have come to this conclusion, I think, and its only a guess that the listener fires before the save, then the iframe is closed and can not save!
For now though I think glass of wine and a bath.
Thanks Hugh, I will look again on Monday, hopefully I'll be inspired tonight.

 

[cheesegrits]

Yeah, I guess the iframe isn't submitting via AJAX, so that would be the case.

We don't use iframe for popups, for a lot of reasons. That's why we have our own modal window class for popups.

-- hugh

 

[Mono]

I've been trying with no success for the last few days.
I think you know where I want to be with this, I would like several cascading drop down lists on my form with the opportunity to add to the list.

You have a much greater knowledge than me.

I was thinking the pop up was an easy way to achieve this, by having the 'watched' ('One' of one to many) element on the pop up form selected but disabled, then [save] and refresh the element in the parent that opened the iframe.

Perhaps you could recommend another approach that suits the environment better?

Mon

 

[cheesegrits]

Well, the ideal solution would be to extend the join element's "Front end Add" feature (which does exactly what you want) to the CDD. Which is something I've been wanting to do for a while, but never found anyone who wants the feature badly enough to fund the work.

Your alternative might be to roll your own CDD, by using a join element instead of a CDD (just change the plugin type), with a WHERE clause and an AJAX update.

So if (say) you have a "cities" CDD that watches a "state" join. You could make the "cities" a join instead of a CDD, with a WHERE of ...

{thistable}.state_id = '{yourtable___state}'

... and enable "AJAX Update". You may need to append _raw to the 'state' placeholder, like '{yourtable___state_raw}'.

Obviously replace {yourtable___state} with the actual full element name of the "watched" element, and state_id with the FK field name. Leave {thistable} as-is.

By using a WHERE clause and "AJAX Update" on a join element, you can basically do the same thing a CDD does - a WHERE clause that restricts options to those that match a foreign key, and update the options on the page when a "watched" element changes.

Then you'd be able to enable the "Add option in front end" feature.

-- hugh

 

[Mono]

Thank you Hugh
I used that approach and it works well, just one other thing though is it possible to pre select the 'parent' record in the popup form like we did earlier?

 

[Mono]

I managed it by using EVAL and default value, not sure if thats the best way.