i am creating a dynamic angular element on a new page as follows
Index.html
var openPrint = window.open('/acImageViewer/html/imageLibraries.html');
openPrint.onload = function() {
var doc = openPrint.document;
$(doc.body).html('<jqyiviewer class="filter_icon_ul viewerHeight" id="acImgViewer" src="http://www.wellclean.com/wp-content/themes/artgallery_3.0/images/car3.png" align="centre" width="auto" height="500" data="data"></jqyiviewer>');
};
this opens a new page where i have my libraries , directives and css loaded as follows (imageLibraries.html)
<html ng-app="acIViewerApp">
<head>
<meta charset="utf-8">
<title>Image viewer</title>
<link href="/acImageViewer/css/kendo.common.min.css" rel="stylesheet">
<link href="../css/new_kendo.css" rel="stylesheet">
<link href="../css/jquery.iviewer.css" rel="stylesheet">
<link href="../css/style.less" rel="stylesheet/less">
<script type="text/javascript" src="../libs/angular.min.js"></script>
<script type="text/javascript" src="../libs/less.js"></script>
<script type="text/javascript" src="../libs/jquery-1.8.3.min.js"></script><!--JQuery library-->
<script src="../libs/jquery-ui.min.js"></script><!--Jquery library -->
<script src="../libs/acImageViewer.js"></script><!--JQuery library for Imageviewer-->
<script src="../libs/kendo.all.min.js"></script><!--For Kendo Functionality -->
<script src="../libs/jquery.mousewheel.js"></script><!--JQuery library for use mouse event-->
<script src="../js/app.js"></script>
<script src="../js/directives/directives.js"></script><!--directive for iviewer-->
</head>
<body>
</body>
</html>
The body is getting dynamically generated in the index.html.
The problem is the directive.js is not replacing the jqyiviewer tag.
I am using the same tag in my index.html , here everything works fine.
I am guessing that my directive.js gets loaded and compiles 1st , after that the tag gets inserted , so it does not replace it.
Related
I have the following problem: I need to be able to add dynamically a canvas (to be precise, a specific canvas, like this one https://web.chemdoodle.com/tutorial/2d-structure-canvases/sketcher-canvas/) in .js file but my several attempts failed. I want to insert the canvas into <div id="sketcher_canvas"></div>.The canvas can be created inside script tag only, so I need to add script tags to HTML too. Here is my HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>ELN</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" src="//normalize-css.googlecode.com/svn/trunk/normalize.css" />
<link href="{{url_for('static', filename='css/main.css')}}" rel='stylesheet' type='text/css'>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="{{url_for('static', filename='js/main2.js')}}"></script>
<!-- ChemDoodle -->
<link rel="stylesheet" href="{{url_for('static', filename='ChemDoodle/install/ChemDoodleWeb.css')}}" type="text/css">
<script type="text/javascript" src="{{url_for('static', filename='ChemDoodle/install/ChemDoodleWeb.js')}}"></script>
<!--these two are required by the SketcherCanvas plugin-->
<link rel="stylesheet" href="{{ url_for('static', filename='ChemDoodle/install/uis/jquery-ui-1.10.3.custom.css')}}" type="text/css">
<script type="text/javascript" src="{{url_for('static', filename='ChemDoodle/install/uis/ChemDoodleWeb-uis.js')}}"></script>
</head>
<body>
<script>
function make_canvas(){
sketcher = new ChemDoodle.SketcherCanvas('sketcher',600,200);
};
</script>
<div id='sketcher_canvas'>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</body>
</html>
And this is my .js:
$(document).ready(function(){
// First option
$('sketcher_canvas').append('<script>make_canvas();<\/script>);
// Second option
var script = document.createElement("script");
script.type = "text/javascript";
script.text = "make_canvas()";
var div = document.getElementById('sketcher_canvas');
div.innerHTML = script.text;
});
Any comments/suggestions are highly appreciated!
It looks like you are making things more complicated than they need to be. You don't need to make a new script to call a function from another script. You can call that function with a button like so:
<script>
function make_canvas(){
var newCanvas = document.createElement("canvas");
newCanvas.id = "sketcher";
newCanvas.class = "ChemDoodleWebComponent";
document.getElementById("sketcher_canvas").appendChild(newCanvas);
sketcher = new ChemDoodle.SketcherCanvas('sketcher',600,200);
};
</script>
<button onclick="make_canvas()">Make Canvas</button>
<div id='sketcher_canvas'>
</div>
EDIT: I have updated the make_canvas function. You can see how it works in this fiddle.
I am using jquery mobile
I have 3 pages and after some clicks between the pages the css are not rendered
LoadCss.js
$(document).on("pageinit",function(event) {
$("#categoriesPage").on('pageshow', function () {
$('head').append('<link rel="stylesheet" type="text/css" href="scripts/rtl.jquery.mobile-1.4.0.css">');
$('head').append('<link rel="stylesheet" type="text/css" href="styles/myCss.css">');
});
$("#wordPage").on('pageshow', function () {
$('head').append('<link rel="stylesheet" type="text/css" href="scripts/rtl.jquery.mobile-1.4.0.css">');
$('head').append('<link rel="stylesheet" type="text/css" href="styles/myCss">');
});
$("#searchPage").on('pageshow', function () {
$('head').append('<link rel="stylesheet" type="text/css" href="scripts/rtl.jquery.mobile-1.4.0.css">');
$('head').append('<link rel="stylesheet" type="text/css" href="myCss">');
});
});
Html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta http-equiv='X-UA-Compatible' content='IE=edge'/>
<meta name="viewport" content="width=device-width"/>
<meta charset="UTF-8">
<script type="text/javascript" charset="utf-8" src="scripts/jquery.js"></script>
<script type="text/javascript" charset="utf-8" src="scripts/rtl.jquery.mobile-1.4.0.js"></script>
<script type="text/javascript" charset="utf-8" src="scripts/angular.js"></script>
<script type="text/javascript" charset="utf-8" src="scripts/lodash.js"></script>
<!--player-->
<script type="text/javascript" src="scripts/jquery.jplayer.js"></script>
<script type="text/javascript" src="video.js"></script>
<script type="text/javascript" src="mainController.js"></script>
<script type="text/javascript" src="loadCSS.js"></script>
</head>
<body>
<div ng-controller="MainCtrl as ctrl" ng-init="data=init()">
<div data-role="page" id="firstPage">
... some logic
</div>
<div data-role="page" id="secondPage">
.. sonle logic
</div>
<div data-role="page" id="thirdage">
..........
</div>
</div>
</body>
</html>
I tried also to put the CSS in the header and not on on event but it still didn't work
<link rel="stylesheet" href="scripts/rtl.jquery.mobile-1.4.0.css"/>
<link rel="stylesheet" href="styles/jplayer.pink.flag.min.css" rel="stylesheet">
Please try this method below, using the attribute method. note the order they are applied.
This will give better compatibility for all browsers too (IE has issues):
To test, don't put your JQuery code in the external LoadCSS.js file - put it into the HTML file. It should work every time. When loading from an external JS file, some events do not always trigger when you expect due to the browser caching the file.
As #nishi says, remember to remove the old CSS before adding the new ones.
$('<link>')
.appendTo('head')
.attr({type : 'text/css', rel : 'stylesheet'})
.attr('href', '/styles/myfile.css');
Hi so I'm trying to like a javascript file to my web page, when it was in the HTML file it worked fine, but I won't to neaten it up a little by putting the JS in a different file
HTML:
<head>
<meta charset="utf-8" />
<title>Digital Canvas Web Designs</title>
<link rel="stylesheet" href="/CSS/Template.css"/>
<link rel="stylesheet" href="/CSS/news.css"/>
<link rel="shortcut icon" href="images/tablogo.ico" > <!-- tab logo generated at http://www.favicongenerator.com/ -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="Javascript/newshide.js" type="text/javascript"></script>
</head>
<body>
and Javascript:
<script type="text/javascript">
$(document).ready(function(){
$("#show").click(function() {
$("#hidden").show();
});
$("#hide").click(function() {
$("#hidden").hide();
});
});
</script>
And the part of HTML where the JS should work.
<span id="show">more>></span>
<p id="hidden" hidden>COOL STORY BRO
<span id="hide">less</span> </p>
wrap all into document.ready
<script type="text/javascript">
$(document).ready(function(){
$("#show").click(function() {
$("#hidden").show();
});
$("#hide").click(function() {
$("#hidden").hide();
});
});
</script>
Also: you have another bug, change the last script for:
<script src="Javascript/newshide.js" type="text/javascript"></script>
Docs
Change this
<script src=".\Javascript\newshide.js" type="text/javascript"></script>
To this
<script src="Javascript/newshide.js" type="text/javascript"></script>
I have very simple code
<!DOCTYPE html>
<html ng-app="app">
<head>
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="assets/css/app.css" />
<script type="text/javascript" src="assets/js/angular.min.js" />
<script type="text/javascript" src="assets/js/app.js" />
</head>
<body>
asdfasdf
{{1+2}}
</body>
</html>
and I'm pretty sure everything is pointing to the right directory. My app.js is:
( function () {
var app = angular.module( 'app' , [] );
}) ();
However, opening index.html on localhost all I can see is a blank page but when I delete the lines
<script type="text/javascript" src="assets/js/angular.min.js" />
<script type="text/javascript" src="assets/js/app.js" />
I get a page that says "asdfasdf {{1+2}}" How can I get angular working? Is there a big mistake I'm making somewhere?
Script tags must have an end tag. They cannot be self-terminating.
<script type="text/javascript" src="assets/js/app.js"></script>
My understanding is that to use the plugin I need to insert this code into the header:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" href="http://dev.jquery.com/view/trunk/plugins/autocomplete/demo/main.css" type="text/css" />
<link rel="stylesheet" href="http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.css" type="text/css" />
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/lib/jquery.bgiframe.min.js"></script>
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/lib/jquery.dimensions.js"></script>
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.js"></script>
<script>
$(document).ready(function(){
var data = "Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities".split(" ");
$("#example").autocomplete(data);
});
</script>
I did that and then I put the form in the html:
self.response.out.write("""
API Reference: <input id="example" /> (try "C" or "E") """)
but nothing is happenning. What am I missing?
I'd recommend using the newer jQueryUI Autocomplete via the Google CDN.
To include it in your application, use something like this
<!-- in your <head> section -->
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/smoothness/jquery-ui.css">
The smoothness string in the URL refers to the jQueryUI theme. You can change this to whatever you want. See http://jqueryui.com/themeroller/#themeGallery
<!-- just before the closing </body> tag -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script type="text/javascript">
jQuery(function($) {
var data = [
"Core",
"Selectors",
"Attributes",
"Traversing",
"Manipulation",
"CSS",
"Events",
"Effects",
"Ajax",
"Utilities"
];
$("#example").autocomplete({
source: data
});
});
</script>
The 1 references in these URLs refer to the version number. Just using 1 means use the latest version from the 1 branch