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.
Related
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 have a form which uses the target attribute to target an iframe when the form is posted which posts to a PHP script. This part is working fine but I need to do something based on several results that the php script will put in the iframe.
What I am thinking of doing is when the PHP script has finished posting it echo's out some hidden input fields that contain various elements, such as the state of the post, whether it succeeded and what the final result was if it was successfully posted.
However, if I did this it would put it into the iframe so then the main web page wouldn't be able to access the hidden input fields.
How would the main web page be able to access these hidden input fields so that the main web page can perform some action, I.e. make a div within the web page show a specific error message or whatever.
The other thing is, once I know how I can get the data from the hidden input field, how would I know when I can go and get the values. I was thinking that when the form is posted via a JavaScript document.forms["myform"].submit() code I could then do a while loop and check to see if another hidden input field status is set to complete and once it says complete I can then get the values from the hidden input field.
I'm not sure if the way I suggested is the right way or doing what I want to achieve or if there is a better way of doing it.
UPDATE
I've tried what #lanzz suggested but it doesn't appear to have worked. Below is what I have tried.
$("iframe#image_upload_frame").on('load', function()
{
var iframeBody = this.contentDocument.body;
var data = $(iframeBody).find("#imageDirectory");
alert("data: " + data);
});
Below is how the iframe is defined
<iframe id="image_upload_frame" name="image_upload_frame"></iframe>
and I am echoing out a hidden input field in the php script that's within the iframe.
echo '<input type="hidden" id="imageDirectory" value="'.$imageDirectory.'" />';
The echo is definetly working as when I see view the iframe source I can see the hidden input however, the alert dialog is never shown as if something isn't working. There are no errors being reported either by the google chrome dev console.
If I understand correctly - you need a value from the iframe in the parent window, once the value is loaded into the iframe. I would add javascript to the iframe calling the parent and executing a function.
In the main frame:
function incomingValue(val) {
alert(val)
}
and somewhere in the generated iframe:
<script type="text/javascript">
parent.incomingValue("Hello world");
</script>
This should work assuming both frame sources share the same domain.
You can use postMessage for cross document communication between an iframe and it's parent.
See:
http://viget.com/extend/using-javascript-postmessage-to-talk-to-iframes
http://javascript.info/tutorial/cross-window-messaging-with-postmessage
Since you're running on the same domain, your main page's Javascript will have no trouble to access the contents of the <iframe> (example uses jQuery, you could rewrite into whatever libs you plan to use):
$('iframe#the-id-of-the-iframe').on('load', function() {
var iframeWin = this.contentWindow;
var iframeBody = this.contentDocument.body;
// access global JS vars defined in the iframe:
var someIframeVariable = iframeWin.globalIframeVariable;
// or, directly access elements in the iframe:
var someIframeElement = $(iframeBody).find('#element-id-inside-iframe');
});
A while ago I wrote a piece of code to upload a picture using some javascript and two iframes. The most important thing for me was to preview the pic. Maybe it will help you:
HTML:
<div id='fakebutton' onclick='select_pic()'>Just a button to select a pic</div>
<iframe src='uploadform.php' name'pic_frame'></iframe>
<iframe src='#' name='target_frame'></iframe>
both the iframes are hidden. The targetframe has no source (or an empty page, if you want to).
uploadform.php contains a form:
<form id='upload_form' action='dosomething.php' method='post' enctype='multipart/form-data' target='target_frame' onsubmit=''>
<input id='realfoto' name='realfoto' type='file' onchange='parent.foto_upload(window.frameElement.id)'>
</form>
and then some javascript:
First of all something to trigger the filebrowser when the user clicks the fake
function select_pic(){
b=window.frames['pic_frame'];
b.document.upload_form.realfoto.click();
}
And then a part to actually upload the pic, triggered by the onchange() in the input element:
function foto_upload(o){
var b=o;
o=getElementById(o);
if(o.contentDocument ) {o = o.contentDocument;}
else if(o.contentWindow ){o = o.contentWindow;}
else{return false;}
if(test_pic(o,b)){ //test if it is really a pic
getObj('foto_tmpdir').value=o.getElementById('tmp_dir').value;
o.getElementById('doctype_nr').value=b;
o.fotoform.submit();
}
else{
return false;}
}
In dosomething.php I perform actions on the uploaded pic (rename, resize etc). And it contains a few lines of javascript:
$a = 'upload was succes';
$b = 'my_image_name';
$c = 'whatever you want to put here';
?>
<script type="text/javascript">
window.top.window.smurf(<?php echo "'$a','$b','$c'" ?>);</script>
<?php
if you create in javascripty a function named smurf(a,b,c) you can pass along whatever you want form the php-script. One of the most important things for me was that I now can pass the filename of the uploaded pic to javascript, and use it to change an image.src for a preview.
Hope you can use something of it.
Your iframe source page should has a javascript call function instead of the hidden field. The function will call the opener window (your main page) and then it do any functionality you want. As blue print look at the following:
//in iframe src.php
<?php
if ($something){
?>
<script>
function doSomethingWithOpenerWindow(){
opener.document.write('hi);
}
doSomethingWithOpenerWindow()
</script>
<?php
}
else{
?>
<script>
function doAnotherSomethingWithOpenerWindow(){
opener.document.write('hi);
}
doAnotherSomethingWithOpenerWindow()
</script>
<?php
}
?>
I have this script set up that echoes all relevant users in a database to a page with check-boxes beside them. You can make a group out of these users in the database by checking some of the boxes and submitting the form. This all works great.
Unfortunately our designer doesn't like this. What she wants is basically a list of six empty fields on the left of the screen. Then, when you click a plus button next to a person's name on the right of the screen, that name appears in the first empty field...and so on with each subsequent plus button that's clicked.
So instead of re-coding all this (it's really not an option) I think I can just 're-style' all this with jQuery. I can style the check-boxes so they look like a plus when they're not selected and a minus when they are selected.
Then I just need to have some sort of event so that when when the check box is clicked, the person's name is taken and inserted into the first empty box. It's all just smoke and mirrors. The empty box could just be a div with a border. Functionally, it will all work the same as before.
Can anyone confirm if this is feasible? My JS knowledge sucks and I'm not sure where to begin. Plus I already have the following jQuery validator function on the page and I don't want this new JS to interfere with it:
$(document).ready(function(){
$("#myform").validate({
debug: false,
rules: {
group: {required: true},
},
messages: {
group: {required: " Field required.", loginRegex: " Invalid character."},
},
submitHandler: function(form) {
$('input[type=submit]').attr('disabled', 'disabled');
$('#results').html('Loading...');
$.post('process_group.php', $("#myform").serialize(), function(data) {
$('#results').html(data);
});
}
});
});
I suppose what I'm requesting is advice on how to code a check box to insert it's value into some div when it's checked. And to remove that value when it's unchecked.
If I understand you correctly, you need to do the following things with JQuery:
1)Replace your checkboxes () generated by server side code with clickable +/- signs.
You can do this by finding the checkboxes and replacing their default stage with an empty link that has a background image of a +.
$('checkbox').remove().html('Some Name');
Instead of an inline style you should make the plus and minus sign background images CSS classes if you know how.
2)You want to change the + to a - when it is clicked, and 3) have the user's name next to the + sign appear someplace else (in an empty input box?)
To toggle the background image, just change the style (or class if you know how to make the image a CSS class) when clicked. Then take the contents and put it in your target element.
This jsFiddle might help to illustrate what I'm describing above: http://jsfiddle.net/Ap2yW/1/
I applied tinyMCE to a text area in my sites admin area.
Now there is a page "create category" and and page "edit category."
In edit category, there is a drop-down of the categories, I select one and the text area for category description is filled in with AJAX and a tinyMCE function:_
tinyMCE.activeEditor.setContent(responce);
The category description is filled into the text area on which tinyMCE is applied. But when I click submit, NOTHING happens at all.Similarly, on the create category page, there is no drop down, but when you click submit, nothing happens at all.
This problem does not occur when tinyMCE is not applied. But on the edit category page, it was submitting but not filling in the text area with the category description, when instead of
tinyMCE.activeEditor.setContent(responce);
I used
$("#lang_description").html(responce);
in the callback function for jQuery AJAX.
So the main problem is that the forms are not being submitted and that was the story.
Someone suggested to use the tinyMCE function getContent before I post but I dont understand where and how I would do that.
I've faced a situation once like yours and what I did that was first i set in tinyMCE.init
tinyMCE.init({
mode : "exact", // Used exact
elements : "page_content", // I gave the textarea id and name 'page_content'
...
});
Then I've wrote a function as follows
function get_page_content()
{
var ed = tinyMCE.get('page_content');
return ed.getContent();
}
Then inside my form submit event handler/function I just did
$('#page_content').val(get_page_content()); // I populated my textarea (id=page_content) before the form submission
I received the data using $page_content=$_POST['page_content'] in my php script
Update: May be you can use
var ed=tinyMCE.activeEditor.getContent(); // when you didn't set the mode : "exact" in init function
Reference: getContent and setContent
May be not a solution but If this helps then I'll be glad to know. Also notice Sparky672's comment.
TinyMCE editor lets you assign a custom button to its editor toolbar. I did that and hooked it up to a Flickr account, so a custom dialog box appears with a selection of images.
I want the user to be able to then click any image and have the URL of that image added to the original input, from where the custom TinyMCE button was clicked.
This is the TinyMCE custom button code I have:
setup : function(ed) {
// Add a custom button
ed.addButton('flickr', {
title : 'Add Flickr Image',
image : 'styles/media_icons/flickr.png',
onclick : function() {
// Add your own code to execute something on click
$("div.mediaLibraryPopup .box").load("scripts/loadMediaLibrary.php");
$("div.mediaLibraryPopup").fadeIn("slow").addClass(container);
}
});
}
Then, when you click on an image, I have this jQuery to handle that event:
$("div.mediaLibraryPopup img").live("click", function() {
var url = $(this).attr("src");
$("div.mediaLibraryPopup").fadeOut("slow");
});
I've been reading the TinyMCE documentation and working with it for hours, and I can't figure out how to pass that URL variable back to the TinyMCE "ed" event so that it can add it to the input.
Since I'll be using this on multiple inputs, I can't just hard-code the input class, either. Any thoughts?
I think you need to insert The URL on the Current Cursor Location in the Editor. if that is the case then you can use this command to insert the content:
tinyMCE.execCommand('mceInsertContent',false,'Your Content Goes Here...');
Hope this helps :)