Can't target TABLE's tbody in a HTML Widget

1

Well, before I jump out the window, I'm trying to write to a tbody of a table which is in a iframe (text box).

The table is loaded in the iframe SRC from a HTML file in the Hype Project.

My test script, an hype javascript named ProduitAjout , do the job perfectly from a button.

I need to trigger the previous script from a external script but as soon the as ProduitAjout is call I get this error:

Error in undefined: ReferenceError: Can't find variable: ProduitAjout

I refer to ProduitAjout with:


function myCallback(hypeDocument, element, event)
{
   var myDocName        = hypeDocument.documentName() ;
   var iframePanier     = document.getElementById('PanierDeCommande').children[0] ;
   var iframeDocument   = iframePanier.contentDocument || iframePanier.contentWindow.document ;
   var tBody            = iframeDocument.querySelector( '#Panier_Liste' )

   HYPE.documents[myDocName].functions().ProduitAjout(null, null, null, iframePanier, iframeDocument, tBody) ;

   return true;

}

   if("HYPE_eventListeners" in window === false)
   {
      window.HYPE_eventListeners = Array();
   }

   window.HYPE_eventListeners.push({"type":"HypeDocumentLoad", "callback":myCallback});

I'm sure I'm missing something, but can't find where.

Thank you for your help.

2

Do you mind sending the .hype document and whatever export/.html you are using to test the setup? I'm a little unsure exactly how you have this setup and the relationship between the document and iframe. It will probably be more clear when I see the full page; thanks!

3

I forgot to include the ProofOfProblem project.

The project contains all element such as HTML and PHP used by the project and a short description PNG.

Thank you!

ProofOfProblem_2302102000.hype.zip (218.7 KB)

Hype_Help
Hype_Help1285×1241 193 KB

4

I will be honest. The example project has a lot going on and is a bit confusing of intent.
Also does not fully match the image as we get the PHP script in the main area?
And product list items without selection.

Screenshot 2023-02-11 at 18.11.58
Screenshot 2023-02-11 at 18.11.58978×1060 117 KB

So saying that.

Your call from the head -> hype function ProduitAjout() works.

HYPE.documents[myDocName].functions().ProduitAjout(null, null, null, iframePanier, iframeDocument, tBody) ;

--

But

You have the button via exScript. calling the hype function ProduitAjout_trigger() and inside that trying to call ProduitAjout()

This does not makes sense, when you could call the hype function ProduitAjout() directly from that button.

I am assuming you want to call the hype function ProduitAjout() from an external button

To do this
In the. function myCallback(hypeDocument, element, event) in the head file

Add:

window.myhypedocument = hypeDocument;

This will give you a Global reference to the hypeDocument

You can then use an external button like so

	<div>
	<button onclick="window.myhypedocument.functions().ProduitAjout(window.myhypedocument, this, event) ;"> via exScript </button>
 </div>

to call the hypeDocument function ProduitAjout

if the intent is to call from a button in the iframe

You will need to access the frames parent ( the main document page )

You can use something like these.

	<div>
	<button onclick="window.parent.myhypedocument.functions().ProduitAjout(window.parent.myhypedocument, this, event) ;"> via exScript </button>
 </div>

		<div>
	<button onclick="top.myhypedocument.functions().ProduitAjout(top.myhypedocument, this, event) ;"> via exScript </button>
 </div>

	<div>
<button onclick="parent.myhypedocument.functions().ProduitAjout(parent.myhypedocument, this, event) ;"> via exScript </button>

--

One if not all of those should work..

1 Like
5

How big is the product database? Also, another hint. I would drive the entire display from the data (like having all the items in the hypeDocument.customData) and just regenerate any view based on this single source also containing the status if something is in the cart or not.

also have a look at a CSV example using Hype Data Magic and Hype Data Parser…

Here is a sample file…
fetch_hype_data_magic_advanced_CSV_parser_example.hype.zip (92,4 KB)

With slight animation
fetch_hype_data_magic_advanced_CSV_parser_example_slight_animation.hype.zip (88,1 KB)

6

Looking at it at a glance I agree that your suggestions are probably what is required.

(But of course there's always ways that might make life easier like what @MaxZieb suggested)

1 Like
7

No, I didn't jump out the window...

Thanks to Jonathan Deutsch, Mark Hunte and MaxZieb for your good advice. I learned a lot from your suggestions and I got to do what I wanted.

In a near futur, I propose to study closely MaxZieb's suggestion which seemed very interesting to me.

Although I still have several things to polish on the web pages, not to mention the command management interface that will be used in the background, I can finally show you the result with a beta version that I set up just for you.

First we enter here: beta4hype. For the order the credential is: Tumult / hype

Then choose from “ColourWave”, “RainWave”, “Tropical” “Continental” and “Gardena”.

Following the choice, the list of products appears. By clicking on the "Cart" icon, you can choose the quantity desired; the chosen product will appear in the right column i.e. the cart. Once the selection is complete, you can even switch from one product range to another, click on the "Commande" yellow button and it is sent to the Hortipro server!

So! Let me know what you think

Thanks Again!

1 Like
8

The link is broken!

9

Sorry, the link didn't follow with the text...

beta4hype

10

Works for me! Seems to work well as a menu! (I didn't try on mobile)