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.
Related
I'm creating a login form on top of the header. But when user is logged in, I want the form to disappear. I will check if user is not logged in, if so then I should add the form. But I want to do it in the javascript.
The simple answer to what you're asking is to use jQuery's append() function.
The problem with this is that you will need to insert it all as text, which is going to become a maintenance problem. Definitely.
The better way is to insert the div and hide it by default using display:none and to programmatically set it to display:block when needed.
If you use something like Angular, you could also include the div by inserting the template when needed. But the use of display for this purpose is very widely accepted as the right way.
Edit:
Since you're using load() already for some parts of the page, you could probably do the same here.
Add a container tag to the HTML:
<div id="loginContainer"></div>
Add the nested content like this:
$("#loginContainer").load("http://some.url.com/path");
Hide it again with html()
$("#loginContainer").html("");
I have a div that is used to display one of several wizard interfaces; which wizard is dependent upon a menu selection.
Unfortunately, if a user clicks a different menu option, the div is cleared and the new wizard is displayed. There is no chance to clean up the session (which I am using as a conversation scope).
Is there a way to trap the jquery .empty() command, in order to make sure I can clean up any mess before new content is displayed?
With no real code it's hard to answer, but as I can see in docs empty() has no method for binding another function (http://api.jquery.com/empty/) - so my suggestion is to write own function for clearing and allow it's manipulation.
Another way could be with some "dirty form" handling (check if form changed and allow/disallow etc).
I am working on an old legacy application which used document.forms[index] approach to access elements in the form and to submit the form. My task is to add a new top panel with few textboxes and buttons. I am using a form for this. This top panel is to be included in all the pages in the application. Now, all the pages stop working since form[index] needs to be updated in all the pages. I know using the form name is the best approach. I have around 1000 places to change. What is the best approach to avoid this problem? I still want to use form for my top panel since I am using spring forms to get the data. Any valuable advice will be appreciated. Thanks.
If you looked up the definition of "unmaintainable", that would be a good example.
One trick might be to leave one set of forms, hidden, with the legacy stuff in them, then make another set, lower in the HTML, that the user sees. Then use some JavaScript to map the data back into the original forms in order to continue to work with the expectations of the legacy code. This keeps everything in the same index-order.
I've a question about best practices in javascript.
I've a dropdown menu with some statuts. If the statut is : external, I want to display a form. I don't know the best way to do this. Do i need to hide a DIV from the DOM and display him when i need it or do i need to generate my form dynamically in jquery and make a call ajax to populate some data.
It really depends on your application. If you already have a lot of elements in the DOM, and the likelyhood of actually needing to show this form is low, you may want to add it later (using ajax) because in most cases you don't need it anyway. However, if your DOM load is light, and in most cases the form will be shown, you make want to have it ready and hidden so that is can be quickly shown.
There is also a middle ground where you can "lazy load" it (using javascript on page load), and keep it in a json object until it is ready to be used. This will keep your DOM responsive, and give the added benefit of a quicker load of the form.
it depends on the probability of user clicking on that element and number of elements already present in the DOM. I suggest to create form runtime whenever user performs action instead of hiding it. There are some browser plugins which shows all hidden elements in a page.
Unless your page is unusually large already or there are a lot of different forms like this that could be used from the same page, putting the HTML into the page and just starting out with it hidden gives you the advantage that all your markup is in one place (in the HTML file that represents your page) and can more easily be centrally maintained that way.
When you start putting markup into your javascript, you split up the maintenance of the markup between both the HTML of the page and the HTML that is embedded into your page.
If, on the other hand, you had a lot of these forms that were all slightly different that could all be used from the same page, then it gets messy to pre-specify all possible combinations of the form in the original HTML and you would probably be better off dynamically generating it via javascript or perhaps generating it from a template with slight modifications.
I was trying to remove a certain div element from my HTML using jQuery I saw this Use jquery to remove a div with no children, the jquery remove methods work perfectly fine but the problem is of Persistence,
Actually i want to permanently remove that div for that person, i was storing this in cookies but the problem is this remove method doesn't actually remove the code so when I parse through the code to store it using the cookies i store the removed code also. is there any way i can achieve a permanent removal for particular person??
Thanks
Pranay
Since many people are confused here is what I was trying to achieve http://virtser.net/inettuts/ this was demo of http://james.padolsey.com/javascript/inettuts-with-cookies/ where he extended functionality of his code by adding Cokkiee support to retain the widget positions.
This code works fine for moving editing and collapse or expanding widget. It saves everything in cookie but for delete this does't work. It delete the widget but when i try to save it in cookie since the div element is present in code it does't save the deleted item
jQuery isn't ideal for permanent removal of elements from a page as it's stateless.
Its a client side wrapper for javascript to interact with the DOM. While in theory, you can have it remove elements from the DOM based on readable cookies a particular user may have after a page has loaded, it's not ideal when server side coding could handle this without much effort.
to remove it permanently you have to use serverside language for example php
You could revert the process and add the DIV for specific users instead, leaving the data in the .js instead.
To remove DIV "permanently" you have to use serverside lang. The logic is simple:
Remove DIV from HTML
Save some info about user and removed DIV in cookies
In serverside script you have to get cookie and check did user disable any div or not. If he did your script should skip DIV generation