I'm trying to use Font Awesome's spinner as a replacement for jQuery Mobile's loader. Here's my code:
<script type="text/javascript">
$(document).bind('mobileinit', function ()
{
$.mobile.loading("show",
{
text: "",
textVisible: false,
theme: "z",
html: "<i class='fa fa-spinner fa-5x fa-spin'></i>"
});
});
</script>
This doesn't work. What am I doing wrong? If i put the "i" tag containing the fa-spinner in the page itself, then I can see the spinner. It's just not getting included with JQM (I'm using JQM 1.4.0)
You have two options, either globally change jQM default spinner, or change it on request.
Globally:
Override loading widget options on mobileinit. This will replace default options once and for all.
<head>
<link rel="stylesheet" href="jquery.mobile-1.4.0.min.css" />
<link rel="stylesheet" href="font-awesome.css" />
<script src="jquery-1.9.1.min.js"></script>
<script>
$(document).on("mobileinit", function() {
$.mobile.loader.prototype.options.html = '<i class="fa fa-spinner fa-5x fa-spin"></i>';
});
</script>
<script src="jquery.mobile-1.4.0.min.js"></script>
</head>
Demo
On request:
$.mobile.loading("show", {
html: '<i class="fa fa-spinner fa-5x fa-spin"></i>'
});
Demo
Related
Does Select2 now have a prerequisite requirement for require.js or something as from the 4.0.0-rc.2 version from cdnjs.cloudfare.com I keep getting an error in select2.js on line 4582-
Uncaught ReferenceError: require is not defined.
My code is fairly straightforward:
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>Test Select2</title>
<link href="/css/normalize.css" rel="stylesheet">
<link media="all" type="text/css" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0-rc.2/css/select2.css">
</head>
<body>
<!-- Main content -->
<section class="content">
<form method="POST" action="http://test.local/test" accept-charset="UTF-8" role="form">
<div class="form-group minimal">
<span class="col-xs-3 control-label minimal"><label for="Test">Test:</label></span>
<div class="input-group col-xs-8 pull-left select2-bootstrap-prepend">
<input type="hidden"
id="test_select2"
class="input-xlarge form-control minimal select2"
data-placeholder="Search ACME"
data-minimumInputLength=3
data-width="copy"
data-containterCssClass="form-control minimal"
data-dropdownCssClass="alert-danger"
data-allowClear="true"
data-delay=250>
</div>
</div>
</section>
<!-- scripts -->
<script src="//code.jquery.com/jquery-2.1.3.min.js"></script>
<script>window.jQuery || document.write('<script src="/js/jquery/2.1.3.min.js"><\/script>')</script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script>
$(document).ready(function () {
$("#test_select2").select2({
ajax: {
url: "/admin/test",
dataType: 'json',
delay: 250,
data: function (params) {
return {
q: params.term,
page: params.page
};
},
processResults: function (data, page) {
return {
results: data.items
};
},
cache: true
}
});
});
</script>
<//body>
</html>
This is a known issue in Select2 4.0.0-rc.2 that only affects people using Select2 with an <input /> element.
https://github.com/select2/select2/pull/3192
The problem is that the internal require calls were moved to a namespace in 4.0.0-rc.2 and we missed one call.
You can either stick with 4.0.0-rc.1 until Select2 4.0.0 is released (soon) or start converting your pages to use a <select> instead.
I used jquery ui from this link http://jqueryui.com/demos/dialog/#animated for dialog which is not working in MVC4 application
This is my View
#{
ViewBag.Title = "Dialog";
}
<link href="../../Content/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />
<link href="../../Content/themes/base/jquery.ui.dialog.css" rel="stylesheet" type="text/css" />
<script src="../../Scripts/jquery-ui-1.8.11.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-ui-1.8.11.min.js" type="text/javascript"></script>
<script type="text/javascript">
// increase the default animation speed to exaggerate the effect
$.fx.speeds._default = 1000;
$(function () {
$("#dialog").dialog({
autoOpen: false,
show: "blind",
hide: "explode"
});
$("#opener").click(function () {
$("#dialog").dialog("open");
return false;
});
});
</script>
<div class="demo">
<div id="dialog" title="Basic dialog">
<p>
This is an animated dialog which is useful for displaying information. The dialog
window can be moved, resized and closed with the 'x' icon.</p>
</div>
<button id="opener">Open Dialog</button>
</div>
<!-- End demo -->
<div class="demo-description">
<p>
Dialogs may be animated by specifying an effect for the show and/or hide properties.
You must include the individual effects file for any effects you would like to use.</p>
</div>
<!-- End demo-description -->
<div class="demo-description">
<p>
A modal dialog prevents the user from interacting with the rest of the page until
it is closed.</p>
</div>
<!-- End demo-description -->
You're not wiring up your javascript. Try this:
$('#dialog').dialog({
autoOpen: false,
show: "blind",
hide: "explode"
});
$(document).ready(function(){
$('#opener').click(function () {
$('#dialog').dialog("open");
return false;
});
});
(remove the opening "$(function () {" and the closing "});" pair to this - your code wants to look like above.
Add $(documnet).ready and then define your function in it . . ..
$(document).ready(function () {
code goes here . .
});`
I'm a newbie to JQuery and JQueryUI and I've run into a bit of a problem w/ the .button() and .buttonset() on my project.
When I follow the example on the JQueryUI page everything works fine. My page, however, is creating buttons as a function and after they are created the button text shows up but the button is not clickable.
Here is the source link: http://mdihosting.com/5/Projects/form/test1.html
After the append in the source below this - $('#epcf-wrap').buttonset(); - does not result in a clickable button.
I've also tried $('#epcf-wrap').buttonset('refresh');
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script>
<script src="js/jquery.ui.selectmenu.js" type="text/javascript"></script>
<script type="text/javascript" src="js/sliding.form.js"></script>
<script src="js/jquery.ui.selectmenu.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" media="all" href="css/blitzer/jquery-ui-1.8.17.custom.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/jquery.ui.selectmenu.css" />
<script type="text/javascript">
$(document).ready(function(){
$('input:checkbox').button();
$.ajax({
type: "GET",
url: "xml/categories.xml",
dataType: "xml",
success: function(xml) {
var select = $('#vendorcat');
$(xml).find('Cat').each(function(){
var title = $(this).attr('name');
select.append("<option class='vendorcat' value='"+title+"'>"+title+"</option>");
$('#vendorcat').selectmenu();
});
}
});
$("#about").dialog({
resizable: true,
autoOpen:false,
modal: true,
width:400,
height:400,
buttons: {
'Continue': function() {
$(this).dialog('close');
alert('You clicked continue');
}, // end continue button
Cancel: function() {
$(this).dialog('close');
} //end cancel button
}//end buttons
});//end dialog
$('#results').hide();
$('#btnOpen').click(function(){
$('#about').dialog('open');
}); //end click handler
});
</script>
<script type="text/javascript"> //onchange1 - Build Category Dropdown
//Going for the single function length world record
//Open categories.xml and find the node based upon the passed variable catname - Category Name
//If the Category Name is equal to the argument passed build the variables, build the array, and output
function onchange1(catname){
$.ajax({
type: "GET",
url: "xml/categories.xml",
dataType: "xml",
success: function(xml) {
var table = $('<table>', {id:'opttable', align:'left'});
tr = $('<tr>').appendTo(table); // create TR and append to TABLE
td = $('<td>').appendTo(tr); // create TD and append to TR
// iterate all children of the current Category
$(xml).find('Cat[name="' + catname + '"]').children().each(function() {
d = $(this)
if (d.text() === 'TRUE') {
$('<input>', {
className: 'checkbox',
type: 'checkbox',
id: d.attr('id'),
name: d.attr('name'),
checked: 'checked'
}).appendTo(td);
}
else {
$('<input>', {
className: 'checkbox',
type: 'checkbox',
id: d.attr('id'),
name: d.attr('name')
}).appendTo(td);
}
// create LABEL with the id attribute of the current
// child of Cat and append to TD
$('<label>' + d.attr('name') + '</label>', { for:d.attr('id').toLowerCase() })
.appendTo(td);
$('<br />').appendTo(td); // create BR element and append to TD
});
$('#epcf-wrap').empty().append(table); // Append the table to its container
$('#epcf-wrap').buttonset();//This doesn't work
}
});
}
</script>
<script type="text/javascript"> //Form Submitted
function formsubmitted(){
var resultsArr = []
resultsArr += "<table><tr><td>";
resultsArr += "Name: " + $("input[name='name']").val();
resultsArr += "</td></tr><tr><td>";
resultsArr += "Email: " + $("input[name='email']").val();
resultsArr += "</td></tr></table>"
$('#results').empty().append(resultsArr).show();
$('#content').hide();
}
</script>
</head>
<style>
span.reference{
position:fixed;
right:5px;
top:5px;
font-size:10px;
text-shadow:1px 1px 1px #fff;
}
span.reference a{
color:#555;
text-decoration:none;
text-transform:uppercase;
}
span.reference a:hover{
color:#000;
}
h1{
color:#ccc;
font-size:36px;
text-shadow:1px 1px 1px #fff;
padding:20px;
}
</style>
<body>
<div>
<span class="reference">
Version popup could go here
<input type="button" id="btnOpen" value="Open">
</span>
</div>
<div id="content">
<h1>VRACC</h1>
<div id="wrapper">
<div id="steps">
<form id="formElem" name="formElem" action="" method="post">
<fieldset class="step">
<legend>Vendor Details</legend>
<p>
<label for="vendorcat">Vendor Category</label>
<select id="vendorcat" name="vendorcat" onChange="onchange1((this).options[this.selectedIndex].value);">
</select>
<legend>Enterprise Processes</legend>
<input type="checkbox" id="check1" /><label for="check1">Some Checkbox</label>
<div id="epcf-wrap" class="epcf-wrap">
</div>
</fieldset>
</form>
</div>
<div id="navigation" style="display:none;">
<ul>
<li>
Vendor Details
</li>
</ul>
</div>
</div>
</div>
</body>
You need to add a for attribute to the label tags that corresponds to the id of the input. For whatever reason, they way you are adding the for attribute doesn't seem to be working. And, remove the toLowerCase(). It won't work unless they match case.
Maybe you just need a space after for:
$('<label>' + d.attr('name') + '</label>', { for: d.attr('id') })
But, if it still doesn't work, try:
$('<label for="' + d.attr('id') + '">' + d.attr('name') + '</label>'
http://jsfiddle.net/CL9Tt/
Hey there, total javascript noob here. Just wondering, I've set up some buttons inside ul tags using jquery selectable, which change colour when I click on them. One problem though, how do I make one of them select on the load of the page?
Thanks!
edit: here's my code:
<link rel="stylesheet" href="style/style.css" media="screen,projection" type="text/css" />
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
setLink('single');
$('#target').load($('#single a:first').attr('href'));
});
function setLink(id){
$('#'+id+' a').click(function(e){
$('#target').load(
this.href,
function(){
setLink('target');
}
);
return false;
});
}
</script>
<style type="text/css">
#selectable .ui-selecting {
background-image:url(../images/nav-li-bcg.png);
}
#selectable .ui-selected {
background-image:url(../images/nav-li-bcg.png);
}
</style>
<script>
$(document).ready(function() {
$("#selectable").selectable();
$document.getElementById('current1').click();
});
</script>
</head>
<body>
<div id="tabs">
<div id="navigation">
<div id="single">
<div class="anchor1">
<ul id="selectable">
<li class="current1" id="current1"><span>1</span></li>
<li><span>2</span></li>
<li><span>3</span></li></ul>
</div>
<div class="clear"></div></div></div><!-- navigation -->
<div class="info">
<div class="top"></div>
<div id="target">
</div>
Simulate a click on document ready?
$(document).ready(function() {
$(".selectable .buttonSelector:first").click();
});
$('#myListItem').addClass('ui-selected');
I tried add click function on item, but seems that does not work correctly.
$(document).ready(function(){
$("#vibrateBtn").click(function() {
window.alert('test');
});
});
I tried also disable Ajax loading, with>
$(document).bind("mobileinit", function(){
ajaxEnabled:false;
});
But with same result.
Where can be problem please?
Thanks for any advice.
in jquery mobile document.ready() doesn't work and use .live to bind the click event instead of using the short hard .click().
There are other event like pagebeforecreate, pagecreate. check the jquery demo for the list of event.
$(document).live('pageshow',function(){
$("#vibrateBtn").live('click',function() {
window.alert('test');
});
});
Please try this code
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script language="javascript">
$(function() {
$('#theButton').on('tap click',function(event, ui) {
alert('The Button has been clicked');
});
});
</script>
</head>
<body>
<div data-role="page">
<div data-role="content">
<input type="button" id="theButton" name="theButton" value="The Button">
</div>
</div>
</body>
</html>