Can someone tell me why none of the following will work?
EDIT
(Just incase the link goes down this question is about how you can't seem to fire events in a page that is loaded into a dijit pane. This is applicable for Firefox 6.0.2, Crome 12.0.742.100 and Opera 11.00.1156 )
<!-- index.html -->
<script>
dojo.addOnLoad(function() {
dijit.byId("mainSettings").set("href","index2.html");
});
</script>
<body class="claro">
<div id="main" dojoType="dijit.layout.BorderContainer">
<div dojoType="dojox.layout.ContentPane" splitter="false" id="mainSettings" region="center"></div>
</div>
</body>
<!-- index2.html -->
<!-- THIS WORKS!!! -->
<select dojoType="dijit.form.Select">
<option value="bool">On/Off</option>
<option value="date">Date</option>
<option value="float">Number</option>
<option value="text">Text</option>
<script type="dojo/method" event="onChange">
alert("change");
</script>
</select>
<!-- NONE OF THIS WORKS!!! -->
<select dojoType="dijit.form.Select" onChange="change1">
<option value="bool">On/Off</option>
<option value="date">Date</option>
<option value="float">Number</option>
<option value="text">Text</option>
</select>
<script type="dojo/method" event="change1">
alert("change1");
</script>
<button dojoType="dijit.form.Button" onClick="change2">
change2
</button>
<script type="dojo/method" event="change2">
alert("change2");
</script>
<script>
dojo.addOnLoad(function() {
dojo.connect(dijit.byId('button2'), 'onClick', function(){
alert("change3");
});
});
</script>
<button dojoType="dijit.form.Button" id="button2">
button2
</button>
EDIT
Dojango code:
#forms.py
type = CharField(widget=Select(choices=VARIABLE_CHOICES,attrs={'onChange':'letterVariableTypeSelectChange'}))
#template
{{ form.type }}
<script>
function letterVariableTypeSelectChange(){
alert("dave");
}
</script>
Try setting the executeScripts and parseOnLoad properties to true on the dojox.layout.ContentPane
<div id="main" dojoType="dijit.layout.BorderContainer">
<div dojoType="dojox.layout.ContentPane" executeScripts="true" parseOnLoad="true" splitter="false" id="mainSettings" region="center"></div>
</div>
There also appears to be a fundamental disparity to how you are using dojo/method.
The <script type="dojo/method"> tags should go inside the elements that they are overriding
Notice how your snippet that works is defined:
<select dojoType="dijit.form.Select">
<option value="bool">On/Off</option>
<option value="date">Date</option>
<option value="float">Number</option>
<option value="text">Text</option>
<!--Script tag inside widget node, event is the name of the event to override -->
<script type="dojo/method" event="onChange">
alert("change");
</script>
</select>
versus the ones that don't work:
<!--onChange here is specified directly on the widget (which is incorrect), should be in the
<script type="dojo/method" event="OnChange">
-->
<select dojoType="dijit.form.Select" onChange="change1">
<option value="bool">On/Off</option>
<option value="date">Date</option>
<option value="float">Number</option>
<option value="text">Text</option>
</select>
<!--script tag outside the select. event refers to a nonexistent event for the widget.-->
<script type="dojo/method" event="change1">
alert("change1");
</script>
You get can the list of available events that you can use dojo/method to override at the reference documentation for a given widget.
http://dojotoolkit.org/api/dijit/form/FilteringSelect
Related
Is there a way to set up chosen on a multiple select box so that when items are selected just the option values are shown instead of the option name by default.
<select multiple>
<option value="A">America</option>
<option value="B">Barbados</option>
<option value="C">Canada</option>
</select>
So whenselected, the input box shows "A", "B" and or "C"
Thanks in advance
Make sure you are using the correct .js and .css files.
This works for me:
<head>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.6.1/chosen.css">
</head>
<body>
<select multiple style="width: 500px;">
<option value="A">America</option>
<option value="B">Barbados</option>
<option value="C">Canada</option>
</select>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.6.1/chosen.jquery.min.js"></script>
<script>
$(document).ready(function() {
$('select').chosen();
});
</script>
</body>
In this example are used the external resources from cdnjs.cloudflare.com:
3.1.0/jquery.min.js
1.6.1/chosen.css
1.6.1/chosen.jquery.min.js
After Selecting "Select All" option in the drop down list,I'll click on a generate graph button.Then I want to display a chart containing of all options in the drop down list in a particular div using bootstrap multi-select.
My code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Multi Select Dropdown with Checkboxes</title>
<link rel="stylesheet" href="css/bootstrap-3.1.1.min.css" type="text/css" />
<link rel="stylesheet" href="css/bootstrap-multiselect.css" type="text/css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript" src="js/bootstrap-2.3.2.min.js"></script>
<script type="text/javascript" src="js/bootstrap-multiselect.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
</head>
<body>
<div id="PiDiv"></div>
<div id="AllDiv"></div>
<form id="form1">
<div style="padding:20px">
<label>Select Country</label>
<select id="selectId" multiple="multiple">
<option value="India">India</option>
<option value="Japan">Japan</option>
<option value="Germany">Germany</option>
<option value="Nepal">Nepal</option>
<option value="Iraq">Iraq</option>
<option value="China">China</option>
</select><br /><br />
<input type="button" id="btnget" value="Get Selected Values" />
<script type="text/javascript">
$(function() {
$('#selectId').multiselect({
includeSelectAllOption: true
});
$('#btnget').click(function() {
alert($('#selectId').val());
if($('#selectId').val() == "India"){
$("#PiDiv").load("/home/divya/html_docs/pi.html");
}
})
});
</script>
</div>
</form>
</body>
</html>
I'm able to select one option and display its corresponding chart.But for select all option,I'm not getting how to display a div after clicking on a generate graph button.Can anyone please suggest me on this issue ...
try this option. Change the html to below and replace your URL in data-url
<select id="selectId" multiple="multiple">
<option value="India" data-url="<!-- URL -->">India</option>
<option value="Japan" data-url="<!-- URL -->">Japan</option>
<option value="Germany" data-url="<!-- URL -->">Germany</option>
<option value="Nepal" data-url="<!-- URL -->">Nepal</option>
<option value="Iraq" data-url="<!-- URL -->">Iraq</option>
<option value="China" data-url="<!-- URL -->">China</option>
</select>
jQuery Code
$('#btnget').click(function() {
$("#PiDiv").empty();
$('#selectId option:selected').each(function(index,elem){
if(typeof $(elem).data('url') != "undefined"){
$.get( $(elem).data('url'), function( data ) {
$("#PiDiv").append(data);
});
}
});
})
How can I get the value to be displayed after the selection from the list is made, without the use of a button. I tried to implement an onChange event for the select list, and doing away with the button, but I can't get it to work. I'd like the value (1,2,3) to display below the select box after an option (a,b,c) is selected.
<script>
function displayResult() {
this.nextSibling.nodeValue = document.getElementById("mySelect").value;
}
</script>
<body>
<form>
<select id="mySelect" style="width:220px">
<option value="1">a</option>
<option value="2">b</option>
<option value="3">c</option>
</select>
</form>
<button type="button" onclick="displayResult.call(this)">List Locations</button>
http://jsfiddle.net/8ZkR2/
If you are using JQuery you can do this:
HTML:
<form>
<select id="mySelect" style="width:220px">
<option value="1">a</option>
<option value="2">b</option>
<option value="3">c</option>
</select>
<div id="myDiv"></div>
</form>
JS:
$(document).ready(function() {
$('#mySelect').on('change', function () {
$('#myDiv').html(this.value);
});
});
Fiddle: http://jsfiddle.net/qv7cj/
Using jQuery:
$('#mySelect').change(function(){
//do stuff
})
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
$(document).on('ready', function(){
$('#mySelect').on('change', function(){
console.log($('#mySelect').find('option:selected').attr('value'));
})
});
</script>
</head>
<body>`enter code here`
<form>
<select id="mySelect" style="width:220px">
<option value="1">a</option>`enter code here`
<option value="2">b</option>
<option value="3">c</option>
</select>
</form>
<button type="button" onclick="displayResult.call(this)">List Locations</button>
</body>
</html>
pls try this
I am having trouble making my drop down menu dynamically show blocks of html code which are labelled style="display:none".
I have following code.
<script type="text/javascript">
$(\'select[name="questiontype"]\').change(function(){
if ($(this).val() == "multiple")
alert("call the do something function on option multiple");
else
alert("call the do something function on option programming");
});
</script>
<form action="addQuestion.php" method="post">
<select name="questiontype">
<option name="questiontype" value="multiple" click="return showMultiple();">Multiple Choice< /option>
<option selected name="questiontype" value="programming" click="return showProgramming();">Programming< /option>
</select><br>
<input type="hidden" name="course" value="'.$course.'" />
<div id=\'multiple\' style="display:none">
Multiple
</div>
<div id=\'programming\' style="display:none">
Programming
</div>
</form>
i tried these functions to .show() the div's by id from the dropdown menu but no luck and I'm not sure what I'm doing wrong. I also removed some code in the div id blocks to make it easier to read.
<script>
function showMultiple(){
$('#multiple').show();
$('#programming').hide();
return false;
}
function showProgramming(){
$('#multiple').hide();
$('#programming').show();
return false;
}
</script>
demo
HTML
<select id="selectMe">
<option value="multiple">multiple</option>
<option value="programming">Programming</option>
</select>
<br><br><br>
<div id="multiple" class="group" >
Multiple
</div>
<div id="programming" class="group" >
Programming
</div>
JS
$(document).ready(function () {
$('.group').hide();
$('#multiple').show();
$('#selectMe').change(function () {
$('.group').hide();
$('#'+$(this).val()).show();
})
});
In your select option you are using click instead of onclick event
<select name="questiontype">
<option name="questiontype" value="multiple" onclick="return showMultiple();">Multiple Choice</option>
<option selected name="questiontype" value="programming" onclick="return showProgramming();">Programming< /option>
</select>
And no need to use escape for single quotes,
<div id='multiple' style="display:none">
Multiple
</div>
<div id='programming' style="display:none">
Programming
</div>
and in script tag
$('select[name="questiontype"]').change(function(){
Try this:
<form action="addQuestion.php" method="post">
<select name="questiontype" id="questiontype">
<option value="multiple">Multiple Choice</option>
<option selected value="programming">Programming</option>
</select>
<br>
<div id='multiple' class="group" style="display:none">
Multiple
</div>
<div id='programming' style="display:none" class="group">
Programming
</div>
</form>
Put this code in head section:
<script src="jquery-1.9.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.group').hide();
$('#programming').show();
$('#questiontype').change(function () {
$('.group').hide(1000);
$('#'+$(this).val()).show(1000);
})
});
</script>
A] Summary of the problem:
Trying to pre-select a users country on page load
B] Details:
1] I am using maximinds javascript to find out a users county.
2] I have a drop down list which contains a list of 225 or so countries.
3] Inside the javascript section of my HTMLr page, I am trying to select the users country from the drop-down list.
But the country is not getting selected
C] Code excerpt:
<select name="country_name" id="id_country_name">
<option value="" selected="selected">---------</option>
<option value="Afghanistan">Afghanistan</option>
<option value="Aring land Islands">Aring land Islands</option>
</select>
<!-- including the geoip javascript library -->
<script src="http://j.maxmind.com/app/geoip.js" type="text/javascript"></script>
<!-- By default, we will select users country -->
<script type="text/javascript" language="JavaScript">
document.getElementById(geoip_country_name()).selected = true
</script>
Thanks,
[Edit#1]
Tried the following jquery code, but this isnt populating the drop-down list:
<!-- including the geoip javascript library -->
<script src="http://j.maxmind.com/app/geoip.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("option[value='" + geoip_country_name() + "']").attr('selected', 'selected');
});
</script>
[Edit#2]
Tried the $("#id_country_name").val(geoip_country_name());,
<div id="userDataForm">
<form method="POST" action="/UserReporting">
<table>
<!-- Printing the forms for users country, city -->
<tr><th><label for="id_country_name">Country name:</label></th><td>
<select name="country_name" id="id_country_name">
<option value="" selected="selected">---------</option>
<option value="Afghanistan">Afghanistan</option>
<option value="Aring land Islands">Aring land Islands</option>
<option value="Albania">Albania</option>
</select>
</td></tr>
<tr><th>
<label for="id_city_name">City name:</label></th><td><input type="text" name="city_name" id="id_city_name" /></td></tr>
</table>
<input type="submit" name="report_up" value= "Report Up">
<input type="submit" name="report_down" value= "Report Down">
</form>
<!-- including the geoip javascript library -->
<script type="text/javascript" language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</script>
<script src="http://j.maxmind.com/app/geoip.js" type="text/javascript">
</script>
<script type="text/javascript">
$(function () {
$("#id_country_name").val(geoip_country_name());
});
</script>
The document.getElementById call would only work if each <option> in your HTML had the country name as the id (replacing spaces with "_" or something similar):
<select name="country_name" id="id_country_name">
<option value="" selected="selected">---------</option>
<option id="Afghanistan" value="Afghanistan">Afghanistan</option>
<option id="Aring_land_Islands" value="Aring land Islands">Aring land Islands</option>
</select>
However, I'd lean towards this approach with jquery, as it doesn't require giving every option its own id:
$(function () {
$("#id_country_name").val(geoip_country_name());
});
Try
document.getElementById('id_country_name').selectedIndex=index;
where index is an integer corresponding to the selection you want.