[eluser]Mat-Moo[/eluser]
I have some rows of data, and want the user to be able to edit a row. So I have an icon on the end which they click to go to the edit page - pretty simple stuff. I'm looking to make this slicker byusing hte jquery Facebox popup with a form inside it, works great... except that if the validation failes the screen just refreshes and any other changes you make are lost.
So it seems I need to explore Ajax in order to do this. Now I have done some basic Ajax stuff before but never in CI and with jQuery. I've done some searhcing on here and found a few samples and snippets that seem fine, but what I can't get my head around is how to redisplay the form if there are validation error?
I could do with some pointers/sample code in order for my diminishing brain to understand this bit 
[eluser]Phil Sturgeon[/eluser]
You don't re-display the form, you stop the browser from submitting the form by sending return false; to the onsubmit event.
Use $(whatever).show() to show certain messages that you hide by default.
[eluser]Mat-Moo[/eluser]
So move all my form validation from CI into the form? Maybe I could cheat and use an iframe in the popup facebox..?
[eluser]Phil Sturgeon[/eluser]
Huh? You can either use show/hide to display messages in with your current HTML or use a popup if you like. That's just personal choice.
And no, you still need to validate in CI otherwise the validation can be bypassed. You need to validate in both if you want secure AND pretty.
You should look into a way for creating jQuery validation based on CodeIgniter validation rulesets. That is something I have wanted to look into for ages but have just never found the time.
[eluser]jdfwarrior[/eluser]
You don't have to return false for the form. Since you will be using jQuery, just dont wrap the actual form in a form tag. Just have your fields, labels, and buttons. Catch the click on that button with jQuery. Now, as mentioned above you can use jQuery to do some validation as well, but its not required, you can do it all with CI and it still be ok.
Use the jQuery $.post function. This will post data from jQuery to a php file the same way you should be used to with php. At that point, do your validation of the data. When your done, anything that is echo'd is spit back to jQuery via the callback function. Use that data and display your error message or do whatever with it.
Example:
Code: $(document).ready(function() {
//catch click of the button
$("my_button").click(function() {
//post data from the fields to your CI controller/method of choice
$.post("controller/method", { field1: $("#field1").val(), field2: $("#field2").val() }, function(data) {
//inside the callback function, data is the variable for whatever is echo'd
//back from the php. It's a string, so you may want to go ahead and format it
//for error messages or whatever
if (data == "Success") { //jquery code to update item with success message }
else {
//jquery code to append or add an error message to the DOM
//data can be HTML so you can style your error message and prepare it all in the php file
} //end else
}); //end post
}); //end click
}); //end jquery
Hope this helps
[eluser]Phil Sturgeon[/eluser]
Why on earth would you do it that way? That is bad practice, extra work, insecure and would break for anyone without JavaScript!
I consider adding a return false; on fail at the bottom of your jQuery .submit() to be considerably easier, and will allow JS and non-JS users to use the site fully.
You can even use $.post() and return false; so it will submit the form via AJAX or normal HTTP.
The only time I would consider coding the way you suggested is in something like AIR where you KNOW JavaScript is going to be enabled.
[eluser]jdfwarrior[/eluser]
Break if they dont have javascript yes, unless your planning for a mobile site though, how often is that an issue now days? Besides, if javascript was disabled.. that method of submission would be the last of his problems. Because his facebox wouldn't work either, neither would any of his other jQuery stuff he's planning.
Explain how that is insecure. It's going to take data that is retrieved from the text fields and post it to a php script for validation. If that's insecure, then no form should ever be posted because that's what they all do. They post to a script that validates or performs an action and then continue.
Explain how that is extra work.
I agree that you could prevent the form tag from submitting and then $.post from jquery. At the same time though, the user asked how to do it a specific way. Not, how can I do this, but still make up for it in the absense of javascript. That seems to be your big issue. I'm not planning the site for the op, he can worry about whether javascript is present or not himself, I just answered how it could be done. If he's worried about the presence of javascript, he has other things he needs to rethink instead of worrying about this.
[eluser]Phil Sturgeon[/eluser]
If you only validate with JS and not with CodeIgniter too, then it is insecure. You didnt mention this in your post even if you are doing it.
It just seems like such a silly thing to do when it is about 3 lines of extra code to have it working with and without JS. And that number is still over 5% which is quite a few people.
For such little extra work, why restrict your apps? For your Facebox links throw a target=_blank in and you are working fine. There are ways around most of it if you are willing to bother.
[eluser]jdfwarrior[/eluser]
I never said do all validation in JS. It's posting to a CI function, which happens to be PHP.
Quote:Use the jQuery $.post function. This will post data from jQuery to a php file the same way you should be used to with php. At that point, do your validation of the data. When your done, anything that is echo’d is spit back to jQuery via the callback function. Use that data and display your error message or do whatever with it.
Post to php. Then validate.
Code: $.post("controller/method", { field1: $("#field1").val(), field2: $("#field2").val() }, function(data) { });
That code, posts to a CI controller/method of choice. Posts the values of field1 and field2. Your CI function can then validate it. If there is an error, echo the error, otherwise echo success message or whatever. That echo'd response is passed back to the data variable in the callback function, which can then handle the response appropriately.
Please read a little closer next time before you respond making me out to be an idiot please. I know there are probably a lot of things I don't know, but you made me out to be a retard, which, was entirely unnecessary.
[eluser]slowgary[/eluser]
Also, there are several ways to submit a form (like pressing enter). If you remove the form and instead opt for a bunch of inputs and a button, your "form" now requires JavaScript instead of just benefiting from it. It also becomes less accessible because it requires a 'click' on the button (most of the time I tab and hit the spacebar on buttons instead of clicking). Additionally, your markup will likely never validate.
|
