The unsorted icons are not showing up. Other themes do not work, either. I'm not sure what I'm missing. I have provided my code below.
The icons only show up for the columns that I have set to sort in sortList.
I am unclear when I need to add a theme to widgets (e.g., widgets: ['uitheme'}) and when to use theme (e.g., theme: "bootstrap").
Do I need to include all of the css files that I have?
Is more needed in headerTemplate, particularly for bootstrap?
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.js"></script>
<script type='text/javascript' src="//cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.26.5/js/jquery.tablesorter.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.26.5/js/jquery.tablesorter.widgets.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.26.5/js/parsers/parser-input-select.js"></script>
</head>
<script>
$(function() {
// call the tablesorter plugin
$("table").tablesorter({
theme: "bootstrap",
// sort on the first column and in ascending order PRIOR TO the sort on the selected column
// sort [column,asc=1 or desc=0]
sortList: [[1,0]],
// hidden filter input/selects will resize the columns, so try to minimize the change
widthFixed : false,
headerTemplate: '{content} {icon}',
// initialize zebra striping and filter widgets
widgets: ['uitheme','zebra', 'filter','output'],
//headers: {
//0: {sorter: 'checkbox', filter:true},
//1: {sorter: 'inputs',filter:true}
//},
widgetOptions : {
// css class applied to the table row containing the filters & the inputs within that row
filter_cssFilter : 'tablesorter-filter',
// filter widget: If there are child rows in the table (rows with class name from "cssChildRow" option)
// and this option is true and a match is found anywhere in the child row, then it will make that row
// visible; default is false
filter_childRows : false,
// Set this option to true to use the filter to find text from the start of the column
// So typing in "a" will find "albert" but not "frank", both have a's; default is false
filter_startsWith : false,
// Delay in milliseconds before the filter widget starts searching; This option prevents searching for
// every character while typing and should make searching large tables faster.
filter_searchDelay : 100,
// if true, search column content while the user types (with a delay)
filter_liveSearch : true
}
});
});
The theme.bootstrap.css file appears to be missing. It contains the unsorted arrow definition.
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.26.5/css/theme.bootstrap.min.css" >
Related
For the first here for posing a question. I've already learned a lot from the site.
My problem is that i can't get the jQuery UI widget tooltip working on my site.
I'm on joomla 4 with an RSJoomla template (RSJuno).
In my custom.js file i've added this code for diplaying images full size:
//Photos fullscreen
jQuery(document).ready(function(){
jQuery("img").click(function(){
this.requestFullscreen()})});
Works well.
Now i'm trying this code:
//Tooltip on fotos
jQuery(document).ready(function(){
jQuery( "div" ).tooltip({
content: "Awesome title!"
});
});
Not working at all. Content is just a test text! If i use "img" it isn't working either. Nothing shows up.
This code (from internet) as a test is also working well.
(Div and img are both used to test so i'm aware of the difference in the code.
jQuery(document).ready(function () {
// Detect when the mouse is over a div with the mouseover() method
jQuery( "div" ).mouseover(function ( event ) {
// Make the div under the mouse grey and taller
jQuery( "div" ).tooltip({
content: "Awesome title!"
//By the way the tooltip is NOT showing the content text//
});
jQuery( "#" + event.target.id ).css({
"background-color" : "lightgrey",
"height" : "8em"
});
});
// Detect when the mouse moves away with the mouseout() method
jQuery( "div" ).mouseout(function ( event ) {
// Return the size and color of the div to its original state
jQuery( "#" + event.target.id ).css({
"background-color" : "white",
"height" : "4em"
});
});
});
I would like to have a code which integrates this 2 codes into 1 simple one that does the following:
on mouseover displaying tooltip "Click for fullscreen" on tag;
as mouse moves away, hide the tooltip.
Whatever i'm trying in no way i get the tooltip to display, no mather to what i connect it: "img" "div"....etc. And thus combining the 2 leads to nothing.
The big code is working in so far that the css styled tooltip is shown, but at a fixed place (center of the div) and ONLY on a specially created div in the page. NOT on the "img" tag.
If a attach this long code with css to the special created div it's shows only the content of the tag title on the div and not the custom text.
If i delete the title tag from the div nothing shows.
Could it be a conflict with the template code?
I have a RSJoomla template and through custom tags in the template i'm loading the necessary libraries as follows:
<link href="/templates/rsjuno/js/jquery-ui/jquery-ui.css" rel="stylesheet" />
<link href="/templates/rsjuno/js/jquery-ui/jquery-ui.structure.css" rel="stylesheet" />
<link href="/templates/rsjuno/js/jquery-ui/jquery-ui.theme.css" rel="stylesheet" />
From inspecting my page i see that this is well loaded:
<link rel="stylesheet" href="/templates/rsjuno/css/custom.css" type="text/css" />
<script src="/templates/rsjuno/js//jquery-ui/jquery-ui.js"></script>
<link href="/templates/rsjuno/js/jquery-ui/jquery-ui.css" rel="stylesheet" />
<link href="/templates/rsjuno/js/jquery-ui/jquery-ui.structure.css" rel="stylesheet" />
<link href="/templates/rsjuno/js/jquery-ui/jquery-ui.theme.css" rel="stylesheet" /> </head>
<body class="site">
....
After spending lots of hours i'm out of ideas. Lots of different codes i found on internet for the tooltip didn't work either.
For example (on the youtube video its working well):
jQuery("img").tooltip({
track:true,
content:"Whow"
});
});
I need to use jQuery instead of $ to avoid "$ is not a function" error.
So please help if you can.
Ps i cannot provide a link to the site because its developped on localhost.
Thanks
NEW INFO I've used this working fiddle (https://jsfiddle.net/vinorodrigues/2vnt9a0h/32/) in exact copy on my website and still get a standard layout tooltip. See this screenshot enter image description here
I am learning a JQuery tutorial where I am intended to display a JQuery button with primary and secondary icons. The instructor's button looks like this:
The same code for me displays a button like this:
My code:
<!Doctype HTML>
<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>
<button id="button1">Button 1</button>
<script>
$('#button1').button({
icons: {
primary: 'ui-icon-mail-closed',
secondary: 'ui-icon-caret-1-e'
}
})
</script>
</body>
</html>
Now when I comment out the primary: '...' option, I can see the secondary button, but not both. Has JQueryUI changed? How can I show 2 icons on the button like the instructor's?
Note: The button widget was rewritten in 1.12. Some options changed, you can find documentation for the old options in the 1.11 button docs. This widget used to bundle support for inputs of type radio and checkbox, this is now deprecated, use the checkboxradio widget instead. It also used to bundle the buttonset widget, this is also deprecated, use the controlgroup widget instead.
So the Quick Fix is to use older Library: 1.11.4. Example:
$(function() {
$('#button1').button({
icons: {
primary: 'ui-icon-mail-closed',
secondary: 'ui-icon-caret-1-e'
}
});
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<button id="button1">Button 1</button>
This works.
The other method would be to add the element manually or use Controlgroup.
I have code written to autocomplete a text input box from a mysql database. I am currently in the process of mitigating the setup to jQuery Mobile but I am having substantial issues finding out how to write a modified autocomplete. My original html is below (heavily simplified)
<html>
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
</head>
<script>
$(function() {
$( "#get_ingredient_1" ).autocomplete({source: 'search.php'});
});
</script>
<div class="ui-widget">
<input id="get_ingredient_1" name="ingredient_type" style = "width:200px">
</div>
</html>
the search.php is shown below.
<?php
//database configuration
include("db_connect.php");
//get search term
$searchTerm = $_GET['term'];
//get matched data from skills table
$category_query = mysqli_query($dbconnection, "SELECT DISTINCT ingredient FROM ingredients WHERE ingredient LIKE '%".$searchTerm."%' ORDER BY ingredient ASC");
//while ($row = $query->fetch_assoc()) {
while($row = mysqli_fetch_assoc($category_query)){
$data[] = $row['ingredient'];
}
//return json data
echo json_encode($data);
?>
this outputs in the format:
["Adzuki beans","Alfalfa","Allspice","Almond meal"]
ive tried to comment it accordingly. Essentially this generates a text input bot and when you start typing will try and guess what ingredient you are wanting.
unfortunatly when I alter the jquery files to:
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
It no longer autocompletes. Ive read through dozens of examples but I cant find a basic 1 input autocomplete option that I can adapt.
Can anyone shed some light on how to alter this short piece of code to autocomplete, so I can study and adapt it to its full functionality.
Ive looked at all the jquery-mobile examples but have found them lacking in the details I need here, specifically the "remote listview" as it has to populate from a file generated from a mysql source like the search.php shown above.
hope someone can help translate this to jquery mobile use.
I have an autocomplete script that works ok in the sense that it shows the options to select from after the user types 2 letters. Now, the problem I have is that after the selection is made and the text field is filled out, the script stops. For example, if I make a selection from the given entries, and for some reason I have clear the text field, once I start typing again, the autocomplete doesn't show anything at all.
The form performs a postback everytime I select values from a couple of dropdown controls, and I noticed the script stops once the postbacks are triggered. Is there any way I can
have the scripts running after each postback?
If anybody can point the right directions, I would really appreciate it.
Thanks.
<script language="javascript" src="/Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script language="javascript" src="/Scripts/jquery.SPServices-0.7.1a.min.js" type="text/javascript"></script>
<script language="javascript" src="/Scripts/jquery-ui-1.8.22.custom.min.js" type="text/javascript"></script>
<link href="/Scripts/jquery-ui-1.8.22.custom.css" rel="stylesheet" type="text/css"/>
<script language="javascript" type="text/javascript">
//Wait ##### seconds for form to load before calling the function.
window.onload = function(){
window.setTimeout(readyCall, 1000);
}
function readyCall(){
//Variable for Array where Title column values will be pushed to.
var Requestors = [];
//Variable for the Requestor Text Field.
var RequestorField = "input[id$='FormControl0_V1_I1_T2']"
//Call the SPServices library.
$().SPServices({
operation: "GetListItems",
listName: "Requestor",
CAMLViewFields: "",
async: false,
completefunc: function (xData, Status){
$(xData.responseXML).SPFilterNode("z:row").each(function(){
Requestors.push($(this).attr("ows_Title"));
});
}
});
//Input field from form.
$(RequestorField).autocomplete({
source: Requestors,
minLength: 3,
focus: function(event, ui){
$(RequestorField).val(ui.item.value);
return false;
}
});
}
</script>
When using the jquery fullcalendar plugin (http://arshaw.com/fullcalendar/) with jquery mobile, the prev and next month button icons only show the arrow-up background image, which is the very first icon on the long 256 by 240 .png image file. When I refresh the page in Firefox, the correct arrow east and west show up, yet I lose all other styles including background, themes, etc. Refresh does not work in IE.
I searched high and low for an answer to this relatively minor issue. Here I believe may be the causes:
1. jquery ui and jquery mobile conflict (order of .js and .css files) --I tried all orders to no avail.
2. calling fullcalendar theme on mobile page (inside of page instead of head tags)
3. transition issue from home to specific mobile page
4. pixel size of ui-icon css class (should it be larger than 16px by 16px for mobile?)
5. need of a custom override of jquery ui using the $(document).ready() function.
Please see my included files head code below:
<link rel='stylesheet' type='text/css' href='../fullcalendar/fullcalendar/fullcalendar.css'>
<link rel='stylesheet' type='text/css' href='../fullcalendar/demos/cupertino/thememobile.css'>
<link rel='stylesheet' type='text/css' href='../fullcalendar/fullcalendar/fullcalendar.print.css' media='print'>
<link rel="stylesheet" href="jquery.mobile-1.0.1.min.css" />
<script src="jquery-1.6.4.min.js"></script>
<script src="jquery.mobile-1.0.1.min.js"></script>
<script type='text/javascript' src='../fullcalendar/jquery/jquery-ui-1.8.17.custom.min.js'></script>
<script type='text/javascript' src='../fullcalendar/jquery/jquery-1.7.1.min.js'></script>
<script type='text/javascript' src='../fullcalendar/fullcalendar/fullcalendar.min.js'></script>
<script type='text/javascript' src='../fullcalendar/fullcalendar/jquery.qtip-1.0.0-rc3.min.js'></script>
<script type='text/javascript' src='../fullcalendar/fullcalendar/calendareventsmobile.js'></script>
Any answer or brainstorming of answers will be very helpful.
Thanks in advance!
Have you tried using the FullCalendar with the theme option set to true? This forces it to use the jQuery UI theme instead of the fullCalendar theme. Maybe the CSS conflicts might go away then.
From the documentation...
A hash must be supplied that maps button names (from the header) to icon strings. The icon strings determine the CSS class that will be used on the button. For example, the string 'circle-triangle-w' will result in the class 'ui-icon-triangle-w'.
I was looking to use ui-icon-carat-1-w and ui-icon-carat-1-e. I found firebug to be very helpful in determining the correct hash value to use to get the proper mapping.
This is an example of what I needed to use.
buttonIcons: {
prev: 'carat-1-w',
next: 'carat-1-e'
},