English 中文(简体)
在发送表格(蛋糕方式)后,如何在不刷新页面的情况下重新装入元素的内容?
原标题:How does one reload the contents of an element without refreshing the page after sending a form (The cake way)?
I have an element (a comments list and form) that is used in many places in my application. It works all fine and dandy, except it requires refreshing the entire page. This can be problematic, especially when it resets the game to which your comment belongs, causing all progress to be tragically lost. I have very limited experience with AJAX, so what is the most effective, simplest way to reload the element with the added comment? Here is my element: .$comment[ content ]. - .$this->Html->link($comment[ User ][ username ],array( controller => users , action => view ,$comment[ User ][ id ])) .
; } echo $this->Form->create(null, array( url => /comments/add , id => qCommentForm )); echo $this->Html->link( Leave comment , javascript:toggleDisplay("comment .$name. ") ); echo
; echo $this->Form->end(); ?> Update Okay, so I understand a lot more about ajax thanks to your posts, but I still do not understand how to do this the "cake way".
最佳回答
With HTML like this:
You can use JavaScript (and jQuery in this case) to intercept the submit event and send the comment data with Ajax (assuming the PHP form handler returns an HTML fragment for the new comment): // run on document ready $(function () { // find the comment form and add a submit event handler $( #qCommentForm ).submit(function (e) { var form = $(this); // stop the browser from submitting the form e.preventDefault(); // you can show a "Submitting..." message / loading "spinner" graphic, etc. here // do an Ajax POST $.post(form.prop( action ), form.serialize(), function (data) { // append the HTML fragment returned by the PHP form handler to the comments element $( #comments ).append(data); }); }); }); If the PHP form handler returns the whole list of comments (as HTML) instead of just the new one, you can use .html() instead of .append(): $( #comments ).html(data); You can find the jQuery documentation at http://docs.jquery.com/. Update: I m not a CakePHP expert, but the "cake way" AFAICT: Set up JsHelper: Download your preferred JavaScript library Include the library in your view/layout, e.g. echo $this->Html->script( jquery ); Write the JsHelper buffer in your view/layout, e.g. echo $this->Js->writeBuffer(); Include JsHelper in your controller, e.g. public $helpers = array( Js => array( Jquery )); Use JsHelper::submit() instead of FormHelper::submit() to generate a submit button that will do Ajax form submission, e.g. echo $this->Js->submit( Leave comment , array( update => #comments )); In your controller, detect if the request is an Ajax request, and if so, render using the Ajax layout, e.g. if ($this->request->is( ajax )) { $this->render( comments , ajax ); } Not sure if/how RequestHandlerComponent figures into this though.
问题回答
I m not sure about cakePHP but in general, here s how I am doing it in my custom applications. Create a normal HTML form element and set all your inputs. Bind an event listener (javascript) to this form to catch the submit event. This can be done in various ways, I am using jQuery library as it is easy to work with, especially with ajax requests. You can either watch the submit button and listen to the click event or watch the form and listen for the submit event. If the event is triggered you need to return false so the form is not really submitted. Instead you collect your form data (form.serialize()) and send the data via ajax request to some PHP script on your server. The script processes the request and sends the answer (HTML code) back to the client s browser. Use jQuery or custom javascript to inject that returned HTML into any DOM element as you need. E.g. you could replace the form with the new HTML. Note: Many PHP frameworks have special controllers for handling ajax requests, so does cakePHP probably, too. This means, you need two controllers and also two views for this to work within your framework pattern.
I don t know about PHP but with a Jsp and js, I would put an action on an element to call js and in there something like var element =document.getElementById().. then element.innerHTML= "new value" Sorry if that is not possible in ypur situation
Here is a step by step guide to get what you want to achieve. First, you need to get all the sections of your code that are to be updated dynamically and give them a unique id. The id can be the same across different pages, so long as the id exists only once on a certain page.
Next, you need to build an ajax request for posting a comment from your form. Lets say you have the following comments textarea (no
needed for the ajax request): You would do an ajax request similar to this: function refreshComments() { var comment = encodeURIComponent(document.getElementById( add_comment ).value); var xmlhttp; if (window.XMLHttpRequest) { xmlhttp = new XMLHttpRequest(); } else { xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { document.getElementById( comments ).innerHTML = xmlhttp.responseText; } } xmlhttp.open("POST","add_comment.php?comment=" + comment, true); xmlhttp.send(); } Now change your submit button to something like this: Now in PHP, you will need to process the request to add the comment, then you ll need to reply with all the comments for that specific page. (This will allow the user to see any comments that were posted from other users while he was idle.) All you have to do is echo the comments to the ajax page (add_comment.php from the example). Here is a fiddle you can play with to see the general idea of how it works: http://jsfiddle.net/xbrCk/
Previous answers include ajax sample code. An efficient approach is to make your php code return a javascript variable UID with the uid of the last message loaded by your code and include an empty div (i.e. ). Then instead of playing in general with innerHTML of all messages, your ajax call result can inserted before that div and also set a new value to variable UID. Also you can poll your server for new comments using this variable at any desired interval.
Here is my step by step: 1. First create an html file with a form, form was look like this:
2. then call the jquery library like this:


上一篇:
下一篇:


相关问题
selected text in iframe

How to get a selected text inside a iframe. I my page i m having a iframe which is editable true. So how can i get the selected text in that iframe.

How to fire event handlers on the link using javascript

I would like to click a link in my page using javascript. I would like to Fire event handlers on the link without navigating. How can this be done? This has to work both in firefox and Internet ...

How to Add script codes before the </body> tag ASP.NET

Heres the problem, In Masterpage, the google analytics code were pasted before the end of body tag. In ASPX page, I need to generate a script (google addItem tracker) using codebehind ClientScript ...

Clipboard access using Javascript - sans Flash?

Is there a reliable way to access the client machine s clipboard using Javascript? I continue to run into permissions issues when attempting to do this. How does Google Docs do this? Do they use ...

javascript debugging question

I have a large javascript which I didn t write but I need to use it and I m slowely going trough it trying to figure out what does it do and how, I m using alert to print out what it does but now I ...

Parsing date like twitter

I ve made a little forum and I want parse the date on newest posts like twitter, you know "posted 40 minutes ago ","posted 1 hour ago"... What s the best way ? Thanx.

热门标签