How do I highlight the date selected by two different associates on associate.html in training.html,that is, two associates select their training dates and these two dates must be highlighted on the training calendar.
associate.html
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.ui-datepicker {font-size:12pt ! important}
</style>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery- ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(document).ready(function(){
$("#datepicker").datepicker();
$('form#dateform').submit(function(){
var aselectedDate=$('#datepicker').val();
if(aselectedDate!=''){
alert('You selected: ' +aselectedDate);
}
return false;
});
});
</script>
</head>
<body><br><br>
<form id="dateform" name="dateform" action="#" method="POST">
<table>
<tr>
<td>
</td>
</tr>
<tr>
<td>Select a date</td>
<td><input id="datepicker" name="date"/></td>
</tr>
</table>
<input type="submit" name="submit" value="Submit"/>
</form>
</body>
</html>
training.html
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.highlight {
background: red !important;
}
.ui-datepicker {
font-size: 16pt !important;
}
</style>
</head>
<body>
<link href="http://code.jquery.com/ui/1.11.4/themes/blitzer/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<br><br>
<br>
<center><div id="datepicker"></div></center><br>
<script type="text/javascript">
var Event = function (text, className) {
this.text = text;
this.className = className;
};
var events = {};
events[new Date("06/07/2015")] = new Event("You have selected Training 1", "highlight");
events[new Date("06/16/2015")] = new Event("You have selected Training 2", "highlight");
events[new Date("07/07/2015")] = new Event("You have selected Training 3", "highlight");
events[new Date("06/18/2015")] = new Event("You have selected Training 4", "highlight");
$('#datepicker').datepicker({
beforeShowDay: function (date) {
var event = events[date];
if (event) {
return [true, event.className, event.text];
} else {
return [true, '', ''];
}
},
onSelect: function (date) {
var event = events[new Date(date)];
if (event) {
alert(event.text);
}
else {
alert('No training event');
}
}
});
</script>
<script>
$(document).ready(function () {
$('form#dateform').click(function () {
var aselectedDate = $('#datepicker').val();
if (aselectedDate != '') {
alert('You selected: ' + aselectedDate);
}
return false;
});
});
</script>
<form id="dateform" name="dateform" action="#" method="POST">
<table>
<tr>
<td>
<input id="datepicker" name="date" />
</td>
</tr>
</table>
</form>
</body>
</html>
I think your problem is that dates are not highlighted correctly, isn't?
Try this:
<style type="text/css">
.highlight {
background: red !important;
}
.ui-datepicker {
font-size: 16pt !important;
}
.highlight a {
background: none !important;
}
</style>
EDIT:
You can do this to save a date in session and convert the string value to a date value:
var associateDate = new Date(); //save in session
localStorage.setItem('date1', associateDate);
var stringValue = localStorage.getItem('date1'); // load
var training = new Date(stringValue);
I hope this will help!
Related
Can anyone tell me how I can make the generated document pick up the data from the forms and put it as their title? I have already looked at the Google Script documentation and so far I have not found anything that can answer me or show me a similar example. Until now I have found relevant subjects and code here, but none have suited my need.
function doGet() {
return HtmlService
.createHtmlOutputFromFile('index')
}
function criarDocument(){
var doc = DocumentApp.create('Doc');
}
function criarSheet(){
var sheet = SpreadsheetApp.create('Sheet');
}
function createPresentation() {
var presentation =
Slides.Presentations.create({"title": "Presentation"});
Logger.log("Created presentation with ID: " + presentation.presentationId);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
body{
background-color: lightblue;
}
</style>
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
<title>CRIE</title>
<script>
function criarDocument(){
google.script.run.criarDocument();
}
function criarSheet(){
google.script.run.criarSheet();
}
function createPresentation(){
google.script.run.createPresentation();
}
function titulo(){
var st = document.getElementById('student').value;
var te = document.getElementById('teacher').value;
var wo = document.getelementById('work').value;
document.getElementById('student' + 'teacher' + 'work').value;
}
</script>
</head>
<body>
<h1><p align = "center">CRIE SEU ARQUIVO</p></h1>
<div>
<form id = 'form' onsubmit="titulo">
<h2><p align = "center"> Student:</p></h2><p align = "center">
<input type="text" name="estudante" id="student">
<h2><p align = "center">Teacher: </p></h2><p align = "center">
<input type="text" name="professor" id="teacher">
<h2><p align = "center">Work Name</p></h2><p align = "center">
<input type="text" name="trabalho" id="work">
<br><br>
<button class="action" value="Submit" onclick= 'criarDocument()'>Start Document </button>
<button class="action" value="Submit" onclick='criarSheet()'>Start Sheet</button>
<button class="action" value="Submit" onclick='createPresentation()'>Start Presentation</button>
</form>
</div>
</body>
</html>
Here's a simple example of a timestamped text input into a spreadsheet from a sidebar. Don't forget to name your sheet Notes.
Code.gs
function onOpen()
{
loadSideBar();
SpreadsheetApp.getUi().createMenu('My Menu').addItem('loadSidebar', 'loadSideBar').addToUi();
}
function dispText(txt)
{
var ss=SpreadsheetApp.getActiveSpreadsheet();
var sht=ss.getSheetByName('Notes');
var ts=Utilities.formatDate(new Date(), 'GMT-6', "M/dd/yyyy HH:mm:ss");
var row=[];
row.push(ts);
row.push(txt);
sht.appendRow(row);
return true;
}
function loadSideBar()
{
var userInterface=HtmlService.createHtmlOutputFromFile('sidebar');
SpreadsheetApp.getUi().showSidebar(userInterface);
}
sidebar.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function() {
$('#txt1').val('');
});
function sendText()
{
var txt=$('#txt1').val();
google.script.run
.withSuccessHandler(clearText)
.dispText(txt);
}
function clearText()
{
$('#txt1').val('');
}
console.log("My code");
</script>
</head>
<body>
<textarea id="txt1" rows="12" cols="35"></textarea><br />
<input id="btn1" type="button" value="submit" onClick="sendText();" />
</body>
</html>
<%# page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%# taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%# taglib prefix="sec"
uri="http://www.springframework.org/security/tags"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Modify Index Order</title>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet"
href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href='<c:url value="/static/css/header.css" />'>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<script
src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js"></script>
<script
src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.3/jquery-ui.min.js"></script>
<!-- <script src="http://dev.jquery.com/view/tags/ui/latest/ui/ui.core.js"></script>
<script src="http://dev.jquery.com/view/tags/ui/latest/ui/ui.draggable.js"></script> -->
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script
src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js"></script>
<script
src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
<style type="text/css">
table {
table-layout: fixed;
word-wrap: break-word;
}
th {
text-align: center;
}
#serviceSelect {
text-align: center;
}
#serviceSelect {
margin: auto;
width: 30%;
}
#removeSelect {
text-align: center;
}
#removeSelect {
margin: auto;
width: 30%;
}
#123 {
margin: auto;
width: 50%;
}
p {
font: bold;
}
.editrow {
border: 3px solid red;
}
</style>
</head>
<body>
<jsp:include page="../shared/header.jsp">
<jsp:param value="modifyIndexOrder" name="currentPage" />
</jsp:include>
<form class="form-horizontal" role="form" action="updateIndexOrder"
method=POST id="form2">
<div class="table-responsive12">
<table class="table table-bordered table-striped table-highlight"
id="tab_logic">
<tbody>
<tr>
<th style="width: 20%">IndexOrder</th>
<th style="width: 20%">Name</th>
<th style="width: 20%">CatKey</th>
</tr>
</tbody>
</table>
<table class="table table-bordered table-striped table-highlight"
id="submittable">
<tr id="submit123">
<td colspan="3" align="center">
<div class="form-group">
<button type="submit" class="btn btn-success btn-md" id="submit">Submit</button>
</div>
</td>
</tr>
</table>
</div>
</form>
<script type="text/javascript">
$(function() {
loadTable();
$("#tab_logic").sortable({
items : "tr:not(th)",
helper : "clone",
update : function() {
alert("success");
}
}).disableSelection();
// print();
});
function loadTable(){
$.ajax({
type : "GET",
dataType : 'json',
async : false,
url : "modifyIndex",
success : function(data) {
loadData(data);
},
error : function() {
alert("error");
}
});
}
function loadData(data){
alert("success");
var htm="<tr><th style='width:20%'>IndexOrder</th><th style='width:20%'>Name</th><th style='width:20%'>CatKey</th></tr>";
for(var i=0;i<data.length;i++)
{
htm+="<tr><td name='io"+i+"'>"+data[i].indexOrder+"</td><td name='na"+i+"'>"+data[i].name+"</td><td name='ca"+i+"'>"+data[i].catKey+"</td></tr>";
}
$("#tab_logic").html(htm);
}
function print()
{
var order = $("#tab_logic td");
var i = 1;
var col = 1;
order.each(function() {
var t = $(this).attr('name');
alert(t);
});
}
</script>
</body>
</html>
I have a table in a form which doesn't have any input field but only a table that displays data . i want that on submitting the form i should be able to read the data of the td element of the table in my controller .
Something like request.getParameter("td_name") . I read that name is not a valid attribute for td . SO in this case how can i get the data of the td elements in my controller.
You can go through your table and get all of your tr's or td's, for example:
var products = [];
$('#table tbody tr').each(function (index, tr) {
var product = {
Id: Number($(tr).find('td:nth-child(1)').text()),,
}
products.push(product);
});
$.post('/Url/Post', { products: products }, function (response, status) {
console.log(response);
if (status === 'success') {
alert('Success.');
}
});
You could do this by adding id attribute to your td
example : <td id="mytd">This is some value</td>
Now on your java script you could do something like this:
var tdvalue = document.getElementById ( "mytd" ).innerText;
or in jQuery
var tdvalue = $("#mytd").text();
now all you have to do is pass tdvalue to your request :)
Actually I have two fields in "click.html".One is "Name" field and other is "client_ip" field.I have entered my name in the "Name" field and later on click of "client_ip" text box has redirected to index.html.
In index.html I'll select some required client_ip's and redirect the page again to click.html.So that the selected client_ip fields are placed in the client_ip text box of click.html page.
Now after redirecting to the click.html,the name I had entered in the "Name" text box is vanishing because of page refresh while redirecting.But Now,I want to redirect to click.html without refreshing the click.html page.How can I achieve this ...
My click.html:
<html>
<head>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="http://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://raw.githubusercontent.com/mpryvkin/Plugins/master/pagination/simple_numbers_no_ellipses.js"></script>
<link rel='stylesheet' href='style.css'>
<link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css">
</head>
<body>
<div>
<label>Start Time:<select id="Start Time" id="startID" name="StartTime">
<option value="00:00" >00:00</option>
<option value="00:30">00:30</option>
<option value="01:00">01:00</option>
<option value="01:30">01:30</option>
<option value="02:00">02:00</option>
<option value="02:30">02:30</option>
<option vlaue="03:00">03:00</option>
</select></label>
</div>
<div id="clicDiv">
Client IP :<input type="text" id="ipClick" onclick="getValue();" name="Client IP" style="width:600px;"/>
</div>
<script>
function getUSERIP(){
if(!window.location.href.match(/client_ip=.*?([^\&]+)/))
return;
var ip = window.location.href.match(/client_ip=.*?([^\&]+)/)[0].replace('client_ip=','');
var res = ip.replace(/%2C/g,",")
$("#ipClick").val(res);
}
getUSERIP();
function getUSERName(){
if(!window.location.href.match(/name=.*?([^\&]+)/))
return;
var name = window.location.href.match(/name=.*?([^\&]+)/)[0].replace('name=','');
if($("#hiddenName").length)
$("#hiddenName").val(name);
else $('#textDiv').val(name);
}
getUSERName();
function getStartTime(){
if(!window.location.href.match(/StartTime=.*?([^\&]+)/))
return;
var StartTime = window.location.href.match(/StartTime=.*?([^\&]+)/)[0].replace('StartTime=','');
var res = StartTime.replace(/%253A/g,",")
if($("#hiddenName5").length)
$("#hiddenName5").val(res);
else $('#startID').val(res);
}
getStartTime();
function getValue(){
var name = $("#textDiv").val()?('?name='+$("#textDiv").val()):'';
location.href='/home/divya/html_docs/index.html'+name;
}
</script>
</body>
</html>
My index.html:
<!DOCTYPE html>
<meta charset='utf-8'>
<html>
<head>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="http://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://raw.githubusercontent.com/mpryvkin/Plugins/master/pagination/simple_numbers_no_ellipses.js"></script>
<link rel='stylesheet' href='style.css'>
<link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css">
<script>
$(document).ready(function() {
$("#ip").val('');
$('#example').DataTable( {
"pagingType": "full_numbers"
} );
} );
</script>
</head>
<body>
<div>
<form action="/home/divya/html_docs/click.html" method="get" >
Client_ip :<input type="text" id ="ip" name="client_ip" style="width: 600px;"/>
<div id="subDiv">
<button type="submit" value="Submit">Submit</button>
</div>
</div></br>
<table id="example" class="display" cellspacing="0" width="100%">
</table>
<script>
var selectedIps = [];
var tabulate = function (data,columns) {
var svg = d3.select('#ip').append("svg")
var table = d3.select('#example')
var thead = table.append('thead')
var tbody = table.append('tbody')
thead.append('tr')
.selectAll('th')
.data(columns)
.enter()
.append('th')
.text(function (d) { return d })
var rows = tbody.selectAll('tr')
.data(data)
.enter()
.append('tr')
var cells = rows.selectAll('td')
.data(function(row) {
return columns.map(function (column) {
return { column: column, value: row[column] }
})
})
.enter()
.append('td')
.text(function (d) { return d.value })
.append("input")
.attr("id","change")
.attr("type", "checkbox")
.style("float","left")
.on("change", function(d, i) {
if ($(this)[0].checked) {
if (selectedIps.indexOf(d.value) < 0) {
selectedIps.push(d.value);
}
} else {
if (selectedIps.indexOf(d.value) > -1) {
selectedIps.splice(selectedIps.indexOf(d.value), 1);
}
}
$('#ip').val(selectedIps.join(','));
});
return table;
}
d3.csv('some1.csv',function (data) {
var columns = ['client_ip']
tabulate(data,columns)
});
</script>
</body>
</html>
Can anyone please help me out...
Update function on click.html
function getValue(){
var name = $("#textDiv").val()?('?name='+$("#textDiv").val()):'';
location.href='/home/divya/html_docs/index.html'+name;
}
on index.html
Put hidden in form element
<input type="hidden" id="hiddenName" name="name" />
Put this function on common js file or in both index.html and click.html
function getUSERName(){
if(!window.location.href.match(/name=.*?([^\&]+)/))
return;
var name = window.location.href.match(/name=.*?([^\&]+)/)[0].replace('name=','');
if($("#hiddenName").length)
$("#hiddenName").val(name);
else $('#textDiv').val(name);
}
getUSERName();
I have a upload-file-form in home.php. When a file is uploaded successfully the home.php loads the upload.php where I have a form there the user can write the information about the mp3 file, info like artist name and things like that. I want to implement the Autocomplete script by jQuery. But the autocomplete don't work when it get loaded through javascript code but it work when I visit the page upload.php. What can be the problem?
Home.php
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-6">
<script src="src/script.js" type="text/javascript" charset="iso-8859-6"></script>
</head>
<body style="margin-top:-60px;">
<form id="upload_form" enctype="multipart/form-data" method="post" action="upload.php">
<div>
<input class="ufile" type="file" name="ufile" id="ufile" accept="audio/*" onchange="loadFile(this)" />
<input type="button" class="button" id="upload_button" value="ارفع ملف صوتي" onclick="inputCheck()" />
</div>
</form>
<div style="padding:0px 10px 0px 10px;">
<div id="upload_response"></div>
</div>
</body>
</html>
Upload.php
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-6">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(function () {
var availableTags = ["html", "php"];
$("#artistInput").autocomplete({
source: availableTags
});
});
</script>
</head>
<body>
<div class="ui-widget">
<form name="saveForm" action="upload.php" method="post" onSubmit="return(infoCheck(this))">
<input class="uploadinput" style="width:430px;" name="artist" id="artistInput">
<input type="submit" class="button" style="color:white;margin-left:5px;width:160px;background:url(images/red_gradient.jpg)" value="حفظ" name="saveInfo" />
<input type="reset" class="button" style="color:black;width:168px;background:url(images/yellow_gradient.jpg)" value="إعادة تعيين">
</form>
</div>
</body>
</html>
Script.js
function uploadFinish(e) { // upload successfully finished
var oUploadResponse = document.getElementById('upload_response');
oUploadResponse.innerHTML = e.target.responseText;
oUploadResponse.style.display = 'block';
$("#upload").animate({
height: '765px'
}, 350);
$('#errormessage').slideUp('fast');
}
You're executing the script before the DOM element is ready.
You can do several different things to solve it, for example:
Load your script at the bottom of the page
Move your script inside document ready event, so the DOM element is available
$(document).ready(function() { -your script here- });
you can use ajax to use auto complete type plug-in..
<style>
label._tags {
padding:5px 10px;
margin:0px;
border:solid thin #ccc;
border-radius:3px;
display: inline-block;
}
label._tags span {
padding:2px 10px;
margin: 0px 10px;
color:#FFF;
border-radius:700px;
font-family:"calibri",verdana,serif;
background-color:teal;
}
</style>
<script type="text/javascript">
var request;
var tag=new Array();
function getXMLObject(){
if(window.XMLHttpRequest){
return(new XMLHttpRequest);
}else if(window.ActiveXObject){
return(new ActiveXObject("Microsoft.XMLHttp"));
}else{
return (null);
}
}
function getCategory(){
var address="Ajax_testing";
request=getXMLObject();
var data=document.getElementById("multitag").value;
var nwadd=address+"?text="+data;
request.onreadystatechange=showResultsubject;
request.open("GET",nwadd,true);
request.send();
}
function close()
{
var y=document.getElementById("p");
var myNode = document.getElementById("p");
while (myNode.firstChild) {
myNode.removeChild(myNode.firstChild);
}
y.setAttribute("style","dispaly:none;");
}
function removetag(id)
{
var y=document.getElementById("l");
var z=document.getElementById(id.substr(3));
tag.pop();
y.removeChild(z);
}
function gettag(id){
tag.push(id);
var f="";
for (var i=0;i<tag.length;i++)
{
var s="<label class='_tags' id='"+tag[i]+"'>"+tag[i]+"<span><a id='tag"+tag[i]+"' onclick='removetag(this.id)'>X</a></span> </label>";
f=f.concat(s);
}
document.getElementById("l").innerHTML=f;
}
<tr>
<td>Keyword :
</td>
<td><input type="text" id="multitag" name="multitag" onkeyup="getCategory()" onclick="close()">
<div id="l">
</div>
<div id="p" style="display: none;z-index:11;" >
</div>
</td>
</tr>
I want to implement a suggestion combobox which shows suggestions grabbed from my own web service (using restapi and jsonp). I found that ComboBox.store.root.children contains suggestion's data and wrote the code below. For the simplicity I use there array instead of getting suggestions from my service.
The problem with that is it looks like a hack and some features don't work properly. For instance, I can't get rid of 'Search' phrase in the list.
Can you suggest more elegant solution?
<head>
<style type="text/css">
body, html { font-family:helvetica,arial,sans-serif; font-size:90%; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js"
djConfig="parseOnLoad: true">
</script>
<script type="text/javascript">
dojo.require("dijit.form.ComboBox");
</script>
<script type="text/javascript">
dojo.addOnLoad(function() {
var cb = dijit.byId("searchQuery");
var bufToClone = cb.store.root.children[0];
cb.store.root.children[0] = null;
var suggestions = ["AAA", "BBB", "CCC"];
dojo.connect(cb, "onKeyPress", function(event) {
var newval = cb.textbox.value;
dojo.forEach(suggestions, function(entry, i) {
var newVal = dojo.clone(bufToClone);
newVal.value = entry;
newVal.text = entry;
cb.store.root.children[i] = newVal;
});
});
});
</script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css"
/>
</head>
<body class=" claro ">
<select dojoType="dijit.form.ComboBox" id="searchQuery" name="searchQuery" class="sQ">
<option>
Search
</option>
</select>
</body>
Are you expecting this
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css"/>
<style type="text/css">
body, html { font-family:helvetica,arial,sans-serif; font-size:90%; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js"
djConfig="parseOnLoad: true">
</script>
<script type="text/javascript">
dojo.require("dijit.form.ComboBox");
dojo.require("dojo.data.ItemFileWriteStore");
dojo.require("dijit.form.Button");
</script>
<script type="text/javascript">
var idg = 4;
dojo.addOnLoad(function() {
str = new dojo.data.ItemFileWriteStore({
data:{
identifier:'id',
label:'name',
items:[
{id:1,name:'me'},
{id:2,name:'you'},
{id:3,name:'stackoverflow'}
]
}
})
new dijit.form.ComboBox({
store:str,
name:"searchQuery",
onChange:function(){
alert(dojo.query("[name=searchQuery]")[0].value)
}
},"searchQueryHld")
});
</script>
</head>
<body class=" claro ">
<span id="searchQueryHld"></span>
<span dojoType="dijit.form.Button">
Add one option
<script type="dojo/method" event="onClick">
str.newItem({id:idg,name:'me'+idg})
idg++;
</script>
</span>
</body>
</html>