Develop Reference

Javascript Url issue in new frame

I have a JavaScript issue. I am using it to open an HTML web page in a new frame with the following function:
function openBranch(url) {
if (url == "Ping") {
top.folderFrame.location = "Ping.html"
} else if (url == "Logout") {
top.top.location = "Logout.html"
}
}
HTML usage:
<a href='javascript:openBranch("Ping")'>Ping</a>
I am unable to open another web page in my side menu bar once my Ping.html page is processed (Post request is used). My side menu bar is unable to open the new page and is not able to process any request.

It looks like the argument of the function changes the source of the document. If you want to just change the source, why don't you just do something like this:
<iframe src="test1.html" id="top"></iframe>
change to 1
change to 2
<script>
function change(val) {
if (val === 1) {
document.getElementById("top").src = "test1.html";
} else {
document.getElementById("top").src = "test2.html";
}
}
</script>

AJAX and JavaScript script loader

I would like to know how to load JavaScript file after loading of page via AJAX?
The problem is:
I have music player which uses JS file whith infomation about tracks.
After that I load page all works nice. But when I load another page via AJAX my script doesn't work at page which I called.
Code looks like this:
function showContent(link,link2) {
var cont = document.getElementById('content');
var loading = document.getElementById('loading');
window.history.replaceState('', 'Title', link2);
var http = createRequestObject();
if( http ) {
http.open('get', link);
http.onreadystatechange = function () {
if(http.readyState == 4) {
cont.innerHTML = http.responseText;
}
}
http.send(null);
} else {
document.location = link;
}
}
function createRequestObject() {
try { return new XMLHttpRequest() }
catch(e) {
try { return new ActiveXObject('Msxml2.XMLHTTP') }
catch(e) {
try { return new ActiveXObject('Microsoft.XMLHTTP') }
catch(e) { return null; }
}
}
}
Then I use angular-soundmanager2.js to make player alive.
And this cut of code won't work at page which I load after linking to this page
<h5>Songs</h5>
<ul>
<li ng-repeat="song in songs">
<button music-player="play" add-song="song">{{ song.title }}</button>
<button music-player add-song="song">+</button>
</li>
</ul>
<button play-all="songs">Play all</button>
<button play-all="songs" data-play="false">Add all</button>
It has to show me playlist. But I get nothing.

You must be binding the DOM element with javascript. On document ready you call something like this, $('#someDiv').makePlayer(). So, page loads it works fine. But when you make ajax, I guess you are replacing that page content on ajax. If you are removing and loading the DOM element again on which you called the makeplayer() earlier. You have to call makePlayer thing again after your ajax call.

'load' event not firing when iframe is loaded in Chrome

I am trying to display a 'mask' on my client while a file is dynamically generated server side. Seems like the recommend work around for this (since its not ajax) is to use an iframe and listen from the onload or done event to determine when the file has actually shipped to the client from the server.
here is my angular code:
var url = // url to my api
var e = angular.element("<iframe style='display:none' src=" + url + "></iframe>");
e.load(function() {
$scope.$apply(function() {
$scope.exporting = false; // this will remove the mask/spinner
});
});
angular.element('body').append(e);
This works great in Firefox but no luck in Chrome. I have also tried to use the onload function:
e.onload = function() { //unmask here }
But I did not have any luck there either.
Ideas?

Unfortunately it is not possible to use an iframe's onload event in Chrome if the content is an attachment. This answer may provide you with an idea of how you can work around it.

I hate this, but I couldn't find any other way than checking whether it is still loading or not except by checking at intervals.
var timer = setInterval(function () {
iframe = document.getElementById('iframedownload');
var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
// Check if loading is complete
if (iframeDoc.readyState == 'complete' || iframeDoc.readyState == 'interactive') {
loadingOff();
clearInterval(timer);
return;
}
}, 4000);

You can do it in another way:
In the main document:
function iframeLoaded() {
$scope.$apply(function() {
$scope.exporting = false; // this will remove the mask/spinner
});
}
var url = // url to my api
var e = angular.element("<iframe style='display:none' src=" + url + "></iframe>");
angular.element('body').append(e);
In the iframe document (this is, inside the html of the page referenced by url)
window.onload = function() {
parent.iframeLoaded();
}
This will work if the main page, and the page inside the iframe are in the same domain.
Actually, you can access the parent through:
window.parent
parent
//and, if the parent is the top-level document, and not inside another frame
top
window.top
It's safer to use window.parent since the variables parent and top could be overwritten (usually not intended).

you have to consider 2 points:
1- first of all, if your url has different domain name, it is not possible to do this except when you have access to the other domain to add the Access-Control-Allow-Origin: * header, to fix this go to this link.
2- but if it has the same domain or you have added Access-Control-Allow-Origin: * to the headers of your domain, you can do what you want like this:
var url = // url to my api
var e = angular.element("<iframe style='display:none' src=" + url + "></iframe>");
angular.element(document.body).append(e);
e[0].contentWindow.onload = function() {
$scope.$apply(function() {
$scope.exporting = false; // this will remove the mask/spinner
});
};
I have done this in all kinds of browsers.

I had problems with the iframe taking too long to load. The iframe registered as loaded while the request wasn't handled. I came up with the following solution:
JS
Function:
function iframeReloaded(iframe, callback) {
let state = iframe.contentDocument.readyState;
let checkLoad = setInterval(() => {
if (state !== iframe.contentDocument.readyState) {
if (iframe.contentDocument.readyState === 'complete') {
clearInterval(checkLoad);
callback();
}
state = iframe.contentDocument.readyState;
}
}, 200)
}
Usage:
iframeReloaded(iframe[0], function () {
console.log('Reloaded');
})
JQuery
Function:
$.fn.iframeReloaded = function (callback) {
if (!this.is('iframe')) {
throw new Error('The element is not an iFrame, please provide the correct element');
}
let iframe = this[0];
let state = iframe.contentDocument.readyState;
let checkLoad = setInterval(() => {
if (state !== iframe.contentDocument.readyState) {
if (iframe.contentDocument.readyState === 'complete') {
clearInterval(checkLoad);
callback();
}
state = iframe.contentDocument.readyState;
}
}, 200)
}
Usage:
iframe.iframeReloaded(function () {
console.log('Reloaded');
})

I've just noticed that Chrome is not always firing the load event for the main page so this could have an effect on iframes too as they are basically treated the same way.
Use Dev Tools or the Performance api to check if the load event is being fired at all.
I just checked http://ee.co.uk/ and if you open the console and enter window.performance.timing you'll find the entries for domComplete, loadEventStart and loadEventEnd are 0 - at least at this current time:)
Looks like there is a problem with Chrome here - I've checked it on 2 PCs using the latest version 31.0.1650.63.
Update: checked ee again and load event fired but not on subsequent reloads so this is intermittent and may possibly be related to loading errors on their site. But the load event should fire whatever.
This problem has occurred on 5 or 6 sites for me now in the last day since I noticed my own site monitoring occasionally failed. Only just pinpointed the cause to this. I need some beauty sleep then I'll investigate further when I'm more awake.

How can I submit two forms on single click?

I have to submit two forms; one is on the page, while the other is coming through combo change event using jquery. I have to get both of these forms values on the same page. Please help me I have already wasted much time.
My code looks like this:
this function which i'm calling on the button click to submit both forms
function forms_submit()
{
document.form1.submit();
document.form2.submit();
}

You cannot submit two forms.. since your are in a browser, you can only end to one page.. and it depends on which form you submit.. (unless you go the ajax way)
perhaps you want to merge the forms in a single form in your HTML..
Give some more info/code to get some more specific answers..

You can use XMLHTTPRequest to send both forms, (but that requires two requests you'd be wasting instead of one)
I would recommend joining the forms together.
anyways a codesample,
btnSubmitBoth.onclick = function () {
var xmlReq,
data = getFormsData(); // needed to be in format of "something=1&sometinelse=2"
if (typeof XMLHttpRequest !== 'undefined' && (window.location.protocol !== 'file:' || !window.ActiveXObject)) {
xmlReq = new XMLHttpRequest();
} else {
try {
xmlReq = new ActiveXObject('Msxml2.XMLHTTP.6.0');
} catch(e) { }
try {
xmlReq = new ActiveXObject('Msxml2.XMLHTTP.3.0');
} catch(e) { }
try {
xmlReq = new ActiveXObject('Msxml2.XMLHTTP');
} catch(e) { }
}
xmlReq.open("post", url, true);
xmlReq.send(data);
}

If your submit your reason, probably I could submit your 2 forms
-----------edited--------------
var whatever ='<span id='updated_values'><input type=hidden></span>';
use $('#div').append(whatever);
Each time you select a category trigger the whatever to append the an existing form as hidden form type, you need to catch the variables at time of form submission.
Hope this solves your issue.

Getting setting cookies on different domains, with JavaScript or other

I need to set/get the cookies stored at first.example while browsing second.example, I have full access of first.example but I only have JavaScript access (can manipulate the DOM as I want) on second.example.
My first approach was to create an iframe on second.example (with JS) that loaded a page like first.example/doAjax?setCookie=xxx and that did an AJAX call to say first.example/setCookie?cookieData=xxx which would set the cookie on first.example with the data we passed around.
That pretty much worked fine for setting the cookie on first.example from second.example - for getting a cookie I basically followed the same procedure, created the iframe that loaded first.example/doAjax?getCookie and that would do an AJAX call to say first.example/getCookie which would read the cookie info on first.example and return it as a JSON object.
The problem is that I'm unable to bring that JSON cookie object back to second.example so I can read it, well maybe I could just bring it when the AJAX call is complete using "window.top" but there's timing issues because its not relative to when the iframe has been loaded. I hope I am clear and was wondering if there's an easier solution rather than this crazy iframe->ajax crap, also seems like this won't even work for getting cookies in SAFARI.

You could inject a script element into HEAD of the document with a callback that passes the cookie you need to whatever function needs it.
Something like:
<script type="text/javascript">
var newfile=document.createElement('script');
newfile.setAttribute("type","text/javascript");
newfile.setAttribute("src", 'http://first.com/doAjax?getCookie&callback=passCookie');
document.getElementsByTagName("head")[0].appendChild(newfile);
</script>
And the page first.com/doAjax?getCookie could do this:
passCookie({'name':'mycookie', 'value':'myvalue'});

Put this PHP-File to first.com:
//readcookie.php
echo $_COOKIE['cookiename'];
On second.com you can use this javascript to get the value:
function readCookieCallback()
{
if ((this.readyState == 4) && (this.status == 200))
{
alert("the value of the cookie is: "+this.responseText);
}
else if ((this.readyState == 4) && (this.status != 200))
{
//error...
}
}
function buttonClickOrAnything()
{
var refreshObject = new XMLHttpRequest();
if (!refreshObject)
{
//IE6 or older
try
{
refreshObject = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
refreshObject = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
return;
}
}
}
refreshObject.onreadystatechange = readCookieCallback;
refreshObject.open("GET", "http://www.first.com/readcookie.php");
refreshObject.send();
}
Regards,
Robert

For SETTING cookies you can change my script as follows:
The new PHP-Script:
//writecookie.php
setcookie($_GET['c'], $_GET['v']);
And the JavaScript:
function buttonClickOrAnything()
{
var refreshObject = new XMLHttpRequest();
if (!refreshObject)
{
//IE6 or older
try
{
refreshObject = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
refreshObject = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
return;
}
}
}
refreshObject.open("GET", "http://www.first.com/writecookie.php?c=cookiename&v=cookievalue");
refreshObject.send();
}
That should work on all browsers.