NetTalk Central

Author Topic: p_web.script vs p_web.Jquery and other JS questions  (Read 4098 times)

jking

  • Sr. Member
  • ****
  • Posts: 391
    • View Profile
    • Email
p_web.script vs p_web.Jquery and other JS questions
« on: February 07, 2019, 01:43:03 PM »
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

  • Don Ridley
  • Global Moderator
  • Hero Member
  • *****
  • Posts: 729
  • donaldridley2011@gmail.com
    • View Profile
    • Email
Re: p_web.script vs p_web.Jquery and other JS questions
« Reply #1 on: February 08, 2019, 03:09:36 AM »
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
"Eliminate the impossible, whatever remains, however unlikely, must be the truth."

NetTalk 12.55
Clarion 11

jking

  • Sr. Member
  • ****
  • Posts: 391
    • View Profile
    • Email
Re: p_web.script vs p_web.Jquery and other JS questions
« Reply #2 on: February 08, 2019, 06:33:56 AM »
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

  • Don Ridley
  • Global Moderator
  • Hero Member
  • *****
  • Posts: 729
  • donaldridley2011@gmail.com
    • View Profile
    • Email
Re: p_web.script vs p_web.Jquery and other JS questions
« Reply #3 on: February 09, 2019, 06:01:11 AM »
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....

Quote
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.


Quote
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.

« Last Edit: February 09, 2019, 06:12:16 AM by DonRidley »
"Eliminate the impossible, whatever remains, however unlikely, must be the truth."

NetTalk 12.55
Clarion 11

jking

  • Sr. Member
  • ****
  • Posts: 391
    • View Profile
    • Email
Re: p_web.script vs p_web.Jquery and other JS questions
« Reply #4 on: February 09, 2019, 02:07:49 PM »
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

  • Don Ridley
  • Global Moderator
  • Hero Member
  • *****
  • Posts: 729
  • donaldridley2011@gmail.com
    • View Profile
    • Email
Re: p_web.script vs p_web.Jquery and other JS questions
« Reply #5 on: February 09, 2019, 04:49:35 PM »
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
"Eliminate the impossible, whatever remains, however unlikely, must be the truth."

NetTalk 12.55
Clarion 11

jking

  • Sr. Member
  • ****
  • Posts: 391
    • View Profile
    • Email
Re: p_web.script vs p_web.Jquery and other JS questions
« Reply #6 on: February 09, 2019, 10:00:42 PM »
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

  • Don Ridley
  • Global Moderator
  • Hero Member
  • *****
  • Posts: 729
  • donaldridley2011@gmail.com
    • View Profile
    • Email
Re: p_web.script vs p_web.Jquery and other JS questions
« Reply #7 on: February 10, 2019, 02:23:49 AM »
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
"Eliminate the impossible, whatever remains, however unlikely, must be the truth."

NetTalk 12.55
Clarion 11

jking

  • Sr. Member
  • ****
  • Posts: 391
    • View Profile
    • Email
Re: p_web.script vs p_web.Jquery and other JS questions
« Reply #8 on: February 10, 2019, 10:07:24 AM »
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

  • Sr. Member
  • ****
  • Posts: 391
    • View Profile
    • Email
Re: p_web.script vs p_web.Jquery and other JS questions
« Reply #9 on: February 10, 2019, 10:19:41 AM »
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

  • Don Ridley
  • Global Moderator
  • Hero Member
  • *****
  • Posts: 729
  • donaldridley2011@gmail.com
    • View Profile
    • Email
Re: p_web.script vs p_web.Jquery and other JS questions
« Reply #10 on: February 11, 2019, 02:37:41 AM »
Ok.  I'll take a look later today.
"Eliminate the impossible, whatever remains, however unlikely, must be the truth."

NetTalk 12.55
Clarion 11

DonRidley

  • Don Ridley
  • Global Moderator
  • Hero Member
  • *****
  • Posts: 729
  • donaldridley2011@gmail.com
    • View Profile
    • Email
Re: p_web.script vs p_web.Jquery and other JS questions
« Reply #11 on: February 11, 2019, 03:42:37 AM »
I don't use the Handy Tools template...
"Eliminate the impossible, whatever remains, however unlikely, must be the truth."

NetTalk 12.55
Clarion 11

jking

  • Sr. Member
  • ****
  • Posts: 391
    • View Profile
    • Email
Re: p_web.script vs p_web.Jquery and other JS questions
« Reply #12 on: February 11, 2019, 07:57:29 AM »
Don,

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

Jeff

jking

  • Sr. Member
  • ****
  • Posts: 391
    • View Profile
    • Email
Re: p_web.script vs p_web.Jquery and other JS questions
« Reply #13 on: February 11, 2019, 08:04:47 AM »
Don,

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

Thanks!

Jeff