I'm trying to modify a Joomla component to achieve some ajax functionality to make things a little bit more streamlined for my website users. I've changed the information below to keep the project a little anonymous because I'm paranoid :-)
What I want to achieve is simple in my head:
-> User lands on 'order' page in xyz component
-> If there are no delivery addresses for this user on the order page, give a link to create one
-> When user clicks 'Add an address' a modal window appears and does an ajax request to the 'addaddress' page which has the form to add an address
-> Modal does not display the full page, instead it only displays the form and the essential (required) form fields
-> User inputs address information and clicks button to submit the form.
-> The fields are validated then posted
-> The modal closes
-> The field which has the delivery addresses on the originating 'order' page is refreshed and now includes the new address. This should not refresh the entire page as the user might have put data into the other form elements. This is important.
OK, so now you know what I want to achieve, let me introduce you to what I currently have.
-> User lands on 'order' page in xyz component
-> If there are no delivery addresses for this user on the order page, give a link to create one
I have written a simple php if statement that creates an anchor link with the text 'Add an address' and id 'addNewAddress'
-> When user clicks 'Add an address' a modal window appears and does an ajax request to the 'addaddress' page which has the form to add an address
I am using a mootols plugin called SimpleModal from http://simplemodal.plasm.it
-> Modal does not display the full page, instead it only displays the form and the essential (required) form fields
I have extended the functionality of the modal to allow me to inject some mootools filtering because I only want to display the form, nothing else. I have added this as a new parameter called getSomething that I can inject if I need to.
//SIMPLEMODAL
$("addNewAddress").addEvent("click", function(){
var SM = new SimpleModal({"width":600});
SM.addButton("Action button", "btn primary", function(){
$('addressForm').submit();
this.hide();
});
SM.addButton("Cancel", "btn");
SM.show({
"model":"modal-ajax",
"title":"New address",
"param":{
"url":"index.php?option=com_address&modal=true",
"getSomething":"#addressForm",
"onRequestComplete": function(){}
}
});
});
And this is the function that it calls:
else if (param.getSomething.match(elid))
{
// Request HTML
this.request = new Request.HTML({
evalScripts:false,
url: param.url,
method: 'get',
onRequest: function(){},
onSuccess: function(responseTree, responseElements, responseHTML, responseJavaScript){
var f = responseElements.filter(param.getSomething);
$('simple-modal').removeClass("loading");
$('simple-modal').getElement(".contents").adopt(f);
param.onRequestComplete();
// Execute script page loaded
eval(responseJavaScript)
// Resize
this._display();
// Add Esc Behaviour
this._addEscBehaviour();
}.bind(this),
onFailure: function(){
$('simple-modal').removeClass("loading");
$('simple-modal').getElement(".contents").set("html", "loading failed")
}
}).send();
}
*Now, everything up to this point I have managed to get working but I can't figure out the next part. *
-> User inputs address information and clicks button to submit the form.
At the end of the ajax request url, you might notice that I sent the modal=true request, this is so that I can hide certain elements on the form that I don't need to be displayed in the modal window - the form's own submit button is hidden when called from the modal.
-> The fields are validated then posted
If I call the 'addaddress' page without the modal, the form has it's own validation. Using the modal however, when I click submit, no validation happens and the address is added without any validation. I need to implement some validation to the fields using a standalone validation from within the modal itself.
-> The modal closes
At the moment, when the form is posted I get redirected to the 'viewaddresses' page but I'm confident I can fix this on my own. Instead I just want the modal to close.
-> The field which has the delivery addresses on the originating 'order' page is refreshed and now includes the new address. This should not refresh the entire page as the user might have put data into the other form elements. This is important.
This is self explanatory but I'm not sure where to even begin.
I think I've been as clear as I can be, but if you need anything else, please let me know.
I really appreciate any help you can provide.
What you are maybe missing is how to trigger a form submit.
You can submit a form with: $('myForm').fireEvent('submit');
So, using your example I changed the code of one of the modal buttons to:
SM.addButton("Submit button", "btn primary", function () {
$('addressForm').fireEvent('submit');
});
In the Mootools Form.Validator you can capture the formValidate event. Description:
formValidate - (function) callback to execute when the form validation completes; this function is passed three arguments: a boolean (true if the form passed validation); the form element; and the onsubmit event object if there was one (otherwise, passed undefined).
I'm not sure why the form is not submited when the submit is fired programatically, but anyway you can add a new .submit() inside this function that checks the validator boolean result.
So you can do like this:
new Form.Validator.Inline(myForm, {
onFormValidate: function (bool, element) {
if (bool) {
element.submit();
}
}
Demo here
Related
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
yes this question is asked some times. but I can't find an answer for my problem.
I've posted my question here because it is more php / javascript related then drupal I guess.
So basically I have a form that is validated and on the submit part I have a ( drupal hook ) function in php where I can add / modify code.
This function catches the form fields and stores them in the database.
This means that the fields are filled correctly so I want to implement something here that opens a new tab or window for the user without closing the current one.
So I know you can't call javascript from php to use something like window.open() but is there anyway I can make it so that this window.open() is called?
I'm also open for a bit different approach if you have any.
You can use an anchor element to both submit a form and open a new window:
<script>
function submitMyForm()
{
// Validate form fields here
// ...
// If form is valid, submit it
myForm.submit();
}
</script>
Submit Form
I know that it probably isn't possible to submit a form from one button to 2 various locations so I was wondering if someone knew of a solution.
When I click submit on a form I have the following form tag:
<FORM ACTION="http:site.com/servlets/RequestServlet" method="post">
But I want the form to have 2 action parameters. This way as soon as a user fills this form out, submits the form, the form is submitted to a SERVER AND a PHP script that will pull out the parameters submitted by the the form and email the user details about their form submission such as request ID etc.
Over here the Servlet is submitted to so that a record can be made in the network but an email is required to be sent to a user after form submission in-case they need to reference later on to a rep about their request id for further assistance.
How can I achieve the submission to a PHP script in addition to the submission to the Servlet that's already occurring?
NOTE: I cannot modify the Servlet in any way as it does not belong to me. All I want to do as add the email function for a user to later reference their ticket id.
Set a javascript onclick parameter for the submit button. So it will post to the action you set, but also run a function such as:
function secondSubmit() {
url = "myphpscript.php";
data = { someData: "data", someOtherData: 2 };
$.post(url, data, function(returnedData) {
// can do something on return if you'd like here
});
}
someData and someOtherData will show up in PHP as $_POST["someData"] and $_POST["someOtherData"]. So basically, you will have the form submit to the first URL via the HTML form, and have the second form submitted via jQuery with this function. Alternatively, you can do both submissions in this function and have the form have no action.
For more info, see here: http://api.jquery.com/jQuery.post/
I have a form that is shown inside a Colorbox. When users click submit there is some validation done (checking if an entered field already exists in my database) if it does a message is shown and user is prompted to enter a new value. However when this happens the form is not shown the second time inside the Colorbox window, instead it appears on a blank page.
the form is posted to PHP_SELF, how can i change this to show in PHP_SELF (in the current Colorbox)?
cheers
I know this is aside from what you are asking, but
What if you used jquery's submit() and post() instead of PHP_SELF to pass form data to an external php class and handle displaying the return data? If the data is acceptable, you can call $.colorbox.close() manually. If data is unacceptable you can display a message to the user describing the problem.
$('myform').submit(function(){
//validate the data with javascript
//send the data to your function with post
$.post('http://url/to/your/function',{a:first_input,b:second_input},
function(return_data){
if(return_data == 'success'){
$.colorbox.close();
}else{
//display your error message here
}
,html
);
});
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