Ons navigation (onsen UI), use of javascript code - javascript

When I use the standard technique ons-navigation, the javascript code on the ons-page does not execute. Does anyone know what I do wrong?
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user- scalable=no">
<script src="components/loader.js"></script>
<link rel="stylesheet" href="components/loader.css">
<link rel="stylesheet" href="css/style.css">
<script>
ons.bootstrap();
ons.disableAutoStatusBarFill(); // (Monaca enables StatusBar plugin by default)
</script>
</head>
<body>
<ons-navigator var="myNavigator" page="login.html">
</ons-navigator>
</body>
</html>
And here is the login.html:
<ons-page>
<script>
console.log("test11");
</script>
</ons-page>

The reason why it's not working is that the browser won't execute script tags that are added through replacing el.innerHTML, which is what Onsen does when you push a page.
Please see this question for why it's not working:
Can scripts be inserted with innerHTML?
You shouldn't use inline script tags mixed in your HTML. Please look up how to structure you're JavaScript.

Related

Include external javascript into angular

I was trying to include external javascript and html into my angular app.
Here is the author's tutorial which works in jsfiddle
<!-- header source -->
<script src="https://www.givengine.org/bower_components/webcomponentsjs/webcomponents-loader.js"></script>
<link rel="import" href="https://www.givengine.org/components/chart-controller/chart-controller.html">
<!-- embed the browser in the web page -->
<chart-controller
title-text="A 2-minute starter of building a genome browser with GIVE"
ref="hg19"
num-of-subs="2"
coordinate='["chr18:19140000-19450000", "chr18:19140000-19450000"]'
group-id-list='["genes", "CHi-C_promoter"]'
></chart-controller>
So I did it according for my angular app, added the script ref to index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>EpiMiner</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://localhost:40080/bower_components/webcomponentsjs/webcomponents-loader.js"></script>
<link rel="import" href="http://localhost:40080/components/chart-controller/chart-controller.html">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>
app.component.html
<chart-controller
title-text="A 2-minute starter of building a genome browser with GIVE"
ref="hg19"
num-of-subs="2"
coordinate='["chr18:19140000-19450000", "chr18:19140000-19450000"]'
group-id-list='["genes", "CHi-C_promoter"]'
></chart-controller>
But I got an "chart-controller is not a known element" error. Not too much experience with angular. Suggestion are appreciated. Thanks

Not able to fetch the anchor tag value using jquery

I have an .outerdiv in which dynamically html elements are added through script.
Inside that div there is an anchor for that anchor i want to bind an event or access that inner text i tried using jquery but something fails please help out.
Here goes glitch link which i have tried
UPDATE
One More thing I want to mention is I don't have control on script.js assume its like plugin . what ever i can do is through my js.
UPDATE
As per suggestions i included my alert inside document.ready still not working
> this is a script.js code which i don't have control, i cant edit this.
$(document).ready(function () {
$(".outdiv").append("<p><a href='#'>i am a link</a></p>");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello!</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- import the webpage's stylesheet -->
<link rel="stylesheet" href="/style.css">
<!-- import the webpage's javascript file -->
<script src="/jquery-3.3.1.min.js"></script>
<script src="/script.js" defer></script><!---this script i have written in js part of snippset"-->
<script>
$(document).ready(function () {
alert($(".outdiv a").text());
});
</script>
</head>
<body>
<h1>Hi there!</h1>
<p>
I'm your cool new webpage. Made with Glitch!
</p>
<div class="outdiv">
</div>
<!-- include the Glitch button to show what the webpage is about and
to make it easier for folks to view source and remix -->
<div class="glitchButton" style="position:fixed;top:20px;right:20px;"></div>
<script src="https://button.glitch.me/button.js"></script>
</body>
</html>
The issue is with script's defer attribute:
Scripts with the defer attribute will prevent the DOMContentLoaded event from firing until the script has loaded and finished evaluating.
This is ultimately causing the appending of the element after all the scripts are executed, thus in the previous script code the element is not available. Remove the attribute defer from the script tag, your script should be:
<script src="/script.js"></script>
You can place the alert after the appending the link:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello!</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- import the webpage's stylesheet -->
<link rel="stylesheet" href="/style.css">
<!-- import the webpage's javascript file -->
<script src="/jquery-3.3.1.min.js"></script>
<script src="/script.js"></script><!---this script i have written in js part of snippset"-->
<script>
$(document).ready(function () {
$(".outdiv").append("<p><a href='/tt'>i am a link</a></p>");
});
</script>
<script>
$(document).ready(function () {
alert($(".outdiv a").text());
});
</script>
</head>
<body>
<h1>Hi there!</h1>
<p>
I'm your cool new webpage. Made with Glitch!
</p>
<div class="outdiv">
</div>
<!-- include the Glitch button to show what the webpage is about and
to make it easier for folks to view source and remix -->
<div class="glitchButton" style="position:fixed;top:20px;right:20px;"></div>
<script src="https://button.glitch.me/button.js"></script>
</body>
</html>
You can try this:
$(document).ready(function () {
$(".outdiv").append("<p><a href='#'>i am a link</a></p>");
alert($(".outdiv a").text());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<head>
<title>Hello!</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- import the webpage's stylesheet -->
<link rel="stylesheet" href="/style.css">
<!-- import the webpage's javascript file -->
<script src="/jquery-3.3.1.min.js"></script>
<script src="/script.js" defer></script><!---this script i have written in js part of snippset"-->
<script>
// alert($(".outdiv a").text());
</script>
</head>
<body>
<h1>Hi there!</h1>
<p>
I'm your cool new webpage. Made with Glitch!
</p>
<div class="outdiv">
</div>
<!-- include the Glitch button to show what the webpage is about and
to make it easier for folks to view source and remix -->
<div class="glitchButton" style="position:fixed;top:20px;right:20px;"></div>
<script src="https://button.glitch.me/button.js"></script>
</body>
</html>
You are populating the a tag in document ready(when the page is completely loaded), but you're alerting the (yet not existing) contents during page load.
So just put the alert in the document ready block.
You may use the alert function inside document ready in your dynamic files
$(document).ready(function(){
alert($(".outdiv a").text());
});
Extracting the text out of the anchor tag isn't possible until the element has been added to the DOM. So, executing the script before the initialization of the element won't work.
On the other hand, you also mentioned to bind an event to that anchor tag. Well, that's possible using the on method. You can try this:
$(".outdiv").on('click', 'a', function() {
console.log('clicked');
// You can extract the text of the clicked anchor here
console.log($(this).text());
});
Use holdReady
$(document).ready(function() {
$.holdReady( true );
$.getScript( "https://button.glitch.me/button.js", function() {// you can use your script url "/script.js"
alert($(".outdiv a").text());
$.holdReady( false );
});
});
$(document).ready(function(){
$(".outdiv").append("<p><a href='#'>i am a link</a></p>");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello!</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- import the webpage's stylesheet -->
<link rel="stylesheet" href="/style.css">
<!-- import the webpage's javascript file -->
<script src="/jquery-3.3.1.min.js"></script>
<script src="/script.js" defer></script><!---this script i have written in js part of snippset"-->
</head>
<body>
<h1>Hi there!</h1>
<p>
I'm your cool new webpage. Made with Glitch!
</p>
<div class="outdiv">
</div>
<!-- include the Glitch button to show what the webpage is about and
to make it easier for folks to view source and remix -->
<div class="glitchButton" style="position:fixed;top:20px;right:20px;"></div>
<script src="https://button.glitch.me/button.js"></script>
<script>
$(document).ready(function() {
$.holdReady( true );
$.getScript( "https://button.glitch.me/button.js", function() {
alert($(".outdiv a").text());
$.holdReady( false );
});
});
</script>
</body>
</html>

Visual studio not recognizing src attribute when trying to refer to the index.js file

I am writing my javascript code in the file "index.js". When I use the src attribute in the "index.html" file it is not working. I am using visual basic editor.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script> src="index.js" </script>
</body>
</html>
When I run live server I would like for it to execute the code in both files.
When using the <script> tag, you should use the src as an attribute, not Html Content.
So instead of doing:
<script> src="index.js" </script>
You should do:
<script src="index.js"></script>
To learn more about attributes, I highly suggest looking it up on sites such as w3schools.
As SLasks mentioned in the comment, srcis an attribute not a content meaning your scripttag should like this:
<script src="index.js"> </script>

Integrate widget in existing html without css conflict

I have to integrate widget html file in a existing html page but i am getting many css issue after this. Is there any way that i can restrict css files of main html not to apply on widget html file.
**Sample html :**
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" class="csstransforms" lang="ru" >
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link href="abc.css" media="screen" rel="stylesheet" type="text/css"/>
<script src="abc.js" type="text/javascript"></script>
</head>
<body>
<!-- WIDGET CODE-->
<!DOCTYPE html>
<html lang="en" ng-app="adidas" bb-api-url="https://adidas-dev.bookingbug.com">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link href="def.css" media="screen" rel="stylesheet" type="text/css"/>
<script src="defjs" type="text/javascript"></script>
</head>
<body>
.......widget html code
</body>
</html>
<body>
</html>
With HTML you are not allowed to have two HTML documents in a single file.
One approach to solve this is by using an iframe in your main HTML:
<iframe src="widget.html"></iframe>
So you create your widget in its own HTML file with its own styles and javascript scripts, and embed it in your main HTML file using the iframe (then your widget is completely isolated from your main HTML scripts and styles and not be affected by them).
Another approach will be to create a separate CSS for you widget and include it in your main HTML, then insert your widget's markup only (without the html and body tags) in your main HTML body.
In your widget CSS file you should create a "namespace" for you widget's style that will not collide with the rest of your CSS by doing something like this:
.my-widget-name {
// your widget styles
}
.my-widget-name span.name {
// your widget style
}
.my-widget-name .box {
// your widget style
}
.......
.......
(I usually like to use something like LESS, but shown above is a traditional CSS example)
"my-widget-name" should be a unique class name that only your widget is using, and by sub-classing all of your widget styles under this class name, you are basically isolating it from the rest of your CSS.
Hope it helps a bit

jQuery + jQuery mobile load script twice when script tag is emebedded in body

i have found a strange behavior when i was learning jQuery Mobile. below is my test code. the firebug shows the "test.js" was loaded twice if i put the script tag in body(even the "test.js" is empty). is this a bug or we could not put script tag in body when we are using jquery mobile?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<title>test</title>
<link href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
</head>
<body>
<script type="text/javascript" src="/test.js"></script>
</body>
</html>
I had the same problem, put all your javascript in the head. This solved the issue for me.
I've never ran into such issues, but try adding the script tag AFTER the element (but before the ) one), or even better, load it dymically after the pagecreate event.

Categories