Alpha DevCon 2018
Results 1 to 11 of 11

Thread: Modern Dialog Box Replacement for Javascript Alert/MsgBox for Web Components & xDialog

  1. #1
    Member jhackney's Avatar
    Real Name
    James S. Hackney
    Join Date
    Oct 2006
    Location
    Houston
    Posts
    116

    Default Modern Dialog Box Replacement for Javascript Alert/MsgBox for Web Components & xDialog

    Attached is a jQuery plugin for web components (or Xdialog) that generates a dialog box with a modern theme. I included a UX component and function for xDialog that demonstrates it's functionality. The plugin has the following features:


    1. Message area automatically sizes itself to the contents and parent window for hands free aesthetics.
    2. Utilizes CSS Icons from font-awesome.
    3. Utilizes a callback function to report button pressed by user.
    4. Buttons included can be defined by user.
    5. Auto close dialog optional.
    6. Simple method to designate line breaks & blank lines.
    7. Dialog appearance can be customized using CSS.
    8. Just for fun, Dialog text can be animated.


    You can download the plugin and instructions at https://files.secureserver.net/0sUCLLojtzI73i

    Enjoy!
    Thanks,
    James

  2. #2
    Member
    Real Name
    AyubKhan M
    Join Date
    Jul 2014
    Location
    Bangalore,India
    Posts
    17

    Default Re: Modern Dialog Box Replacement for Javascript Alert/MsgBox for Web Components & xDialog

    can you please explain what need to be done after copying the files into the Default Directory and Publishing the files to Alpha Any Where. The Buttons or not working in live preview or working preview. Please help me how to make the buttons work. Is any function needs to be created for this.

    Thanks in advance

  3. #3
    Member jhackney's Avatar
    Real Name
    James S. Hackney
    Join Date
    Oct 2006
    Location
    Houston
    Posts
    116

    Default Re: Modern Dialog Box Replacement for Javascript Alert/MsgBox for Web Components & xDialog

    Which version do you have? If your using A5v12, you must open the component, select 'Menu' and then 'Recalculate all Controls'. After the controls are recalculated, 'Save' the dialog and view in 'Working Preview'. The demo should work now.

    If you are not using A5v12, let me know which version you are using and I will create a demo that works with the versions the do not utilize CSS Icons (font-awesome).
    Last edited by jhackney; 02-26-2015 at 12:29 PM. Reason: spelling
    Thanks,
    James

  4. #4
    Member
    Real Name
    AyubKhan M
    Join Date
    Jul 2014
    Location
    Bangalore,India
    Posts
    17

    Default Re: Modern Dialog Box Replacement for Javascript Alert/MsgBox for Web Components & xDialog

    its working now. after installing font-awesome.
    thank you.

  5. #5
    Member compuaid's Avatar
    Real Name
    Brad Weaver
    Join Date
    Aug 2007
    Location
    Ottawa, ON
    Posts
    364

    Default Re: Modern Dialog Box Replacement for Javascript Alert/MsgBox for Web Components & xDialog

    Very nice James! Thanks!

    I'm already planning on updating my user dialogs messages with the new bells and whistles of this plugin.
    Brad Weaver, President
    ComputerAid International
    Ottawa ON Canada
    Versailles KY USA
    www.compuaid.com

  6. #6
    Member richardurban's Avatar
    Real Name
    Richard Urban
    Join Date
    Apr 2000
    Location
    Harpers Ferry, WV
    Posts
    431

    Default Re: Modern Dialog Box Replacement for Javascript Alert/MsgBox for Web Components & xDialog

    I recalculated and saved the component and installed font-awesom, but I am getting the attached error. I have Alpha Five V12.
    Have I missed a step?
    alert_plugin_error.JPG
    Richard Urban

    Grocery Delivery Software for Stores and Entrepreneurs: http://www.urbangrocery.com

  7. #7
    Member jhackney's Avatar
    Real Name
    James S. Hackney
    Join Date
    Oct 2006
    Location
    Houston
    Posts
    116

    Default Re: Modern Dialog Box Replacement for Javascript Alert/MsgBox for Web Components & xDialog

    Richard, this error is typically seen if the js plugin has not been loaded when the respective method has been called. In this case, "alphaDialog". Make sure you do the following:

    1. Copy the "JS" folder into your web projects folder.
    2. In the UX Properties under Javascript, input the "JS Linked Files" as follows:
      Code:
      js/alphaDialog/lib/tweenMax.min.js
      js/alphaDialog/lib/splitText.min.js
      js/alphaDialog/alphaDialog.min.js
    3. In the UX Properties under CSS, input the "CSS Linked Files" as follows:
      Code:
      js/alphaDialog/alphaDialog.css


    That should do the trick. Let me know if it does not. If not, did the example UX component included work correctly?
    Thanks,
    James

  8. #8
    Member richardurban's Avatar
    Real Name
    Richard Urban
    Join Date
    Apr 2000
    Location
    Harpers Ferry, WV
    Posts
    431

    Default Re: Modern Dialog Box Replacement for Javascript Alert/MsgBox for Web Components & xDialog

    I am using the sample ux form, trying to view in both working preview and live preview. The linked files are already there, but the error message still comes up.
    Richard Urban

    Grocery Delivery Software for Stores and Entrepreneurs: http://www.urbangrocery.com

  9. #9
    Member jhackney's Avatar
    Real Name
    James S. Hackney
    Join Date
    Oct 2006
    Location
    Houston
    Posts
    116

    Default Re: Modern Dialog Box Replacement for Javascript Alert/MsgBox for Web Components & xDialog

    Richard, I am having the same error but only when I create a new database and add the UX to it. If I test it on any application that already uses it, it works fine. The only thing I can think of is there is either a bug or change made to the most recent stable release of v12 that is affecting the load process of the js file. I am going to report this as a bug and will let you know what I find out.
    Thanks,
    James

  10. #10
    Member jhackney's Avatar
    Real Name
    James S. Hackney
    Join Date
    Oct 2006
    Location
    Houston
    Posts
    116

    Default Re: Modern Dialog Box Replacement for Javascript Alert/MsgBox for Web Components & xDialog

    Richard, the folder structure is incorrect. Please download from original link to correct the structure. Otherwise, just add a folder named alphaDialog as a subdirectory of the JS directory and move all of the files to the new directory. That will correct the problem.
    Thanks,
    James

  11. #11
    Member jhackney's Avatar
    Real Name
    James S. Hackney
    Join Date
    Oct 2006
    Location
    Houston
    Posts
    116

    Default Re: Modern Dialog Box Replacement for Javascript Alert/MsgBox for Web Components & xDialog

    This plugin has been replaced with a newer version and moved to Github. The new version can be found at the link below:

    http://dbs6.github.io/StyleBox/
    Thanks,
    James

Similar Threads

  1. Working with javascript dates in web components
    By Jim Coltz in forum Mobile & Browser Applications
    Replies: 6
    Last Post: 03-25-2016, 09:46 PM
  2. Ugly Google Alert() -- Alert replacement question.
    By lvasic in forum Mobile & Browser Applications
    Replies: 3
    Last Post: 02-22-2014, 10:51 AM
  3. JavaScript alert box from AfterInsert on Grid
    By Pat Bremkamp in forum Application Server Version 10 - Web/Browser Applications
    Replies: 8
    Last Post: 04-28-2011, 08:36 PM
  4. Web Components & A5W Pages Missing!
    By steinmanal in forum Application Server Version 8
    Replies: 2
    Last Post: 01-03-2008, 05:12 PM
  5. User defined width in Web Dialog components
    By Pat Bremkamp in forum Archived Wishlist
    Replies: 3
    Last Post: 10-11-2005, 03:21 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •