I have the link below that executes the action message/new which shows a
form inside a jqueryui modal dialog.
<div id="myDialog">
</div>
echo jq_link_to_remote('Enviar mensaje', array(
'url' =>
'mensaje/new?receptor='.$miembro->getId().'&tipo=0&estado=0',
'update' => 'myDialog',
'complete' => "jQuery('#myDialog').dialog({ width:375,
height:220, top:123,
resizable:false,
modal:true, autoOpen: false });
jQuery('#myDialog').dialog('open')"
));
The point: if there are submit errors the form is not showed inside the
dialog form but in a empty page (mensaje/create)..
Any idea?
Javi
I would like to give you a code example, but it is extremely hard to follow what you are trying to do with the poorly formatted post above.
If you want to keep the user on the page you will need to submit your data via AJAX. Check out the jQuery AJAX docs. It appears you are using PHP, this tutorial for submitting via AJAX with jQuery and PHP may be useful as well.
Related
I want a JavaScript callback on successful save of an active form. Where can I put the JavaScript callback?
Do I need to make the form AJAX in order to do this or is is doable with regular (non-AJAX) forms?
In fact, I am going to put this form inside an iframe (inside a jQuery UI modal dialog).
When the form in the iframe is saved I need to do two things:
close the dialog;
update the list of things in a <select> of the main HTML document.
Try to put ajax handler on form submit, here is a live code from my project as example:
echo CHtml::ajaxSubmitButton('submit',
array('index'),
array(
'type'=>'POST',
'data' => array(),
'success' => 'js:function(){/*callback*/}',
));
Please, remember to give this button an unique (prefix_random) id to avoid inconvenionces
You can add button to your form:
<?=CHtml::ajaxSubmitButton('Save', Yii::app()->createUrl('some_url'),
array('success' => 'function(response){afterSubmitForm(response);}'),
array('class' => 'btn btn-primary'));
?>
Where afterSubmitForm() js function, which get server response as parameter.
I have an ajax submit button as follows,
echo CHtml::ajaxSubmitButton(
'>', $this->createUrl('/shop/category/nextCategory&id=16&store=true&gift_store='.$_GET['gift_store'].'&startValue='.$start_value.'&endValue='.$endValue), array(
'type'=>'GET',
'update'=>'#test',
'beforeSend' => 'function(){
alert("beforeSend");
}',
'complete' => 'function(){
alert("complete");
}',
)
);
In my action in the controller i use reder partial as follows,
$this->renderPartial('view',array('model'=>$this->loadModel()),false,true);
as i have set processOutput to true, the ajax submit button works fine. But it keeps on executing(for the number of times that i have clicked). I want it to execute only once when the submit button is clicked.
It'll be great if anyone could help me out with this. I have been trying to fix this all day.
okay i solved the solution. What is happening is,
The ajax request are triggered based on the ID. Every time the div is reloaded through ajax a new delegate/event will be loaded pointing at the same ID of the one before him. So when you actually click on the button both delegates will do their job, because both match the clicked button.
there are two solutions to this problem. One is having a unique id each time the button is generated like as follows,
array('id' => 'next-category-'.uniqid());
The other way, and this is how i solved it,
array("id"=>"next-category", "live"=>false);
live: boolean, whether the event handler should be attached with live/delegate or direct style. If not set, liveEvents will be used.Giving this to the submit button solved it.
Better if you create normalizeUrl for ajax request.
echo CHtml::ajaxSubmitButton(
'>', CHtml::normalizeUrl(array('/shop/category/nextCategory',array('store'=>1,'gift_store'=>1,'startValue'=>1,'endValue'=>1))), array(
'type'=>'GET',
'update'=>'#test',
'beforeSend' => 'function(){
alert("beforeSend");
}',
'complete' => 'function(){
alert("complete");
}',
)
);
This code is perfect, i have checked. It seems that their may be some error somewhere in your js code .
With the help of jQuery, you can define the following code to "complete" function:
function() {
$('input[type=submit]").attr("disabled", "disabled");
}
So on successful completion of your button will be disabled for re-push, if I understand you correctly.
Don't forget to modify the css selector input[type=submit] to the CSS selector your button.
Solution 2: Wap your CHtml::ajaxButton into
if (!Yii::app()->request->isAjaxRequest) {
}
Then when you load content via ajax your button will not be displayed on the page
I am using a CActive Form and, earlier i was having a normal submit button. Then I changed it to an Ajax Button like as follows,
CHtml::ajaxSubmitButton('Continue',CController::createUrl('//shop/order/create&store=true'),array('type'=>'POST'));
This goes to the url when u refresh the page. But i want it to go to the page without page refresh. Any idea how do it?
Thanks in advance.
try this, with some ajax success functionallity...
echo CHtml::ajaxSubmitButton('BottonLabel',
Yii::app()->createUrl('your/url',array('calltype' => 'system')),
array('type' => 'POST',
'cache' => true or false,
'success' => 'js:function(data) {yourJSfunction(data)}'),
array('id' => 'the_id'));
or follow this link to the class-reference for yii
ajaxSubmitButton
try this..
array('contoller_name/action','ajax'=>'somevalue'));
//In your case
echo CHtml::ajaxSubmitButton('Continue',array('contoller_name/action','ajax'=>'yw0'));
Just keep in mind that you are obviously setting auto created widget ids as params (yw0). You should assign your own ids to widgets, otherwise another widget could have the same id and that can be hard to debug..
in short:
i'm using Yii Framework
i have a one Ckeditor window on my page ( php/ yii framework - works fine)
when i hit a button, a new CKeditor window is being generated and shown through AJAX call
THE PROBLEM: this new CKEditor window correctly displays the text stored in the database BUT : when i hit "Save" (an ajax button generated together with the rest of the form) the values from this new CKeditor window will not save : CKeditor sends back the old values that it got from the database.
When i remove the Ckeditor and leave the plain <textarea> : everything is ok so i know that the controller is fine.
Please, anybody went through something like this?
Sounds like a typical post-AJAX JS binding issue. :) There are a few possibilities for how to fix it, depending on what is going wrong.
This post in the Yii forum should be money for you, it's where I got most of these suggestions:
http://www.yiiframework.com/forum/index.php?/topic/9341-ckeditor-widget-in-a-cactiveform/
Use a widgetized Yii extension which has already solved this problem (NHCKEditor?)
Add an onClick callback to the submit button which saves the CKEditor content to the hidden 'textarea' ('onclick'=>'CKEDITOR.instances.TEXTAREA_ID.updateElement()',
Use jQuery to get the data from the CKEditor iFrame to use... wherever. AJAX validation, etc.
Good luck!
You can let CKEDITOR update the textarea before validating, and clientside/ajax validation will work as expected:
<?php $form = $this->beginWidget('CActiveForm', array(
'enableAjaxValidation' => true, // one or both
'enableClientValidation' => true, // one or both
'clientOptions' => array(
'validateOnSubmit' => true, // optional
'beforeValidate' => new CJavaScriptExpression('function(form) {
for(var instanceName in CKEDITOR.instances) {
CKEDITOR.instances[instanceName].updateElement();
}
return true;
}'),
),
)); ?>
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