How to put dropbox inside Iframe? - javascript

I have dropbox:
<div id='jqxDropDownList'></div>
and js:
var source = [
"Affogato",
"Americano",
"Bicerin",
"Breve",
"Café Bombón",
"Café au lait"];
// Create a jqxDropDownList
$("#jqxDropDownList").jqxDropDownList({
source: source,
selectedIndex: 3,
theme: 'energyblue',
checkboxes:true
});
And this Iframe:
<iframe></iframe>
Here if fiddler.
My question is how to put dropbox inside Iframe?

You need to point your iframe to a src, so your code needs to be in another page, as it were:
https://jsfiddle.net/Lp0qgsjd/ contains <iframe src="https://jsfiddle.net/CLB86/320/show"></iframe> and http://jsfiddle.net/CLB86/320/ has your code:
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css"/>
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css"/>
<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<div id='jqxDropDownList'></div>
and js:
var source = [
"Affogato",
"Americano",
"Bicerin",
"Breve",
"Café Bombón",
"Café au lait"];
// Create a jqxDropDownList
$("#jqxDropDownList").jqxDropDownList({
source: source,
selectedIndex: 3,
theme: 'energyblue',
checkboxes:true
});

Related

Uncaught ReferenceError: characters is not defined

I am creating a simple rest api in javascript, I want upon initialization, the widget must display a list of all characters.
here is folder structure :
├───book
└───book.js
├───store
│ └───store.js
here is my store.js
window.Store = {
create: function() {
var self = {};
var props = {
name: 'string',
species: 'string',
picture: 'string',
description: 'string'
};
var listProps = ['name', 'species'];
var detailProps = ['name', 'species', 'picture', 'description'];
var characters = [
{
id: makeID(),
name: 'Ndiefi',
species: 'Wookie',
picture: 'store/img/ndiefi.png',
description: 'A legendary Wookiee warrior and Han Solo’s co-pilot aboard the Millennium Falcon, Chewbacca was part of a core group of Rebels who restored freedom to the galaxy. Known for his short temper and accuracy with a bowcaster, Chewie also has a big heart -- and is unwavering in his loyalty to his friends. He has stuck with Han through years of turmoil that have changed both the galaxy and their lives.',
_delay: 500
},
];
}
}
here is index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Character Book</title>
<!-- 3rd party vendor libraries -->
<link rel="stylesheet" href="vendor/font-awesome-4.6.3/css/font-awesome.min.css">
<script src="vendor/jquery-3.1.0.min.js"></script>
<script src="vendor/underscore-1.8.3.min.js"></script>
<!-- 1st party internal libraries -->
<script src="store/store.js"></script>
<script src="tests/start-test.js"></script>
<script src="tests/test-book.js"></script>
<!-- The source of the 'Book' widget -->
<link href="book/book.css" rel="stylesheet">
<script src="book/book.js"></script>
<script>
$(function() {
var frame = $('#test-frame');
var run = $('#test-run');
var results = $('#test-results');
var store = Store.create();
run.click(function() {
run.prop('disabled', true).text('Running Tests');
results.removeClass('test-pass test-fail').text('');
testBook(frame).then(
function success() {
run.prop('disabled', false).text('Run Tests');
results.addClass('test-pass').text('All tests passed');
},
function failure(err) {
run.prop('disabled', false).text('Run Tests');
results.addClass('test-fail').text('Test failed, see console');
}
);
});
Book.init(frame, store);
});
</script>
</head>
<body>
<button id="test-run">Run Tests</button>
<span id="test-results"></span>
<div id="test-frame">
</div>
</body>
</html>
here is what I have tried :
books.js
var data = JSON.parse(characters);
data.forEach(characters => {
console.log(characters.name)
});
so when I run the app in my browser I see the following error :
Uncaught ReferenceError: characters is not defined
what is wrong with my code ? any suggestion or help will be helpfull thanks

How can I use MathJax or LaTex in an html file?

I cannot get it to work and I'm not sure what I'm doing wrong.
I've downloaded MathJax.js, created an html file and linked it to the js file appropriately. I even copied and pasted from a previously answered question on here and just changed the link from a vpn (the vpn didn't work either, but the question and response were over three years old) to the js file on my machine.
Here's what I have in my html:
<html>
<head>
<title>MathJax</title>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({"HTML-CSS": { preferredFont: "TeX", availableFonts: ["STIX","TeX"] },
tex2jax: { inlineMath: [ ["$", "$"], ["\\\\(","\\\\)"] ], displayMath: [ ["$$","$$"], ["\\[", "\\]"] ], processEscapes: true, ignoreClass: "tex2jax_ignore|dno" },
TeX: { noUndefined: { attributes: { mathcolor: "red", mathbackground: "#FFEEEE", mathsize: "90%" } } },
messageStyle: "none"
});
</script>
<script type="text/javascript" src="MathJax.js"></script>
<script type="text/javascript" src="latest.js"></script>
</head>
<body>
The definition of the Euler-Mascheroni constant is
\gamma=\lim_{n\to\infty}\left(\sum_{k=1}^n\frac1k-ln(n)\right)
</body>
</html>
I would greatly appreciate any assistance.
There are a few problems.
If you don't specify a so-called combined configuration file, you need to specify all necessary components yourself. In particular, input, output and in your case the TeX pre-processor to find TeX markup in the page
If you use TeX input, you need to wrap input in the delimiters of your choice.
For example
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
jax: ["input/TeX", "output/HTML-CSS"],
extensions: ["tex2jax.js"],
"HTML-CSS": { preferredFont: "TeX", availableFonts: ["STIX","TeX"] },
tex2jax: { inlineMath: [ ["$", "$"], ["\\(","\\)"] ], displayMath: [ ["$$","$$"], ["\\[", "\\]"] ], processEscapes: true, ignoreClass: "tex2jax_ignore|dno" },
TeX: { noUndefined: { attributes: { mathcolor: "red", mathbackground: "#FFEEEE", mathsize: "90%" } } },
messageStyle: "none"
});
</script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js"></script>
The definition of the Euler-Mascheroni constant is
$\gamma=\lim_{n\to\infty}\left(\sum_{k=1}^n\frac1k-ln(n)\right) $
Caveat. I don't know what latest.js should do and you seem to be using a local installation so be sure to check the docs for that, http://docs.mathjax.org/en/latest/installation.html.
Here is a file I constructed from the documentation examples
<html>
<head>
<!-- See http://docs.mathjax.org/en/latest/web/start.html#using-mathjax-from-a-content-delivery-network-cdn -->
<script type="text/javascript" id="MathJax-script" async
src="https://cdn.jsdelivr.net/npm/mathjax#3/es5/tex-mml-chtml.js">
</script>
</head>
<body>
<p>
From the overview docs, in MathML: Let's consider <math><mi>a</mi><mo>≠</mo><mn>0</mn></math>.
</p>
<p>
With \(\LaTeX\) input:
When \(a \ne 0\), there are two solutions to \(ax^2 + bx + c = 0\) and they are
$$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$
</p>
</body>
</html>

Put ExtJS form on javascript method call

I'm totaly net to javascript and ExtJS. So maybe someone can help me.
I want to display ExtJS made form on Web page when I call javascript method.
The code is:
.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Car Wiki</title>
<link rel="stylesheet" type="text/css" href="extJSLib\extjs-4.1.1\resources\css\ext-all.css">
<script type="text/javascript" src = "extJSLib\extjs-4.1.1\ext-all-dev.js"></script>
<link rel ="stylesheet" type="text/css" href="mainPageStyle.css">
<script type = "text/javascript" src="mainPageScript.js"></script>
</head>
<body>
<div class="mainForm" >
<div id="mainPanel">
<script>mainModule.testMethos();</script>
</div>
</div>
</body>
</html>
mainPageScript.js
(function(exports){
exports.testMethos = function()
{
var formPanel = Ext.create('Ext.form.Panel',{
title: 'Search Form',
width:300,
height:200,
layout: 'anchor',
defaults:
{
anchor:'80%'
},
renterTo: document.body,
items:[
{
xtype: 'textfield',
fieldLabel: 'Car Name',
name: 'carName',
labelAlign: 'top',
cls: 'field-margin',
flex:1
},
{
xtype: 'textfield',
fieldLabel: 'Car Model',
name:'carModel',
labelAlign:'top',
cls:'field-margin',
flex: 1
}
]
});
};
} )(this.mainModule = {});
where is my mistake? (do not say, that in my genetic code :D)
First mistake is your use of Ext.onReady as this is an event which gets fired when the framework has finished loading.
Trying to use it within a function call like you have makes no sense, so just remove this altogether and just keep your form code.
Alternatively, you can still use Ext.onReady but it should be used in the main script block of your html file, that and your form code should be moved there.
I have got your form to display using this approach, you can see this working here
Fiddle above

how to add columns to Kendo Grid that is filled with remote data?

So I have this view
<!DOCTYPE html>
<html>
<head >
<link href="<%: Url.Content("~/Content/kendo/2012.3.1114/kendo.common.min.css")%>" rel="stylesheet" type="text/css" />
<link href="<%: Url.Content("~/Content/kendo/2012.3.1114/kendo.default.min.css")%>" rel="stylesheet" type="text/css" />
<title><%: ViewBag.GestionTitle %></title>
</head>
<body>
<h1><%: ViewBag.GestionTitle %></h1>
<div id="usuariosGrid"></div>
<button id="addUsuario" type="button" class="k-input"><%: ViewBag.Agregar %></button>
<script src="<%: Url.Content("~/Scripts/jquery-1.7.1.min.js")%>"></script>
<script src="<%: Url.Content("~/Scripts/kendo/2012.3.1114/kendo.web.min.js")%>"></script>
<script src="<%: Url.Content("~/Scripts/usuario/usuario.js")%>"></script>
</body>
</html>
The div usuariosGrid is filled with remote data with the following function:
$(function () {
var ds = new kendo.data.DataSource({
transport: {
read: {
url: "http://127.0.0.1:81/SismosService.svc/usuario/index",
dataType: "json"
}
},
schema: {
data: "Response"
},
});
$("#usuariosGrid").kendoGrid({
columns: ["UsuarioId", "Nombre", "ApellidoP", "ApellidoM"],
dataSource: ds
});
});
This creates a grid with the columns specified in the function. Now what I want to do is for every row inserted also to add a column with two hyperlinks, one that would redirect me to an Edit page and another one that would redirect me to a Delete page.
How can I do this? I've looked for examples but haven't been able to find anything that resembles what I'm trying to achieve. Any help will be appreciated.
Basically you have to add a column to the columns definition of your kendoGrid. This new cell will contain the links (or even some buttons).
For this you would probably be interested on using columns.template field where you can merge HTML with variable data, for example, data from row that you editing or deleting.
Instead of a link you might define a custom action by doing something like:
columns : [
...
{ command: { text: "Edit", click: editRecord }, title: " ", width: "140px" }
]
and in editRecord you can do whatever you want (see KendoUI example here).

Dojo DataGrid filter using an AndOrReadStore - what am I doing wrong?‏

I have the following code working with a DataGrid that has two column Column_A and Column_B respectively:
grid.filter({Column_A: '*test*', Column_B: '*'}, true)
This code works fine and finds all rows where Column_A has the word test in it... now, I'd like to do the same but look in either column.... the comma translates to an AND operation but I am looking for an OR operation.
I read the AndOrReadStore specs and based on my understanding I should be able to do something like this:
grid.filter({complexQuery: "Column_A: '*test*' OR Column_B: '*'"}, true)
however this does not work and I don't get any results... I can't even get it to work with one column, like this
grid.filter({complexQuery: "Column_A: '*test*'"}, true)
What am I doing wrong?
Thank you
Here is a working programmatic example (Click the button to invoke the filter: Column_A contains an e OR Column_B is 300):
the JavaScript (script.js):
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.form.Button");
dojo.require("dojox.grid.DataGrid");
dojo.require('dojox.data.AndOrReadStore');
dojo.ready(function(){
var appLayout = new dijit.layout.ContentPane({
id: "appLayout"
}, "appLayout");
var data = {
'items': [
{'Column_A': 'alpha', 'Column_B': '100'},
{'Column_A': 'beta', 'Column_B': '200'},
{'Column_A': 'gamma', 'Column_B': '300'},
{'Column_A': 'delta', 'Column_B': '400'}
]
};
var store = new dojox.data.AndOrReadStore({
data: data
});
var layout = [[
{name : 'A', field : 'Column_A', width : '125px'},
{name : 'B', field : 'Column_B', width : '100%'}
]];
var grid = new dojox.grid.DataGrid({
structure : layout,
store: store,
queryOptions: {ignoreCase: true}
});
var filterButton = new dijit.form.Button({
label: "Filter",
onClick: function () {
grid.filter({complexQuery: "Column_A: '*e*' OR 'Column_B: '300'"});
}
});
filterButton.placeAt(appLayout.domNode);
grid.placeAt(appLayout.domNode);
appLayout.startup();
});
And now the html (index.html)
<html lang="en">
<head>
<meta charset="utf-8">
<title>DataGrid with AndOrReadStore</title>
<link rel="stylesheet" href="style.css" media="screen"/>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dijit/themes/claro/claro.css" />
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dijit/themes/claro/document.css" />
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dojox/layout/resources/ExpandoPane.css" />
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dojox/grid/resources/claroGrid.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dojox/grid/enhanced/resources/claro/EnhancedGrid.css">
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dojo/dojo.js" type="text/javascript"></script>
<script src="script.js" type="text/javascript"></script>
</head>
<body class="claro">
<div id="appLayout"></div>
</body>
</html>
And finally the css (style.css)
html, body {
width: 100%; height: 100%;
margin: 0; padding: 0;
overflow: hidden;
}
#appLayout {
width: 100%; height: 100%;
}
I looked at the link you posted, and I think it's an issue of getting the brackets and parenthesis correct. Also, it looks like the 'complex query' is used for objects, whereas 'query' is used for strings:
grid.filter({query: ("Column_A: '*test*' OR Column_B: '*'")}, true);
Here's the link I looked at: http://dojotoolkit.org/reference-guide/dojox/data/AndOrReadStore.html#dojox-data-andorreadstore

Categories

Resources