I've recently started trying out d3.js for visualization. I don't have much of a background in JS or web scripting, so sorry if this is an easy thing that I'm asking.
The exact example doesn't matter too much. I am making a graph, something like this
I want there to be a drop down menu on the page that lists different data sources. The user could then select the data source and the graph would update.
I created a drop down menu using the example here. However, I am unsure how to get the value as I need the line
d3.json("miserables.json", function(json) {
to update with the new name.
Your html file should look something like this...
<select id="json_sources" name="json_sources">
<option value ="source1.json" selected>Source 1</option>
<option value ="source2.json">Source 2</option>
<option value ="source3.json">Source 3</option>
</select>
Then you add an event listener for the change event on the select element (.on in d3.js):
var dropdown = d3.select("#json_sources")
var change = function() {
var source = dropdown.node().options[dropdown.node().selectedIndex].value;
d3.json(source, function(json) {
//continue doing stuff here.
})
}
dropdown.on("change", change)
change(); //trigger json on load
Related
I want to add some animation to existing script I have right now. This is simple "go to div" script which goes to specific Div when someone change the option in dropdown list, but it functions "onchange" instead of link click. Now I would like to add animation, some smooth scroll when it goes to that Div because right now it just snaps to it and customer could be disoriented, thinking what happened.
This is my script inside HEAD
<script type="text/javascript">
function mylinkfunction(e) {
window.location.hash="#reservation_summary";
}
</script>
And this is the trigger mylinkfunction(); in dropdown list, among other "onchange" triggers.
<select class="inputbox" onchange="roomsCalc(this.value);mylinkfunction();removeHash();" style="width:150px" id="roomselect'.$rowr->id.'" name="jh-select-price['.$rowr->id.']">
I've found few solutions but everything was made for onclick and when someone click on a link, tried to implement some of these but it didn't work for "onChange" trigger.
I would be very thankful for some help.
Add jQuery to your project (if you haven't already!) and use jQuery's .animate() function along with scrollTop to achieve the desired effect.
So the select will look something like what you already have:
<select onchange="mylinkfunction();">
<option value="one">Uno</option>
<option value="two">Dos</option>
<option value="three">Tres</option>
</select>
...And mylinkfunction() will look like this:
function mylinkfunction(e) {
$('html, body').animate({
scrollTop: $("#reservation_summary").offset().top
}, 2000);
}
I've got everything working well except the drop area element doesn't hide after moving back off the page.
For example, if I drag something to the page, the drop area element shows, but then if I decide not to drop, it stays visible instead of hiding. It looks like in the demos on the site, it should hide again.
I've been studying this page: http://docs.fineuploader.com/branch/master/integrating/options/fineuploader.html#draganddrop-option-properties
There doesn't seem to be a callback for when there is no longer a file about to be dropped in the browser window. My code looks just like the examples, but has my own element id and class names, both of which work.
Any ideas?
Update - here is some code:
<div id="file-upload-well" class="well text-center">
<div id="file-upload-drop-area" style="display:none;">Drop files here</div>
Upload Files
</div>
and here is the DND js:
var dragAndDropModule = new qq.DragAndDrop({
dropZoneElements: [document.getElementById('file-upload-drop-area')],
classes: {
dropActive: "dropActive"
},
callbacks: {
processingDroppedFiles: function () {
$('#file-upload-drop-area').hide();
},
processingDroppedFilesComplete: function(files) {
uploader.addFiles(files);
}
}
});
The issue was setting the hideDropZonesBeforeEnter is set to false by default and needed to be set to true.
Both the variable name and the help documentation make it seem it will only show the drop zone when a file is directly over it, but instead it hides and shows the dropdown when a file is over a compliant browser.
I have binded a Telerik dropdownlist with viewbag. It's working well. But listed items are wrapped.
Instead of coming in single line like 'United Arab Emirates' , It comes like
United
Arab
Emirates
How could I unwrap the line item
Thanks in advance
Is this in regard to Telerik ASP.net controls?
If so,
Have you tried setting the "NoWrap" property in the aspx of the combo box?
NoWrap="false"
I would check the width of the control, which would include the container for dropdown list values. You may have to change the CSS width... but it wouldn't be dynamic based on the dropdown values.
Here is a Telerik suggestion.
Are you actually using a dropdown list, or are you using a Telerik ComboBox? The combobox has a lot more options than a normal drop list, and in most cases it is very easy to convert from one control to the other. It's like a drop down list on steriods. Using the combo box, there is an awesome property called DropDownAutoWidth which you can set to enabled/disabled. Enabling will auto-size the width of the drop down based on the items that are in the drop down.
Try the code at this demo: Prevent Wrap of Kendo UI Drop down list item.
In the demo, you can change the text of any item in drop down and you will notice that the drop down width will automatically adjust so no wrapping of any item occurs. Put the JavaScript in this demo inside the document.ready event.
Markup
<select id="ddl1">
<option value="1">1</option>
<option value="2">option 2</option>
<option value="3">longer option 3</option>
<option value="4">even longer option 4 dssd s dssas </option>
</select>
JavaScript
$(document).ready(function() {
$("#ddl1").kendoDropDownList();
setWidth($("#ddl1"));
});
function setWidth(el)
{
var d = el;
var p = d.data("kendoDropDownList").popup.element;
var w = p.css("visibility","hidden").show().outerWidth();
p.hide().css("visibility","visible");
d.closest(".k-widget").width(w);
}
i am using ajax to get details from database as in this Example along with it
i used jquery autocomplete combo as in this Example.
The combo box works fine without the auto complete.
When the auto complete is active the details are not generated in the onChange Event of the combo box.
<select name="sitemCode" id="itemCode" onchange="showItem(this.value)">
<option value = " 0 ">Select Item Code</option>
How can i make it work with the autocomplete jquery ? Please Help
Have you tried like this ??
$('#itemCode').change(function() {
var itemCode= $("#itemCode option:selected").text();
showItem(itemCode);
});
I am trying to write a jquery function that scans the whole of a jqrid to check if any of its cells have a value.
The issue I am having is that there does not seem to be a way of retrieving the selected value of a cell that contains a select box. The jqgrid docs clearly states the following for the getCell and getRowData methods.
Do not use this method when you
editing the row or cell. This will
return the cell content and not the
actuall value of the input element
Which is fair enough, but given that, how do I actually get the value?
Its not possible to parse the html that is returned from the select content, as none of the options are flagged as selected, even if they appear to be selected in the browser.
For reference here is a snippet of my code:
var colModels = this.grid.jqGrid('getGridParam', 'colModel');
for (i = 1; i < colModels.length; i++) {
var colModel = colModels[i];
if (colModel.edittype == 'select') {
var colData = this.grid.jqGrid('getCol', colModel.name, false);
for (j = 0; j < colData.length; j++) {
if (colData[j] != 0) {
//alert("select change: " + colData[j]);
//alert(j+' GridName_' + colModel.name)
//alert("select change: " + $('#GridName_' + colModel.name).val());
//return has value?;
}
}
}
}
Column definiton:
{ name: "AppleId", index: "Appled", width: 150, align: "left", resizable: false, editable: true, edittype: "select", editoptions: { value: function() { return xxx.buildAppleSelect(); } }, formatter: function(cellvalue, options, rowObject, action) { return xxx.buildAppleSelectHtml(cellvalue); } };
I also experimented with afterEditCell and other similar events - but the problem with these is that - clicking the select box does not put the sell in edit mode - you have to click the cell first and then the select.
In short - how do I get the selected value, client side - can it be done?
There are simular questions here, here and here. But none seem to tackle the issue (client side).
No. Here is some HTML that I obtained from a test grid using getRowData:
<select class="editable" size="1" name="test" id="5_test">
<option value="0">Zero</option>
<option value="1">One</option>
<option value="3">Three</option>
<option value="4">Four</option>
</select>
You are right - there is not enough information in the markup to determine which value is selected. In order to get the selected value you will have to bring the row out of edit mode, for example by using grid method saveRow.
It seems to me Dan that you thy to go in a wrong way. I am not really understand why you do want to have grid cell containing of <select>, but if you'll explain me what do you want I am sure I'll find a solution of you problem.
First I explain what I find strange in your question. If you define edittype: "select", then jqGid has typically a string and not a <select> element inside. If you are in en edit mode (for example in inline edit mode), then all other rows excepting selected row has also a string and not a <select> element inside. If user make a chose and press enter, the edit mode will be ended and the modified data will be saved (or send to the server). So it is also not important which values were displayed before.
It seems to me you have some problems because of some custom building of values in buildAppleSelect and custom formatting in buildAppleSelectHtml.
If you be want see intermediate values from select you can use dataEvents with 'change' in the editoptions.
I hope now you understand what I find strange in your question. If you explain me what is your problem and why you do have more then one <select> element and want to read intermediate select values I'll try to find a solution for you.
UPDATED: I posted a code which shows how use dataEvents with 'change' in JQGrid Inline Editing : Filter subcategory dropdown list based on another category dropdown. Probably it will help you.