The following code builds 3 datagrids, 2 via markup and one via code.
When you press the "autoheight!" button only the markup datagrids resize.
I don't understand why the code datagrid does not work. As far as i can see, the same attributes are being initialized.
Thanks
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://js.arcgis.com/3.13/dijit/themes /claro/claro.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.13/dojox/grid/resources/claroGrid.css">
<script>dojoConfig = {parseOnLoad: true}</script>
<script src="http://js.arcgis.com/3.13/"></script>
<script>require(["dojo/parser", "dijit/layout/TabContainer", "dijit/layout/ContentPane"]);</script>
<meta charset="UTF-8">
<title>alubia</title>
<script type="text/javascript">
var test_store;
var layout = [
{name:"id", field:"id", width: '165px', noresize: 'true'},
{name:"data", field:"data", width: '125px', noresize: 'true'}
];
function loadData(gridId, divId) {
require(['dojo/data/ItemFileWriteStore', 'dojox/grid/DataGrid'], function(ItemFileWriteStore, DataGrid) {
var mi_data = {
items : [],
identifier:"id"
};
for (var i = 0; i < 22; i++) {
mi_data.items.push({id: ""+i, data:"111 ! "+ i});
}
test_store = new ItemFileWriteStore({data: mi_data});
if (divId != null) {
var grid = new DataGrid({
id : gridId,
store : test_store,
structure : layout,
rowSelector : '0px',
autoHeight : false
});
grid.placeAt(divId);
grid.startup();
}
});
}
function fitHeight(gridId) {
var grid = dijit.byId(gridId);
grid.set('autoHeight', true);
grid.set('autoWidth', false);
grid.update();
}
loadData("grid", null);
loadData("grid2", "grid2Div");
loadData("grid3", null);
</script>
</head>
<body class="claro" style="font-family:sans-serif; font-size:12px;">
<button onclick="fitHeight('grid'); fitHeight('grid2'); fitHeight('grid3');">autoheight!</button>
<div id="grid2Div" style="height: 7em;" ></div>
<div id="grid" style="height: 7em;" data-dojo-id="grid" dojoType="dojox.grid.DataGrid" autoHeight="false" store="test_store" structure="layout" ></div>
<div id="grid3" style="height: 7em;" data-dojo-id="grid3" dojoType="dojox.grid.DataGrid" autoHeight="false" store="test_store" structure="layout" ></div>
</body>
</html>
again, dojo is a horrible tool. going to datatables (jquery plugin). the sun shines again.
Related
if you want to show your select2 selected value in sequence which one sequence select, and drop down not close until you click outside
[![Show like this][1]][1]
[1]: https://i.stack.imgur.com/hZvVS.png
$("select").select2({
tags: true
});
$("select").on("select2:select", function (evt) {
var element = evt.params.data.element;
var $element = $(element);
$element.detach();
$(this).append($element);
$(this).trigger("change");
});
<select style="width: 500px;" multiple="multiple">
<option>two</option>
<option>four</option>
<option>six</option>
</select>
$("select").select2({
tags: true
});
$("select").on("select2:select", function (evt) {
var element = evt.params.data.element;
var $element = $(element);
$element.detach();
$(this).append($element);
$(this).trigger("change");
});
//drop down always visibile until you click outside
var thing = $("select").select2({
closeOnSelect: false
}).on("change", function(e){
// thing.select2("close");
// try this line if your code not working
// thing.select2("open");
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0-rc.1/css/select2.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0-rc.1/js/select2.min.js"></script>
</head>
<body>
<select style="width: 500px;" multiple="multiple">
<option>two</option>
<option>four</option>
<option>six</option>
<option>Seven</option>
<option>Eight</option>
<option>Nine</option>
</select>
</body>
</html>
I want to hide the content until the page is fully loaded,
but i cant finde the problem why it dosent work.
the alert shows up, but not the content.
<!DOCTYPE html>
<html>
<head>
<style>
#content{
visibility:hidden;
}
</style>
<script type="text/javascript">
checkLoad();
function checkLoad(){
if (document.readyState === "complete"){
document.getElementById("content").style.visiblity = 'visible';
alert(document.getElementById("content").style.visiblity);
} else {
setTimeout('checkLoad();', 1000)
}
}
</script>
</head>
<body>
<div id="content">
<div id='tc1'>Content Text</div>
</div>
</body>
</html>
There's a typo in your code:
document.getElementById("content").style.visiblity = 'visible';
should be :
document.getElementById("content").style.visibility = 'visible';
(note the missing i in visibility)
I am working on an opera extension. The extension have a popup that will open a website in it.
I get the below error at "xhr.send()" in popup.html file and i can't able to remove it.
"[4/14/2013 12:51:19 PM] JavaScript -
widget://wuid-9ec76e79-06d9-2749-8b7e-b42743de3375/popup.html Inline
script thread Uncaught exception: ReferenceError: Security violation
Error thrown at line 30, column 16 in fetchGames() in
widget://wuid-9ec76e79-06d9-2749-8b7e-b42743de3375/popup.html:
xhr.send(); called from line 32, column 12 in widget://wuid-9ec76e79-06d9-2749-8b7e-b42743de3375/popup.html:
fetchGames(); "
My config file is as below:
<?xml version="1.0" encoding="utf-8"?>
<widget xmlns="http://www.w3.org/ns/widgets" id="http://www.example.org/helloworld">
<name>Hello Extensions!</name>
<description>A simple hello world example</description>
<author href="http://www.twitter.com/dstorey/" email="dstorey#opera.com">David Storey, Opera Software</author>
<icon src="icons/icon-64.png"/>
</widget>
My index.html file is:
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Hello World!</title>
<meta charset="UTF-8">
<script>
window.addEventListener( 'load', function(){
var theButton;
var ToolbarUIItemProperties = {
disabled: false,
title: 'Hello World',
icon: 'icons/icon-18.png',
popup: {
href: 'popup.html',
width: 500,
height: 500
}
}
theButton = opera.contexts.toolbar.createItem(ToolbarUIItemProperties);
opera.contexts.toolbar.addItem(theButton);
}, false );
</script>
</head>
<body>
</body>
</html>
My popup.html file is:
<!DOCTYPE HTML>
<html lang="en">
<head>
<title></title>
<link href="style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body {
background-color: #efefef;
}
</style>
<script>
function fetchGames() {
alert('hello');
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(data) {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
var data = (xhr.responseText);
document.getElementById('list_games').innerHTML = data;
//callback(data);
}
else {
alert('No Games Found');
window.close();
}
}
}
var url = 'http://www.anatomic.us/generate-xml';
xhr.open('GET', url, true);
xhr.send();
};
fetchGames();
function submitForm(obj)
{
var searchKey = document.getElementById('sp').value;
if(searchKey!=null && searchKey!='')
{
obj.setAttribute('action', 'http://www.3d-game.co/'+searchKey);
return true;
// chrome.tabs.create({url: 'http://www.3d-game.co/'+searchKey});
}
else
{
alert('Please Enter your search item');
return false;
}
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<!-- <div class="header">
<img src="icon.png">
</div>
<br />-->
<div id=content>
<div style='padding-left:10px;'>
<form id=sf method=post action="http://www.3d-game.co/search/" onSubmit="return submitForm(this);" target="_blank">
</form>
</div>
<div id=cat_content>
<div id="list_games" class=list_games>
<img src="loader.gif" border="none" />
<div class="ajax-loader">
<img src="loader.gif" border="none" />
</div>
</div>
</div>
</body>
</html>
Plz help me in removing it.
Add following in the header of the file from where you are fetching the data:
Access-Control-Allow-Origin: *
in config.xml file add this line: to allow any domain httprequest before tab, this solve the problem, if problems persist, open in opera browser tab "opera:config" and select "Users Prefs" and check "Allow File XMLHttpRequest" and restart. if have problem i can send you my opera extension working fine...
I have downloaded dojo build, now I have an doubt, in the below example code, I am using "dojo.js.uncompressed.js" as a start of source file, is it right? Just I want to display a button in the web page. Which one is the start file? in dojo library.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html dir="ltr">
<head>
<style type="text/css">
body, html { font-family:helvetica,arial,sans-serif; font-size:90%; }
</style>
<script src="../dojo/lib/dojo/dojo.js.uncompressed.js"
djConfig="parseOnLoad: true">
</script>
<script type="text/javascript">
dojo.require("dijit.form.Button");
dojo.addOnLoad(function() {
// Create a button programmatically:
var button = new dijit.form.Button({
label: "Click me!",
onClick: function() {
// Do something:
dojo.byId("result1").innerHTML += "Thank you! ";
}
},
"progButtonNode");
});
</script>
<link rel="stylesheet" type="text/css" href="../dojo/lib/dijit/themes/claro/claro.css" />
</head>
<body class=" claro ">
<button id="progButtonNode" type="button">
</button>
<div id="result1">
</div>
<!-- NOTE: the following script tag is not intended for usage in real
world!! it is part of the CodeGlass and you should just remove it when
you use the code -->
<script type="text/javascript">
dojo.addOnLoad(function() {
if (document.pub) {
document.pub();
}
});
</script>
</body>
</html>
dojo (and any js file) should be put next to your html files so that it is served by the server. Then you don't have to relate to long relative paths
I copied an example from the dojo site using Borderlayout. However, when I load in the browser , the entire data is shown for all the section . Then after a few second the content is refersh and the data is displayed correctly.
here is code that i copied . Thanks for your help
<head>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.3/dijit/themes/tundra/tundra.css">
<style type="text/css">
body, html { font-family:helvetica,arial,sans-serif; font-size:90%; }
</style>
<style type="text/css">
html, body { width: 100%; height: 100%; margin: 0; } #borderContainer
{ width: 100%; height: 100%; }
</style>
</head>
<body class="tundra ">
<div dojoType="dijit.layout.BorderContainer" design="sidebar" gutters="true"
liveSplitters="true" id="borderContainer">
<div dojoType="dijit.layout.ContentPane" splitter="true" region="leading"
style="width: 100px;">
Hi
</div>
<div dojoType="dijit.layout.ContentPane" splitter="true" region="center">
Hi, I'm center
</div>
</div>
</body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.3/dojo/dojo.xd.js"
djConfig="parseOnLoad: true">
</script>
<script type="text/javascript">
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.layout.BorderContainer");
</script>
<!-- NOTE: the following script tag is not intended for usage in real
world!! it is part of the CodeGlass and you should just remove it when
you use the code -->
<script type="text/javascript">
dojo.addOnLoad(function() {
if (window.pub) {
window.pub();
}
});
</script>
This looks a bit upside down : you should put your javascripts in the head section and load the dojo libraries in first place. That's not your problem though.
What happens is that when the page loads, dojo loads all the modules that you "dojo.require", then parses all your tags containing the attribute "dojoType" and processes them for rendering, and this takes time.
So the flickering that you're seeing is the difference between the page before and after the widgets are parsed.
You should add a preloader div and hide it once the page is parsed (see this example).
This is what it would look like for your example :
<html>
<head>
<title>Preloader example</title>
<!– every Dijit component needs a theme –>
<link rel="stylesheet"
href="http://o.aolcdn.com/dojo/1.4/dijit/themes/soria/soria.css">
<style type="text/css">
#preloader,
body, html {
width:100%; height:100%; margin:0; padding:0;
}
#preloader {
width:100%; height:100%; margin:0; padding:0;
background:#fff
url(’http://search.nj.com/media/images/loading.gif’)
no-repeat center center;
position:absolute;
z-index:999;
}
#borderContainer {
width:100%; height:100%;
}
</style>
<!– load Dojo, and all the required modules –>
<script src="http://o.aolcdn.com/dojo/1.4/dojo/dojo.xd.js"></script>
<script type="text/javascript">
var hideLoader = function(){
dojo.fadeOut({
node:"preloader",
onEnd: function(){
dojo.style("preloader", "display", "none");
}
}).play();
}
dojo.addOnLoad(function(){
// after page load, load more stuff (spinner is already spinning)
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("dojo.parser");
// notice the second onLoad here:
dojo.addOnLoad(function(){
dojo.parser.parse();
hideLoader();
});
});
</script>
</head>
<body class="soria">
<div id="preloader"></div>
<div dojoType="dijit.layout.BorderContainer" id="borderContainer" design="sidebar" gutters="true" liveSplitters="true">
<div dojoType="dijit.layout.ContentPane" splitter="true" region="leading" style="width: 100px;">Hi</div>
<div dojoType="dijit.layout.ContentPane" splitter="true" region="center">I'm Center</div>
</div>
</body>
</html>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.3/dojo/dojo.xd.js"></script>
if(dojo.isIE){
addEvent(window, 'load', function(event) {
dojo.parser.parse();
});
}else{
dojo.addOnLoad(function(){
dojo.addOnLoad(function(){
dojo.parser.parse();
});
});
}
function addEvent( obj, type, fn ) {
if ( obj.attachEvent ) {
obj['e'+type+fn] = fn;
obj[type+fn] = function(){obj['e'+type+fn]( window.event );}
obj.attachEvent( 'on'+type, obj[type+fn] );
} else
obj.addEventListener( type, fn, false );
}
disable parseOnLoad and manually add event to parse widgets for ie.