View with 3 list

[tusa]

How to make one view that shows 3 lists at the same time?

 

[lousyfool]

It depends. Hard to say more without the details on what you have and what you need.

 

[tusa]

It’s a bad picture, I know.
But as I se it I need 3 lists.
Episodes (top left)
Elements (bottom left)
Element (right)

If I can show them at same time.
If possible only show what’s inside the top left, when i choose an episode I want to view what’s inside the actual episode of elements in the left bottom and finaly when I choose an element I need to se what is inside the element in right.

Is that possible at all?

 

[lousyfool]

It could certainly be possible (pretty much anything is with the right code, haha), but not as easily or "out of the (Fabrik) box" as you might think, so please don't expect a plug & play solution here in this thread as it's clearly a custom project.
If you're well versed in Fabrik, PHP, HTML and CSS, and the page reloading after each selection is ok***, you can build it and, after reading Wiki and searching this forum, perhaps ask more specific questions then in dedicated threads. Otherwise you may consider hiring an expert.

*** If you'd want to avoid page reloads, you'll need to have a good understanding of JS and Ajax as well, of course.

 

[troester]

It's not really clear what you want/need.
Have a look at Fabrik 'out of the box' features like

• filtering lists
• lists with ajaxfied links (i.e. open form or details in popup)
• related data with popup (open related filtered lists in a popup)
• Fabrik content plugin (show multiple fabrik items on one site)
• Fabrik list module

WIKI and forum are your friends.

 

[tusa]

It's not really clear what you want/need.
Have a look at Fabrik 'out of the box' features like

• filtering lists
• lists with ajaxfied links (i.e. open form or details in popup)
• related data with popup (open related filtered lists in a popup)
• Fabrik content plugin (show multiple fabrik items on one site)
• Fabrik list module

WIKI and forum are your friends.

I want to show 3 list on the same site.
When I coose something in list nr. 1 I want list nr. 2 to show all related items
When I choose an item in list nr. 2, I want to show the content in list nr. 3

It's for making a tv manuscript.
List 1 contains manus_title, manus_duration and manus_time, manus_date
List 2 contains element_nr., element_name, element_duration, element_akk_duration, element_backtime
List 3 contanis text_to_element, tech_notes_ to_element

Does that make any sense?

 

[lousyfool]

Did you dig into the pointers @troester gave you here above?

Also, this appears to be a very similar request: https://fabrikar.com/forums/index.p...lay-ajaxified-list-detail-side-by-side.53246/
Same principle, it seems.

 

[tusa]

Did you dig into the pointers @troester gave you here above?

Also, this appears to be a very similar request: https://fabrikar.com/forums/index.p...lay-ajaxified-list-detail-side-by-side.53246/
Same principle, it seems.

Yes, I did dig into the pointers, a bit.
The post you found there, seems to be usable, thank you for notice.

 

[juuser]

Should be doable, e.g. like:

1) Add those three lists in a custom module with Fabrik content plugin or create a custom list template for the first list and embed second and third list with Fabrik content plugin.
2) In the first list's list_xx.js add click event for the table row and get the rowid on click with jQuery.
3) Within that click event add user ajax to get the needed value for filtering the second table (from function in user_ajax.php). Some ref here for user ajax: http://fabrikar.com/forums/index.php?wiki/user-ajax/#example-user-ajax-in-list-toggle-yesno-element
4) In ajax success or done function set the second table filter input or dropdown value to the value retrieved in previous clause with jQuery and "doFilter" for the second list.
5) And then same principles for the third list.

And in second and third list settings you can set "Require filtering" to "Yes", so second and third list would show no records initially until filters applied.

Also, this appears to be a very similar request: https://fabrikar.com/forums/index.p...lay-ajaxified-list-detail-side-by-side.53246/
Same principle, it seems.

 

[tusa]

I got this view working now.

2) How do I make add click event for the table row and get the rowid on click with jQuery.
I have "nemmanus_manus___manus_titel" and a databasejoin in "nemmanus_elementer___elementer_manus_id"

Do I need a button or anything

 

[juuser]

Something like this in list_XX.js:

jQuery(document).on('click', '.fabrik_row > td', function() {
    mytr = jQuery(this).parents("tr");
    myrowid = mytr.find("td").eq(0).html();
    myrowid = jQuery.trim(myrowid);

    alert("Clicked row id is "+myrowid);
});

And with this solution you need to have the id element's setting "Show in list" set to "Yes". Also id needs to be the first column in list. You can hide it with css, but it needs to exist in DOM.

Another approach would be to get the row id from clicked tr element's id (number after last "_"), something like:

jQuery(document).on('click', '.fabrik_row > td', function() {
    mytrid = jQuery(this).parents("tr").attr('id');
    mychar = mytrid.lastIndexOf('_');
    myid = mytrid.substring(mychar + 1);

    alert("Clicked row id is "+myid);
});

P.S. These exact codes are not tested.

 

[tusa]

Note to self: remember to clear cache

 

[tusa]

Something like this in list_XX.js:

jQuery(document).on('click', '.fabrik_row > td', function() {
    mytr = jQuery(this).parents("tr");
    myrowid = mytr.find("td").eq(0).html();
    myrowid = jQuery.trim(myrowid);

    alert("Clicked row id is "+myrowid);
});

And with this solution you need to have the id element's setting "Show in list" set to "Yes". Also id needs to be the first column in list. You can hide it with css, but it needs to exist in DOM.

Another approach would be to get the row id from clicked tr element's id (number after last "_"), something like:

jQuery(document).on('click', '.fabrik_row > td', function() {
    mytrid = jQuery(this).parents("tr").attr('id');
    mychar = mytrid.lastIndexOf('_');
    myid = mytrid.substring(mychar + 1);

    alert("Clicked row id is "+myid);
});

P.S. These exact codes are not tested.

That works indeed.
Now I can fetch the row id.

Then I need to do a filter or something, but how to?
Do I have to make a function in list_1.js to send the row id and make a new select statement in ajax_user.php or can I somehow put it into my line {fabrik view= table id=7 tablename___elementname=3} in my custom view (I have a custom view with the 3 tables in divs)?

 

[juuser]

I assume, when you click on Manus list e.g. on row 1, you want the Elementer list to be showing only "Udsendelse 1" records? And "Udsendelse" in Elementer list is a databasejoin element referring to Manus.id ?

 

[tusa]

I assume, when you click on Manus list e.g. on row 1, you want the Elementer list to be showing only "Udsendelse 1" records? And "Udsendelse" in Elementer list is a databasejoin element referring to Manus.id ?

Yes, exactly.

 

[juuser]

I think in this case you can do it even easier without even needing the user ajax part. Anyway with this approach, you need to enable list filters for second and third list. If you later want to hide filters from users, you can select the option "Above (toggleable)" in list setting and then hide the filter button with css (but don't hide it while testing).

1) In "Elementer" list set "Udsendelse" element's filter type to "field".
2) In first lists list_xx.js change your code to:

jQuery(document).on('click', '.fabrik_row > td', function() {
    myval = jQuery(this).parents("tr").find('.firsttablename___udsendelse_element_class').text().trim();
    alert(myval);
 
    jQuery('#secondtablename___filterinputname').val(myval);
    Fabrik.getBlock('list_XX').doFilter();
});

You can move the "alert" when you see you get the correct value.

That will take the "Udenselese" element's text from first list's clicked row and puts it into second list's "Udenselese" element's filter field and then submits list filters.

Make sure you change the element class, filter input id and list_xx part to match your data. Inspect the classes / ids with browser inpect tool.

And then you can copy the same approach to filter third list.

 

[tusa]

Now I got this to work

jQuery(document).on('click', '.fabrik_row > td', function() {
    mytrid = jQuery(this).parents("tr").attr('id');
    mychar = mytrid.lastIndexOf('_');
    myid = mytrid.substring(mychar + 1);
    alert(myid);
    jQuery('#nemmanus_element___element_elementer_idvalue').val(myid);
    Fabrik.getBlock('list_2').doFilter();
});

But I have 3 tables in same window (i have made a custom view), so it influences all the list views.
Can I use anything else than '.fabrik_row > td'
Any idea how I can get it to influence only one table?

 

[juuser]

Great! You should be able to address specific list by adding table id to your click event, something like:

jQuery(document).on('click', '#list_XX_com_fabrik_XX .fabrik_row > td', function() { ...
or
jQuery(document).on('click', '#list_XX_com_fabrik_XX > tbody > .fabrik_row > td', function() { ...

And of course do not forget to replace XX-s with your specific list id. Actually this is pure jQuery and is not even directly related to Fabrik. So you can find a lot of info on jQuery on many sites like Stackoverflow etc.

Those snippets are not tested, so you may need to adjust.