Smalltalk › Instantiations

jQuery dialog question

_‹ Previous Topic Next Topic _›

Classic

List

Threaded

4 messages Options

Louis LaBrunda

jQuery dialog question

Hi Everyone,

I'm trying to use the jQuery dialog as a replacement for the JavaScript alert() function. The code below opens the dialog when the image button is clicked but closes soon thereafter. Does anyone have any idea why and what I can do about it?

Lou

help: aString on: html

"Create the html to display the help string."

| helpString id |

helpString := aString copyReplaceAll: LineDelimiter with: '\n\'.

html div

id: (id := html nextId);

script: (html jQuery new dialog

autoOpen: false;

html: [:r | r label class: 'Label'; with: helpString];

title: 'Help';

width: 1000;

resizable: true;

modal: true).

html space.

html imageButton class: 'HelpImage'; title: ('Popup Help - ', aString); url: theSession helpUrl;

onClick: (html jQuery id: id) dialog open.

--
You received this message because you are subscribed to the Google Groups "VAST Community Forum" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
To view this discussion on the web visit https://groups.google.com/d/msgid/va-smalltalk/267a8d08-d939-47fd-8a48-e430d9176c85n%40googlegroups.com.

Louis LaBrunda

Re: jQuery dialog question

Hi All,

I solved this problem by adding another #onClick: 'return false'.

Lou

On Sunday, May 23, 2021 at 5:18:34 PM UTC-4 Louis LaBrunda wrote:

Hi Everyone,

I'm trying to use the jQuery dialog as a replacement for the JavaScript alert() function. The code below opens the dialog when the image button is clicked but closes soon thereafter. Does anyone have any idea why and what I can do about it?

Lou

help: aString on: html
"Create the html to display the help string."
| helpString id |

helpString := aString copyReplaceAll: LineDelimiter with: '\n\'.
html div
id: (id := html nextId);
script: (html jQuery new dialog
autoOpen: false;
html: [:r | r label class: 'Label'; with: helpString];
title: 'Help';
width: 1000;
resizable: true;
modal: true).
html space.
html imageButton class: 'HelpImage'; title: ('Popup Help - ', aString); url: theSession helpUrl;
onClick: (html jQuery id: id) dialog open.

--
You received this message because you are subscribed to the Google Groups "VAST Community Forum" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
To view this discussion on the web visit https://groups.google.com/d/msgid/va-smalltalk/2d4dd6aa-5089-4e2f-91c8-ca60dcbf3c39n%40googlegroups.com.

Louis LaBrunda

Re: jQuery dialog question

Now I think that I really didn't solve the problem but circumvented it. When I add buttons the fix prevents the submit all the time. I think there is something wrong with jQuery dialog modal. But I'm not a JavaScript expert and don't want to become one.

Lou

On Tuesday, May 25, 2021 at 5:42:26 PM UTC-4 Louis LaBrunda wrote:

Hi All,

I solved this problem by adding another #onClick: 'return false'.

Lou

On Sunday, May 23, 2021 at 5:18:34 PM UTC-4 Louis LaBrunda wrote:
Hi Everyone,

I'm trying to use the jQuery dialog as a replacement for the JavaScript alert() function. The code below opens the dialog when the image button is clicked but closes soon thereafter. Does anyone have any idea why and what I can do about it?

Lou

help: aString on: html
"Create the html to display the help string."
| helpString id |

helpString := aString copyReplaceAll: LineDelimiter with: '\n\'.
html div
id: (id := html nextId);
script: (html jQuery new dialog
autoOpen: false;
html: [:r | r label class: 'Label'; with: helpString];
title: 'Help';
width: 1000;
resizable: true;
modal: true).
html space.
html imageButton class: 'HelpImage'; title: ('Popup Help - ', aString); url: theSession helpUrl;
onClick: (html jQuery id: id) dialog open.

--
You received this message because you are subscribed to the Google Groups "VAST Community Forum" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
To view this discussion on the web visit https://groups.google.com/d/msgid/va-smalltalk/252ee23c-bbe0-4da9-9577-5f9f7c5f1684n%40googlegroups.com.

Louis LaBrunda

Re: jQuery dialog question

Hi All,

I finally have the JQuery dialog replacements for regular JavaScript alert() and confirm() working pretty well.

Regular JavaScript alert() and confirm() work as is but they always open at the top of the window and the font is small. There is no way to change this, so they need to be replaced with something else like jQuery dialog. The jQuery dialog stuff looks good (and I think can be made to look different or better, I was okay with the defaults). The problem with the jQuery dialog stuff is they don't work the same as the regular JavaScript alert() and confirm().

My original attempt (see my first post) had some problems. Once open, the dialog would close on its own. After more or less solving that, I had problems using the jQuery dialog to replace confirm(). The regular confirm() could be called from an if()else() and the confirm() wouldn't return until the user clicked on of the buttons. The jQuery dialog returns once open and doesn't wait for the user to click anything. This make it useless in an if... statement.

I solved the problem by pushing the code that would be in the if... statement into the jQuery dialog. In that way the dialog could return immediately when opened and the code that was in the if... doesn't execute until the user click a button. I created some JavaScript functions (see below) that make this easier to do.

They have the added benefit of the page they are called from loading quicker. The example way of using a jQuery dialog, created a div for each use. I have a lot of these on the page I was creating because I used them as small pop up helps. They caused a noticeable delay in the page loading. With the creation of the div/dialog in the functions, the page loads fast and the time to create the div/dialog when it is needed is not noticeable.

I use this Smalltalk code to call the help pop up:

helpScript: aScript on: html

"Create the html to display the help script."

| helpScript titleScript helpJavaScript |

helpScript := aScript copyReplaceAll: LineDelimiter with: '\n'.

titleScript := 'Popup Help - ', (aScript copyReplaceAll: LineDelimiter with: ' ').

helpJavaScript := 'KscHelp(%1, %2)' bindWith: '"Help"' with: helpScript.

html space.

html image class: 'HelpImage'; title: titleScript; url: theSession helpUrl; onClick: helpJavaScript.

and this code to call a confirm dialog:

confirm: id msgScript: aMsgScript label: label callback: aBlock on: html

"Construct a button and hidden button and a javascript dialog to confirm the action."

| msgScript yesScript confirmScript hiddenId |

msgScript := aMsgScript notNil ifTrue: [aMsgScript copyReplaceAll: LineDelimiter with: '\n'] ifFalse: ['""'].

hiddenId := 'Hidden', id.

yesScript := 'function () { document.getElementById("%1").click() }' bindWith: hiddenId.

confirmScript := 'KscConfirm(%1, %2, %3)' bindWith: '"Question?"' with: msgScript with: yesScript.

html button bePush; id: id; class: 'SubmitButton'; title: label; onClick: confirmScript; with: label.

html submitButton id: hiddenId; class: 'Hidden'; callback: aBlock.

Note: That I had to use a hidden submit button to get the callback to run at the right time or not at all.

This post is getting log, so I will stop here. I can give more examples of how the functions are called from Smalltalk to those who ask.

Lou

//*************************************************************************************************

// Purpose: Pop up a jQuery modal dialog to display a help type message

// Passed: title, message

//*************************************************************************************************

function KscHelp(title, message) {

$("<div></div>").dialog( {

buttons: { "Ok": function () { $(this).dialog("close"); }},

close: function (event, ui) { $(this).remove(); },

resizable: true,

width: ($( window ).width() / 3),

height: "auto",

title: title,

modal: true

}).text(message);

}

//*************************************************************************************************

// Purpose: Pop up a jQuery modal dialog to display a confirm type message

// Passed: title, msgScript, yesScript, noScript

// msgScript is a script or string that makes the posted message

// yesScript is a script to run when the "Yes" button is clicked

// noScript is a script to run when the "No" button is clicked

//*************************************************************************************************

function KscConfirmYesOrNo(title, msgScript, yesScript, noScript) {

$("<div></div>").dialog( {

buttons: [

{

text: "Yes",

click: yesScript,

{

text: "No",

click: noScript

}

close: function (event, ui) { $(this).dialog("destroy"); },

open: function() {

$(".ui-dialog-titlebar-close").hide();

$(".ui-dialog .ui-dialog-buttonpane button:eq(1)").focus();

resizable: true,

width: ($( window ).width() / 3),

height: "auto",

title: title,

modal: true

}).text(msgScript);

}

//*************************************************************************************************

// Purpose: Pop up a jQuery modal dialog to display a confirm type message

// Passed: title, msgScript, yesScript

// msgScript is a script or string that makes the posted message

// yesScript is a script to run when the "Yes" button is clicked

//*************************************************************************************************

function KscConfirm(title, msgScript, yesScript) {

KscConfirmYesOrNo(title, msgScript,

yesScript, (function () { $(this).dialog("close")})

)

}

//*************************************************************************************************

// Purpose: Pop up a jQuery modal dialog to display a confirm type message for a selection

// Passed: title, msgScript

// msgScript is a script or string that makes the posted message

//*************************************************************************************************

function KscConfirmSelect(title, msgScript) {

KscConfirmYesOrNo(title, msgScript,

(function () { $("form").submit() }),

(function () { $("form").get(0).reset(); $(this).dialog("close") })

)

}

On Wednesday, May 26, 2021 at 5:24:28 PM UTC-4 Louis LaBrunda wrote:

Now I think that I really didn't solve the problem but circumvented it. When I add buttons the fix prevents the submit all the time. I think there is something wrong with jQuery dialog modal. But I'm not a JavaScript expert and don't want to become one.

Lou

On Tuesday, May 25, 2021 at 5:42:26 PM UTC-4 Louis LaBrunda wrote:
Hi All,

I solved this problem by adding another #onClick: 'return false'.

Lou

On Sunday, May 23, 2021 at 5:18:34 PM UTC-4 Louis LaBrunda wrote:
Hi Everyone,

I'm trying to use the jQuery dialog as a replacement for the JavaScript alert() function. The code below opens the dialog when the image button is clicked but closes soon thereafter. Does anyone have any idea why and what I can do about it?

Lou

help: aString on: html
"Create the html to display the help string."
| helpString id |

helpString := aString copyReplaceAll: LineDelimiter with: '\n\'.
html div
id: (id := html nextId);
script: (html jQuery new dialog
autoOpen: false;
html: [:r | r label class: 'Label'; with: helpString];
title: 'Help';
width: 1000;
resizable: true;
modal: true).
html space.
html imageButton class: 'HelpImage'; title: ('Popup Help - ', aString); url: theSession helpUrl;
onClick: (html jQuery id: id) dialog open.

--
You received this message because you are subscribed to the Google Groups "VAST Community Forum" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
To view this discussion on the web visit https://groups.google.com/d/msgid/va-smalltalk/4cec8326-aaf3-457c-98c3-1a6220674952n%40googlegroups.com.