PHP Redirect breaking iframe communication with parent - javascript

Can't seem to find anyone to figure this out. Just trying to get <iframe> BTN to talk to parent.
Simple problem, need to get a button inside an <iframe> to call function on main.html.
The setup is as follows:
main.html has <iframe> with products.php inside.
Products.php has button that loads confirmation.php
Confirmation.php has the BUTTON we need to call function on parent.
all files are on the same server/domain
The traditional method of button inside products.php changing src on main to confirmation.php works as expected.
The problem is happening here: On products.php the way it loads the confirmation page is with this:
private $base_url = "https://xxxxxxxx.com/";
$returnURL = $this->base_url . "confirmation.php";
Products page <form> submission calls this PHP. This action is somehow embedding the confirmation page, or appending it in a way it can't communicate with parent.
Button & function on confirmation.php:
<button type="button" onClick="test()">BACK</button>
<script>
function test() {
parent.mainTest();
}
</script>
All of the below have been tested in confirmation page func and failed.
parent.mainTest();
window.parent.mainTest();
document.parent.mainTest();
parent.document.getElementById('iframe1_id').src = "iframeTest.php";
window.parent.frames["iframe1"]
Script on main.html:
<script>
function test (){
alert("Worked");
}
</script>
<iframe src="products.php" id="iframe1_id" name="iframe1"></iframe>

Related

Javascript: Load an HTML page with button click

I have a button defined in HTML.
I want to load a page background.html when this button is clicked. But I want to do it from javascript, not from inside the .html file. So on my register.js file I have below:
$(document).ready(function() {
$("#btnApply").click(function() {
window.open("background.html");
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" id="btnApply" value="Register">
But this doesn't load the page. What am I missing?
<input type = "button" id = "btnApply" value = "Register" onclick="loadPage()">
then the function could be in your register.js file as :
function loadPage()
{
window.location="background.html";
}
It might be because popups are blocked on that page. All you need is to allow them (a screenshot from Chrome):
And ensure that you:
Run this code in the browser (otherwise you will not have window object)
background.html is in the same folder as your script
The open() method opens a new browser window. If you want it to load from the same window use location object.
window.location.assign("background.html");

Asp.net:show loading image before page loads for the first time

i am trying to display a loading image when the page is loading.Here is my code.
<body onunload="doHourglass();" onbeforeunload="doHourglass();" onload="setTimeout('show()',2000);">
<div id="divWait" style="display:none" >
<h1>wait...</h1>
</div>
<div id="main" style="display:none">
<asp:Button ID="btnHidden" runat="server" OnClick="code behind handler"
<div/>
<script>
function doHourglass()
{
console.log("inside dohour glass");
var divwait=document.getElementById('divWait');
var divmainpage=document.getElementById('main');
divmainpage.style.zIndex="0";
divwait.style.zIndex="1";
divwait.style.display='inline';
divmainpage.style.display='none';
setTimeout("show()",2000);
}
function show()
{
console.log("inside show");
var divwait=document.getElementById('divWait');
var divmainpage=document.getElementById('main');
divmainpage.style.zIndex="1";
divwait.style.zIndex="0";
divwait.style.display='none';
divmainpage.style.display='inline';
}
</script>
</body>
Problem is, it is not working when the page is loading for the first time.when i checked using console.log() i see for the first time control is not going inside doHourGlass() function.but for button click event it is working perfectly.
Things i tried:checked this link on SO, but i am not putting static html.I am trying to get the id of an html element and then working on that element so i can not use that solution.
Edit:one way i found is to keep divwait visible and hide main division then show main div when the page loads.but this way i can only display static html.i want to be able to call a function when page is loading for first time.
what is happening?is there a way to achieve it?please guide me.

Temporarily changing HTML structure on the same page in PHP when submit button is clicked?

I have PHP page that have submit button to another URL.
I want to reload the current page after the submit button clicked, and add div to the HTML.
My page url is: /foo.php, and in the HTML I have:
<button onclick="$.get('/bar', function() { ... })">Submit</button>
As you can see the form sends request to /bar page.
I want to reload the /foo.php (the current page), and change the HTML to:
<button onclick="$.get('/bar', function() { ... })">Submit</button>
<div>Thank you!</div>
My problem is how can I know that the user click on the button and the refresh was because the click, and not because just navigating.
Another thing, if it possible, I want that the new div will disappear if the user refresh the page again.
Why don't you just append the div in the success callback of the get function? You wouldn't have to reload the page.
<div id="btn_area">
<button onclick="$.get('/bar', function() { $('#btn_area').append($('<div>').html('Thank You');)})">Submit</button>
</div>
By the way, i hardly recommend to separate the javascript from the html and not put it directli in the DOM.
Another Method would be, to fire an additional form with a hidden parameter to the same side. After that, you check on the serverside the hidden parameter and display the div.
A third method is, to set a cookie in the Callback, reload the side, check the cookie, display the div and remove the cookie again.
In my opinion, the first mentioned option (add the div directly in the callback without reloading) would be by far the 'prettiest', but of course i don't know what else is going on on your site
Alternatively, you could simulate a flash session (one time use session) if you opt to do this in PHP. Consider this example:
foo.php
<?php session_start(); ?>
<form method="POST" action="bar.php">
<button type="submit" name="thank_you">Submit</button>
</form>
<?php if(isset($_SESSION['thank_you'])): ?>
<?php unset($_SESSION['thank_you']); ?>
<h1>Thank You!</h1>
<?php endif; ?>
bar.php
<?php
session_start();
if(isset($_POST['thank_you'])) {
$_SESSION['thank_you'] = true;
// processes
header('Location: foo.php');
}
?>
Demo
You can handle that in js side. Just make your request, and in callback, you can manipulate dom. You can see below;
<button>Submit</button>
$("button").on("click", function() {
var $button = $(this);
$.get("/echo/html", function() {
$button.after("<div>Thank you!</div>");
});
});

How to call LinkedIn authorize javascript from button

This line of sample code from LinkedIn API works perfectly.
<script type="IN/Login" data-onAuth="loadData"></script>
but it runs automatically as the web page loads. I'd like to invoke this script using a button or link on a webpage. The idea being that the webpage loads and waits until the user is ready to authenticate.
Ideally I would like the LinkedIn Login image to appear, and wait, until clicked.
Thanks.
Based on your comment, it looks like you only want to display the SignIn plugin if the user has manually clicked a button/element on the page. Something like this, using jQuery, should work:
On your page, you have a button:
<div id="buttonControl">
<input type="button" id="showLinkedIn" value="Show LinkedIn" onclick="showLinkedIn();" />
</div>
<div id="buttonContent" style="display: none;"></div>
In a script block in the <head> of the page, you have the showLinkedIn() onclick function:
function showLinkedIn() {
// insert the SignIn plugin
$('#buttonContent').html('<script type="IN/Login" data-onauth="loadData"><\/script>');
// tell the LinkedIn JavaScript code to re-parse the element containing the SignIn plugin
IN.parse($('#buttonContent')[0]);
// hide button trigger, if needed
$('#buttonControl').hide();
// show the LinkedIn control
$('#buttonContent').show();
}
$('#buttonControl').click(function(){
$('#buttonContent').html('<script type="IN/Login" data-onauth="loadData"></script>');
$('#buttonControl,#buttonContent').toggle();
IN.User.authorize(loadData);
});
slightly different as the 'IN.parse($('#buttonContent')[0]);' does not seem to work...
tested 'IN.User.authorize(loadData)' and it works well! Got it from: http://developer.linkedin.com/documents/inauth-inevent-and-inui
You need to clear the cookies from the following method like
IN.User.logout(callbackFunction, callbackScope);
You need to call this function on that button from which you want to log out.
Example using jquery:
$('#demo') .click(function()
{
IN.User.logout(console.log("logged out..."));
});

How to rewrite all the current page with Ajax?

I have created a simple page with a button on the center.
Now I want that when I click the button then the current page is completly rewritten with new HTML and Javascript code loaded from the server.
How can I do this with ajax ?
Suggestion: post with a normal form and reload the page. If you're reloading the entire page anyway, you're doing away with all the benefits of AJAX anyway, best to reload the entire page, for example:
<form action="otherpagr.html">
<input type="submit" value="Click me" />
</form>
AJAX is for replacing part of a page to reduce the overhead...but if you're replacing say the entire <body> it's easier to just load the page you're going to.
Nick is right with what he says, but if there's no other way:
$('a').click(function() {
$('body').load("test.html");
});
EDIT: Making sure load only fetches content inside the <body> Tag from the remote adress. For me it didn't work to fetch only the <body> tag by defining body => load('test.html body')
To animate the page you could do something like this:
$('a').click(function() {
$('body').load("test.html", function() {
$(this).hide().fadeIn(2000);
});
});
but then I suggest to implement at least one wrapper-element.

Categories