Using ajax to load a view...

[eluser]Wonder Woman[/eluser]
Hi,

I have a view which is essentially made up of three forms, all inside their own div.

On page load I want to have the first form shown and the other two hidden and if the validation is successful then I want the first form to hide and have the second one made visible and so on.

I currently have them all working in separate views but I don't want page refreshes.

I want to do all of this using ajax so that the page doesn't refresh, I've not used ajax before so any help, tips, etc would be great. Many thanks in advance.

[eluser]Krzemo[/eluser]
Do you have to load it via ajax?
Use JS validation and just show/hide whats needed.
Googling jQuery + ajax should give you a good start

[eluser]prestondocks[/eluser]
Suggst you also look at asset library by Phil Strugeon

https://github.com/philsturgeon/codeigniter-asset

This is what I use in my projects to load the Javascript for jquery functions.

As far as Jquery and codeigniter is concerned they work very well together, but a posted reply in this forum is not going to get you very far. Do a search on Google and you will find many tutorials, there are also a few good videos on youtube.

Best thing to do is just start coding some simple stuff. Dont be put off by all the nested brackets, you do soon get used them.

Good luck
Simon

[eluser]Sean Gates[/eluser]
Just so you know, a person would still be able to see all three forms by looking at the source of the page. If that's not desirable, then you could load them only on success of the previous form submission via Ajax.

Therefore, I would not put all three forms on the page and load. I would use Ajax to load the forms as the person completes each form.

[eluser]Wonder Woman[/eluser]
Hi Sean, that would be great but how would I do this in the Controller? Where I currently just load the view? Sorry I am an ajax novice, thanks.

[eluser]Krzemo[/eluser]
Coders like us surly can see all three forms by looking at the source code. More they can overcome JS validation using Firebug, but if the site is for remaining 99% of people and there is no security threat maybe its just not worth it...
Besides there is always server side validation...

[eluser]Wonder Woman[/eluser]
I want server side validation which I have set up already and it works brilliantly, I have three different views and they work great but I don't want the page to refresh every time one form has been successfully filled in...so I presume I have to add ajax in the controller or something? I've not used ajax before so I was wondering how I could get it to load in the views without page refreshing? Is this do-able? Thanks

[eluser]Krzemo[/eluser]
Have you read anything on jQuery yet?
http://api.jquery.com/jQuery.get/

Add a controller method that will return partial view.

[eluser]Sean Gates[/eluser]
This is all absolutely doable. First things first, though. Does the process work without Ajax right now?

If so, then that's great. You can use the $.load() method in jQuery to load the next page and get just the form. It's a very handy trick and one that follows the "progressive enhancement" principle: make it work without JS first, then add the JS for a better experience.

So, does it work sans Ajax now? As a three step process?

[eluser]Wonder Woman[/eluser]
Yes I have the form split up in three views so that when form one has been successful then form two is loaded as a view, so it all works I just want to create a better experience for the user. I'm not familiar with the $.load() method in jquery I shall have to have a play about.