i am trying to develop a multipage app where i will be able to load many page but my task is to when loading page #2 i need the page2 function hello to run.
when clicking on func "change" i am able to load page2 but i need to run function "hello".
main.js
var pagesHistory = [];
var currentPage = {};
var path = "";
var busyIndicator = null;
function wlCommonInit(){
busyIndicator = new WL.BusyIndicator();
// Special case for Windows Phone 8 only.
if (WL.Client.getEnvironment() == WL.Environment.WINDOWS_PHONE_8) {
path = "/www/default/";
}
$("#pageload").load(path + "pages/page1.html", function(){
$.getScript(path + "js/page1.js", function() {
if (currentPage.init) {
currentPage.init();
}
});
});
}
index.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
<!--
<link rel="shortcut icon" href="images/favicon.png">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
-->
<link rel="stylesheet" href="css/main.css">
<script>window.$ = window.jQuery = WLJQ;</script>
</head>
<body style="display: none;">
<div id="pageload">
</div>
<script src="js/initOptions.js"></script>
<script src="js/main.js"></script>
<script src="jquery-2.1.4.min.js"></script>
<script src="jquery.touchSwipe.min.js"></script>
<script src="js/messages.js"></script>
</body>
</html>
page1.js
currentPage = {};
currentPage.init = function(){
WL.Logger.debug("Page1 :: init");
};
function funchange()
{
$("#pageload").load(path + "pages/page2.html");
}
page1.html
<script>
$.getScript(path + "js/page1.js");
</script>
<input type="button" value="click" onclick="funcchange();">
Page2.js
currentPage = {};
currentPage.init = function(){
WL.Logger.debug("Page2 :: init");
};
function hello()
{
alert("hello");
}
page2.html
<script>
$.getScript(path + "js/page2.js");
</script>
You can simply create a function in main.js:
function wlCommonInit() {
...
...
}
function test() {
alert ("test");
}
Then in Page2.js, simply call test();.
Related
I'm using QUASAR and I want to get the state of my q-checkbox whether if it's checked or not. I've used event.target.checked and event.target.value but they are all undefined.
my checkbox:
<q-checkbox
v-on:click="addServices(full_service, $event)"
v-model="form.selected_full_services"
:val="full_service" />
my method:
addServices(full_service, event) {
console.log(event.target.checked)
console.log(event.target.value)
}
console:
output undefined
If I understood you correctly, maybe you don't need function at all :
const { ref } = Vue
const app = Vue.createApp({
setup () {
const full_services = ref( ['aaa', 'bbb', 'ccc'] )
const form = ref( { selected_full_services: [] } )
return { form, full_services }
}
})
app.use(Quasar)
app.mount('#q-app')
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet" type="text/css">
<link href="https://cdn.jsdelivr.net/npm/quasar#2.10.1/dist/quasar.prod.css" rel="stylesheet" type="text/css">
<div id="q-app">
{{form}}
<div v-for="full_service in full_services">
<q-checkbox
:label="full_service"
v-model="form.selected_full_services"
:val="full_service" />
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue#3/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar#2.10.1/dist/quasar.umd.prod.js"></script>
I used Google Custom Search API in my project and I try to detect the following events:
Enter is pressed in the search input box;
Search button is hit;
A option is selected from the recommendation list.
I have done a lot of searches, however, my code can only capture the first event. If anyone can point me to a right direction, this will be much appreciated.
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>My Search</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div>
<h3 align="center">My Search</h3>
</div>
<div>
<script>
(function () {
var cx = 'xxxx:xxxx';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
</script>
<script>
function addExtraParams(){
alert($("input.gsc-input").val()); //For debugging only
};
$(document).ready(function(){
setTimeout(
function(){
$( 'input.gsc-input' ).keyup( function(e){
if ( e.keyCode == 13 ) {
addExtraParams();
}
});
$( 'input.gsc-search-button' ).click(function(){
addExtraParams();
});
$( 'input.gsc-completion-container' ).click(function(){
addExtraParams();
});
}, 1000
);
});
</script>
<gcse:search></gcse:search>
</div>
</body>
</html>
I am trying to set property for my custom tag. But it gives error instead. I am attaching screenshot of error and code snippet also.
<awts-est data-url$="{{dataUrl}}"></awts-est>
properties: {
dataUrl: {
type: String,
value: '',
reflectToAttribute: true,
},
}
in demo/index.html
<awtt-ch data-url="http://abc.asdfg.com"></awtt-ch>
Ok, I went back through and recreated your build. I believe this is what you have at base level. This was successfully printing off the data from dataUrl.
index.html
<html>
<head>
<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="elements/awtt-ch.html" rel="import">
</head>
<body>
<awtt-ch data-url="http://abc.asdfg.com"></awtt-ch>
</body>
</html>
elements/awtt-ch.html
<head>
<link href="../bower_components/polymer/polymer.html" rel="import">
<link href="/elements/awts-est.html" rel="import">
</head>
<dom-module id="awtt-ch">
<template>
<awts-est data-url$="{{dataUrl}}"></awts-est>
</template>
</dom-module>
<script>
Polymer({
is: "awtt-ch",
properties: {
dataUrl: {
type: String,
notify: true,
}
}
});
</script>
elements/awts-est.html
<html>
<head>
<link href="../bower_components/polymer/polymer.html" rel="import">
<link href="/elements/awts-est.html" rel="import">
</head>
<dom-module id="awts-est">
<template>
<h1>Here's your data: <span>{{dataUrl}}</span></h1>
</template>
</dom-module>
<script>
Polymer({
is: "awts-est",
properties: {
dataUrl: {
type: String,
notify: true,
}
}
});
</script>
I wnat to show to display grid in combo box using jquery easy ui plugin with asp.net mvc. But I took that error "Uncaught TypeError: $(...).combogrid is not a function". Where is the error?
My View Code
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ComboGrid - jQuery EasyUI Demo</title>
<link href="#Url.Content("~/Content/themes/easyui.css")" rel="stylesheet" />
<link href="#Url.Content("~/Content/themes/icon.css")" rel="stylesheet" />
<link href="#Url.Content("~/Content/themes/demo.css")" rel="stylesheet" />
<script type="text/javascript" src="~/Scripts/jquery-1.7.1.min.js"></script>
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="~/Scripts/jquery.easyui.min.js"></script>
<script type="text/javascript" src="~/Scripts/jquery.combogrid.js"></script>
<script type="text/javascript">
$(function () {
$('#cc').combogrid({
panelWidth: 450,
value: '006',
idField: 'code',
textField: 'name',
url: 'datagrid_data.json',
columns: [[
{ field: 'code', title: 'Code', width: 60 },
{ field: 'name', title: 'Name', width: 100 },
{ field: 'addr', title: 'Address', width: 120 },
{ field: 'col4', title: 'Col41', width: 100 }
]]
});
});
function reload() {
$('#cc').combogrid('grid').datagrid('reload');
}
function setValue() {
$('#cc').combogrid('setValue', '002');
}
function getValue() {
var val = $('#cc').combogrid('getValue');
alert(val);
}
function disable() {
$('#cc').combogrid('disable');
}
function enable() {
$('#cc').combogrid('enable');
}
</script>
</head>
<body>
<h2>ComboGrid</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>Click the right arrow button to show the datagrid.</div>
</div>
<div style="margin:10px 0;">
Reload
SetValue
GetValue
Disable
Enable
</div>
<select id="cc" name="dept" style="width:250px;"></select>
</body>
</html>
You can remove
<script type="text/javascript" src="~/Scripts/jquery.combogrid.js"></script>
because jquery.easyui.min.js includes combogrid function.
Do any standards require that the type of the status parameter in the XMLHttpRequest's readystatechange event is "number"?
SockJs-0.3.4 expects to be able to say
if (status === 200) {
but when running under Intel XDK's App Framework, the type of the status is "string".
Who is mistaken?
Here is a small test case that shows the problem:
<!DOCTYPE html>
<html>
<head>
<script src='intelxdk.js'></script>
<script src='cordova.js'></script>
<script src='xhr.js'></script>
<script type="application/javascript" src="js/appframework.min.js"></script>
<script type="text/javascript">
$(function(){
$('#test').click(function () {
var xhr = new XMLHttpRequest();
xhr.open("GET", "https://graph.facebook.com/", true);
xhr.onreadystatechange = function() {
switch (xhr.readyState) {
case 4:
var status = xhr.status;
alert("Type of status is: "+typeof status+". Status is: "+status+". 'status===400' is "+(status===400)+".");
break;
}
};
xhr.send();
});
});
</script>
</head>
<body>
<input type="button" id="test" value="test"/>
</body>
</html>