We Keep Coding

On an <Object data> page, getting one pages on_click event to trigger a method in another page within the <Object data> page

I am converting an old classic ASP website to asp.net/C#. This weeks problem with the conversion involves
replacing frames. A webpage (parent) spawns a popup using window.open.I am triggering the popup from a button on a gridview that runs this javascript:
<script type="text/javascript">
function popup(url, Title){" "}
{
(popupwindow = window.open(
url,
Title,
"status=no,menubar=no,width=1000,height=700,resizable=yes,scrollbars=yes"
))
}
</script>
That popup uses Frames (See example)
<frameset framespacing="0" border="1" frameborder="1" rows="36,*,0">
<frame name="Header" scrolling="no" noresize="false" target="main" src="ContentModules/<%=fsHeader %>" marginwidth="0" marginheight="0">
<frameset cols="140,*">
<frameset rows="*,27%">
<frame name="Menu" target="main" src="ContentModules/<%= fsMenu %>" marginwidth="0" marginheight="0" scrolling="no">
<frame name="RevTable" src="ContentModules/<%= fsRevision %>">
</frameset>
<frame name="main" src="ContentModules/<%= fsMain %>" marginwidth="5" marginheight="5" scrolling="yes" target="_self">
</frameset>
</frameset>
This site needs to be HTML 5 compliant and work with I.E and Chrome. So far, I am able to do just that. However,
I cant use Frames and meet those objectives.
I replaced the frames with Object Data.
<div id="header" class="header">
<object data="https://localhost:44365/HEADER.aspx" type="text/html" width="100%" height="100%"></object>
</div>
<div id="main" class="row">
<div id="column2" class="column left">
<div id="left_top" class="left_top">
<object data="https://localhost:44365/MainMenu.aspx" type="text/html" width="100%" height="100%"></object>
</div>
<div id="left_bottom" class="left_bottom">
<object data="https://localhost:44365/RevTable.aspx" type="text/html" width="100%" height="100%"></object>
</div>
</div>
<div id="column1" class="column right">
<object data="https://localhost:44365/MAIN.aspx" type="text/html" width="100%" height="100%"></object>
</div>
</div>
This works great, however, there is a problem that I cant figure out. We need to edit/save the MAIN Page. The button
to save or edit is on the HEADER page. I cant figure out how to get a click event on the HEADER page to run a saving method
on the MAIN page.
In the original ASP version, they use an environmental variable to change the button text from EDIT to SAVE.
They then use javascript to reload the entire popup so that it comes up in edit mode (or Save mode). I am not very knowledgeable on Javascript, but this seems an overhead heavy way of doing things.
function EditForm() {
window.location =
"/default.asp?windid=<%=windID%>&id=<%=id%>&ver=<%=ver%>&action=EDIT";
}
If the button was on the MAIN page, it would just be a simple on_click event. However, we have to duplicate the look and feel of the legacy
website. This means triggering an action on the MAIN page from an on-click event on the HEADER page.
Any help would be greatly appreciated.
#yob Adding revised Code, erroring out with Unable to get property 'Content Window' of undefined or null reference.
VRVMAIN.aspx (The Parent Page with the < Object Data > for Header.aspx and Main(default.aspx) Pages)
function messageHandler(message) {
console.log(" main page handler: ");
var data = message["data"];
console.log(" caller:" + (data["caller"] || ""));
console.log(" caller:" + (data["data"] || ""));
callMainPage(data);
}
if (window.addEventListener) {
addEventListener("message", messageHandler, false)
}
else {
attachEvent("onmessage", messageHandler);
}
function callMainPage(data) {
console.log(" Parent page(VRVMain.aspx) Calling Main(Default.aspx) Page");
document.querySelector('[data="https://localhost:44365/VRView/Content/types/default.aspx"]').contentWindow.postMessage(data, '*');
}
HEADER.aspx Page
function callContainer(){
console.log("calling container from header: ");
var data = { "caller": "header", "data": 1234 };
window.parent.postMessage(data, '*');
}
Default.aspx (Main Page)
function messageHandler(message){
console.log ( " main page(default) handler: ");
var data = message["data"];
console.log ( " caller:" + ( data["caller"] ||""));
console.log ( " data:" + ( data["data"] ||""));
callMainPage(data);
}
if (window.addEventListener) {
addEventListener("message", messageHandler, false)
}
else
{
attachEvent("onmessage", messageHandler);
}

since browser will not allow accessing object page (see blocked a frame from accessing a cross-origin frame), you could post a message to main page:
for example, in your header page:
<html>
<body>
<div>
header
<a href="#" onclick="callMain()" >header click</a>
</div>
<div>
<div>start main</div><hr/>
<object data="main.html" type="text/html" width="100%" height="50%"></object>
<hr/><div>end main</div>
</div>
<script>
function callMain(){
console.log ( " calling main from header: ");
var data = {"caller":"header", "data":1234};
//this will not work - blocked a frame from accessing a cross-origin frame -> document.querySelector('[data="main.html"]').contentWindow.clickHandler(data);
//instead - post message
document.querySelector('[data="main.html"]').contentWindow.postMessage(data, '*');
}
</script>
</body>
</html>
then, your main page (main.html) can listen for posted messages and process them:
<html>
<body>
<div>
main content
</div>
<script>
function messageHandler(message){
console.log ( " main page handler: ");
var data = message["data"];
console.log ( " caller:" + ( data["caller"] ||""));
console.log ( " caller:" + ( data["data"] ||""));
}
if (window.addEventListener) {
addEventListener("message", messageHandler, false)
}
else
{
attachEvent("onmessage", messageHandler);
}
</script>
</body>
</html>
Edited, based on additional comments...
If you have an "outer" container page, hosting header and main pages, then your header page needs to post a message to container page, which in turn, posts a message to main page:
for example, outer.html
<html>
<body>
<div>
outer container
</div>
<div>
<div>start header</div><hr/>
<object data="header.html" type="text/html" width="100%" height="50%"></object>
<hr/><div>end header</div>
</div>
<div>
<div>start main</div><hr/>
<object data="main.html" type="text/html" width="100%" height="50%"></object>
<hr/><div>end main</div>
</div>
<script>
function messageHandler(message){
console.log ( " container page handler: ");
var data = message["data"];
console.log ( " caller:" + ( data["caller"] ||""));
console.log ( " caller:" + ( data["data"] ||""));
callMainPage(data);
}
if (window.addEventListener) {
addEventListener("message", messageHandler, false)
} else {
attachEvent("onmessage", messageHandler);
}
function callMainPage(data){
document.querySelector('[data="main.html"]').contentWindow.postMessage(data, '*');
}
</script>
</body>
and header page needs to post a message on click:
<html>
<body>
<div>
header
<a href="#" onclick="callContainer()" >header click</a>
</div>
<script>
function callContainer(){
console.log ( " calling container from header: ");
var data = {"caller":"header", "data":1234};
window.parent.postMessage(data, '*');
}
</script>
</body>
</html>

I thank you for your help, but I am going to close this as unworkable. Because the main page has a dynamic URL based on its query string, I don't think the Query Selector can get a reference to it. Even though the Parent knows it a Main.aspx, it dynamically changes to a different page.

Html/Javascript Document.getelementbyid Not working

I am an intermediate HTML and I am starting to learn JavaScript within it.
<html>
<head>
<title>Uh oh! No page.</title>
<h1 class="index">The page you requested for is not available! Click here to go back</h1>
<style>
.index {
text-decoration: none;
font-family: Arial;
}
</style>
</head>
<body onload="myfunc()">
<script>
function myfunc() {
var x;
if (confirm("Im confuzzled! Where did the page go?\n\nSelect OK to be redirected and Cancel to do it manually ") == true) {
window.location = "index.html";
} else {
alert("You will now manually have to redirect to the lemoon homepage");
}
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
<footer onload="pageLocate()">
<script>
function pageLocate() {
document.getElementById("demo").innerHTML =
"Page location is: " + window.location.href;
}
</script>
</footer>
</html>
I cannot get the document tag to display anything. Can you please help?

i have scanned your code twice and still can't see where is the tag that has id = "demo". If you don't create a tag with an id, which is in this case : "demo", then when you call for it, how can console even work when it can't find the target ? i believe that this is your fault

There is no element with the ID of "demo". You would need to give the element that you want to perform a function with an id of "demo" for this to work.
EX:
<div id="demo">Hello!</div>
You did not have to ask this question, it just would have taken a little bit of thinking or some searching on google.

I really hope you wanted something like this, as there were some not so logical things there.
1.footer and h1 tags belong to the body of the page (inside tag).
2.you pretty much created a function to get some data for another function, that can be accessed from the other function
<html>
<head>
<title>Uh oh! No page.</title>
<style>
.index {
text-decoration: none;
font-family: Arial;
}
</style>
<script>
function myfunc() {
if (confirm("Im confuzzled! Where did the page go?\n\nSelect OK to be redirected and Cancel to do it manually ") == true) {
window.location = "index.html";
} else {
alert("You will now manually have to redirect to the lemoon homepage");
}
document.getElementById("demo").innerHTML = "Page location is: " + window.location.href;
}
</script>
</head>
<body onload="myfunc()">
<h1 class="index">The page you requested for is not available! Click here to go back</h1>
<footer id="demo" onload="pageLocate()">
</footer>
</body>
</html>

What is the best way to implement previous and next page logic

I have a webpage which is a huge form (6 pages long). In order to make it more user friendly, I decided to break this down into different sections (div tags).
I have placed Previous and Next button on page. On previous click it should display the previous div tag I was at and next should display the next div tag. I was wondering what would be the best way to implement it? So far I have this function which I know is hardcoded for div tag called GeneralSection. Just like GeneralSection, I have 20 more sections. Any ideas how should I go about it ? Help appreciated! :)
$(document).ready(function () {
$("#imgNext").click(function () {
$("#GeneralSection").hide();
});
});

You could just iterate through an array of elements.
Here's a simple JSBin that should get you going: https://jsbin.com/siyutumizo/edit?html,js,output
$(document).ready(function() {
var $steps = $('.step');
var currentStep = 0,
nextStep;
$steps.slice(1).hide(); //hide all but first
$('#next').on('click', function(e) {
e.preventDefault();
nextStep = currentStep + 1;
if (nextStep == $steps.length) {
alert("You reached the end");
return;
}
$($steps.get(currentStep)).hide();
$($steps.get(nextStep)).show();
currentStep = nextStep;
});
});
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id="wizard">
<div class="step">1</div>
<div class="step">2</div>
<div class="step">3</div>
<div class="step">4</div>
<div class="step">5</div>
<div class="step">6</div>
</div>
<button id="next">Next</button>
</body>
</html>

Another way of implementing this is through siblings.
Jsbin: https://jsbin.com/tarajuyusu/edit?html,js,output
$(function() {
$('div#GeneralSection').slice(1).hide(); // hide all section, except for first one
$('#imgNext').on('click', function() {
var section = $('div#GeneralSection').filter(':visible');
if ($(section[0].nextElementSibling).attr('id') != "GeneralSection")
return;
section.hide();
$(section[0].nextElementSibling).show();
});
$('#imgPrev').on('click', function() {
var section = $('div#GeneralSection').filter(':visible');
if ($(section[0].previousElementSibling).attr('id') != "GeneralSection")
return;
section.hide();
$(section[0].previousElementSibling).show();
});
});

Give each section class pages and per section ids page-1, page-2 like that
$(document).ready(function () {
var pages = $(".pages").length;
$("#imgNext").click(function () {
var nextPageNo = parseInt($(".pages:visible")[0].id.split('-')[1])+1;
if(nextPageNo > pages)
return false;
$(".pages:visible").fadeout();
$("#page-"+nextPageNo).fadeIn();
});
});
Havent fully tetsted but this should get you going.
Update
HTML
<div id="container">
<div id="page-1" class="pages">1</div>
<div id="page-2" class="pages">2</div>
<div id="page-3" class="pages">3</div>
<div id="page-4" class="pages">4</div>
<div id="page-5" class="pages">5</div>
<div id="page-6" class="pages">6</div>
</div>
CSS
.pages{
display: none;
}
#page-1{
display: block;
}

Loading image from parent frame to child

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

Javascript - Switching Between Two Images

I have the following Javascript code which should rapidly switch between two images:
<head runat="server">
<title>Home Page</title>
<script src="Resources/jQuery.js" type="text/javascript"></script>
<script type="text/javascript">
function changeImage()
{
requestAnimationFrame(changeImage);
var url = document.getElementById('Change_Image').src;
if (url == 'Resources/Share1.bmp')
{
document.getElementById('Change_Image').src = 'Resources/Share2.bmp';
}
else
{
if (url == 'Resources/Share2.bmp')
{
document.getElementById('Change_Image').src = 'Resources/Share1.bmp';
}
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<h1>Welcome to my Website</h1>
<h2>Below you can find an example of visual cryptography</h2>
<br />
<br />
<div><img id="Change_Image" src="Resources/Share1.bmp" alt="Letter A" /></div>
</div>
</form>
</body>
</html>
Unfortunately, the code does not work and the image does not change to another one. What am I doing wrong? I am quite new to JavaScript so bear with me please?

You are using assign operator instead of comparison operator. Also use else if or just else in the second condition.
Change to
if (url == 'Resources/Share1.bmp')
and
else if (url == 'Resources/Share2.bmp')
and it should work.
See this DEMO to help you with. It toggles the image with 2 seconds interval

Your logic seems to be flawed. Look at this piece of code
var url = document.getElementById('Change_Image').src;
if (url = 'Resources/Share1.bmp')
{
document.getElementById('Change_Image').src = 'Resources/Share2.bmp';
}
And your markup is
<div><img id="Change_Image" src="Resources/Share1.bmp" alt="Letter A" /></div>
The value of url will always be Resources/Share1.bmp. Also as the other posters mentioned equality is == and not =

I see jquery is included, maybe mvc appliction?
You can make use of jquery toggle:
http://api.jquery.com/toggle/
your html:
<div class="someContainer">
<img class="Change_Image" src="Resources/Share1.bmp" alt="Letter A" />
<img class="Change_Image" src="Resources/Share2.bmp" alt="Letter B" style="display:none"/>
</div>
your javascript:
$(".someContainer").find(".Change_Image").toggle();
You want some effects
$(".someContainer").find(".Change_Image").toggle("slow");