I have a lot of experience in Swing and WPF but not much in Javascript. I am learning as I go. The below is what I would like to do
Have a single HTML Page for End User
Preload Dialogs which will be displayed in response to user action
Currently I have all the divs for the dialog boxes load as part of the document and then in the document $(document).ready() function I call hide().
I then open and close them. All this works currently. However I have the following problems:
The divs sometimes momentarily appear on page load
It annoys me that all these dialogs that are not part of the index page have to be loaded as part of the index page. (I am a little OCD with Code Organization).
Thanks-in-advance,
Guido
You could start the dialog box divs off with a style attribute set to:
style="display:none;"
Which is what jQuery does when it calls .hide(), then you wont have to wait for jquery to be ready before the element is hidden, the CSS will automatically do it for you
The jQueryUI Dialog will ease your display issues. I've found it to be more stable than anything I could write myself. You can, using AJAX, load content dynamically and put that markup into a single dialog DIV. It's as simple as knowing the DIV's ID, setting the html based on the AJAX response and then calling .dialog() on the popup.
Related
Is it possible to animate a div, or any other HTML element on a page refresh using jQuery or a similar web technology?
I am thinking something like the Google Photos search box animation.
When clicking the input, the element remains, while the rest of the page fades out and the URL changes. Then the new elements fade in.
This has to be possible by telling the browser somehow that an element should remain on the page after a request and providing the information, that it is the same as the other element loaded with the request.
This is the combination of two things:
Typical animation (you can do that with jQuery by adding classes and leave animation to CSS or use jQuery Animations https://www.w3schools.com/jquery/jquery_animate.asp)
History API (https://developer.mozilla.org/en-US/docs/Web/API/History_API) you can manipulate with URL
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 have a page with a bunch of dropdown menus that when you click on one of the links it unhides a picture and some text. Having all of these hidden elements load on the page startup slows the page down drastically. Is there a way to make it so that the content inside of the dropdown menus only load when they are unhidden (when the dropdown menu is clicked and the images/text shown).
Thank you in advance for the help!
You could use $(element).append(content) to append it from the JS.
Append doc: http://api.jquery.com/append/
If you opt for an AJAX solution then users with Javascript turned off will not be able to see a menu at all, making for one incredibly useless site. One way to counter this would be to place your menu's code after the content in the DOM, keeping in mind that special care will be needed to make accessibility features work like "normal" with this reversed layout.
Another option would be to use AJAX to load your menu and then optionally save it in the browser's Offline Storage for faster loading on future pages. Present a very basic menu in a <noscript> tag with a link to a full sitemap for your non-javascript friends.
Here is a basic example using AJAX:
$.ajax({
url: "menu.html"
})
.done(function( html ) {
$( "#menu" ).append( html );
});
I am having some trouble with getting jquery to recognize classes/ids of content that has been loaded into a dialogue box. All the jquery code (including the code that deals with the as yet unloaded classes) is loaded before the dialogue box is created, however the html that eventually goes into the dialogue box is created on the fly. I know it is going to get certain classes but don't know the rest of the code/content hence the reason I am loading it from the database. If I put the html on the page with the clickable class rather than the dialogue box it works, but I obviously don't want to do that. I was thinking this is a DOM problem since the class that jquery is going to be listening for is not on the page until AFTER the dialogue box is created (the dialogue box itself is also created by a click on another item - this has to happen this way as people may or may not want to get the dialogue box with the info from the database in it up). Any help in explaining and possibly finding a solution for this is much appreciated.
Have a look at jQuery.live().
I'm working on a web app where in I need to add some values inputted by the user.
When the user clicks on the Add button he sees a form and these values then show up on the page. Now to implement this I can do two things
Use a modal window
Make a form inside the page itself(in a div) and toggle its visibility by the Add button.
If I go with the former solution is it necessary to use Ajax or I can add elements on the main page directly itself? Are there any jQuery plugins to accomplish the same?
As Diodeus mentioned, you don't need Ajax.
In answer to your other question about the plugins, have a look at jQuery UI Dialog for the dialog. Generating the form is pretty trivial. There's no need for a plugin there
You don't need to use Ajax to accomplish this. The difference in the two methods is simply whether you use an inline block of code that is hidden and displayed later, or whether you use an absolutely-positioned block of code doing exactly the same thing.
In most cases there is a single form that envelops the entire page. The rest is a matter of a CSS and positioning.