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);
});
Related
I have a kendo ui dropdownlist
<select id="mySelect"
kendo-drop-down-list
k-options="controller.mySelect"
ng-model="controller.model">
</select>
Then when I change another select I am successfully refreshing the select by
$("#initiative_select").data("kendoDropDownList").dataSource.read();
But the initial selection is blank, I want to make the first item selected,
I have try to do that on dataBound by
dataBound: function(e) {
e.sender.select(e.sender.dataItem(0));
}
But it's not working.
I think you could use this on your dataBound function
if (this.select() === -1) { //check whether any item is selected
this.select(0);
this.trigger("change");
}
As mentioned by ggkrustev, the issue on github
a DEMO here
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 have a form in an ASP.Net MVC project on which I am using qTip2 to display validation erros. On that form, I also have text fields that are activated/deacivated depending on choices made with radio buttons. When fields are not to be used, I set their disabled="disabled" properties. This ensures that client side validation (jQuery unobtrusive validation) for these fields is also deactivated. Now, I am wondering how to reset the qTip2 "bubbles" for fields that get disabled.
Let's say I have radio buttons 1 and 2 that enable text boxes A and B respectively. Let's also say that radio button 1 is selected by default, and that text boxes A and B are required fields when the corresponding radio button is selected. If I press on the Submit button without filling any text field, a qTip error bubble appears beside text box A. Now, if I press on radio button 2, I have to clear that bubble, disable text box A and its validation, and enable text box B and its validation. However, if I press submit at this point without filling text box B, no error bubble appears and the form is not getting submitted.
I tried various combinations of the following commands to accomplish this, but then the validation errors get completely disabled:
$('.qtip').remove();
$('.qtip').hide();
$("input.input-validation-error").removeClass("input-validation-error"); // watch out for the error message labels or they won't go away
$('form').data('validator').resetForm();
$("form").validate().form();
No matter what combinations of these commands I execute after a radio button got clicked and the proper text-boxes disabled/enabled, the qTip bubbles disappear, but they never reappear even if I click on the Submit button and other errors should appear on the form.
I am probably not using the right commands to reset qTip validation bubbles.
Ok, I found a solution right after posting the question. I used the solution proposed on this page http://johnculviner.com/?tag=/unobtrusive-validation-reset that I modified a bit. I added the following line: $form.find('input').qtip('destroy');
It gives this:
//Taken from: http://johnculviner.com/?tag=/unobtrusive-validation-reset
(function ($) {
$.fn.resetValidation = function () {
var $form = this.closest('form');
//Destroy qTip error bubbles (http://craigsworks.com/projects/forums/thread-using-qtip-with-jquery-validation-framework)
//$form.find('input:not(.errormessage)').qtip('destroy');
$form.find('input').qtip('destroy');
//reset jQuery Validate's internals
$form.validate().resetForm();
//reset unobtrusive validation summary, if it exists
$form.find("[data-valmsg-summary=true]")
.removeClass("validation-summary-errors")
.addClass("validation-summary-valid")
.find("ul").empty();
//reset unobtrusive field level, if it exists
$form.find("[data-valmsg-replace]")
.removeClass("field-validation-error")
.addClass("field-validation-valid")
.empty();
return $form;
};
//reset a form given a jQuery selected form or a child
//by default validation is also reset
$.fn.formReset = function (resetValidation) {
var $form = this.closest('form');
$form[0].reset();
if (resetValidation == undefined || resetValidation) {
$form.resetValidation();
}
return $form;
}
})(jQuery);
Then when a radio button is clicked, I call $("form").resetValidation(); after the proper fields have been enabled/disabled.
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
I am currently trying to make a bookmarklet that adds, among other things, a DIV element to the page.
I'm doing this by adding the HTML code to body.innerHTML and that works fine. On this DIV element is a button that should allow to hide the added DIV. I therefore tried to add via JavaScript a JavaScript function to the innerHTML called function hideDiv().
The new JavaScript is added to the body and it looks fine. But it doesn't work.
Short example:
javascript:var b = document.body.InnerHTML; b=b+'<input type="button" onclick="javascript:alert("hello")"/>'; document.body.innerHTML = b;
This bookmarklet should add a button that shows an alert if its clicked. It adds the button but nothing happens when clicking on it.
Is this a general issue? Can JavaScript add (working) JavaScript to a page?
I think you should set an id and then just add the function to the element. Like this:
javascript:var b = document.body.InnerHTML; b=b+'<input type="button" id="test"/>'; document.body.innerHTML = b; document.getElementById('test').onclick = function () { alert('hi')}
The javascript: prefix is only used in href attributes (or action for forms). It is NOT used in onclick or any other events. Remove the javascript: and your code should work fine.