I have a form in a modal iframe window that i create using fancybox. Once the user submits the form then upon success i want to close the modal window and update a div on the parent window with a 'Saved Successfully' message.
How do i do this? I know how to close the modal and refresh the parent window in fancybox. However what i do not understand is how to send the 'Saved Successfully' message to the parent window and update a div with this message so user can see.
I am open to using any notification plugin if that will help.
Thanks,
Shakira
First, we need to create a function in the parent window that allows us to make modifications. Do not encase this function in a $(document).ready(function(){ or a $(function){.
function updateParent(msg){
$('#divStatusUpdate').html(msg);
}
Now we have a function which passes the paramter of 'msg' to the function. The function applies the contents of 'msg' to a div in the parent with an ID of divStatusUpdate.
Now we have an element that performs the event for us.
$("#element").on('click', function(){
window.parent.updateParent('This is a message from the iFrame to the Parent Div.');
});
Simply create the div with an ID of 'divStatusUpdate', add the above scripting, change #element to the ID or Class you want to use.
If problem is in changing top frame from iframe you can create function in top and call it from iframe
top.yourfunction();
or
parent.yourfunction();
Related
I am using this way to show a popup div
Ask Question
when clicking on the anchor of class 'open-question-popup', several anchors share the same popup, so they all have the same anchor code, the problem is I want to send the title of each of the parent div to the popup (#ask-question-div) to be shown as a header when the corresponding anchor element is clicked.
Without relevant html shown here is a generic approach
$('.open-question-popup').on('clcik', function(){
// `this` is the `<a>` event occurred on
var title = $(this).closest('div').attr('title');// not clear where value should come from
$('#ask-question-div').find(someElement).text(title);//not clear where to put it
})
I have a worked example for passing data from child window to parent window
this is the example :
http://www.plus2net.com/javascript_tutorial/window-child3-demo.php
but what I'm looking for is to pass data from div popup and not window popup
to parent form;
any idea ?
If the div popup is a modal window of some description, i.e. it is a div overlaying the current page but within the same document, then you can do so by listening for the click event on the modal button and when you see this click, taking the value of the input inside the modal.
Assuming your page setup is similar to the example in the link you posted, if you had an input with an id of input1, and a modal containing an input with id input2, and button with an id of button, then this would be a pure javascript method for achieving the effect you describe.
window.onload = function() {
document.getElementById('button').onclick = function(event) {
event.preventDefault();
document.getElementById('input1').value = document.getElementById('input2').value;
}
};
Here is a fiddle which shows the function working: http://jsfiddle.net/8Z7hg/
The key thing to remember is that you need a way to query the element which contains the data you want to capture (in this case I gave the input an id of 'input2', which I could query using document.getElementById('input2').value and a way to listen to the event which triggers you capturing the data - in this example I created an anonymous function which I bound to the onclick event of the element with an id of button
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
I have a page with 2 divs one is called menu and the other is called content. The content div loads a log in page. When a user tries to log in I call a script into the content div and if unsuccessful it reloads the log in page.
If it is successful I use header location to redirect to the logged in page. When this page loads in the content div i need it to change the menu div to a different menu. I have tried using the following but to no avail. Is there any way that when the successful page loads into the content div that it can automatically change the content of the menu div
this is what i have tried in logged in page that is loaded into content div the body tag of that page has
onLoad="$('div#menu').load('Includes/logged-menu-page.php')"
The second argument of the .load() function is a callback function. You can use this to verify it loaded correctly and then edit your menu element:
$('#result').load('Includes/logged-menu-page.php', function() {
if(loaded_correctly)
$("div#menu").html("OtherMenu");
else
$("div#menu").html("LoginMenu");
});
You need to change which item you are calling the load function on:
$('div#menu').load('Includes/logged-menu-page.php')
should be
$('div#content').load(function() {
// load your stuff to your menu div
// you would probably need to make an ajax call or something here
});
I think this is what you are trying to do, but I am not sure what info you have in logged-menu-page.php from your question
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