Focal Point
[Solved] Jquery in App studio page

This topic can be found at:
https://forums.informationbuilders.com/eve/forums/a/tpc/f/7971057331/m/9267029096

November 14, 2018, 04:09 PM
Fernando
[Solved] Jquery in App studio page
I have tried to add this to my javascript in an app studio html composer page

 
$(document).ready(function() {
alert('here');
}


when I run it. The page never appears, I just wait for it forever.

I do not have any references to the jquery.js file, etc. I did expect that I can just start writing jquery code inside my javascript code.

Ideas?

Fernando

This message has been edited. Last edited by: Fernando,


Prod WF 8.1.04, QA WF 8.2.03, Dev WF 8.2.03
November 14, 2018, 04:21 PM
Waz
What are you trying to do ?

Checked for JS errors ?

Did you know that there is a function called onInitialUpdate (manually added) that effectively does the same thing.


Waz...

Prod:WebFOCUS 7.6.10/8.1.04Upgrade:WebFOCUS 8.2.07OS:LinuxOutputs:HTML, PDF, Excel, PPT
In Focus since 1984
Pity the lost knowledge of an old programmer!

November 15, 2018, 08:30 AM
Fernando
Waz, It does not have to been the ready function.
What I have seen is that any reference to jquery causes an issue.

Fernando


Prod WF 8.1.04, QA WF 8.2.03, Dev WF 8.2.03
November 16, 2018, 05:33 PM
Hallway
I use jQuery all the time in HTML composer. What exactly are you trying to do. Need more details.


Hallway

 
Prod: 8202M1
Test: 8202M4
Repository:
 
OS:
 
Outputs:
 
 
 
 
November 16, 2018, 06:33 PM
Hallway
The problem is that for some dumb reason, IBI decided to load/execute the Embedded JavaScript tab in the HTML Can'tvas in the DOM before the jQuery library is loaded.



So you cannot really use jQuery in the initial load of the page, unless you set a delay until after the XMLHttpRequest has completed loading all of the controls.

This message has been edited. Last edited by: Hallway,


Hallway

 
Prod: 8202M1
Test: 8202M4
Repository:
 
OS:
 
Outputs:
 
 
 
 
November 19, 2018, 09:34 AM
Fernando
Hallway, Thank you for the info. My idea was to use jquery to change the visual look of some html items like a radio button. You mentioned that you use jquery in HTML composer, can you post a sample?

Fernando


Prod WF 8.1.04, QA WF 8.2.03, Dev WF 8.2.03
November 19, 2018, 01:21 PM
Hallway
Sure. Below is an example that I use to show/hide different combobox controls depending on which of two different radio buttons is selected. It is tied to the onClick event handler for the radio button.
  
//Begin function radio1_onclick

function radio1_onclick(event) {
var eventObject = event ? event : window.event;
var ctrl = eventObject.target ? eventObject.target : eventObject.srcElement;
// TODO: Add your event handler code here
        var radio1_ID = document.getElementById("radio1");
        var radio10_ID = document.getElementById("radio10");
        var radio11_ID = document.getElementById("radio11");
        var combobox2_ID = document.getElementById("combobox2");
        var combobox3_ID = document.getElementById("combobox3");
        var combobox4_ID = document.getElementById("combobox4");
        var combobox5_ID = document.getElementById("combobox5");
        $(radio1_ID).on('click', function(){
            if ($(radio10_ID).prop('checked')) {
                $(combobox2_ID).toggleClass( "hideCombobox", false );
                $(combobox3_ID).toggleClass( "hideCombobox", false );
                $(combobox4_ID).toggleClass( "hideCombobox", true );
                $(combobox5_ID).toggleClass( "hideCombobox", true );
            } else {
                $(combobox2_ID).toggleClass( "hideCombobox", true );
                $(combobox3_ID).toggleClass( "hideCombobox", true );
                $(combobox4_ID).toggleClass( "hideCombobox", false );
                $(combobox5_ID).toggleClass( "hideCombobox", false );
            }
        });
}

and then in the Embedded CSS tab I have the following for the hideCombobox class that will be toggled using jQuery
 .hideCombobox { visibility: hidden; }


One thing to note on this, is that this HTML page was built as a filter panel for a Portal page. When used in a portal, WebFOCUS prepends a random, unique value to the control IDs. For example, the ID combobox2, when placed in our portal page could be renamed to ID_8975583089973084581_hc_combobox2. This is not a static value either, as every time the portal is rendered, and different value is prepended. When using vanilla JavaScript, the IDs are changed in the Embedded JavaScript, to match the new IDs. This is not the case when using jQuery. So, that is why I have assigned the variables as controls first using vanilla JS, so that the IDs will be changed by WebFOCUS, and then use those variables in the jQuery.


Hallway

 
Prod: 8202M1
Test: 8202M4
Repository:
 
OS:
 
Outputs:
 
 
 
 
November 19, 2018, 01:24 PM
Hallway
quote:
Originally posted by Fernando:
Hallway, Thank you for the info. My idea was to use jquery to change the visual look of some html items like a radio button. You mentioned that you use jquery in HTML composer, can you post a sample?

Fernando


What are you trying to change in the appearance?


Hallway

 
Prod: 8202M1
Test: 8202M4
Repository:
 
OS:
 
Outputs:
 
 
 
 
November 19, 2018, 02:01 PM
Fernando
Hallway, I am trying to change the look of the radio buttons. Thank you, I now have something working.

Fernando


Prod WF 8.1.04, QA WF 8.2.03, Dev WF 8.2.03