NetTalk 6.51 - WebServer Browse-Form - jQuery - disable-enable Save buttons

[Jeff Martens]

I would appreciate your advice or  pointing me to something I can read to help myself.

In my WebServer program, I have the usual Browse-Form combination.
The form is set as "Allow Updates", and has only a Save button.
If a certain field is not empty, I want to disable the Save button
I have added another button which is visible when this other field needs to be filled.
When hit, code on that button validates an entry in that field.
Then, I want the Save button enabled.
I am guessing I have to use jQuery instructions to do this.
I have gone through the manual.
I have gone through the source  - the *.CLW for the form.
I cannot see how the Save button is available for manipulation.
As well, I do not know how to identify/name the Save button in my embeds.
(In contrast to Clarion 6-7-8, where I might use something like: disable(?Save)
I have also explored jQuery.com and the forums and looked at examples to disable buttons.
I do not comprehend how to apply  SaveButton.prop() or SaveButton.attr()
In the jQuery forum I notice they are using .attr(), and there was a reference to using .prop() if using jQuery 1.62.
From the local library, I have borrowed and scanned the book "jQuery in Action" but could not see what might be useful.
I have tried things like:

    p_web.site.SaveButton{prop:disabled}= true
   $('#SaveButton').prop('disabled', true);
   $("#SaveButton").attr("disabled", "disabled");
   Net:Web:SaveButton{PROP:HIDE} = true

Perhaps I should be using a NetWebPage instead of a NetWebForm.
Or perhaps I should not try using a Save button at all, but add another button to control data entry to certain fields, and then to  do a SaveAll and CloseWindow.
I would still need to be able to hide/unhide and enable/disable buttons by using code inserted at field validations.
What commands would I need to do that?

What do you think?

Thanks.

---

[Rob Kolanko]

What you want to do will be complicated because the save button is built in a NetTalk function, but I can suggest a method that will work NetWebForm. First forget about {prop:----}, the web page is not a screen, the web server builds and sends packets of xHTML code to the user’s browser. You say that already have a button that will validate the form fields. If the button works, then I can suggest a method that will hide the Save button until the form is validated by your other button then the save button will appear. However this not how the NetWebForm was designed to work, and in my experience, it is always better to follow how Net Talk procedure are designed wherever possible. I suggest that you use the Save button to both validate the form and save the form when valid. There is a validate embed for each field as well as a “Validate All” embed, which allows you validate any combination of fields, files, etc. You can put your code from your other button here. In these embeds, when an invalid value is found then update the  loc:invalid variable with then name of the screen variable that you wish cursor to be placed on the user's webpage and update the loc:alert variable with the text that you want the user to see to correct the invalid entry. The record save is not done and the user is returned to the form and will see a pop message of the alert text.
If you really want to have the user to push a button twice once to validate then to save, then change the save button text to “validate”  when the page is created with p_web.site.SaveButton.TextValue=’Validate’. Then when the user has enter a valid form check a session variable like OKTOSAVE is true.  If so then proceed with the update, otherwise set the session variable  OKTOSAVE to true, change the Save button text to Save, and put any text other than a name of the screen variable in the loc:invalid field, which will force the form to be shown to the user again.

Good Luck
Rob

[Jeff Martens]

Rob -
Thanks for giving me a different approach.
I will start fiddling ...

[Bruce]

Hi Jeff,

Note - I've used example 53, Validation, when answering this question.

This is a great question because it neatly encapsulates the desire to control something in the browser, something not directly supported by the templates, but which is something one might want to do.

You're right in one sense - the key is in figuring out how the JavaScript and the Clarion code interact. There are a couple of slight differences in the approach one can take in NT6 and NT7 though - I'll try and cover both.

NT7 has a method that NT6 does not have - which is the ability to enable, and disable, the Save button. This is used internally by the FileUpload script, so that the Save button is only enabled when all the files have been uploaded. Assuming you don't have a file upload on the form you could hook into this.

In _JavaScript_ the way to enable, or disable the button wold look like this;
$("#MailboxesFormControl_frm").ntform("disableSave");

It's worth breaking this down a bit;
$ is shorthand for jQuery
"#MailboxesFormControl" is the element on the page that the ntform is attached to. I know this 'cause I looked at the source of the form and saw;

<script defer="defer">
jQuery(function() {jQuery("#MailboxesFormControl_frm").ntform({procedure: "mailboxesformcontrol",tabType:3, action: "index.htm",actionCancel: "index.htm",actionCancelTarget: "",actionTarget: "_self",popup:0});});
</script>

ntform is the name of the widget. (This is some NT JavaScript code that makes a form into, well, a form.)
disableSave is the name of the method to call. (remember JavaScript is case sensitive.)

You can test JavaScript by entering it into the Console window in firebug. (see attached pic A1.Png).

Once you have the JavaScript, you can then morph it a bit so it can be embedded in a clarion embed point. Fortunately NT comes with a method that make this easy. In the validation example I've added the following to the Validate::MAI:Speed routine, after the call to do ValidateValue::MAI:Speed


  if loc:Invalid
    p_web.Script('$("#MailboxesFormControl_frm").ntform("disableSave");')
  else
    p_web.Script('$("#MailboxesFormControl_frm").ntform("enableSave");')
  end


A slightly better form, because it is more generic would be;

 if loc:Invalid
    p_web.Script('$("#'& clip(loc:FormName)&'").ntform("disableSave");')
  else
    p_web.Script('$("#'& clip(loc:FormName)&'").ntform("enableSave");')
  end

This doesn't hard-code the procedure name.

So great, in NT7 there is a disableSave method. But what if you are using NT6 or you want to interact with some other control?

The first problem is in identifying the control. The save button does not have a fixed ID (because multiple save buttons are allowed on a page) so we need to be more creative in selecting it.

(A full discourse on jQuery selectors is outside the scope of this reply, but suffice to say they are extremely powerful once you get the hang of them. A good place to start is here; http://api.jquery.com/category/selectors/)

NetTalk follows a pattern when it comes to identifying things. Instead of locating things by id, it's easier to locate them by function. And the function of many things is set in the data-do attribute. Take a closer look at the Save button;

<button data-do="save" id="save_btnLfse" name="save_btn">Save</button>

I've radically shortened this, but you can see the data-do attribute. In the earlier script code we used # and the ID of the form to locate it. Now we use a slightly different syntax to locate the item based on the data-do.

$('[data-do="save"]')

note that this time there's a mix of single quotes, and double quotes. Also note that the attribute test is placed in square brackets, indicating that it is an attribute we are testing.

so let's do something simple, like hide the button - the easiest way to hide something is to add the nt-hidden class to it;

$('[data-do="save"]').addClass("nt-hidden")

note that this will hide _all_ the save buttons that are visible, which is good because it's probably what you want at this point.

In embed code this would be;

p_web.Script('$(''[data-do="save"]'').addClass("nt-hidden")')

naturally the single quotes become two single quotes - don't be confused by that.

Disabling the button would be slightly trickier because the button is (at least in that example) a jQuery widget button. It has a disable method, but to access it we need the id, or, if there are more than one, a list of id's. Also the button itself is a bit different in mobile mode or desktop mode. So if disabling is really the key here then I recommend using NT7 for that.

So your question covers jQuery selectors, JavaScript, and embedding the JavaScript in NT. Great question - thanks.

cheers
Bruce





[attachment deleted by admin]

[Jeff Martens]

Thank you, Bruce.
---