I was wondering if you guys can help me with something.
i have the following code set:
$(document).on('mouseenter','input',function(){
soundHover.play();
});
$(document).on('mouseleave','input',function(){
soundHover.pause();
soundHover.currentTime = 0;
});
I also have a Jquery UI controlGroup formed from different controls.
I would want to use 1 function for all different controls something like instead of 'input' use 'input label select'. I works for each separately, but when i use them together, it does not work.
Is it possible to refer to multiple controls in a control group? if yes, how can I do it?
Regards,
I was using the wrong delimiter, if i use "," between the control it works as intended.
$(document).on('mouseenter','input,label,a',function(){
soundHover.play();
});
$(document).on('mouseleave','input,label,a',function(){
soundHover.pause();
soundHover.currentTime = 0;
});
I still have not gotten the 'select' part to work though.
Related
I know if i have a select2 and i want to set one of the options, i can do run this code.
$(document).ready(function(){
$('#btn').change(function(){
$('#select').val(4).trigger("change")
});
});
Lets say i want to get the text of the option
<option value=4>California</option>
but if i want to set it based on the text not the value, how do i do it?
I tried doing
$("#select").select2(data.text(), "California");
but it didnt work.
How can i do this programatically in jquery or javascript.
Any help is appreciated
For example: If you need to find Australia among other countries
let long_name = 'Australia';
let $element = $('.country-js')
let val = $element.find("option:contains('"+long_name+"')").val()
$element.val(val).trigger('change.select2');
Other answers did not work for me, probably because I use newer version of select2
In addition for multi selects use this, for not losing already selected values
var selected=$("#foo option:selected").map(function(){ return this.value }).get();
selected.push( $("#foo option:contains('text')").val() );
$("#foo").val(selected).trigger('change');
Further to Shakeel Ahmed's answer, you should call .trigger('change'), so in total something like this:
$("#select").select2("val", $("#select option:contains('Text')").val()).trigger('change');
You can use following codes
$("#select").select2("val", $("#select option:contains('Text')").val() );
If will select option using your Text
I am using the pure Razor style definition for a Kendo Menu:
#using Kendo.Mvc.UI
#(Html.Kendo().Menu()
.Name("main-menu")
.Items(items1 =>
{
items1.Add().Text("Home").Url(#Url.Action("Index", "Home"));
items1.Add().Text("Movements").Items(subs =>
{
subs.Add().Text("Import Data").Action("Import", "VehicleMovementBatch");
subs.Add().Text("View Movements");
});
items1.Add().Text("Presences");
items1.Add().Text("Billing");
items1.Add().Text("Config").Items(items2 =>
{
items2.Add().Text("Pricing").Action("Index", "PriceRule");
items2.Add().Text("Users");
});
items1.Add().Text("Control");
})
)
I can find absolutely bloody nothing anywhere on all the internets, that even hints how to do do this properly. The closest I have is defining the DataSource in JavaScript object notation, with separators, and assigning it to the grid oj the client side at run time. This is definitely a good example of a case where can only pray to all the gods that the API isn't as superlatively inadequate as the documentation.
This is all you need to do. Figured it out on my own because I couldn't find an answer anywhere on the web.
items1.Add().Text("<hr/>").Encoded(false).Enabled(false);
The < hr / > thing didn't work for me in kendo 2014.1.528
This does:
children.Add().Text("<div class='k-separator'></div>").Encoded(false).Enabled(false);
So an example would be:
items.Add().Text("Menu X").ImageUrl(Url.Content("~/Content/img/menux_16E.png"))
.Items(children =>
{
children.Add().Text("Item 1").ImageUrl(Url.Content("~/Content/img/item1_16E.png"));
children.Add().Text("<div class='k-separator'></div>").Encoded(false).Enabled(false);
children.Add().Text("Item 3").ImageUrl(Url.Content("~/Content/img/item3_16E.png"));
});
To help anyone coming across this issue in the future, you can add a separator directly with the following:
items.Add().Separator(true);
This works since at least v2013.2.918, since that is what I am using.
Justin
I have v2016.3.914 and items.Add().Separator(true); creates an unwanted horizontal scrollbar on an RTL page.
I solved it using this:
inner.Add().Separator(true).HtmlAttributes(new { style = "width: 99%;" });
I have a set of dynamically generated dropdown boxes on my page. basically I clone them using jQuery. now I want to capture the value selected on each dropdown on change event.
I tried something like this which did not work.
$('._someDropDown').live('change', function(e) {
//debugger;
var v = $(this);
alert($(this + ':selected').val());
alert($(this).val());
});
How do I get it done?
To get the text of the selected option
$("#your_select :selected").text();
To get the value of the selected option
$("#your_select").val();
This is what you need :)
$('._someDropDown').live('change', function(e) {
console.log(e.target.options[e.target.selectedIndex].text);
});
For new jQuery use on
$(document).on('change', '._someDropDown', function(e) {
console.log(this.options[e.target.selectedIndex].text);
});
$("#citiesList").change(function() {
alert($("#citiesList option:selected").text());
alert($("#citiesList option:selected").val());
});
citiesList is id of select tag
Check it Out-->
For getting text
$("#selme").change(function(){
$(this[this.selectedIndex]).text();
});
For getting value
$("#selme").change(function(){
$(this[this.selectedIndex]).val();
});
You can try:
$("._someDropDown").val();
To get the value of a drop-down (select) element, just use val().
$('._someDropDown').live('change', function(e) {
alert($(this).val());
});
If you want to the text of the selected option, using this:
$('._someDropDown').live('change', function(e) {
alert($('[value=' + $(this).val() + ']', this).text());
});
try this...
$("#yourdropdownid option:selected").val();
This is actually more efficient and has better readability in my opinion if you want to access your select with this or another variable
$('#select').find('option:selected')
In fact if I remember correctly phpStorm will attempt to auto correct the other method.
In case you want the index of the current selected value.
$selIndex = $("select#myselectid").prop('selectedIndex'));
The options discussed above won't work because they are not part of the CSS specification (it is jQuery extension). Having spent 2-3 days digging around for information, I found that the only way to select the Text of the selected option from the drop down is:
{ $("select", id:"Some_ID").find("option[selected='selected']")}
Refer to additional notes below:
Because :selected is a jQuery extension and not part of the CSS specification, queries using :selected cannot take advantage of the performance boost provided by the native DOM querySelectorAll() method. To achieve the best performance when using :selected to select elements, first select the elements using a pure CSS selector, then use .filter(":selected"). (copied from: http://api.jquery.com/selected-selector/)
You can also use :checked
$("#myselect option:checked").val(); //to get value
or as said in other answers simply
$("#myselect").val(); //to get value
and
$("#myselect option:checked").text(); //to get text
So I'm trying to use dijit tooltip.
http://docs.dojocampus.org/dijit/Tooltip
However, they only have the attribute of "connectIds" this seems rather limiting and I'm surprised that it was programmed this way. I don't know how many hyperlinks my pages will have, so wouldn't it be better to have an option like "connectByHTMLtag" so that I can map all "a" tags to a specific tooltip? Or even a "connectClasses" would make a bit more sense.
This means I have to manually enter id="tooltip1" id="tooltip2" etc.
Anyone find a way around this??
You could connect them when the page loads using dojo.query.
Give all of your hyperlinks a class that you can use to select them later:
Etc
Then in your JavaScript you can use something like this:
dojo.addOnLoad(function() {
dojo.query(".link-tooltip").forEach(function(node, index, arr) {
new dijit.Tooltip({
connectId: [node.id],
label: "My tooltip!"
});
});
});
This code is untested, but that's basically how you could do it. dojo.query is very handy for this sort of thing!
As of Dojo Toolkit 1.8, it is now possible to attach a tooltip via a selector:
require(["dojo/ready", "dijit/Tooltip", "dojo/query!css2"], function(ready, Tooltip){
ready(function(){
new Tooltip({
connectId: "myTable",
selector: "tr",
getContent: function(matchedNode){
return matchedNode.getAttribute("tooltipText");
}
});
});
});
http://dojotoolkit.org/reference-guide/1.8/dijit/Tooltip.html#attaching-to-multiple-nodes
I am using sIFR3 on a website. I remember in sIFR2 you coul use this sIFR.bHideBrowserText = false; to show the text before sIFR kicks in.
How do you do this in sIFR3 and where do you put the code?
Thanks for your help.
C
The feature as it existed in sIFR 2 no longer exists in sIFR 3. You could achieve the same affect like this, though:
sIFR.autoInitialize = false;
sIFR.activate(movie);
sIFR.removeFlashClass();
sIFR.replace(movie, { selector: 'h1' });
window.onload = function(){
sIFR.setFlashClass();
sIFR.initialize();
};
Where, of course, movie is the appropriate variable that references the Flash movie. You might want to connect to the onload event through another JavaScript framework. You must wait until full page load, things like $(document).ready() (jQuery) will not work reliably cross-browser.