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.
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 made an android app with a multi-page template. When I push the Zoeken button on the home page I go to Page 1 (id = Zoeken). On that page, when I push the button (id = zoek), the app goes to the following url android_asset/www/Zoeken/# instead of going to android_asset/www/index.html#win2 (Page 2)
When I change the id of Page 1, the foldername changes too
Why is the id Zoeken turned into a folder name?
Index.html
<!DOCTYPE HTML>
<html>
<head>
<title>PhoneGap</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="cordova.js"></script>
<link rel="stylesheet" href="jquery.mobile-1.0a1.min.css" />
<script src="jquery-1.4.3.min.js"></script>
<script src="jquery.mobile-1.0a1.min.js"></script>
<script type="text/javascript" src="SQLitePlugin.js"></script>
</head>
<body>
<!-- home -->
<div data-role="page" data-theme="e" id="home">
<div data-role="content">
<img src="img/logo_wablief.png" width="300" height="99" alt="wablief logo">
<ul data-role="listview" data-inset="true">
<li>Zoeken</li>
<li>A tot Z</li>
<li>Info</li>
</ul>
</div>
</div>
<!-- Page 1 -->
<div data-role="page" data-theme="e" id="Zoeken">
<div data-role="header" data-position="inline">
<h1>Zoeken </h1>
</div>
<div data-role="content"> <p>Welk woord wil je zoeken?</p>
<label for="search-basic">Vlaams woord</label>
<input type="search" name="search" id="search-basic" value="" />
Zoek
</div>
</div>
<!-- Page 2 -->
<div data-role="page" id="win2" data-add-back-btn="true" data-theme="e">
<div data-role="header">
<h1>Zoekresultaten</h1>
</div>
<div data-role="content">
</div>
</div>
</body>
</html>
<script>
// Wait for Cordova to load
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
var db = window.sqlitePlugin.openDatabase ("wablief", "", "wablief", 65535);
$("#zoek").bind ("click", function (event)
{
db.transaction (function (transaction)
{
var search = $("#search-basic").val ();
var sql = "SELECT * from wablief WHERE woord LIKE ?";
transaction.executeSql (sql, ["%"+search+"%"],
function (transaction, result)
{
var html = "<ul>";
if (result.rows.length)
{
for (var i = 0; i < result.rows.length; i++)
{
var row = result.rows.item (i);
var woord = row.woord;
var woord2 = row.woord2;
var vertaling = row.vertaling;
html += "<li>" + woord + " " + woord2 + "<br><br>" + vertaling + "</li>";
}
}
else
{
html += "<li> Geen resultaten </li>";
}
html += "</ul>";
$("#win2").unbind ().bind ("pagebeforeshow", function ()
{
var $content = $("#win2 div:jqmData(role=content)");
$content.html (html);
var $ul = $content.find ("ul");
$ul.listview ();
});
$.mobile.changePage ($("#win2"));
}, error);
});
});
function error (transaction, err)
{
alert ("DB error : " + err.message);
return false;
}
}
</script>
I solved the issue bij adding different jQuery and jQuery mobile files.
I am now using the files you can find here:
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
I copied and pasted them, for use offline and now it is working like a charm.
Index.html
<div data-role="page" id="reviewsPage">
<div data-role="header">
<h1>Reviews</h1>
TWEET
</div>
<script type="text/javascript">
$(document).on("pageshow", "#reviewsPage", function(event) {
$("#mybtn").bind("click", function(e) {
$.mobile.showPageLoadingMsg();
$.mobile.changePage("my.html", {
reloadPage: true, changeHash: true
});
});
});
</script>
</div>
my.html
<script type="text/javascript">
$(document).bind('pagebeforechange', function(event, data) {
$.ajax({
url: " searchresult.php",
success: function(data) {
alert(data);
var markup = "";
$.each(data, function(i, elem) {
var $template = $('<div><li><img class="ui-li-icon profile"><p class="from"></p><p class="tweet"></p></li></div>');
$template.find(".from").append(elem['a']);
markup += $template.html();
});
$("#tweet-list").append(markup).listview("refresh", true);
$.mobile.changePage($("#twitterPage"));
},
error: function(request, error) {
alert(error);
}
});
});
</script>
<div data-role="page" id="twitterPage">
<div data-role="content">
<ul id="tweet-list" data-role="listview" data-inset="true">
<li data-role="list-divider">
<p>Tweetsdd</p>
</li>
</ul>
</div>
</div>
Above code is used to change the page with dynamic data. If i click the link the my.html will not be populated with data. But if i run the my.html file directly it works. If i write two pages inside the same page it works. But i need to run this in separate pages. I have been searching answer for this question since yesterday. I am new to jquery.
Try this
Index.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script language="text/javascript">
/* VERY IMPORTANT this is before loading jquery.mobile JS */
$( document ).on( "mobileinit", function() {
// Make your jQuery Mobile framework configuration changes here!
$.mobile.allowCrossDomainPages = true;
$.mobile.ajaxEnabled = false;
});
</script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"> </script>
<script type="text/javascript">
$(document).on("pagebeforeshow", function(event) {
$("#mybtn").bind("click", function(e) {
$.mobile.showPageLoadingMsg();
$.mobile.changePage("my.html", {
reloadPage : false,changeHash : true
});
});
});
</script>
</head>
<body>
<div data-role="page" id="reviewsPage">
<div data-role="header">
<h1>Reviews</h1>
<a href="#" id="mybtn" class="ui-btn-right" data-ajax="false" >TWEET</a>
</div>
</div>
my.html
<div data-role="page" id="twitterPage">
<script type="text/javascript">
$(document).bind('pageshow', function(event, data){
alert("shdgs");
$.ajax({
url : " searchresult.php",
success : function(data) {
alert(data);
var markup = "";
$.each(data, function(i, elem) {
var $template = $('<div><li><img class="ui-li-icon profile"><p class="from"></p><p class="tweet"></p></li></div>');
$template.find(".from").append(elem['a']);
//$template.find(".tweet").append(result.text);
//$template.find(".profile").attr("src", result.profile_image_url);
markup += $template.html();
});
$("#tweet-list").append(markup).listview("refresh", true);
// Transition to the Twitter results page.
$.mobile.changePage($("#twitterPage"));
},
error : function(request, error) {
// This callback function will trigger on unsuccessful action
alert(error);
}
});
});
</script>
<div data-role="content">
<ul id="tweet-list" data-role="listview" data-inset="true">
<li data-role="list-divider">
<p>
Tweetsdd
</p>
</li>
</ul>
</div>
</div>
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
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/