Here not working
https://plnkr.co/edit/a7H1ilzkUA3918vc?open=lib%2Fscript.js&deferRun=1
But here in similar example - works, from which I am trying to do:
https://plnkr.co/edit/XLSL581pjgwe3PI1?open=lib%2Fscript.js&deferRun=1
page1.js
export function myAlert() {
alert("car");
}
script.js
import { myAlert } from "./page1.js";
window.onload = myAlert;
index.html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="lib/style.css" />
<script src="lib/script.js"></script>
</head>
<!-- <body ng-app="plunker" ng-cloak>
<div ng-controller="MainCtrl">
<h1>Hello {{name}}</h1>
<p>Start editing and see your changes reflected here!</p>
</div>
</body> -->
</html>
package.json
{
"name": "#plnkr/starter-angularjs",
"version": "1.0.1",
"description": "AngularJS starter template",
"dependencies": {
"angular": "^1.6.9"
},
"plnkr": {
"runtime": "system",
"useHotReload": false
}
}
Alert message is not displayed.
By #Nick Parsons comment:
<script type="module" src="lib/script.js"></script>
This works.
Related
I'm making a desktop program with Python Eel. I'm having a trouble. My code is very simple.
main.py:
import sqlite3, eel
eel.init('UI')
#eel.expose
def get_data():
return "I got it"
eel.start('index.html')
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./vendor/bootstrap.css">
<title>Müşteri Takip</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-12 text-center">
<h2 id="hh2">degiscen mi!</h2>
<input id="buton" type="button" value="Button">
</div>
</div>
</div>
</body>
<script type="text/javascript" src="/eel.js"></script>
<script src="./vendor/jquery.js"></script>
<script src="index.js"></script>
</html>
index.js:
async function yo() {
document.getElementById('hh2').innerHTML = eel.get_data()();
}
$('#buton').click(function() {
yo();
})
But when I click button, this is what it changes to:
Why is this happening? It is super simple code.
The issue is that "eel.get_data()" returns a promise and not the desired value. To fix this, you must use the ".then()" method to wait for the promise to resolve and then assign its value to "hh2". Here's the corrected code:
index.js:
async function yo() {
eel.get_data().then(function(data) {
document.getElementById('hh2').innerHTML = data;
});
}
$('#buton').click(function() {
yo();
})
Best!
I can print the image URL, but I can't get the img tag to display it, though I think I've bound it correctly.
<html>
<head>
<title>Split VueJS Demo</title>
<script type="importmap">
{
"imports": {
"vue": "https://unpkg.com/vue#3/dist/vue.esm-browser.js"
}
}
</script>
<script type="module">
import { createApp } from 'vue'
createApp({
data() {
return {
image: 'http://www.cortazar-split.com/dog_origin.jpeg'
}
}
}).mount('#app');
</script>
</head>
<body>
<div>
<div id="app">{{ image }}</div>
<img id="app" :src="image"/>
</div>
</body>
</html>
Why doesn't the img tag render the image at the provided URL?
You need to move the img tag inside the div with id="app".
You should never have the same id name used twice in your markup.
The mount method will use the first one found in your markup and ignore any subsequent elements with the same id name.
<html>
<head>
<title>Split VueJS Demo</title>
<script type="importmap">
{
"imports": {
"vue": "https://unpkg.com/vue#3/dist/vue.esm-browser.js"
}
}
</script>
<script type="module">
import { createApp } from 'vue'
const data = {
image: 'http://www.cortazar-split.com/dog_origin.jpeg'
}
console.log(data);
createApp({
data() {
return data;
}
}).mount('#app');
</script>
</head>
<body>
<div>
<div id="app">
{{ image }}
<img :src="image"/>
</div>
<!-- This is outside the scope of the app: -->
<!-- <img id="app" :src="image"/> -->
</div>
</body>
</html>
I am new to javeScript and I am creating a website with slideshow feature. I want "when the user click the forward or backward button, the slideshow URL will change to "slideshow/img#1, slideshow/img#2, etc", but it is still a single page application." Can anyone give some idea? Thank you.
Note: This is not a homework or any academic work, but just my personal project.
There is a slider in angularjs which can be used by injecting ui.bootstrap.
Working plunker: https://plnkr.co/edit/aTl515SYqSawOk6f97RM?p=preview
script.js
angular.module('app', ['ui.bootstrap']);
function CarouselDemoCtrl($scope){
$scope.myInterval = 3000;
$scope.slides = [
{
image: 'http://lorempixel.com/400/200/'
},
{
image: 'http://lorempixel.com/400/200/food'
},
{
image: 'http://lorempixel.com/400/200/sports'
},
{
image: 'http://lorempixel.com/400/200/people'
}
];
}
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap-tpls.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div ng-app="app">
<div ng-controller="CarouselDemoCtrl" id="slides_control">
<div>
<carousel interval="myInterval">
<slide ng-repeat="slide in slides" active="slide.active">
<img ng-src="{{slide.image}}">
<div class="carousel-caption">
<h4>Slide {{$index+1}}</h4>
</div>
</slide>
</carousel>
</div>
</div>
</div>
</body>
</html>
I'm trying to call a function in click function from my html page ,
added all typescript definition files from nuget but something is going wrong
My Click Function is not Working .... No error in console even
Here is my Hrml and Controller Code
Html Page
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="Scripts/angular.js"></script>
<script src="test.js"></script>
<title></title>
</head>
<body ng-app="testModule">
<div ng-controller="test">
<input type="button" ng-click="click()" value="test" />
</div>
</body>
</html>
Controller
angular.module("testModule", []);
class test {
constructor() { }
click() {
alert();
}
}
angular.module("testModule").controller("test", test );
This does not work because ng-click="click()" tries to call $scope.click() which is not defined.
I would highly advise you to use the controller as-Syntax when working with AngularJS and Typescript
Demo
Here is the corrected code. Don't mark this as the answer, #Aides got here before me.
Html Page
<!DOCTYPE html>
<html> <!-- its 2016 -->
<head>
<script src="Scripts/angular.js"></script>
<script src="test.js"></script>
<title></title>
</head>
<body ng-app="testModule">
<div ng-controller="Test as test">
<input type="button" ng-click="test.click()" value="test" />
</div>
</body>
</html>
Controller
angular.module("testModule", []);
class Test {
click() {
alert();
}
}
angular.module("testModule").controller("Test", Test );
I am trying to load the ace editor from a CDN with requirejs.
Here is a plunkr which illustrates my problem. Ace is not defined in the following case:
requirejs.config({
paths: { ace: ['//cdnjs.cloudflare.com/ajax/libs/ace/1.1.9/ace'] }
})
$('h1').text("loading ace...");
requirejs([ 'ace'], function(ace) {
$('h1').text("ace loaded.")
console.log(ace)
ace.edit('#editor')
return
})
you need to define ace as a path to the folder that contains ace.js
and require "ace/ace"
requirejs.config({
paths: { ace: ['//cdnjs.cloudflare.com/ajax/libs/ace/1.1.9/'] }
})
$('h1').text("loading ace...");
requirejs(['ace/ace'], function(ace) {
$('h1').text("ace loaded.")
console.log(ace)
ace.edit('editor')
})
<!DOCTYPE html>
<html>
<head>
<script src="http://requirejs.org/docs/release/2.1.14/minified/require.js"></script>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
</head>
<body>
<h1>Hello Plunker!</h1>
<div id='editor' style="height:200px"></div>
</body>
</html>