Loading image from parent frame to child - javascript

I have an upload button on my main page that submits to a php form, then returns the image back to the main page. What I am trying to do now is get the image element to load to an Iframe in the parent page as a variable that I can put in a div. Everything is functioning properly until the image will not display in the part of the Iframe, I think I am close but cannot see what is wrong in my code.
index.html
just the javascript , iframe, and id where the messages appears
<script type="text/javascript">
function updatepicture(pic) {
document.getElementById("image").setAttribute("src", pic);
$("#iFrameThingy").contents().find("#message").attr("src","photos/cw/briantest/" +pic);
}
</script>
<iframe id="iFrameThingy" src="Templates/template2/index.html" width="100%" height="4500" name="search_iframe"></iframe>
<p id="message">Upload message will go here.</p>
iframe.html
<script type="text/javascript">
function updatepicture(pic){
document.getElementById("image").setAttribute("src",pic);
}
</script>
--> Where I am trying to place the image
<div class="caption2">
<img id="productImage" id="images/product.png"alt="Product" height="416" width="417">
</div>
I had this working at one point but mistakenly changed something and now it is not working but I know I am close. Any help is appriciated
upload.php
<?php
if ($_FILES['file']['size'] > 0) {
if ($_FILES['file']['size'] <= 153600) {
if (move_uploaded_file($_FILES['file']['tmp_name'], "images/".$_FILES['file']["name"])) {
// file uploaded
?>
<script type="text/javascript">
parent.document.getElementById("message").innerHTML = "";
parent.document.getElementById("file").value = "";
window.parent.updatepicture("<?php echo 'images/'.$_FILES['file']["name"]; ?>");
</script>
<?php
} else {
// the upload failed
?>
<script type="text/javascript">
parent.document.getElementById("message").innerHTML = "<font color='#ff0000'>There was an error uploading your image. Please try again later.</font>";
</script>
<?php
}
} else {
// the file is too big
?>
<script type="text/javascript">
parent.document.getElementById("message").innerHTML = "<font color='#ff0000'>Your file is larger than 150kb. Please choose a different picture.</font>";
</script>
<?php
}
}
?>
index.html (submit form)
<form id="form" method="post" action="upload.php" enctype="multipart/form-data" target="iframe">
<input type="file" id="file" name="file" />
<input type="submit" name="submit" id="submit" value="Upload File" />
Upload message will go here.

Change this line:
document.getElementById("image").setAttribute("src",pic);
to this:
document.getElementById("productImage").setAttribute("src",pic);
And change this:
<img id="productImage" id="images/product.png"alt="Product" height="416" width="417">
to this:
<img id="productImage" alt="Product" height="416" width="417">

You are using incorrect id there:
$("#iFrameThingy").contents().find("#message").attr("src","photos/cw/briantest/" +pic);
You should use productImage instead of message. Use this:
$("#iFrameThingy").contents().find("#productImage").attr("src","photos/cw/briantest/" +pic);

Related

Dropzone.js not working, no errors

I'm using Dropzone.js for uploading files, but it behaves strangely. When I open the page, the dropzone form doesn't show up, only the fallback field. When I drag & drop a file into the browser, the browser opens that file, then I use the Back button on the browser and Dropzone form shows up. I tried adding an alert inside the init function and it fires only when I press Back (the second scenario). There are no errors in the console. Here's the code:
<!-- Dropzone -->
<div id="dropzone">
<form action="<?php echo site_url('/settings/upload'); ?>" class="dropzone" id="upload">
<div class="fallback">
<input name="file" type="file" multiple />
</div>
</form>
</div>
<!-- Dropzone -->
<script src="<?php echo base_url(); ?>assets/common/theme/scripts/plugins/forms/dropzone/dropzone.min.js"></script>
<script type="text/javascript">
Dropzone.options.upload = {
paramName: "info",
maxFilesize: 0.1,
init: function() {
alert("test");
this.on("error", function(file, msg) {
alert(msg);
});
this.on("success", function(file, msg) {
var data = jQuery.parseJSON( msg );
if (data.success) {
alert("success");
} else {
alert(data.message);
}
});
}
};
</script>
Turned out it was issue with cloudflare rocket loader. Exluded the two <script> statements from it using data-cfasync="false" and it worked.

Change URL when iframe refresh

I wrote a page with iframe inside, here's the structure:
count.html:
/* http://example.com/count.html */
<div class="primary">
<h2>Countdown</h2>
<div class="content">
<iframe src="page2.html" id="iframe"></iframe>
</div>
</div>
index.html:
/* http://example.com/index.html */
<div class="primary">
<h2>Home</h2>
<div class="content">
<iframe src="home.html" id="iframe"></iframe>
</div>
</div>
page2.html:
<head>
<script>
var count = "<!--# echo time -->"; /* C code will control it*/
function display() {
if (wait_seconds == null) {
wait_seconds = (count == "" ? 180 : parseInt(count));
}
document.countdown.b.value = wait_seconds;
if (wait_seconds <= 0) {
if(redirect == null || redirect == "")
redirect = "index.html";
location.href = redirect;
return;
} else {
wait_seconds = wait_seconds-1;
}
window.setTimeout("display()", 1000);
}
</script>
</head>
<body>
<form name='countdown'>
<h2>Countdown Bar</h2>
<input type='text' size='2' name='b' disabled>
</form>
<script>
display();
</script>
</body>
I designed a countdown bar in the iframe(page2.html)
, when time's up, I want count.html refresh and change to the default page index.html, but when page refresh, it stucked in count.html and only refresh the iframe(page2.html), so when time's up, I saw count.html has a iframe with index.html inside, how to fix it?
[window.]location.href controls the location of the current frame.
Using [window.]top.location.href controls the location of the topmost document.
Change location.href = redirectURL; to top.location.href = redirectURL;
See Difference between window.location.href and top.location.href for more details.
Here's another approach without using javascript, put a meta tag described below into your head tag in count.html
<meta http-equiv="Refresh" content="5; url=index.html" />

Multiple Summer note divs on one page

I am trying to get the code of a specific summer note div with multiple ones on a single page.
My summer notes are created from a database with php as follows:
<div class="tab-content">
<?php $i=-1; foreach($contents as $content): ?>
<?php $i++; ?>
<div class="tab-pane" id="<?php echo $content->contentName; ?>">
<div class="summernote" data-id="<?php echo $i; ?>">
<?php echo $content->content; ?>
</div>
</div>
<?php endforeach; ?>
</div>
And then my javascript is:
<script>
$('.summernote').summernote({
onblur: function(e) {
var id = $('.summernote').data('id');
var sHTML = $('.summernote').eq(id).code();
alert(sHTML);
}
});
</script>
It always gets the first $('.summernote').eq(0).code(); summernote code never the second or third one.
What I'm trying to do is when each summernote gets a blur, have that code update in a hidden textarea to submit back to the database.
(btw) I am initilizing the summer notes like this:
<script>
$(document).ready(function() {
$('.summernote').summernote({
height: 300,
});
});
</script>
After selecting all summernote's you need to access their attributes by specifying one element like:
<script>
$('.summernote').each(function(i, obj) { $(obj).summernote({
onblur: function(e) {
var id = $(obj).data('id');
var sHTML = $(obj).code();
alert(sHTML);
}
});
});
</script>
To display multiple editors on a page, you need to place more than two <div> elements in HTML.
Example:
<div class="summernote">summernote 1</div>
<div class="summernote">summernote 2</div>
Then run summernote with jQuery selector.
$(document).ready(function() {
$('.summernote').summernote();
});
For more information click
Note: Multiple Editor summernote not work with id
I Finally got the code working for multiple summernote editors and image uploading!
To fix
"undefined"
, try:
var id = $(obj).data('id');
to
var id= $(obj).attr('id'))
Source:
https://github.com/neblina-software/balerocms-enterprise/blob/master/src/main/resources/static/js/app.js
Regards!
For anyone looking to use summernote to output multiple content with foreach, loop/repetitive statement etc
Summernote works for the first output only but you can make it work for others by using the class twice:
<div class"summernote summernote"> </div>
Provided your script is like this:
<script>
$(document).ready(function() {
$('.summernote').summernote();
});
</script>
if you are using summernote inside a textarea in a form and you intend to apply it on multiple textarea(s) on the same form, replace id=summernote with class="summernote"
Dont forget to do the same on your initialisation script
<script>
$('.summernote').summernote({
height: 200 //just specifies the height of the summernote textarea
});
</script>
Example
<textarea class="summernote" name="valueToBeExtractedBackend" required></textarea>
<script>
$('.summernote').summernote({
height: 200
});
</script>

JavaScript Function - Change content in a DIV

I have a problem. I have this function:
function isDone()
{
if(isDone){
$("#loadingStatus").html("NOT DONE...");
}else{
$("#loadingStatus").html("#isDone");
}
}
The above code does NOT work. The code above is checking if the content in an iFrame is done loading.
What i want is to have a div that says if it is NOT loaded "NOT DONE..." but if it is loaded then output another DIV into the #loadingStatus div.
UPDATE:
This is my 100 % code.
<?php
$key = $_GET['key'];
$s=mysql_query("SELECT * FROM advertisements WHERE `key`='$key'")
or die(mysql_error());
$r=mysql_fetch_assoc($s);
?>
<script type="text/javascript" src="../divided/js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="../dream/js/iframeLoad.js"></script>
<script type="text/javascript">
function isDone()
{
if(isDone){
$("#loadingStatus").html("Waiting for your advertisements to load...");
}else{
$("#loadingStatus").html($("#isDone").html());
}
}
</script>
</head>
<div style="height:10%">
<table style="border:black;">
<tr>
<td><img src="../dream/images/logo.png"></td>
<td><div id="loadingStatus"></div></td>
<td>3</td>
</tr>
</table>
<div id="isDone" style="display:none">
</div>
</div>
<iframe onload="isDone()" src="<?php echo $r['url']; ?>" width="100%" height="90%" scrolling="auto" frameborder="0">
<p>Your browser does not support iframes.</p>
</iframe>
You might be looking for:
$("#loadingStatus").html($("#isDone").html());
EDIT: In your code, isDone is a function, not a variable. From what I understand, you have to do something like:
$(document).ready(function() {
$("#loadingStatus").text("Waiting for your advertisements to load...");
});
function isDone()
{
$("#loadingStatus").html($("#isDone").html());
}
Because the function isn't called until the iFrame is loaded, the not loaded message will not appear.
You need to have some default text in the isDone div.
http://jsfiddle.net/sMGTU/
<?php
$key = $_GET['key'];
$s=mysql_query("SELECT * FROM advertisements WHERE `key`='$key'")
or die(mysql_error());
$r=mysql_fetch_assoc($s);
?>
<script type="text/javascript" src="../divided/js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="../dream/js/iframeLoad.js"></script>
<script type="text/javascript">
var iFrameLoaded=false;
function checkDone(iFrameLoaded)
{
iFrameLoaded
? $("#loadingStatus").html("Finished Loading")
: $("#loadingStatus").html("Waiting for your advertisements to load...");
}
</script>
</head>
<div style="height:10%">
<table style="border:black;">
<tr>
<td><img src="../dream/images/logo.png"></td>
<td><div id="loadingStatus"></div></td>
<td>3</td>
</tr>
</table>
<div id="isDone" style="display:none"></div>
</div>
<iframe onload="checkDone(true);"
src="<?php echo $r['url']; ?>"
width="100%" height="90%"
scrolling="auto"
frameborder="0">
<p>Your browser does not support iframes.</p>
</iframe>
Well, NOTDONE will never appear because there is no isDone variable that can evaluate true. Also it seems that that logic is reversed.
Instead, set the "not done" message when your main document loads, then replace it with the "done" message when the iFrame document loads:
// on document load:
$(function() {
// set "waiting" message:
$("#loadingStatus").html("Waiting for your advertisements to load...");
// on iframe load:
$('#myIFrame').load(function() {
// set "done waiting" message:
$("#loadingStatus").html($("#isDone").html());
});
});
That's it; that's all the Javascript you need. Take that horrid onLoad attribute out of your iframe markup and give the thing an ID:
<iframe id="myIFrame" src="<?php echo $r['url']; ?>" width="100%" height="90%" scrolling="auto" frameborder="0">
<p>Your browser does not support iframes.</p>
</iframe>
function isDone()
{
if(isDone){
I think your problem may be that you have a boolean variable called isDone and your function definition variable is called isDone, one of these should be called something else.
Where is isDone variable set in the code? Do you have any load event handler for iframe?
Try this
$(function(){
$("#loadingStatus").html("Waiting for your advertisements to load...");
var isDone = false;
function checkIsDone()
{
if(isDone){
$("#loadingStatus").html("NOT DONE...");
}else{
$("#loadingStatus").html($("#isDone").html());
}
}
$("iframeSelector").load(function(){
isDone = true;
});
checkIsDone();
});
If you want to create a new div:
$("#loadingStatus").append($("<div/>").text("Done."));
If you want to move a div from somewhere else:
$("#loadingStatus").append($("#isDone"));
If you want to copy a div from somewhere else:
$("#loadingStatus").append($("#isDone").clone());
If you want to move the contents of an element:
$("#loadingStatus").append($("#isDone").children());
If you want to copy the contents of an element:
$("#loadingStatus").append($("#isDone").children().clone());
Update:
Seeing the rest of the code reveals some more problems with it. As you don't have any variable that determines if the content has loaded or not, and only call the function once the content is loaded, just put the code for changing the content in the function. Put the initial message directly in the element.
function isDone() {
$("#loadingStatus").append($("#isDone").children().clone());
}

FBJS Ajax to load content

I tried one of the examples here to load the content in the div, but apart from displaying the image, it doesn't show anything. Where I'm going wrong?
File ajax1.js:
function General_Refresh(url,div){
//Showing the load image (pay attention to /> of <img
document.getElementById(div).setInnerXHTML('<span id="caric"><center><img src="http://website.name/images/ajax-loader.gif" /></center></span>');
var ajax = new Ajax();
ajax.responseType = Ajax.FBML;
ajax.ondone = function(data) {
//Hide the loading image
document.getElementById('caric').setStyle('display','none');
document.getElementById(div).setInnerFBML(data);
}
//If there are errors re-try
ajax.onerror = function() {
General_Refresh(url,div);
}
ajax.post(url);
}
File quote.html:
<script src="http://website.name/scripts/ajax1.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
General_Refresh("http://website.name/quote.php","quote");
//-->
</script>
<div id="wrapper">
<div id="quote"><strong>this</strong></div>
</div>
</div>
There was nothing wrong with FBJS/Ajax. It was an error in quote.php.

Categories