I have a jquery/javascript question. For a site I am working on in PHP/JQuery I have the need to create a dialogue box with an ok/cancel button and a message and then submit a form based on if the user says ok or not. I know in javascript I can create a new window that links to a styled page and then I can do a select for if the user hits the ok button and submit the windows parent form using that but the last time I coded something similar to it I felt like it took a lot of lines of code and was wondering if JQuery supported dialogue box creation and if I could do some similar functionality using it (with hopefully less lines of code since everytime I use jquery instead of standard javascript it seems like it really reduces my codebase). If anyone knows of a resource to learn how to do this I would appreciate a link or a second of your time for some pointers.
Thanks!
I think you are looking for something along the lines of the jquery ui dialog.
Related
Can someone please explain how can I go about creating the following page and what techniques should I adopt:
The user should be able to click on a button which should result in a popup.
The popup should have a static page with instructions and button to click which takes the user to the next step in the same popup.
At the next step the functionality should run to take input from the user and save it to the server.
The user should see a confirmation finally and on clicking finish, the popup should hide.
From what I understand, I should try the following:
use javascript onclick and fadeIn function to create the popup.
continue changing the same div using onclick and AJAX to create stepwise kind of a format and carry out the functionality.
use XMLHTTPRequest to upload data acquired and finally use fadeOut to hide the popup.
The reason why I am thinking in these lines is because I have had very little exposure to web designing and hence would love to get some expert views on if this is the right approach and if not then what should be a better way to do it. Is there is some existing literature/method which talks about it?
Any help would be much appreciated.
For first step
Use javascript onclick function. But before this keep your static content ready and than use jQuery UI to appear it as good Dialog Box. For example see this
For second step
The user will never know that you have changed the dialog. Just you can load new dialog with new content in it. When you click button on first page, make that first dialog box is closed.
For third step
Instead of static content make the response set to dialog, here you may use Ajax/post call.
Las step
Its not compulsion to use XMLHTTPRequest. You can even submit form in jQuery post/ajax. Than you can reload the page with confirmation message send in response from server or you may use jQuery to make the confirmation message appear.
I am interested in displaying an alert to a user with OK button to close the alert, and a more/details button which upon clicking on it displays certain details (text, table, data, etc). Can it be done using PHP/HTML alone?
The situation you're describing is possible, but would not be the accepted or fastest way of doing it. Using PHP requires a trip back to the server which reloads the page - not something you want to be doing if you want easy usability.
The recommended solution is to use Javascript, or jQuery. I would recommend against using jQuery UI unless you're going to use more than one part of it - it's a great library but it has much more functionality than you need and unless you host the file yourself, the download you get from major CDNs is large and will take a while to load.
However, there is a solution I know of and have use called Alertify. It is a JS plugin that deals specifically with alert, confirm and prompt dialog boxes, and can be fully customised. Here's the site if you want to have a look: https://fabien-d.github.io/alertify.js/. It comes with demos and example code so you can adapt that to your purposes.
When we want to log-out from the google/gmail account, we click on the profile picture displayed at the right most of the Google bar. The scenario with the pop-up is shown in below figure.
What does this functionality called in jQuery, HTML? I think it's not a modal pop-up as it's not appearing on the existing content of a page and background content is non-clickable. Also it can't be called as tool-tip as it's not showing up on mouse hover, we need to click on profile picture to see the log out button. So what does it called?
I'm asking this thing curiously because I need to implement same functionality in my website. That is when user clicks on specific text the pop-up/tool-tip(for now I'm using these words for your understanding only, may be I'm using wrong words). As I don't know the exact word for this functionality I'm not able to find out such jQuery plugin on internet which would behave the same way.
One more thing is that I want to use a form in this pop-up/tool-tip which would be submitted to PHP using AJAX.
Popover!
Example API from a popular CSS/JS toolkit:
http://getbootstrap.com/javascript/#popovers
My website uses the jQuery.validationEngine plugin to validate user forms. I really like the look and feel of the tooltips that pop up (ie. they fade in slowly and disappear when the user clicks on them). Here is an example of the validationEngine in use.
I would like to use the same tooltips to show hints or notifications when the user visits certain pages (for example, "you have a new message, click here to view"). So, they're not actually based on validation, but rather the page itself loading. I'm having trouble figuring out how to call the actual tooltips that the jQuery plugin uses, without having to validate anything.
How can I call the tooltip itself, without validating?
Thanks!
Try the plugin package} {des pack containing 2 plugins for notifications.
1. desNotifiers
2. desToolStip.
3. desWindows.
http://des.delestesoft.com:8080/?go=5
I'm interested in alert boxes such as,
http://www.visual-blast.com/javascript/nice-alert-box-with-jquery-impromptu/
and
http://woork.blogspot.com/2008/08/design-stunning-alert-box-using.html
but with a different functionality, the user should be able to interact with the page even with the alert box present, so it needs to be movable and not obscure the underlying page, as in this example,
http://www.open-lab.com/mb.ideas/index.html
Alert box should be generated automatically on page view plus the title and message of the alert box should change with each page refresh from expandable library.
Is there anything out there like this?
Thanks
Sounds like the jQuery UI dialog widget might do what you need?
http://jqueryui.com/demos/dialog/
Here is an example with mootools. You easily can extend any element on the page to be draggable. You may use this plugin as a sample of alerts and you'll just need to remove some functionality and add make it draggable.
There are few custom dialogs in moo.rd. One of them is the Custom.Alert:
http://www.moord.it/examples/custom_alert