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/
Related
In my program we have Kendo Panel bar which shows menu, i want to open a dialog box/ popup window when user clicks on any menu child item.
<div>
#(Html.Kendo().PanelBar()
.Name("panelbar")
.ExpandMode(PanelBarExpandMode.Single)
.Events(events => events
.Select(#<text> ReportController.onSelect </text>))
.Items(panelbar =>
{
panelbar.Add().Text("Test1")
.Expanded(true)
.Items(Test1=>
{
workers.Add().Text("Sample1");
workers.Add().Text("Sample2");
workers.Add().Text("Sample3");
});
panelbar.Add().Text("Test2")
.Items(Test2 =>
{
clients.Add().Text("Book1")
.Items(costings =>
{
costings.Add().Text("Page1");
costings.Add().Text("Page2");
costings.Add().Text("Page3");
});
clients.Add().Text("Book2");
});
panelbar.Add().Text("New Page").Enabled(false);
})
)
</div>
<script type="text/javascript">
$(document)
.ready(function() {
ReportController.init("#panelBar");
});
</script>
If user clicks on Sample1 here it should open a popup window. i am new with kendo controls, how can i achieve this?
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/panelbar/events">
<style>
html {
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
}
</style>
<title></title>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.714/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.714/styles/kendo.material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.714/styles/kendo.default.mobile.min.css" />
<script src="//kendo.cdn.telerik.com/2016.2.714/js/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.2.714/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="../content/shared/styles/examples-offline.css">
<script src="../content/shared/js/console.js"></script>
</head>
<body>
<div id="example">
<div class="demo-section k-content">
<ul id="panelbar">
<li class="k-state-active">
Metallica - Master of Puppets 1986
<ul>
<li>Battery</li>
<li>Master of Puppets</li>
<li>The Thing That Should Not Be</li>
<li>Welcome Home (Sanitarium)</li>
<li>Disposable Heroes</li>
<li>Leper Messiah</li>
<li>Orion (Instrumental)</li>
<li>Damage, Inc.</li>
</ul>
</li>
<li>
Iron Maiden - Brave New World 2000
<ul>
<li>The Wicker Man</li>
<li>Ghost Of The Navigator</li>
<li>Brave New World</li>
<li>Blood Brothers</li>
<li>The Mercenary</li>
<li>Dream Of Mirrors</li>
<li>The Fallen Angel</li>
<li>The Nomad</li>
<li>Out Of The Silent Planet</li>
<li>The Thin Line Between Love And Hate</li>
</ul>
</li>
<li>
Empty Item
</li>
<li>
Ajax Item
<div></div>
</li>
<li>
Error Item
<div></div>
</li>
</ul>
</div>
<div id="console" class="box" style="display:none">
<h4>Console log</h4>
<div class="console"></div>
</div>
</div>
<script>
$(function () {
$("#console").dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
}
});
});
function onSelect(e) {
var theDialog = $("#console").dialog("open");
theDialog.dialog("open");
kendoConsole.log("Select: " + $(e.item).find("> .k-link").text());
}
function onExpand(e) {
kendoConsole.log("Expand: " + $(e.item).find("> .k-link").text());
}
function onCollapse(e) {
kendoConsole.log("Collapse: " + $(e.item).find("> .k-link").text());
}
function onActivate(e) {
kendoConsole.log("Activate: " + $(e.item).find("> .k-link").text());
}
function onContentLoad(e) {
kendoConsole.log("Content loaded in <b>" + $(e.item).find("> .k-link").text() +
"</b> and starts with <b>" + $(e.contentElement).text().substr(0, 20) + "...</b>");
}
function onError(e) {
kendoConsole.error("Loading failed with " + e.xhr.statusText + " " + e.xhr.status);
}
$("#panelbar").kendoPanelBar({
expandMode: "single",
select: onSelect,
expand: onExpand,
collapse: onCollapse,
activate: onActivate,
contentLoad: onContentLoad,
error: onError,
contentUrls: [, , , "../content/web/panelbar/ajax/ajaxContent1.html", "error.html"]
});
</script>
</body>
</html>
In above example, you can observe that in OnSelect Event , i have opened a Div as an Dialog(Model), for which i have intialised that in its above function.
Hope it helps.. !!
I want to show a calendar event on fullcalendar dynamically. I've tried the code given below but it did not succeed:
#model List<EcommerceDbFirstApproch.Models.EventMaster>
#{
ViewBag.Title = "DashBoard";
var event_data = #Model;
}
<style type="text/css">
.mycalhedar {
background: #000;
text-align: center;
padding: 10px;
}
.mycalhedar h1 {
color: #fff;
}
</style>
<br />
<script src="~/Content/jquery-1.8.2.min.js"></script>
<script src="~/Content/jquery.mobile-1.2.0.min.js"></script>
<script src="~/Content/themes/fullcalendar.min.js"></script>
<link href="~/Content/fullcalendar.css" rel="stylesheet" />
<div data-role="page" id="index">
<div class="mycalhedar">
<h1>My Team</h1>
</div>
<!-- /header -->
<div data-role="content">
<div id='calendar' style="width: 100%;"></div>
</div>
<!-- /content -->
</div>
<!-- /page -->
<script type="text/javascript">
$(document).on('pageshow', '#index', function (e, data) {
debugger;
var myary = [];
#foreach (var h in Model)
{
#:alert("#h.EventTitle");
#:alert("#h.StartDate");
#:alert("#h.EndDate");
}
$('#calendar').fullCalendar({
ContentType: "application/json",
editable: true,
events: [{
#foreach (var h in Model)
{
title: #h.EventTitle.ToString();
start: #h.StartDate.ToString();
end: #h.EndDate.ToString();
}
}]
});
});
</script>
Please help me to solve this problem. I want to show the events dynamically on the fullcalender demo. Thanks
I've got a fairly simple jquery-ui autocomplete box on my page. The HTML is simple and looks like this:
<div class="control-group">
<label for="addCampaignUser"></label>
<div class="controls">
<input id="addCampaignUser" />
<button id="addCampaignUserButton">Add User</button>
</div>
</div>
The JavaScript is a bit more complex, but still not too bad:
$('#addCampaignUser').autocomplete({
minLength: 2,
source: function (request, response) {
var term = request.term;
if (term in cache) {
response(cache[term]);
return;
}
$.post("#Url.Action("ForCampaignAutoComplete", "CustomerUser")", { "searchTerm": request.term })
.done(function (data) {
console.log('{request: ' + JSON.stringify(request) + "}");
console.log('{data: ' + JSON.stringify(data) + "}");
cache[request.term] = data;
response(data);
})
.fail(function (err) {
console.error(err);
});
},
select: function (event, ui) {
console.log(ui.item ? "Selected: " + ui.item.Name : "Nothing selected, input was " + this.value);
},
close: function(event, ui) {
console.log("closed: " + event);
}
})
.data("ui-autocomplete")._renderItem = function (ul, item) {
return $("<li>").append("<a>" + item.Name + " (" + item.CustomerName + ")</a>").appendTo(ul);
};
Everything seems to work as expected:
The problem is that as soon as I mouse over any of the items in the list, or if I try to select one of the items via up/down arrow, the list closes, without anything being selected (or the select or focus events firing).
I've tried removing the <a> tags around the item.Name in the .data("ui-autocomplete") handler, like so:
.data("ui-autocomplete")._renderItem = function (ul, item) {
return $("<li>").append(item.Name + " (" + item.CustomerName + ")").appendTo(ul);
};
That fixes the auto-close problem, but then nothing ever gets selected.
I've tried disabling all the various add-ons and libraries that might be interfering, but nothing so far. I'm using jquery-2.0.3.js and jquery-ui-1.10.3.js.
Am I doing something obviously wrong?
[Edit: Including code for entire page, as requested]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="/Content/bootstrap?v=j_-_1Zyowtnxf-sjdU3kRasY7Qp7ZP_jWGqEkV333nA1" rel="stylesheet"/>
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="/scripts/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="/">Payboard</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li>Customers</li><li>Campaigns</li><li>Integrations</li><li>Account</li><li>Logout</li><li>Test</li>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
<h2>AutoComplete</h2>
<h4>End users assigned to the campaign</h4>
<div class="control-group">
<label for="addCampaignUser"></label>
<div class="controls">
<input id="addCampaignUser" />
<button id="addCampaignUserButton">Add User</button>
</div>
</div>
<hr>
<footer>
<p>© Payboard 2013</p>
</footer>
</div>
<script src="/Scripts/jquery-2.0.3.js"></script>
<script src="/Scripts/jquery-ui-1.10.3.js"></script>
<script src="/Scripts/jquery.unobtrusive-ajax.js"></script>
<script src="/Scripts/jquery.validate.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive-custom-for-bootstrap.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js"></script>
<script src="/Scripts/flot/jquery.flot.js"></script>
<script src="/Scripts/flot/jquery.flot.time.js"></script>
<script src="/Scripts/flot/jquery.flot.stack.js"></script>
<script src="/Scripts/flot/jquery.flot.categories.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<!-- Payboard JS bundle -->
<script src="/Scripts/knockout-2.3.0.debug.js"></script>
<script src="/Scripts/jquery.event.drag.js"></script>
<script src="/Scripts/SlickGrid/slick.core.js"></script>
<script src="/Scripts/SlickGrid/slick.formatters.js"></script>
<script src="/Scripts/SlickGrid/slick.grid.js"></script>
<script src="/Scripts/require.js"></script>
<script src="/Scripts/jquery.signalR-1.1.3.js"></script>
<script src="/Scripts/linq.js"></script>
<script src="/Scripts/Payboard/Main.js"></script>
<script src="/Scripts/dateformat.js"></script>
<script type="text/javascript">
// Payboard.ready(function () {
$(function () {
var cache = {};
$('#addCampaignUser').autocomplete({
minLength: 2,
source: function (request, response) {
var term = request.term;
if (term in cache) {
response(cache[term]);
return;
}
$.post("/CustomerUser/ForCampaignAutoComplete", { "searchTerm": request.term })
.done(function (data) {
console.log('request: ' + JSON.stringify(request));
console.log('data: ' + JSON.stringify(data));
cache[request.term] = data;
response(data);
})
.fail(function (err) {
console.error(err);
});
},
select: function (event, ui) {
console.log(ui.item ? "Selected: " + ui.item.Name : "Nothing selected, input was " + this.value);
},
focus: function (event, ui) {
console.log(ui.item ? "Focused: " + ui.item.Name : "Nothing focused, input was " + this.value);
}
})
.data("ui-autocomplete")._renderItem = function (ul, item) {
return $("<li>").append("<a>" + item.Name + " (" + item.CustomerName + ")</a>").appendTo(ul);
// return $("<li>").append(item.Name + " (" + item.CustomerName + ")").appendTo(ul);
};
});
</script>
</body>
</html>
Looks like you're including jQueryUI twice. Once here:
<script src="/Scripts/jquery-ui-1.10.3.js"></script>
and again here:
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
This could be causing your problem--remove one of the references.
I like to add autocomplete feature for my jquery mobile page on a text box such that when user enters it should show the results in listview format. The code below shows the results but not in the listview format. Can someone point out how to fix it. Thanks.
<!DOCTYPE HTML>
<html>
<head>
<title>Finder</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.20/jquery-ui.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<style>
input{text-transform:uppercase;}
</style>
<script>
$(document).ready(function() {
$( "#firstinputbox" ).autocomplete({
source: function( request, response ) {
$.ajax({
url: "http://ziplocator.cloudfoundry.com/rest/startsWithCity/",
dataType: "json",
data: {
maxRows: 10,
startsWith: request.term
},
success: function(data) {
response( $.map( data.zipcodes, function( item ) {
var listItem = ' <li class="ui-btn ui-btn-icon-right ui-li "><div class="ui-btn-inner ui-li"><div class="ui-btn-text">' + item.zipcodeId + '</div><span class="ui-icon ui-icon-arrow-r"></span></div></li>';
$(listItem).appendTo("#suggestions");
return {
label: item.cityName + ", " +item.zipcodeId + ", " + item.state,
value: item.cityName
}
}));
}
});
},
minLength: 1,
open: function() {
},
close: function() {
$('ul li').remove();
//should attach the value to the text box
}
});
});
</script>
</head>
<body>
<div data-role="page" data-add-back-btn="true" id="inputdialog">
<div data-role="header">
<h1>Enter Criteria here</h1>
</div>
<div data-role="content">
<input type="text" id="firstinputbox" placeholder="Enter here"/>
<ul id="suggestions" data-role="listview" data-inset="true"></ul>
</div>
<div data-role="footer">
</div>
</div>
</body>
</html>
You need to call the listview() function on your content after inserting the new content:
$('#suggestions').listview();
See Elijah Manor's explanation for the details.
Try calling the listview refresh method in your ajax success function.
$('#suggestions').listview('refresh');
try this one
In <li> tag remove class..... class="ui-btn ui-btn-icon-right ui-li "
Then it shows results in list view formats
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');