TUniURLFrame - how to AddJS or call a JS method

wprins · July 18, 2017

Hi,

I'm trying to set up a TUniURLFrame (or TUniHTMLFrame perhaps) to allow me to basically do a POST to a specific URL, with specified form parameters, the key being that both the URL and the form (Post body) parameters are to be specified by the UniGUI application state and not necessarily entered by the user. That is to say, we thereby deliver a seamless integration with an external site within a UniGUI URLFrame (and within a browser IFrame.)

There are obviously several ways to approach this, from the very dynamic (creating a form element at runtime to post with) or using JQuery Ajax call (say), to the more static option of creating a form in the HTML body and then doing the required URL and form parameter modifications in (say) the JS submit() event or the JS document.ready() event.

Now from a simple web page I've managed to do this already, with HTML page as follows:

<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Gateway page</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(					
			function () {			
				var reference = ""; //329039512
				var token = ""; //"0025215009068098f6b58417eaa9c325aa235cda7eda09e8e89490f"
								
				$("#gateway").val(token);
				$("#reference").val(reference);
				
				if (token != "") {
					$("#gateway").hide();		
					$("#lblgateway").hide();
				}
				else {
					$("#gateway").show();		
					$("#lblgateway").show();
				};
				
				if (reference != "" && token != "") {
					$("#sub").hide();				
					$("form#portal").submit();								
				}
				else {
					$("#sub").show();				
				}
				
				$("form#portal").submit(
					function (e) {							
						if ($("#reference").val() == "") {
							alert("You must supply the reference to view.");
							return false;
						}
						if ($("#gateway").val() == "") {
							alert("You must supply the token to authorize viewing.");
							return false;
						}						
						$("#portal").attr("action", "https://some.site.com/gateway?reference="+$("#reference").val());
					}
				);					
			}
		);

    </script>
</head>
<body>   
	<div id="lblreference">Reference to view:</div> <input type="text" name="reference" id="reference" value="" />				
	<div>	
		<form id="portal" method="post" name="portal">
			<div id="lblgateway">Access token:</div><input type="text" name="gateway" id="gateway" value=""></input>
			<input type="submit" name="sub" id="sub" value="submit" />
		</form>
	</div>
</body>
</html>

When you view this page in a browser it will determine what values are set and then automatically submit the page (e.g. via POST), updating the reference URL parameter as relevant (the "action") and setting the token value in the form parameters, thus performing a POST to the specified URL with the required URL and form param. (If the specified/hard coded values are left blank then it will wait for you to enter them manually and wait for you to click submit before performing the same.)

This is great, however I'm trying to achieve the same in a seamless manner from a UniURLFrame and having trouble doing so.

The goal is for the UniGUI application to supply the reference and access token (which it will obtain/calculate) and have the UniGUI frame then comply with the remote portal's API which (as above) demands that the reference parameter is passed via URL query string and the access token be passed via form parameter using a POST operation.

Things I've tried:

I've tried wholesale replacing the HTML of the UniURLFrame with the values embedded, using UniURLFrame.HTML.Clear() followed by UniURLFrame.HTML.Add() calls to essentially put the above HTML with the required valued in the HMTL. This fails and somehow ends up showing our UniGUI application login form in the UniURLFrame?!?

Ive also tried setting the HTML as one big string (e.g. assigning to HTML.Text). This at least displays the form in the frame, but the document.ready() code does not fire and so the form parameter (token) and reference is empty. Moreover like before clicking submit results in the UniGUI login form appearing?!

I've further tried various permutations of UniURLFrame.JSInterface.JSAdd() and UniURLFrame.JSInterface.JSCall, but couldn't figure out how and when these are supposed to be used. I've also tried these in UniURLFrame "OnFrameLoaded()" event handler but this never triggered(???) so I gave up on that.

Ideally I'd like to set up the "static" content in the TUniURLFrame's HTML and then simply issue a call to a predefined JS method to achieve the setting and POSTing of the reference and the token (for example, see here or here). UniURLFrame.JSInterface.JSCall would seem like this should be the way to do this but as I say I've not been able to make this work. Nor have I been able to figure out how to do the "usual" UniSessoin.AddJS() way with the UniURLFrame as target instead.

It's rather unobvious how these components are to be used and more generally how to interface between UniGUI server side and the JS in the browser. Some examples and documentation would be highly helpful. (I did check the demos as well but did not spot anything close to what I'm trying to do, apologies if I've missed something relevant!)

Edit: To add, simply pasting the HTML code above into the HTML text (at design time) of the UniURLFrame, and then manually typing the reference and token parameters into the page and clicking submit works entirely as expected (apart from the fact that it's then a manual process which is precisely what I'm trying to avoid.) So my question is basically, how do I hook into this page and change the reference and token value from within the UniGUI application, such that the page code runs and seamlessly fetches the requested page without requiring the user to enter anything?

Edit2: I've now tried modifying the HTML to insert the reference and token via string substitution and replacing the HTML.Text. This results in the URLFrame showing the application's login form in the frame again. I get the impression this is because I'm trying to submit the form from within the document.ready() code? I'll try to avoid doing this, but if not in the document ready, how do I trigger the submit from the UniURLFrame?

Help?!

Walter

wprins · July 18, 2017

Right, I've come up with a solution myself. Posting this for the benefit of others who may want to do something similar in future.

(Basically I've taken a slightly different (and likely more straightforward) tack in dealing with the HTML in the frame and avoided depending on document.ready() as trying to submit from within the document.ready() seemed to be causing the problem even though this works directly in a browser):

Anyway, the HTML.Text is now as follows:

<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Gateway page</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
</head>
<body>   				
	<div id="inputs" style="display: none"> 
   	<div id="lblreference">Reference to view:</div> <input type="text" name="reference" id="reference" value="" />   	
		<form id="portal" method="post" name="portal">
			<div id="lblgateway">Access token:</div><input type="text" name="gateway" id="gateway" value=""></input>
			<input type="submit" name="sub" id="sub" value="submit" />
		</form>
	</div>
</body>
<script type="text/javascript">
   var reference = "$reference$"; 
   var token = "$token$"; 
				
   //Set the above initial values into the form/fields with JQuery:				
   $("#gateway").val(token);
   $("#reference").val(reference);
							
   //Setup a submit handler to check the values and abort if needed,
   //or modify the URL as required and then continue submission as normal:
   $("form#portal").submit(
      function (e) {							
         if ($("#reference").val() == "") {
            alert("You must supply the reference to view.");
            $("#inputs").show();
            return false;
         }
         if ($("#gateway").val() == "") {
            alert("You must supply the token to authorize viewing.");
            $("#inputs").show();            
            return false;
         }						
         $("#portal").attr("action", "$portalurl$?$refparamname$="+$("#reference").val());
      }
   );
   
   //Try automatic submission at end of document load, here, now:   					
   $("form#portal").submit();
</script>
</html>

Then inside the Delphi code (just after TUniFrame construction, and during its subsequent setup) there is Delphi code like the following to substitute the parameter markers (delimited by $'s above) with their required values:

  UniURLFrame1.HTML.Text := StringReplace(UniURLFrame1.HTML.Text, '$reference$', IntToStr(LReference), [rfReplaceAll]);
  UniURLFrame1.HTML.Text := StringReplace(UniURLFrame1.HTML.Text, '$token$', LToken, [rfReplaceAll]);
  UniURLFrame1.HTML.Text := StringReplace(UniURLFrame1.HTML.Text, '$portalurl$', LPortalURL, [rfReplaceAll]);
  UniURLFrame1.HTML.Text := StringReplace(UniURLFrame1.HTML.Text, '$refparamname$', LRefURLParamName, [rfReplaceAll]);

This has the desired result and immediately then posts the required values to the portal site and displays the results in the frame.

I don't particularly like this string substitution based approach but it does work to accomplish the desired result. Comments/Improvements obviously welcome.

Thanks

Walter

alexqqjones · July 18, 2017

Export

GerhardV · July 19, 2017

Thanks Walter....it might come in handy.

Sign In

TUniURLFrame - how to AddJS or call a JS method

Recommended Posts

wprins

Link to comment

Share on other sites

wprins

Link to comment

Share on other sites

alexqqjones

Link to comment

Share on other sites

GerhardV

Link to comment

Share on other sites

Join the conversation

Browse

Activity