p_web.script vs p_web.Jquery and other JS questions

[jking]

Bruce,

     There are a few places where we can use hand coded JS in the NT templates.  Then, there is p_web.script and p_web.JQuery.  Can you explain the differences and when it is best to use each?  These must be used in an embed, but which one(s).  In my current project, I'm working on a disconnected app, as you know, and I'm struggling.  I have a few JS functions and other JS code, that all work within the console (DevMode) of Chrome.  However, I have had little success finding how and where to use this code in my app.

By the way, have you had a chance to look at the last demo I sent?

Thanks,

Jeff

[DonRidley]

Hello Jeff,

p_web.Script() is a method for inserting "general" JavaScript (ie., just about anything). 

Example:

p_web.Script(|
             'function  myFunction() {{<13,10>' & |  !<<--Notice the double brackets before the CR/LF
             '   console.log("Put really cool code here!");<13,10>' & |
             '};<13,10>')

When you use p_web.Script, you'll find your code at the bottom of your page's html.  Quite cleverly, you'll find the code neatly wrapped inside a document.ready function. 

p_web.Jquery is jQuery specific.  You'll find examples of its use in your NT webserver forms and browses where Bruce uses it to set options for the jQuery Dialogs.

Both methods are quite powerful in my opinion especialy p_web.jQuery.  Personally, I try to avoid p_web.Script if I can because you have to build your app before you can test it.  I prefer using script in my custom.js because you can test it at run time.

I hope this helps and I hope I'm right this time.  LOL.

Don

[jking]

Hey Don!

Thanks for the reply. 

It raises another question.  Since the contents of p_web.script() are wrapped in a document.ready function and placed at the bottom of the page HTML, does this mean it is "global"?  That is, does it "run" all the time?  Or does it need to be called when needed?  I'm not sure I asked that correctly, hopefully you get my drift!

Also, since it is placed at the end of the page HTML, I guess the embed you use to set p_web.script() makes no difference.  Is this correct?

Jeff

[DonRidley]

I am absolutely NOT a JavaScript guru and I make no warranty that what I'm about to say is 100% correct.  So here I go....

It raises another question.  Since the contents of p_web.script() are wrapped in a document.ready function and placed at the bottom of the page HTML, does this mean it is "global"?  That is, does it "run" all the time?  Or does it need to be called when needed?  I'm not sure I asked that correctly, hopefully you get my drift!

The code in p_web.Script will only exist if the procedure it's used in is open.  So if you used p_web.Script in JeffsCoolForm the that code will only exist at the bottom of your html when JeffsCoolForm is open.  Therefore, it is in scope at that time.

That brings up scope.

So p_web.Script places your custom code inside a function like this:

$(document).ready( function(){

   function jeffsFunction() {};

});

At that point jeffsFunction has a scope of the inside of the $(document).ready( function() .

Placing jeffsFunction there give the page/document time to get "ready" to ensure all of the page's elements are ready to be accessed by the Javascript.

You'll also run across this sometimes: $(window).load( function(){

Notice one is (document) and the other is (window).

The differences are:

    ready() fires when the DOM (HTML) is ready and scripts are loaded.
    load() fires when everything else has finished loading too: HTML, Scripts, CSS, Images

Anyway, back to scope...


Global Variable

var imGlobal = "global";

function jeffsFunction() {

};

or a non-declared variable with an assigned value (I'm 80% sure I'm right on this one):

function jeffsFunction() {

imGlobal = "global";

};


Local Variable

function jeffsFunction() {

   var imLocal = "local";

};

I do this a lot in my custom.js file:

$("#JeffsCoolForm").ready( function(){

   function jeffsFunction() {
      //Run some cool stuff here
   };

});

Now, when JeffsCoolForm is "ready", I can execute some custom JS "on the fly" so to speak.

Also, since it is placed at the end of the page HTML, I guess the embed you use to set p_web.script() makes no difference.  Is this correct?

I won't say that it makes no difference but I generally, no.

[jking]

Don,

Thanks, this lead me to the realization that I could put other code in the custom.js file, not just functions.  So, I added the following:

        var curTab = $("#tab_updatecoincollection_div").tabs("option", "active");
   if (curTab == 2) {
      $("#obvImage").attr("src", "/uploads/"+$("#CC__Coin_Image_Name_Obv").val());
   }

This should modify the src attribute if I'm on page 3 (tab 2) of my form.  I know the code works, as I entered it in the console (see attached image) and it does exactly what I want.  However, it seems to only work (be in scope) when I enter it in the console.  If I run the app, without the code entered in the console, the code in the custom.js file does not seem to be in scope for my form.  No image appears in the image control.

I next tried to use p_web.script(), in various embeds, as we discussed in the previous response.  Still, the code does note seem to be in scope.

Any thoughts?

Jeff

[DonRidley]

I think your code is valid but something is missing that I can't quite put my finger on.

I think you're missing an event listener to fire this code when a particular event happens.

The code is just sitting there waiting for something to tell it to do something.


$("#tab_updatecoincollection_div").onchange( function() {
   var curTab = $("#tab_updatecoincollection_div").tabs("option", "active");
   if (curTab == 2) {
      $("#obvImage").attr("src", "/uploads/"+$("#CC__Coin_Image_Name_Obv").val());
   }
});

That may not be correct but it illustrates what I'm trying to describe.

Don

[jking]

Don,

     Thanks, but still did not work.  I'm experimenting with: 

         $("#obvImage").trigger( "click" );

I have my function, setObverseImage() set in the JavaScript onClick template entry for the image control...hoping to get the click to occur automatically.  Still no luck.

Jeff

[DonRidley]

If you have time, ZIP up an example app with your script and send it to me.

I'll take a look.  Should have time today.

Don

[jking]

Don,

     Thanks for looking at this app.  I have sent by email, a zip containing my app, dct, 2 tps files, 2 images and the custom js/css files.  I store the images in the uploads folder, under the web folder.  This is a disconnected PWA app, using Clarion 11.0.13224, NT 11.05 and ST 3.05.

     I intend to have all coin images stored on the server, since they can be a bit large, ranging about 50-200 kb each.  I expect hundreds or thousands of images so this will not be practical in local storage. 

I enter basic info about the coin on a three page form.  Page 1 is the type of coin, date, etc.  Page 2 has the obverse (front) image name and a note.  Page 3 has the image control.  Currently, I handle the image manually, entering the name of the image file on page two.  In a future version I want to use the file upload control, but I could not get it to work in this app.  I want the image to appear on page 3 automatically, as I tab to page 3.  Right now this does not work, I must click once on the image control to update the image.  This is because I have added my setObverseImage() function to the JavaScript onClick template setting for the image control.  I use this function to change the src attribute of the image tag in code.  I do this because setting the image in the Display tab of the NT templates does not seem to create the image correctly. 

     These things I'm doing are workarounds because I could not get certain template features to work as I expected (locators, file uploads, images, etc.).  It may be my fault, not knowing how to use these features properly, or they don't yet work with disconnected apps.  Let me know if you need any more info.  I'm in Tampa, Florida, so we can chat a bit if you like. 

Thanks,

Jeff

[jking]

Don,

     Our email server here at USF won't allow me to send you the zip file.  So I have attached it here.  Hopefully it is not too big!

Thanks,

Jeff

[DonRidley]

Ok.  I'll take a look later today.

[DonRidley]

I don't use the Handy Tools template...

[jking]

Don,

OK, sorry about that.  I'll get you a version without it shortly.

Jeff

[jking]

Don,

I have attached my app file, which now only has Capesoft templates.

Thanks!

Jeff