Send data from popup to form parent - php

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

Related

send value from anchor to popup

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
})

link passing a variable while at the same time opening an id

I made a Modal Dialog that opens when you click the link
Edit Name
So after clicking that link the modal appears but the problem is that I don't know how to pass a usr variable for me to extract while at the same time opening the id called #modalDialog, something like this:
Edit Name
This other method redirects the page and opens the id, but the point is that I'm trying to avoid refreshing or redirecting to other pages just to edit a simple name, it goes like this:
Edit Name
I would to say thanks in advance!
I think you will want to use a data-* attribute within the anchor. Then access it using Javascript or JQuery.
<a href="#modalDialog" data-itemid="1" class="edit-name-link" >Edit Name</a>
Then in JQuery
$(".edit-name-link").click(
function()
{
var itemid = $(this).attr("data-itemid"); // this will get the clicked itemid
//now open your modal however you opened it before, and do something with itemid
});

Joomla 2.5 modal popup component form

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

Fancybox onclose put content

I have form with few input box, for example:
FORM START
News -> input
News picture -> input (id="newspics", name="news_picture")
Add -> submit button
"Hyperlink Set picture" -> opening Fancy box window with gallery (table, 5*5, 25 pictures), images must be hyperlinked with unique id
FORM END
I need communication between Fancy box onclose() and my input (news_picture), when user click to picture I need: closing fancy box, putting id number to my input (news picture). Please if anybody help me.
Update:
I solved problem.
I make little php script, fwrite function write id number when user click to addpicture.php?id=$id in fancy box
After this, I get them, code:
'onClosed' : function() {
jQuery.get('aa.txt',function(data){
alert(data);
});
}
If you want to pass php variables into a fancybox callback you can do
$(".fancybox").fancybox({
"onClosed" : function(){
$("#input_selector").val(<?php echo $phpVariable; ?>);
// or add an ID attribute
// $("#input_selector").attr("id", ""+<?php echo $phpVariable; ?>+"");
}
});
... the example above is to get you an idea how to do it, its not a recipe ;)
Bear in mind that onClosed is a callback for fancybox v1.3.4 ... if yours is v2.x use afterClose instead.

linked comboboxes in html

Basically my webpage has two comboboxes. First combo box is populated with data comming from MySql. There is a button Add to the side of combo box and when user selectes a item in combo box 1 , clicks on the Add button, that item should get added to the second combo box that is in the same page. Can anyone please tell me how to do this in javascript? or anything?
By the way my web pages are PHP pages.
Thanks.
Hey. You could use a Javascript function like this:
function moveSelectedOption() {
// Fetch references to the <select> elements.
var origin = document.getElementById('origin_select');
var target = document.getElementById('target_select');
// Fetch the selected option and clone it.
var option = origin.options[origin.selectedIndex];
var copy = option.cloneNode(true);
// Add the clone to the target element.
target.add(copy, null);
}
Then you just add a call to it to the button's onclick event.
<button onclick="moveSelectedOption()">Add</button>
If you want to move it rather than copy it, remove the cloneNode line and just add the original option.

Categories