Search the Community
Showing results for 'jQuery'.
-
thanks , * case 1 : Using uniHTMLFrame ----- it works well * case 2 : Using uniURLFrame ----- it dosen't work . ( I need ur helps ) -- How can i solve this problem ? 1. index.html (it's loaded in uniURLFrame ) <!doctype html> <html> <head> <title>My Page</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.css" /> <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script> <script src="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.js"></script> </head> <body> <div id="home" data-role="page"> <div data-role="header" data-theme="c"> <h1> Test </h1> <a href=# data-icon="home" class="ui-btn-left" onclick="goMenu(0);">Login</a> </div><!-- /header --> <div data-role="content"> <ul data-role="listview" data-inset="true" data-filter="false"> <li data-role="list-divider">Menu</li> <li><a href="#" onclick="goMenu(1000);">menu_1000</a></li> <li><a href="#" onclick="goMenu(2000);">menu_2000</a></li> </ul> </div><!-- /content --> <div data-role="footer" data-position="fixed" data-theme="c"> <h4>JQuery mobile Test </h4> </div><!-- /footer --> </body> </html> <script type="text/javascript"> function goMenu(menu_id) { // not fire any event in MainForm ajaxRequest( MainForm.mainURLFrame , "goMenu", ['menu_id='+menu_id]); // Everybody } </script> 2. To get AjaxEvent in MainForm procedure TMainForm.mainURLFrameAjaxEvent(Sender: TComponent; EventName: string; Params: TStrings); var menu_id : integer ; data_id : integer ; search_key : String ; begin if EventName='goMenu' then begin menu_id := StrToInt(Params.Values['menu_id']) ; mainmenu( menu_id ); // go to any function end ; end ;
-
Você pode utilizar o Masked Input um Plugin que usa jQuery, veja o exemplo disponibilizado aqui mesmo no fórum: http://forums.unigui.com/index.php?/topic/1741-formatted-input-for-uniedit/?hl=jquery Eu faço assim: Em um Form Base declaro.. procedure TFrmCadBase.SetMaskEditUniControl(Ed: TUniControl; MaskStr: String); begin if WebMode then begin // to version 0.90 UniGui... UniSession.AddJS (Format('jQuery(function(){jQuery("#%s_id-inputEl").mask("%s");});', [Ed.JSName, MaskStr])); end; end; E no Form que vou utilizar faço algo do tipo: procedure TFrmCadPrestador.UniFormShow(Sender: TObject); begin inherited; // NelZ // http://forums.unigui.com/index.php?/topic/1741-formatted-input-for-uniedit/?hl=jquery // Important: // Add in UniServerModule, CustomFiles: // js/jquery.js // js/jquery.maskedinput.js // =>Make sure thats files exist in folder. // // Then use Method SetMaskEditUniControl with mask on event // onCreate/onShow, set in event you UniGUI version // // Examples of Formats: // SetMaskEditUniControl(edtDATA, '99/99/9999'); SetMaskEditUniControl(edtCEP, '99999-999'); SetMaskEditUniControl(edtFONE, '(99) 9999-9999'); SetMaskEditUniControl(edtCPF, '999.999.999-99'); end; Observe no comentário como adicionar no ServerModule o Script. Sds Eduardo Belo
-
Thank you Sherzod, on the proposal here : https://stackoverflow.com/questions/2500500/reset-element-color-to-default-stylesheet-color-jquery-javascript , I use this to return back to default color: uniSession.AddJS ('document.getElementById("[TBitBtn_NewPriem_jsID]").style.background = "";') Your proposal did not help me, but it helped me find my solution !
-
i make form and put uniHtmlFrame and fill to html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Export a Table to Excel Template | PrepBootstrap</title> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css" /> <link rel="stylesheet" type="text/css" href="font-awesome/css/font-awesome.min.css" /> <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <div class="page-header"> <h1>Export a Table to Excel <small>Save HTML TABLE as Excel file</small></h1> </div> <!-- Export a Table to Excel - START --> <link rel="stylesheet" type="text/css" href="/Content/font-awesome/css/font-awesome.min.css" /> <div class="container"> <button id="exportButton" class="btn btn-lg btn-danger clearfix"><span class="fa fa-file-excel-o"></span> Export to Excel</button> <table id="exportTable" class="table table-hover"> <thead> <tr> <th>Name</th> <th>Age</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>ทดสอบ</td> <td>36</td> <td>กระดาษภ่ายเอกสาร</td> </tr> <tr> <td>Nieves Hubbard</td> <td>45</td> <td>nieveshubbard@syntac.com</td> </tr> <tr> <td>Anastasia Underwood</td> <td>29</td> <td>anastasiaunderwood@gallaxia.com</td> </tr> <tr> <td>Maxine Haley</td> <td>32</td> <td>maxinehaley@songbird.com</td> </tr> <tr> <td>Bennett Alvarez</td> <td>44</td> <td>bennettalvarez@marvane.com</td> </tr> <tr> <td>Myrna Ellison</td> <td>30</td> <td>myrnaellison@zoxy.com</td> </tr> </tbody> </table> </div> <!-- you need to include the shieldui css and js assets in order for the components to work --> <link rel="stylesheet" type="text/css" href="http://www.shieldui.com/shared/components/latest/css/light/all.min.css" /> <script type="text/javascript" src="http://www.shieldui.com/shared/components/latest/js/shieldui-all.min.js"></script> <script type="text/javascript" src="http://www.shieldui.com/shared/components/latest/js/jszip.min.js"></script> <script type="text/javascript"> jQuery(function ($) { $("#exportButton").click(function () { // parse the HTML table element having an id=exportTable var dataSource = shield.DataSource.create({ data: "#exportTable", schema: { type: "table", fields: { Name: { type: String }, Age: { type: Number }, Email: { type: String } } } }); // when parsing is done, export the data to Excel dataSource.read().then(function (data) { new shield.exp.OOXMLWorkbook({ author: "PrepBootstrap", worksheets: [ { name: "PrepBootstrap Table", rows: [ { cells: [ { style: { bold: true }, type: String, value: "Name" }, { style: { bold: true }, type: String, value: "Age" }, { style: { bold: true }, type: String, value: "Email" } ] } ].concat($.map(data, function(item) { return { cells: [ { type: String, value: item.Name }, { type: Number, value: item.Age }, { type: String, value: item.Email } ] }; })) } ] }).saveAs({ fileName: "PrepBootstrapExcel" }); }); }); }); </script> <style> #exportButton { border-radius: 0; } </style> <!-- Export a Table to Excel - END --> </div> </body> </html> for download data to excel but and i don't know to show data query to my table <table id="exportTable" class="table table-hover"> <thead> <tr> <th>Name</th> <th>Age</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>ทดสอบ</td> <td>36</td> <td>กระดาษภ่ายเอกสาร</td> </tr> <tr> <td>Nieves Hubbard</td> <td>45</td> <td>nieveshubbard@syntac.com</td> </tr> <tr> <td>Anastasia Underwood</td> <td>29</td> <td>anastasiaunderwood@gallaxia.com</td> </tr> <tr> <td>Maxine Haley</td> <td>32</td> <td>maxinehaley@songbird.com</td> </tr> <tr> <td>Bennett Alvarez</td> <td>44</td> <td>bennettalvarez@marvane.com</td> </tr> <tr> <td>Myrna Ellison</td> <td>30</td> <td>myrnaellison@zoxy.com</td> </tr> </tbody> </table>
-
I written onclick jquery fuction in tunimhtml frame for enable textbox on button click. But script execution done by double click on button not a single click. Why? I want to execute script on single button click. Can you guide me?
-
procedure on client side declared in uniMainModule: UniMainModule.SendtoFiscalDevice_DirectAPI (uniMemo_Fisc,UniMainModule.URLCommands [0]); //procedure on client side var sCMD, fURL : string; begin If (TRIM (cmd) <> '') //AND (not uniMainModule.onprint) //OR (not uniMainModule.onError) then begin TRY sCMD := StringReplace (COPY (cmd,2,POS ('(',cmd)-2),'"','',[rfReplaceAll]); fURL := UniServerModule.SistemSettingsList.Values ['PrintServer_URL']; UniMainModule.onprint := True; myMemo.Clear; //jQuery // UniSession.addJS ('$.get(''' + fURL + TRIM (cmd) + ''', function(responseText) {' // + ' var sRes = responseText;' // //+ ' alert ("HAVE responce:" + sRes);' // + ' ajaxRequest (' + myMemo.JSName // + ' , "FiscalAnswer", ["_value=" + sRes,"_cmd=" + "' + sCMD + '"]);' // + '});' // ); //execute XMLHttpRequest UniSession.AddJS (' new Promise(function(resolve, reject) {' + ' let xhttp = new XMLHttpRequest();' + ' xhttp.timeout = 2000;' // time in milliseconds + ' xhttp.onreadystatechange = function() {' + ' if (this.readyState == 4 ) { ' + ' if (this.status == 200) {' //must wait this to return onajaxevent + ' var sRes = this.responseText;' + ' ajaxRequest (' + myMemo.JSName + ' , "FiscalAnswer", ["_value=" + sRes,"_cmd=" + "' + sCMD + '"]);' + ' } else {' + ' ajaxRequest (' + myMemo.JSName + ' , "NoFiscalAnswer", ["_value=" + "OK","_cmd=" + "' + sCMD + '"]);' + ' };' + ' resolve(this.responseText);' + ' };' + ' };' + ' xhttp.open("GET", ''' + fURL + TRIM (cmd) + ''', false);' //set to false to make server wait util client finish + ' xhttp.send(null);' + '});'//end Promise ); EXCEPT //on E: Exception do Dialogs.ShowMessage ('SendtoFiscalDevice ERROR: ' + e.Message);//uniMainModule.onprint := False; END; If (UniMainModule.URLCommands.Count > 0) AND (not UniMainModule.onError) then begin UniMainModule.URLCommands.Delete (0); cmd := ''; end; end;
-
@Sherzod Maybe this will help (from documentation): https://markjs.io/ " 4.2 mark() A method to highlight custom search terms. Syntax JavaScript: var context = document.querySelector(".context"); var instance = new Mark(context); instance.mark(keyword [, options]); jQuery: $(".context").mark(keyword [, options]); Note: Even if this is a chaining method and therefore allows you to call further methods on the returning object, it's recommended to always use the done callback as mark.js works asynchronous. Parameters keyword Type: string or array of string The keyword to be marked. Can also be an array with multiple keywords. Note that keywords will be escaped. If you need to mark unescaped keywords (e.g. containing a pattern), have a look at the markRegExp() method below. options Type: object Optional options: Option Type Default Description element string "mark" HTML element to wrap matches, e.g. span className string "" A class name that will be appended to element exclude array [ ] An array with exclusion selectors. Matches inside these elements will be ignored. Example: "filter": ["h1", ".ignore"] separateWordSearch boolean true Whether to search for each word separated by a blank instead of the complete term accuracy string or object "partially" Either one of the following string values: "partially": When searching for "lor" only "lor" inside "lorem" will be marked "complementary": When searching for "lor" the whole word "lorem" will be marked "exactly": When searching for "lor" only those exact words with a word boundary will be marked. In this example nothing inside "lorem". This value is equivalent to the previous option wordBoundary Or an object containing two properties: "value": One of the above named string values "limiters": A custom array of string limiters for accuracy "exactly" or "complementary". Read more about this in the tutorials section "
-
You must search and change color in this file: files/jquery.mark.min.js
-
Hello, At one time, I did search with selection and navigation between the found elements... But now, I found another solution on the Internet. https://markjs.io/ Simple usage, but not optimal 1. CustomFiles files/jquery.mark.min.js 2. UniEdit1 -> OnChange procedure TMainForm.UniEdit1Change(Sender: TObject); begin (Sender as TUniEdit).JSInterface.JSCode( '$('+ UniHTMLMemo1.JSName +'.getDoc()).unmark({'+ ' done: function() {'+ ' $('+ UniHTMLMemo1.JSName +'.getDoc()).mark("'+ (Sender as TUniEdit).Text +'", {});'+ ' }'+ '});' ) end;
-
Here is my example of integration, (need jquery). How to use? 1. Download "jquery" from here "http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" and copy to the directory "/files/". 2. For this example, you need to download some files: 2.1. http://code.highcharts.com/highcharts.js 2.2. http://code.highcharts.com/highcharts-3d.js 2.3. http://code.highcharts.com/modules/exporting.js they also need to copy to the folder "files" 3. Add CustomFiles in UniServerModule: files/jquery.min.js files/highcharts.js files/highcharts-3d.js files/exporting.js 4. Add CustomCSS in UniServerModule: #container, #sliders { min-width: 310px; max-width: 800px; margin: 0 auto; } #container { height: 400px; } 5. Add "HTMLFrame1" 6. HTMLFrame1.HTML <div id="container"></div> <div id="sliders"> <table> <tr><td>Alpha Angle</td><td><input id="R0" type="range" min="0" max="45" value="15"/> <span id="R0-value" class="value"></span></td></tr> <tr><td>Beta Angle</td><td><input id="R1" type="range" min="0" max="45" value="15"/> <span id="R1-value" class="value"></span></td></tr> </table> </div> 7. HTMLFrame1.AfterScript $(function () { // Set up the chart var chart = new Highcharts.Chart({ chart: { renderTo: 'container', type: 'column', margin: 75, options3d: { enabled: true, alpha: 15, beta: 15, depth: 50, viewDistance: 25 } }, title: { text: 'Chart rotation demo' }, subtitle: { text: 'Test options by dragging the sliders below' }, plotOptions: { column: { depth: 25 } }, series: [{ data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] }] }); // Activate the sliders $('#R0').on('change', function(){ chart.options.chart.options3d.alpha = this.value; showValues(); chart.redraw(false); }); $('#R1').on('change', function(){ chart.options.chart.options3d.beta = this.value; showValues(); chart.redraw(false); }); function showValues() { $('#R0-value').html(chart.options.chart.options3d.alpha); $('#R1-value').html(chart.options.chart.options3d.beta); } showValues(); }); source: http://www.highcharts.com/demo/3d-column-interactive demo: http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/3d-column-interactive/ Sincerely.
-
Hi! I developed this example based on the jQuery Mask Plugin library created by developer Igor Escobar. Source and usage: https://igorescobar.github.io/jQuery-Mask-Plugin/docs.html UniGUI Demo // UniEdit > ClientsEvents > UniEvents // Example Phone function afterCreate(sender) { var SPMaskBehavior = function(val) { return val.replace(/\D/g, '').length === 11 ? '(00) 00000-0000' : '(00) 0000-00009'; }, spOptions = { onKeyPress: function(val, e, field, options) { field.mask(SPMaskBehavior.apply({}, arguments), options); } }; $("#" + sender.id + "-inputEl").mask(SPMaskBehavior, spOptions); } Regards, Eduardo Belo UniGUIOnTheFlyMaskChange.rar
-
Hy .. i tested a html page with RSS including .. and it works !! now i want to include the same code it in my uniGui-app: UniHTMLFrame1.HTML.Clear; unihtmlframe1.HTML.Append(' <script src="files/rss/jquery-1.10.1.js"></script> '); unihtmlframe1.HTML.Append(' <script src="files/rss/jquery.rss.js"></script> '); unihtmlframe1.HTML.Append('<script type='+#39+'text/javascript'+#39+'>//<![CDATA['); unihtmlframe1.HTML.Append('$(window).load(function(){'); unihtmlframe1.HTML.Append('$("#rss-styled").rss("http://seilbahn.net/sn/rss.php", {'); unihtmlframe1.HTML.Append(' limit: 20,'); unihtmlframe1.HTML.Append(' entryTemplate: '+#39+'<h1><a href="{url}">{title}</a></h1><dd>{shortBodyPlain}[{author}@{date}]</dd>'+#39+''); unihtmlframe1.HTML.Append('}).show();'); unihtmlframe1.HTML.Append('});//]]>'); unihtmlframe1.HTML.Append('</script>'); unihtmlframe1.HTML.Append('<div>'); unihtmlframe1.HTML.Append(' <div id="rss-styled" class="well" style="display:none;"></div> '); unihtmlframe1.HTML.Append('</div>'); But didn´t work ... the jquery-1.10.1.js and jquery.rss.js are loaded .. no problem But nothing happens in the unihtmlframe1 ... ??? thanX for Help Erich
-
Maybe I add some additional info. I need to extend body of particular TUniPanel with following HTML/Scripts: <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script> <style> canvas { max-width: 100%; max-height: 100%; } </style> <script> function genScreenshot() { html2canvas(myCanvas, { onrendered: function(canvas) { document.body.appendChild(canvas); if (navigator.userAgent.indexOf("MSIE ") > 0 || navigator.userAgent.match(/Trident.*rv\:11\./)) { var blob = canvas.msToBlob(); window.navigator.msSaveBlob(blob,'Test file.png'); } else { $('#test').attr('href', canvas.toDataURL("image/png")); $('#test').attr('download','Test file.png'); $('#test')[0].click(); } } }); } </script> This should allow me to make a screenshot of panel content.
-
I got all installed as default. Just started mdemo.exe and got the following: (index):20 Uncaught ReferenceError: Ext is not defined at (index):20 (anonymous) @ (index):20 (index):12 Resource interpreted as Stylesheet but transferred with MIME type text/plain: "http://localhost:8077/uni-1.0.0.1397/css/uni-ext.css". (index):13 Resource interpreted as Stylesheet but transferred with MIME type text/plain: "http://localhost:8077/ext-4.2.5.1763/resources/css/ext-all.css". (index):24 Resource interpreted as Stylesheet but transferred with MIME type text/plain: "http://localhost:8077/uni-1.0.0.1397/ClearButton/ClearButton.css". (index):35 Resource interpreted as Stylesheet but transferred with MIME type text/plain: "http://localhost:8077/uni-1.0.0.1397/css/uni-xtheme.css". (index):38 Resource interpreted as Stylesheet but transferred with MIME type text/plain: "http://localhost:8077/files/jdigiclock/css/jquery.jdigiclock.css". (index):40 Resource interpreted as Stylesheet but transferred with MIME type text/plain: "http://localhost:8077/files/clockdemo/jquery.tzineClock/jquery.tzineClock.css". (index):29 Resource interpreted as Stylesheet but transferred with MIME type text/plain: "http://localhost:8077/uni-1.0.0.1397/codemirror-0.8/css/csscolors.css". (index):33 Resource interpreted as Stylesheet but transferred with MIME type text/plain: "http://localhost:8077/ext-4.2.5.1763//examples/calendar/resources/css/calendar.css". (index):34 Resource interpreted as Stylesheet but transferred with MIME type text/plain: "http://localhost:8077/uni-1.0.0.1397/css/uni-xtheme-common.css". (index):49 Uncaught ReferenceError: uniVars is not defined at (index):49 (anonymous) @ (index):49 util.js:229 Google Maps API warning: NoApiKeys https://developers.google.com/maps/documentation/javascript/error-messages#no-api-keys ZB.j @ util.js:229 (anonymous) @ js?sensor=false:146 (anonymous) @ js?sensor=false:63 (anonymous) @ js?sensor=false:61 (anonymous) @ js?sensor=false:63 (anonymous) @ js?sensor=false:122 (anonymous) @ js?sensor=false:61 (anonymous) @ js?sensor=false:122 (anonymous) @ js?sensor=false:61 (anonymous) @ js?sensor=false:122 fe @ js?sensor=false:63 ee.na @ js?sensor=false:122 (anonymous) @ util.js:1 util.js:229 Google Maps API warning: SensorNotRequired https://developers.google.com/maps/documentation/javascript/error-messages#sensor-not-required ZB.j @ util.js:229 (anonymous) @ js?sensor=false:146 (anonymous) @ js?sensor=false:63 (anonymous) @ js?sensor=false:61 (anonymous) @ js?sensor=false:63 (anonymous) @ js?sensor=false:122 (anonymous) @ js?sensor=false:61 (anonymous) @ js?sensor=false:122 (anonymous) @ js?sensor=false:61 (anonymous) @ js?sensor=false:122 fe @ js?sensor=false:63 ee.na @ js?sensor=false:122 (anonymous) @ util.js:1
-
How can I implement this for printing? UNIMHTMFRAME, OR URLFRAME function sendUrlToPrint(url){ var beforeUrl = 'intent:'; var afterUrl = '#Intent;'; // Intent call with component afterUrl += 'component=ru.a402d.rawbtprinter.activity.PrintDownloadActivity;' afterUrl += 'package=ru.a402d.rawbtprinter;end;'; document.location=beforeUrl+encodeURI(url)+afterUrl; return false; } // jQuery: set onclick hook for css class print-file $(document).ready(function(){ $('.print-file').click(function () { return sendUrlToPrint($(this).attr('href')); }); }); // or direct <a href="#" onclick="return sendUrlToPrint('http(s)://yousite.com/test.txt');">.txt</a>"; link: https://rawbt.ru/start.html
-
Hi, One of my users mailed me the following information: Any idea when the jQuery part in uniGUI will get an update? Using uniGUI 1.90.0.1542 Regards, Pascal
-
Vulnerability reported by the IKARE Tool through the tcp port 8077
Fred Montier replied to pcoenen's topic in General
I think you can just declare official cdn JQuery at CustomFiles... -
This is also a security vulnerability: resolution is : "at the moment, you can try disabling jQuery. UniServerModule -> Options -> soDontLoadJQueryLib = True"
-
ok I enabled 'soDontLoadJQueryLib' and everything still seems to work so now I'm a bit confused. Which components use the JQuery Lib?
-
Also at the moment, you can try disabling jQuery And 'everything' should still work or which part not?
-
Hello, Also at the moment, you can try disabling jQuery. UniServerModule -> Options -> soDontLoadJQueryLib = True
-
Is there a way to add custom CSS and JavaScript, aside from the properties "CustomCSS" and "customFiles"? This approach, for large projects, would bring back the days of jQuery hell into the Delphi world, making unmaintainable spaghetti out of the sources. I'd like to add CSS, and JavaScript code with limited scope, in my descendant of a unigui control, for a modular, object oriented programming. This approach is typically used in modern web front end frameworks, such as ReactJS or Angular, to enforce isolation between our building blocks. How could this be achieved with unigui? And is this the right place to post, or should I put it in feature request? Thanks for your time
-
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
-
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
-
A simple wrapper class for humane.js library. It doesn't require jQuery. I didn't implement callbacks because you'd better use UniGui's ShowMessage() for this. HumaneDemo.zip
