Cakephp Ajax Form Update Div

Active4 years, 6 months ago

I have a basic ajax form on my site utilizing the Js helper, it works fine but when there are validation errors the update callback duplicates the entire page inside of my success div.

Success div:

Submit button:

Javascript:

Validate form function in my controller:

  • AJAX Form Submit with CakePHP 2.x. Submitted by NanoDano on Sun. Information on how to use CakePHP Pagination and Sorting with AJAX read this article AJAX Pagination and Sorting with CakePHP 2.x. First, create a contact form in the view Update a specified div with the AJAX response; The final JavaScript code will look like this.
  • Feb 24, 2017  I've spent today researching how to save data using an ajax request in cakephp and have got now where, the documentation on the cakephp.
  • How do I understand CakePHP Ajax? Write the javascript/jquery to submit this form in the sexy ajax way, and handle the response.

If the RequestHandler Component is included in the controller then CakePHP will automatically apply the Ajax layout when an action is requested via AJAX. Ist das geschehen, kann die link()-Methode von JavaScriptHelper verwendet werden um die Bibliotheken einzubinden. Step by step tutorial on how to make a CRUD operation ie. Create, read, update and delete records in codeigniter using Ajax. Download free source code. AJAX CakePHP. Using AJAX with CakePHP tutorial. Generate a link with the appropriate attributes to output the ajax into the div you specify. If you wanted to.

I don't know if this is enough information to go on, If I need to post more code, just let me know.

thanks.

Ryan Potter
Ryan PotterRyan Potter

6 Answers

I just tested your application by using your zip file.

Realtek audio drivers for windows 10. I've updated the BIOS as well.nothing is working. Can someone help me out? I've ran 'Find and fix problems with devices' and also Scan for hardware changes.

What I observed is that this is not the whole page that is put inside your #success div, but only the content of the Posts/add.ctp view.So basically this means the RequestHandler does its job correctly, meaning the layout that is used is the 'ajax' layout.To get rid of anything else that the form, the add.ctp page should not contain anything else that the form. In your case Posts/add.ctp contains navigation links, and that's why they get duplicated.

That said, what the submit button does currently is getting the content of Posts/add.ctp view and insert it in your empty #success div. But you never remove the form that was already on the page.What you could do is updating the content of a div that contains your first form, or even the content of the whole Posts/add.ctp view.

In your case, simply updating the #content instead of the #success div could maybe suit your needs:

nIcOnIcO

I ran into the same problem. Although nIcO seems to be giving the solution, in my case it didn't helped, because the success message Drawrdesign wants, is still not being rendered.

So, I looked at your zip file and found the solution. There are two ajax calls defined: 1) the .blur and 2) the .bind. 1) is used for validation of the fields and submits data through AJAX to the validate_form() function of the PostsController. And 2) is used to observe the click event of the submit button and sends data to the add() function of the PostsController.

This problem occurs at 2), because you click the Submit button. So, you should be looking at the add() function of the PostsController. In the validate_form() of 1) function you added the line:

And this is the solution. Because where CakePHP automatically renders the view, you don't want it to happen, because of AJAX. So, in case 1) it's done, it should be added to the add() function in the case 2) like this:

So, it's stop of (auto)rendering the add.ctp in the div='#success', and your other messages of 'sending.' and 'succes.ctp' are still begin displayed.

PS. @Drawrdesign, did you by any chance followed an instruction video of andrewperk?

djmenkvelddjmenkveld

in the Ajax Request handling set the layout to ajax. So the error message will be rendered with the ajax layout and not with the default layout.

UPDATED

}

SaanchSaanch
1,4221 gold badge19 silver badges38 bronze badges

Make sure you are either:

Using the RequestHandler component (preferred):

or manually set the layout to 'ajax' in your action:

Request handler will set the layout to ajax automatically when it detects an Ajax request.

The ajax layout doesn't return anything other than the rendered view.

RichardAtHomeRichardAtHome
4,0713 gold badges16 silver badges26 bronze badges

Hello firstly it seems you are using cake 2 lib and using 1.3 code which will probably work but is in parts deprecated may be work checking the migration guide . The console tool can also upgrade your code to 2.0/2.1 .

Secondly surely you do want to render a view and an empty layout? $errors is defined in Views/Posts/validate_form.ctp. You are setting $errors and then not rendering the view. Remove setting the auto render to false and place at the top of you controller action.

Any good?

LeoLeo
Ashish pathakAshish pathak

Not the answer you're looking for? Browse other questions tagged phpajaxcakephpcakephp-2.1 or ask your own question.

Active10 years, 6 months ago

I'm using CakePHP for a small web app and on one form page there's a dropdown to select a job number. I'd like to update two text fields based on the job number selected in the dropdown using jQuery (I'm also open to using the default ajax helper but I didn't have a lot of success with it).

Here's my jQuery snippet:

jobdetails is a method in my controller that gets the current job based on the job id passed in. However, it doesn't get called when the dropdown changes value. I tried substituting an alert function in place of .post and that worked, so onchange is being called correctly.

Ajax Form Submission

Here's the <div> I'm trying to update:

I want to set the value of each text field to be the corresponding value for the job returned from the ajax call. There's a lot of really good jQuery and CakePHP documentation but I haven't found anything that quite covers what I'm trying to do. Can anyone see what I'm doing wrong? Is there a better way to use ajax to update a div with CakePHP?

moexu
moexumoexu

2 Answers

Right now, it appears that the AJAX request hits the '/surveys/jobdetails' URL, but does nothing with the results. You need to add a callback to your AJAX request, like so:

There is also a convenience function in jQuery called load() which simplifies it even further, getting the contents of a URL and applying it to the selected element:

Luke DennisLuke Dennis
7,24716 gold badges50 silver badges66 bronze badges

Your CakePHP controller needs to look something like this:

Then you need to add a callback to your $.post that will actually update the fields:

I also recommend you get a tool like Firebug so you can see the progress of your AJAX requests and make sure the server is returning what you think its returning. It makes testing and debugging anything related to AJAX way easier.

In my opinion this is more elegant than outputting the whole DIV to update, but if you want to go that route you would just use jQuery's .load to achieve what you want.

Paolo BergantinoPaolo Bergantino

Jquery Ajax Form Submit

398k76 gold badges496 silver badges427 bronze badges

Cakephp Ajax Form Update Div On Mouse

Not the answer you're looking for? Browse other questions tagged phpjqueryajaxcakephp or ask your own question.