is there way to submit part of a form without refreshing the whole page? Basically, I want to add a search box with a button in the view, when I click this button it runs a function / action in the controller. My apology if this has been asked before but I've searched for couple of hours and I couldn't understand the ones I came across.
This page will help you learn about how CakePHP handles AJAX:
http://book.cakephp.org/3.0/en/controllers/components/request-handling.html
Now, be aware the default behavior of a form is submit itself to a page or to the same page (reloads). If you want to prevent the form from submitting (reload the page) have something like this:
<form onsubmit = myFunc() >
..
function myFunc(){
//Send the ajax request. You can use JQuery
//Handle response
return false; //This will prevent the page reload...
}
Related
I have a custom plugin that uses a class. In the class I add an admin dashboard menu item that displays a "Settings" form. Let's say the class looks like this:
class MyPlugin {
function __construct () { ... }
function show_menu_form () {
$url = admin_url("admin_post
echo <<<EOFORM
<form method="POST" action="$url"/>
Click submit to do stuff.
<input type="hidden" name="action" value="do_stuff"/>
<input type="submit/>
</form>
EOFORM;
add_action('wp_post_do_stuff', [$this, '_handle_stuff']);
}
function _handle_stuff () {
echo "Doing stuff...";
}
}
The form prints properly in the dashboard page. When I click submit, it goes to a completely blank screen. What I want it to do is:
Do something
Go back to the same page, showing a message like, "Stuff was done." above the same form, and the user can click the form submit again to do more stuff.
If I leave the action blank on the <form> tag it will go back to the same page, and I can manually process the get/post params myself... that seems like a bad solution (but the only one I can see so far).
Any tips?
You have 2 ways to do this:
Form submit to the same page and before rendering the form you check if the form already submitted. If yes then call a function to display "Stuff was done" and any further steps. If not, then display the form.
In this way, you won't need any javascript in your plugin and I IMOO will be simpler and straight forward.
Submit using AJAX and display the confirm message using javascript. You can read the docs AJAX in Plugins to see how to do this in the admin menu. This is might be a more elegant solution without requiring any page refresh.
Which one to use depends on the requirements of your plugin. Either way, don't forget to validate inputs
I'm using Fancybox 2 to display some forms on my website. The form comes through from an external page into an IFrame to let the user post a message, kind of like twitter does. However I want the user to be re-directed after the form has been posted. So they post the form to a database, the Fancybox window shuts down and then they are redirected to the posts page where they see their newly posted message. Is there a way of doing this succesfully?
You can try this:
<script>
if(data == 1){
//window.location.replace("dashboard.php"); //will open the page in the fancybox
parent.$.fancybox.close(); //will close the fancybox
//parent.window.location.replace( your_url_here ); //your redirecting URL here
parent.window.location.href = 'dashboard.php'; //your redirecting URL here
}
</script>
I would recommend you to use a real form rather than a post action. You are not really using form submission otherwise, but just a POST request.
If you do that, you could use the target="_top" inside the <form tag and submit the results using the submit function of jQuery.
I have been on this site all day and can't seem to find what I need - no duplicate post intended.
I have a form containing a link which calls a modal popup containing a different form.
###### PARENT PAGE #############
<form...>
...
link
...
</form>
**** MODAL POPUP ****
<form...>
...
<input type="submit" />
</form>
**** END MODAL POPUP ****
### END PARENT PAGE #############
When I submit the form in the modal popup, the parent page is refreshed to show the updated info in the corresponding section of the page; except that the first form is not submitted and when the page refreshes to update the necessary section, the contents of the first form is lost.
I have tried using ajax to refresh only the necessary section of the page but that doesn't work as the sections that need refreshing use php variables with contents from mysql.
The system does what it needs to do and I don't mind the refresh. But I need a way to keep the user data entered into the first form.
Is it possible to submit the first form at the same time as the second to the same php page or any other way of preserving the user data in the first form on page reload without submitting it.
You cannot do this with pure php. You'll need javascript and write it in a way that when you hit submit on the modal it 'puts' the information back into the parent form.
One way is to make the modal form submit button not an actual submit button.
You might even be able to get away with taking the filled out section dom elements in the modal injected back into the parent form. Some jquery plugins already do this. For example colorbox
Here is a working example using only ONE <form> tag and jquery colorbox. http://jsbin.com/olalam/1/edit
I am not a php developer, so I'll suggest an alternative approach.
Before you refresh the page, you can serialize the form and store the data locally (e.g. in a cookie) then restore the data back into the form. Granted, that will require a bit more JS code, but should get you what you want.
UPDATE: Since you mentioned that you might need a little assistance on the JS front, here is some guidance:
Grab the jquery.cookie plugin here.
Grab the jquery.deserialize plugin here.
Use the following code as a starting point.
.
// the name of the cookie
var cookieName = 'myCookieName';
function beforeSubmit() {
// serialize the form into a variable
var serializedForm = $('#id-of-form').serialize();
// store the serialized form
$.cookie(cookieName, serializedForm, { path: '/' });
}
function afterRefresh() {
// read the cookie
var serializedForm = $.cookie(cookieName);
// de-serialize the form
$('#id-of-form').deserialize(serializedForm, true);
}
HTH
I am editing to try to put my primary question at the beginning of this post:
1) I am sitting at my customers/preferences page updating info in the form
2) I want to add a widget to my list of available widgets, so I need to open the widgets/addWidget page/form to add a new widget (note I am still working in my current customers/preferences page/form, so I need to continue with this page after adding a new widget in the widgets/addWidget page/form.
3) I select a link to go to widgets/addWidget, and I have jQuery dialog open this link in a dialog with the addWidget form and submit button
4) after adding a newWidget in the dialog popup form, I want to submit the newWidget (the code for addWidget is in the widgets/addWidget controller/action, not in the customers/preferences action)
Problem: the addWidget form action goes to widgets/addWidget, so when I submit the addWidget form in the dialog, it takes me away from my current customers/preferences page
Question 1) what is the proper/best way given this scenario to popup a form in another controller/action to submit that form, but then resume my current controller/action?
Question 2) should I move all of my form and code from the widgets/addWidget controller action into my existing customers/preferences action? (that seems to be the wrong approach)
I have researched jQuery documentation, Zend documentation, and searched other threads with trusty Google and stackoverflow, but I am still struggling to figure out the right way to get this to work with Zend Framework and popup forms such as jQuery dialog.
I have a working Zend action/controller that using a Zend Form and view to display and process my form. I have also been able to use jQuery dialog to popup a window when I click the link to that controller/action.
My issue is with the proper way to get the dialog to display the form and still be able to submit and process the page. If I only load the #content tag in the dialog the form and submit button appear in the dialog box, but the submit button no longer works. If I let the dialog open the full page (not just the #content) now the form will process properly, but the form submit is set to go to my action page for processing, so the form submits and takes me away from the original page and to the real controller/action page instead.
In my customerController I have a preferencesAction where a customer can choose a widget from a list of widgets. When the customer needs to add a new widget to the list, I want to open the addWidgetAction from the WidgetsController in a popup form. I want to add the widget in the popup form, submit the form to the addWidgetAction, and come back to the customer/preferences page I was already working in (with the newly added widget available in my list to select from).
//CustomerController
public function preferencesAction(){
//this is where I click a link to /widgets/addWidget and use jQuery dialog for form
}
//Customer preferences.phtml
<script>
$(document).ready(function() {
$('#add-link').each(function() {
var $link = $(this);
var $dialog = $('<div></div>')
.load($link.attr('href'))
.dialog({
autoOpen: false,
title: $link.attr('title'),
width: 600,
height: 500,
buttons: {
"Add Widget": function(){
$("#AddWidget").submit();
},
"Cancel": function(){
$(this).dialog("close");
}
}
});
$link.click(function() {
$dialog.dialog('open');
return false;
});
});
});
</script>
<a id="add-link" href='<?php echo $this->url(array('controller' => 'widgets',
'action' => 'addwidget')); ?>'>Add a Widget...</a>
//WidgetsController
public function addWidgetAction(){
// display form to add widget
// process form, validate, add to widgets table
$baseUrl = $this->getRequest()->getBasePath();
$action = $baseUrl . '/widgets/addWidget';
$form = new Form_Widget();
$form->setName('Add Widge')
->setAction($action);
}
I need to understand how to get the dialog to load my Zend action page for form processing, but without requiring the entire layout with header, footer, etc. I also need to understand how to process the form in the dialog popup without moving away from my original page where the popup was linked from.
Thank you for your assistance!
Well, I am not sure if i understand your question but you can try this
You can load your form in UI dialog box, to disable layout do this on you can do this
public function addwidgetAction(){
$this->_helper->layout()->disableLayout();
//just diable layout and do eveything normal
}
on your preferences.phtml file load the content of url baseurl/contrller/addwidget to jquery modal dialog
UPDATE
One way is use a jqueryplugin fancybox (external src) check the forgot password link
The other way is to use ajax
UPDATE
Well now i read your question well, though don't understand so clearly, i understand that you are trying to do something that is quite ambitious. And you cannot achieve through normal load method. You need to use ajax
I have to admit that I don't like jquery ui modal dialog so i don't know much about it, and i usually use jquery fancy box where it would give me an ability to load external page. Maybe you can do this through jquery ui modal dialog box.
I guess the problem that you are facing right now is you open a dialog box, you get the form in dialog, and you submit the form, it sends the normal post request, so dialog is reloaded, that's what happens in the link i have above, just click on forgot password link
Well there's solution for that too, the solution is ajax, and i hope you are quite familiar with it. you send ajax request and get response back, and depending on your response, you can exit dialog box as well update the the parent (preferences controller page) but that is quite ..... I tried to so same with few months back, but not with zf, i don't know how much i accomplished but it sure gave me a nasty headache
I'm trying to make comments on my page just like the ones in wordpress. When you press post comments your page updates without reload. How can I do that?
I understand I have to use jquery post, and I've had several attempts but for some reason my web page keeps reloading. I have a form like this :
<form name="postForm" id="postForm" action="addComments.php" method="post">
<textarea name="commentContent"></textarea>
<input type="submit" name="commentButton" id="commentButton">
</form>
I tried $("#commentButton").click(function() do something .. but I still get the page reload. I mean I have the php part ready, working with page reload like an ordinary form just fine, just I'd like to learn and do this without page reload. Any idea how can I make this happen?
try using http://www.malsup.com/jquery/form/. It is jQuery plugin to submit form without page load... hope it will help you..
There is a great tutorial I found while i was searching something similar like adding, deleting comments without page refresh.
http://www.9lessons.info/2009/11/insert-delete-with-jquery-and-ajax.html
You must return false from the click handler function to prevent default browser action – which is, submit the form. So your handler might look something like this:
$("#commentButton").click(function() {
...do your stuff...
return false;
});
Or you can bind to the submit event also:
$("#postForm").submit(function() {
...do your stuff...
return false;
});
$('#postForm').submit(function() ...