My problem is quite simple.
I want to use a flat sstring for the content function within the tooltip,
instead of using the value of title attributes.
But why mine code is not working?
$(function () {
$(document).tooltip({
content: "amsdmkam";
});
});
JSFiddle : http://jsfiddle.net/matildayipan/vdc6adwv/
If you want a flat string content instead of using the value of title attribute, you also must put title attribute in input tag
Another error is the semicolon after content: "amsdmkam".
Please check again with my edit
JSFiddle : http://jsfiddle.net/vdc6adwv/2/
Related
I'm having trouble creating and applying a tooltip to each of the images inside a div. The text of the tooltip should be the img's id. This seems like it would be fairly simple, so there must be something I am missing, or not understanding. Here's what I'm using:
$("#myDiv img").tooltip({
content:$(this).attr('id'),
track:true
});
Additionally, these images will be replaced depending on what the user clicks — once the images are deleted (by calling .empty on the containing div), do I need to delete the tooltips, or will they be automatically deleted from memory?
Sorry for the novice question!
You're attempting to get the id of all the img elements. Use .each to parse each element separately.
$("#myDiv img").each(function(){
$this = $(this);
$this.tooltip({
content: $this.attr('id'), // $this[0].id is faster
track: true
});
});
There is no need to remove the tooltip manually; the event bindings are deleted when the element is removed from the DOM.
Try this instead:
$("#myDiv").tooltip({
items: "img",
content: function() {
var el = $(this);
return el.attr( "id" ); // $this[0].id is faster
},
track: true
});
jsFiddle Demo
Reference:
http://jqueryui.com/tooltip/#custom-content
How to get href value of <a> element and store it to a variable with jquery mobile?
This is my snippet code:
$('a').live('click', function() {
var href = $(this).attr('href');
console.log("href value: |"+href);
});
Here is sample:
Link
In my log cat (btw I am using jquery mobiel for phonegap), it returns : href value: |#
What i want is, something like this in my logcat:
href value: | 117.xx.xx.xx/timesheet/file.pdf
I'm using phonegap 2.9
Based on the symptoms you describe, it seems as though the a tag firing the click event has an href of #. Possibly some other tag wrapping your intended anchor? Try a more specific selector and see if that works, maybe something like:
$('#myLink').live('click', function() {
var href = $(this).attr('href');
console.log("href value: |"+href);
});
With this for a link:
Link
If it still gives you a #, then is it possible that the href value is populated after your click event is firing (possibly by some other javascript)?
Finally, solved. After frustating with jquery 'live' and 'on', I'm using plain Javascript function to get value of link in attribute: getAttribute('href'). And that worked!! Anyway, thank's for all the answer.
In my ASP MVC 3 view I have a number of fieldset elements that are hidden when the page loads. Based upon a user selection of a group of radio buttons, I need to make the corresponding fieldset visible.
I'd like to do this in jquery by making an array of the fieldset elements, then cycle through them, adjusting their visibility property if they match the selected radio button or not. Is this possible?
Since there is so much code in the fieldsets I attached the screen shot below to save space/make it more readable. The fieldsets I am trying to alter are inside of the RightDiv. If you need any more detail, please let me know. Thx
You can try this:
$(function(){
$('[name="TransactionType"]').change(function(){
var id = '#' + this.className; //Get the id from the clicked radio classname
$('#RightDiv').find('fieldset').hide();// hide all fieldsets;
$('#RightDiv').find(id).show(); // show the selected one.
});
});
Just note that in your html helper you are providing the the first overload as same name for all. All is well except i believe it will create duplicate ids for each of these. You may want to override it in the HTMLattributes.
#Html.RadioButton("TransactionType", false, new{#class="Enroll", id="Radio1"})
#Html.RadioButton("TransactionType", false, new{#class="New", id="Radio2"})
Sorry, posted a bit too soon on this. Tried the following below and it worked just fine.
$(document).ready(function () {
$('input[name=TransactionType]').change(function () {
var radioValue = $(this);
var elements = [];
$('#RightDiv').children().each(function () {
elements.push($(this));
});
});
});
I've updated jQuery UI to latest version (from 1.9.x) and there's something that I can not resolve, namely: in title attriutes I sometimes store HTML, for instance:
Start Date: 2012.01.01<br />End Date: 2012.02.01
Before upgrade tooltip text was not encoded so I saw Start & End date in two separate lines. However now, text in encoded and I see . Is there a way to resolve it?
My answer is an extension to what Fran said.
Ran into this as well. You can store simple html tags in title. Instead of just calling tooltip, you now have to do some more work. You have to return your html coded title. I have tested this with bold < b>, underline < u> and breakline < /br>.
$( document ).tooltip( {
content: function() {
return $( this ).attr( "title" );
}
});
The problem is that title doesn't admit HTML tags. To apply style to text in title attribute using Tooltips, you should use something like this:
HTML:
<a id="mytooltip" href="#" title="">Tooltips</a>
JS:
$('#mytooltip').tooltip({
items: "[title]",
content: function() {
return "<b>That's what this widget is</b>";
}
});
You can use any HTML tags (even tables, images, etc) and JQueryUI Tooltip
Show it running in JSBin: http://jsbin.com/ukejok/3/
wasted my day while searching how to get selected options values in JQuery UI widget by Michael Aufreiter. Here's the link to his demo site and github: http://quasipartikel.at/multiselect/
As a result I just need value fields of selected options without POST/GET sendings to PHP script.
I tried many methods and resultless.
Need your help and ideas
*Found many topics about jquery ui multiselect but useless because of Aufreiter :s *
That should work. Tested with Chrome console
$("#countries").val();
I went to the site you've got listed above, and was able to run this in my chrome console:
$('.ui-multiselect .selected li').each(function(idx,el){ console.log(el.title); });
It seems like the values you want are stored in the title attributes of the list items within the div.selected element.
Edit:
Doh! Well of course you want the values. Sorry mate. Completely missed that. The real goods are stored in the jQuery data() objects. In this case, the key you want is 'optionLink'. It maintains a reference to an option element. Each list item in the '.selected' div used the jQuery.data() method to add the underlying option to it.
So, you need to get the selected list items, iterate through, grab the 'optionLink' from the data jQuery data store, and then get the value.
The following code works on the example page:
$('.ui-multiselect .selected li').each(function(idx,el){
console.log(el);
var link = $(el).data('optionLink');
// link now points to a jQuery wrapped <option> tag
// I do a test on link first. not sure why, but one of them was undefined.
// however, I got all four values. So I'm not sure what the first <li>
// is. I'm thinking it's the header...
if(link){
// here's your value. add it to an array, or whatever you need to do.
console.log(link.val());
}
});
This is the first I've seen of the multiselect. It's slick. But I sympathize with your frustration trying to get something out. A 'getSelectedOptions()' method would be nice.
Cheers
Try accessing the selected values on the close event.
e.g.
$("#dropdown").multiselect({
header: false,
selectedList : 1,
height: "auto",
}).multiselectfilter().bind("multiselectclose", function(event, ui) {
var value = $("#dropdown").val();
});
Hope that helps.
Best solution
$('#select').multiselect({
selectAllValue: 'multiselect-all',
enableCaseInsensitiveFiltering: true,
enableFiltering: true,
height: "auto",
close: function() {
debugger;
var values = new Array();
$(this).multiselect("getChecked").each(function(index, item) {
values.push($(item).val());
});
$("input[id*=SelectedValues]").val(values.join(","));
}
});
You can try this:
$('#ListBoxId').multiselect({
isOpen: true,
keepOpen: true,
filter: true
});