nuBuilder Forum

Posted: **Thu Jul 08, 2021 7:02 am**

I'm hoping someone might be able to help point me in the right direction.

I have two iFrames on a form, both showing a browse form. What I want to happen is when you select and item on the left iFrame, it filter the records in the right iFrame accordingly. In the attached example pic, when you click "Bacon sliced" on the left, I want to to show just three records for that item on the right. I can filter the iFrame on the right with a hash variable no worries, I'm just having trouble setting the variable from the left iFrame and then reading it in the right one.

Thanks in advance!

Posted: **Thu Jul 08, 2021 7:42 am**

Add a nuSelectBrowse() in the left iFrame's Custom Code.

Replace iframe_id with your right iFrame Id
Replace some_hash_ccookie with the Hash Cookie name

Code: Select all

function nuSelectBrowse(e) {

    var r = $(e.target).attr('data-nu-primary-key'); // retrieve the primary key of the selected cell, assuming that both browse forms share the same primary key.
	if (r !== '') {
		var f = $("#iframe_id")[0].contentWindow; // Get a reference to the iFrame
		f.nuSetProperty('some_hash_ccookie', r); // set a Hash Cookie that can be used in SQL
		f.nuGetBreadcrumb(); // refresh the iFrame
	}

    return false;
}

Posted: **Thu Jul 08, 2021 8:39 am**

Thank you so much for your help kev1n. I must be doing something really silly...

I assume that I put that nuSelectBrowse function on the form properties for the iFrame rather than an 'onclick' custom code for the run object containing the iFrame?

Here are all my settings...

Left iFrame
Form ID: 60e670aad718b55
Table name: veventrecipes
Primary key: recipe_id
Browse:

Code: Select all

SELECT veventrecipes.*
FROM veventrecipes
GROUP BY veventrecipes.item_id ASC
ORDER BY veventrecipes.item_name ASC

Custom code:

Code: Select all

function nuSelectBrowse(e) {

    var r = $(e.target).attr('data-nu-primary-key'); // retrieve the primary key of the selected cell, assuming that both browse forms share the same primary key.
   if (r !== '') {
      var f = $("#60e6611fbfda069")[0].contentWindow; // Get a reference to the iFrame
      f.nuSetProperty('filter_item_id', r); // set a Hash Cookie that can be used in SQL
      f.nuGetBreadcrumb(); // refresh the iFrame
   }

    return false;
}

Right iFrame
Form ID: 60e6611fbfda069
Table name: veventrecipes
Primary key: recipe_id
Browse:

Code: Select all

SELECT veventrecipes.*
FROM veventrecipes
WHERE veventrecipes.item_id ='#filter_item_id#'
GROUP BY veventrecipes.dish_id ASC, veventrecipes.item_id ASC
ORDER BY veventrecipes.item_name ASC

When I click on an item in the left iFrame, it doesn't look like it's trying to refresh the iFrame on the right (ie there's no screen redraw happening).

Any ideas what I'm doing wrong?

Thank you so much for your help.

Posted: **Thu Jul 08, 2021 8:43 am**

Use the Run Object ID instead of the Form ID (60e6611fbfda069)

Posted: **Thu Jul 08, 2021 8:57 am**

So now I have:

Code: Select all

function nuSelectBrowse(e) {

    var r = $(e.target).attr('data-nu-primary-key'); // retrieve the primary key of the selected cell, assuming that both browse forms share the same primary key.
   if (r !== '') {
      var f = $("#item_recipes_sub")[0].contentWindow; // Get a reference to the iFrame
      f.nuSetProperty('filter_item_id', r); // set a Hash Cookie that can be used in SQL
      f.nuGetBreadcrumb(); // refresh the iFrame
   }

    return false;
}

But still no dice... Can't work out what I'm doing wrong.

Posted: **Thu Jul 08, 2021 9:21 am**

I think I might have an idea as to what the problem is.

Both iFrames refer to the same table (view) and therefore both have the same primary key (recipe_id), but I need to filter the right hand iFrame where the item_id = the hash cookie, not where the primary key = the hash cookie.

So maybe needs a slightly different approach?

I think in need the variable 'r' to return the item_id rather than the PK (recipe_id). But I can't quite work out how to do that.

Posted: **Thu Jul 08, 2021 9:22 am**

write:

Code: Select all

      var f = parent.$("#item_recipes_sub")[0].contentWindow; // Get a reference to the iFrame

Posted: **Thu Jul 08, 2021 3:16 pm**

Woohoo!! It's working. Thanks so much kev1n!

While I'm at it, don't suppose you have a solution for highlighting the row that's been selected in the left browse form?

Posted: **Thu Jul 08, 2021 4:11 pm**

Code: Select all

function nuSelectBrowse(e) {

    var pk = $(e.target).attr('data-nu-primary-key'); // retrieve the primary key of the selected cell, assuming that both browse forms share the same primary key.
    if (pk !== '') {

        // Color the selected row
        var row = $(e.target).attr('data-nu-row');
        $("DIV[id^='nucell']").css("color", 'black'); // reset to black
        $('[data-nu-row="' + row + '"]').css("color", 'red'); // color the selected row

        // Refresh the Recipes iframe
        var f = parent.$("#item_recipes_sub")[0].contentWindow; // Get a reference to the iFrame
        f.nuSetProperty('filter_item_id', pk); // set a Hash Cookie that can be used in SQL
        f.nuGetBreadcrumb(); // refresh the iFrame
    }

    return false;
}

Posted: **Fri Jul 09, 2021 9:33 am**

kev1n you're an absolute legend!! It works perfectly. Thank you so much.

nuBuilder Forum

Feed hash variable between two iFrames

Feed hash variable between two iFrames

Re: Feed hash variable between two iFrames

Re: Feed hash variable between two iFrames

Re: Feed hash variable between two iFrames

Re: Feed hash variable between two iFrames

Re: Feed hash variable between two iFrames

Re: Feed hash variable between two iFrames

Re: Feed hash variable between two iFrames

Re: Feed hash variable between two iFrames

Re: Feed hash variable between two iFrames