My JSP is calling from a backbone application. In this JSP, I have CSS and script tags. But some how My script is not loading first in Backbone app. Same JSP is working in Java application, but not backbone application. I tried several things like keeping script in starting of the page and end of the page. But no luck.
Is there anyway I can execute JSP script first in backbone?
I would like to execute window.location.replace(url) first from below code when ever this jsp is loaded from backbone app. But currently it is loading CSS first and redirecting another page, this is causing page delay before redirecting
<script>
var entitle = "${Data.entitle}";
var optIn = "${OptIn}";
var isModel = ("${Data.Model}" == "true") ? false : true;
if(entitle == "true" && optIn == "IN") {
showWindow("some url", true);
}
function showWindow(url, isModel) {
if(isModel) {
var newWindow = window.open(url,'name','height=800, width=1200, resizable=yes, scrollbars=yes');
//popup is blocked
if(!newWindow){
//Some Logic
});
}
else if (window.focus) {
newWindow.focus();
}
}
else {
window.location.replace(url);
}
return false;
}
}
</script>
<style type="text/css">
// My styles
</style>
<div class="ticket">
// My HTML content
</div>
Related
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>
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.
I have a page that I am dynamically injecting html into this page via Jquery AJAX. This html includes script/link tags to include js/css. Right now, I'm running into an issue because my initPage() function is running before the script that contains the initPage() definition has loaded.
Here's an example of my html that I am receiving from the AJAX call:
<script type='text/javascript' src='//domain.com/js/fillip.js'></script>
<script type='text/javascript' src='//domain.com/js/fillip2.js'></script>
<link href='//domain.com/css/fillip.css' rel='stylesheet'>
<iframe src='//domain.com/mypage'></iframe>
<script type='text/javascript'>
$(function(){
initPage();
});
</script>
I need to figure out a way to run some javascript via a callback/promise after my scripts have loaded. Sometimes I will only need one script to be loaded, other times, I'll need multiple scripts loaded. Bonus points for including the ability to wait for CSS files.
How can I wait for a dynamic set of js/css files to load before initializing the rest of my JS code?
The script tags are basically processed in order they are defined in the document, assuming all the scripts are defined in the 'head' section of the document.
at the end of the document ( where you already have a function call to init ).
enclose that call under
$(document).ready(function() {
initPage();
}
Another approach can be to load the scripts via a control sequential mechanism by loading into the document one by one..
function loadMyJavaScript(jsPath, cb) {
var loaded = false;
// create a script element and add it to the head of the document.
var script = document.createElement('script');
// Define 3 handlers, which will perform the callback
script.onload = successHandler;
script.error = errorHandler;
script.onreadystatechange = stateHandler;
script.src = path;
document.getElementsByTagName("head")[0].appendChild(jsScript);
function successHandler() {
if ( false == loaded ) {
loaded = true;
cb(path, "success");
}
}
function errorHandler() {
if ( false == loaded ) {
loaded = true;
cb(path, "error");
}
}
function stateHandler() {
var status;
if ( false == loaded ) {
status = script.readyState;
if ( status === "complete" ) {
successHandler();
}
}
}
}
further you can call this function and assign callback as well.
loadMyJavaScript("http path of the script", function(path, status) {
if ( status == "success") {
you can load the next one or
call your initPage();
}
});
I'm facing problem in redirecting to html page. My scenario is :
I have two pages named First.html & Second.html. Second.html contains a link to go back i.e previous page. i have define <b>href=""</b> attribute of that link. And i call a JavaScript function goBack() on it's onClick() event. And in that I written code to redirect using <b>window.location.href</b>. Bcoz, I want to do something like below :
1. When request came from First.html, i have to go back to First.html from Second.html
2. When request came from Second.html, i have to go to same page, i.e., Second.html. Second.html's div's contents are changes dynamically using JavaScript, but the page is same.
I have tried following options :
window.location.href
document.location.href
location.href
window.url
window.location.replace(url)
location.assign(url);
Any help would be greatly appreciated.
Thanks
i got solution by myself.
In first.html
<a href="Second.html?p=First">
In Second.html
Back
<script>
var p = window.location.href;
var pre = p.substring(p.lastIndexOf('?') + 3, p.length);
var same = "";
//It changes the contents of Second.html' div tag
someFunction()
</script>
In js file
There is an event on button which come by calling someFunction(), in that
$(document).on('click', '.button1', function() {
// some extra code
same = "Second";
}
var diff;
function goBack() {
if (same == "First") {
diff = pre;
pre = same;
}
if (pre == same) {
location.href = "Second.html?p=" + diff;
same = "";
} else if (pre != 'Second') {
location.assign("" + pre + ".html");
diff = pre;
} else {
location.assign("" + diff + ".html");
}
return false;
}
I have an app that loads a page inside an iframe. Everything works well.but i am at a stage when i need to redirect to another site and its still loading this 'external site inside my frame'...this isn't what i want. How do i get rid of the frame as i no longer have need for it.
here's my controller action where i'm redirecting:
public ActionResult Finish()
{
if(!string.IsNullOrEmpty(Url))
{
string url = string.Format("{0}?code={1}",Url,code);
return Redirect(url);
}
return RedirectToAction("Index");
}
I added the iframe in my view like this:
<div>
<iframe id="paymentFrame" width="600px" height="670px" scrolling="auto" frameborder="0" src='#Url.Action("myForm")'></iframe>
</div>
<script type="text/javascript">
function sendISWPostData() {
$("#paymentFrame").load(function () {
var doc = this.contentDocument;
var form = doc.getElementById('form1');
var actionUrl = '#ViewBag.WebPayUrl';
form.action = actionUrl;
$(this).contents().find(':input[name=cust_name]').val('#ViewBag.CustName');
$(this).contents().find(':input[name=cust_id]').val('#ViewBag.CustNumber');
form.submit();
//return true;
}); //end load
} // end send
$(document).ready(function () {
sendISWPostData();
//return true;
});
Using pure javascript, within the iframe page, following line will redirect/replace the parent window:
self.parent.location.replace('www.google.com');