I have modal on place...and the button in which I need it to do two things in one time,...
when the button save clicked, there is php function called and executed, but while I do that I need to show the modal, even if the background php function is executed, how do I do that?
<button class="btn ID="Save">Save</button>
this is the php controller to php function..
if(isset($_POST['ac'])){
if($_POST['ac']=='cancel'){
$class->no($id);
}
if($_POST['act']=='save'){
$class->yes($id);
}
}
as you see from the above code, I call yes function to do the php-side work, But in the function at the end I have redirect php method to redirect to other page,
and I have the following Jquery code...
$('#save').click(function(){
$('#modSave').modal();
})
In general, the problem is when I click the button it comes the Modal, But because of the redirect method in the php, when it goes to other page the modal is disappear.
one thing, the php redirect to the same page from some parameter passed pages to its default page.
how do I prevent from disappearing the Modal while or if the page even redirects??
Related
im new to bootstrap, and i want to do this:
when i press a button i want to submit the form, and then open a modal, how can i do this? so i get the post data on the modal. I've tried with two buttons, first one submit the form and the other one opens the modal, if i do it in that order it works fine, but i would like to do it in only one button.
any help?
this is my button:
<a data-toggle="modal" href="#myModal" data-id="<?php echo $rol['rol_id'];?>" class="open btn btn-primary btn-lg">Launch demo modal</a>
This is a bad method and you should be using AJAX for this instead. When the modal is clicked, an ajax request should fire. Wait for its response (and return the data you need). If its successful then load the modal with the returned data.
I've tried with two buttons, first one submit the form and the other
one opens the modal, if i do it in that order it works fine, but i
would like to do it in only one button.
From this I assume that after the POST you display the returned data within the modal. If you want to follow this method you will need to write some Javascript within the HTML to fire the modal after a POST request.
<?php if ($_POST['submitted']) { ?>
$(document).ready(function() {
$("#myModal").modal();
});
<?php } ?>
I would recommend against this as you have to put this in a .php or .phtml file, AJAX would be better suited in this case.
// This question has already been solved elsewhere... I suggest following this link and doing what #Samuel Liew recommends. AJAX/jQuery/PHP Form submission and modal box open on success #fruitp is correct AJAX is the way to go with this.
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
There is a html form I have which submits to a Servlet once Submit button is clicked. After the submission the Servlet redirects to a fixed url which is
http://siteforServlets.com/Servlet/Servlet
That site then displays an xml report shown below:
Sorry I cannot post Images not enough rep so I uploaded direct link here:
http://img836.imageshack.us/img836/3343/sitea.png
I dont want my users getting confused seeing an xml I prefer it going blank page or redirecting to a different url...
How can I redirect the url to hide this xml report url?
Mark, I tried what you said but it redirects before the form even loads. Here is a quick jsfiddle I made to demonstrate your suggestion: jsfiddle.net/ujsEG/12/
You could try making the form target a hidden iframe and then set the onload attribute of the iframe with a javascript call to window.location.href.
<script type="text/javascript">
var okToRedirect = false;
function redirect() {
if (okToRedirect) {
window.location.href = 'path/to/new/location';
}
}
</script>
<form action="...some action..." target="MyIframe" onsubmit="okToRedirect = true;">
...
</form>
<iframe name="MyIframe" style="display: none;" onload="parent.redirect()"></iframe>
When the form posts, the results will display inside the hidden iframe. Once the iframe finishes loading, the onload attribute will fire the javascript to redirect the user.
Update
I updated my answer because of your comment. I added a javascript method which the iframe can call. There is now a global variable which is set to false initially. This will prevent the first load of the page from redirecting. When the form posts, the onsubmit event on the form will set the global variable okToRedirect to true, the iframe will reload and will call the redirect() method. This time around, the redirect will occur.
I am going to display the Flexigrid in html div tag when click a button.The function for Flexigrid would be in the Javascript function. so i add a image tag with onclick to call a function which is called f_reload() which is going to load the flexigrid function. First time its loaded. by second time click it doest load the grid again.
<script type="text/javascript">
function loadFlexiGrid(){
//here flexigrid content
$("#flex1").flexigrid{{
//...........}}
}
function eventhandler() {
$("#flex").html(function() { //this function used to reload grid but it is not called when click second time on the button
return "<div id='flex1'></div>";});
javascript:loadGrid();
}
</script>
<input type="image" class="btn" id="sub" src="<?=base_url();?>images/rbtnsave.gif"
onclick="eventhandler();"/>
<div id="flex"><div id="flex1"></div></div>
</div>
here flex1 id of the flecigrid and flex is the id of the div.
when click first time on the button it shows the grid. but second time it doesn't why
When the eventHandler is executed, the nested function in $('#flex').html() is declared, but not executed. Is there a particular reason why you put it there?
Otherwise, try replacing it with:
function eventhandler()
{
$("#flex").html("<div id='flex1'></div>");
javascript:loadGrid();
}
The first time it works fine, since you've put <div id="flex1"></div> manually in your HTML.
Besides, are you sure javascript:loadGrid() is correct? Try removing the javascript: part. And - if referring to function loadFlexiGrid(), call it loadFlexiGrid();, not loadGrid();.
use click() function ..
$("#flex").click(function()
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