I'm about to try and implement the JQuery slider into an old Classic ASP store, where the slider would control the price range. So have a price between say $40 and $80 and you could use the slider to go between $50 and $60...
Anyone know of any examples of using the slider with ASP in this way? I'm guessing I store the values in hidden values, and then make the page post the values async back on itself?
Thanks
the slider gives you the chance to add a minimum, maximum values as well the a step...
try this code below and implement it in your ASP code
<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"></script>
<link class="jsbin" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#slider { margin: 10px; width: 300px; }
body { font-size: 20px; }
</style>
<script type="text/javascript">
$(document).ready(function(){
$("pre a").bind("click", function() { // show current hidden value
alert($("#prdRange").val());
});
$("#slider").slider({
min: 40, // minimum amount
max: 80, // maximum amount
step: ((80 - 40) / 10), // steps ...
slide: function(event, ui) { // fire this when change
$("#lbl").text(ui.value + ",00 €");
$("#prdRange").val(ui.value);
}
});
});
</script>
</head>
<body style="font-size:62.5%;">
<div id="slider"></div>
<span id="lbl">40,00 €</span>
<input type="hidden" id="prdRange" value="40" />
<pre>min: 40 Euros, max: 80 Euros, range chosen</pre>
</body>
</html>
all you have to do is change the values with the asp value when you load the page like
$("#slider").slider({
min: <%= ProductMinValue %>, // minimum amount
max: <%= ProductMaxValue %>, // maximum amount
step: <%= ProductStepValue %>, // steps ...
slide: function(event, ui) { // fire this when change
$("#lbl").text(ui.value + ",00 €");
$("#prdRange").val(ui.value);
}
});
see this code live in JSBin (you can edit it by adding /edit to the URL...)
This answer is for Ajaxing the base code...
Procedure:
The output for the slider changed. It now loads a productList.asp passing the value from the slider.
The productList.asp is a simple ASP page that picks up the Query String "value" and build a table of products using that value.
Right now it only get the QueryString and populates the 4 products with that value.
Code:
slider.html
<!DOCTYPE html>
<html>
<head>
<link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.slider.js"></script>
<style type="text/css">
#slider { margin: 10px; width: 300px; }
#lbl { font-size: 22px; }
</style>
<script type="text/javascript">
$(document).ready(function(){
$("pre a").bind("click", function() { // show current hidden value
alert($("#prdRange").val());
});
$("#slider").slider({
min: 40, // minimum amount
max: 80, // maximum amount
step: ((80 - 40) / 10), // steps ...
slide: function(event, ui) { // fire this when change
var newValue = ui.value;
$("#lbl").text(newValue + ",00 €");
$("#prdRange").val(newValue);
$("#prdList").load("productList.asp #prdTableList", { 'value' : newValue }, function(){
//alert("products in range of " + newValue + ",00 € loaded");
});
}
});
});
</script>
</head>
<body style="font-size:62.5%;">
<div id="slider"></div>
<span id="lbl">40,00 €</span>
<input type="hidden" id="prdRange" value="40" />
<pre>min: 40 Euros, max: 80 Euros, range chosen</pre>
<div id="prdList"></div>
</body>
</html>
productList.asp
<%
Dim newValue
newValue = Request("value") & ",00 €"
%>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="prdTableList">
<table style="width:100%;">
<tr>
<td style="width:50%;">Product</td>
<td>Price</td>
</tr>
<tr>
<td><a href="#">PRD 001<a></td>
<td><%= newValue%></td>
</tr>
<tr style="background-color:#ccc;">
<td><a href="#">PRD 002<a></td>
<td><%= newValue%></td>
</tr>
<tr>
<td><a href="#">PRD 003<a></td>
<td><%= newValue%></td>
</tr>
<tr style="background-color:#ccc;">
<td><a href="#">PRD 004<a></td>
<td><%= newValue%></td>
</tr>
</table>
</div>
</body>
</html>
Note: I'm only loading the #prdTableList output (load("productList.asp #prdTableList"...), and not the entire productList.asp page, so there will be no problem to have HTML tags and is a good way to debug, because all we need to do in that page is call it with the value query string like:
productList.asp?value=47
Output:
alt text http://www.balexandre.com/temp/2009-05-22_1311.png
Sure, just use the jQuery Slider: http://docs.jquery.com/UI/Slider or any of the sliders found with The Google. http://www.keepthewebweird.com/demo/slider/
Related
I have created a table which is draggable and droppable using jQuery and I have also created textbox, which is draggable. When my textbox is dropped on a table cell, I want the cell to adjust its size according to the size of the textbox. Is this possible? Please help?
This is the code I have tried:
<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function() {
$('input').draggable({
cancel: null
});
$('tr>td').droppable({
drop: function(event, ui) {
$(this).html('droped');
}
});
$('table').draggable({
cancel: null
});
});
</script>
<input type="text" id="draggable"></input>
<table id="droppable" border="1" style="height: 100px;width: 200px">
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
This can be done like so:
https://jsfiddle.net/dqg2r6xx/
jQuery
$(document).ready(function() {
$('input').draggable({
cancel: null
});
$('#droppable td').droppable({
accept: "input",
drop: function(event, ui) {
$(this).html('droped');
}
});
$('table').draggable({
cancel: null
});
});
Problem here is that it does not attach to the table. So if you move it around, the input is still in position.
In regards to the sizing, it's adjusting the cell but not the table size. The input is wider than 100px so it stretches the cell to it's max and can do no more.
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 am starting to learn to use angular's ui bootstrap library and trying to get a popover working. Am i missing something in my setup?
i've provided a plunker example. my requirement is to have a popover over cells in a table that gets refreshed by $interval every second.
http://plnkr.co/edit/hF3EDIRfKA1VOfSennZq?p=preview
<!DOCTYPE html>
<html ng-app="test">
<head>
<meta charset="UTF-8">
<title>angular-test</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" type="text/css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.2/ui-bootstrap-tpls.min.js"></script>
<script type="text/javascript">
var app = angular.module("test", ['ngAnimate', 'ui.bootstrap']);
app.controller("testCtrl", function($scope, $interval) {
var stats = [{
"name": "john",
"stat1": 3,
"stat2": 5
}];
var count = 0;
$scope.getTestInfo = function() {
$scope.count = count++;
$scope.stats = stats;
}
$interval(function(){$scope.getTestInfo();}, 1000);
});
</script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-4" ng-controller="testCtrl" ng-init="count=0">
<table id="table1" class="table table-hover table-condensed">
<thead>
<tr>
<th>column1</th>
<th>column2</th>
<th>column3</th>
</tr>
</thead>
<tbody class="bg-info">
<tr ng-repeat="stat in stats">
<td uib-popover="testcolumn1">{{stat.name}}</td>
<td uib-popover="{{stat.stat1}}">{{stat.stat1 + count}}</td>
<td uib-popover="testcolumn3">{{stat.stat2}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
You just need to add the metadata (popover-trigger etc.) for the popover modal. I forked your plunkr to demonstrate. http://plnkr.co/edit/d1eAf2NEAA9mCXmNN5LC?p=preview
Iam having code with two dialogs one from another, while going back from second dialog to first i have given data-transition as slide but it is not working. Can someone help me please thanks.
Here is the code
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<meta name="viewport" content="width=device-width, initial-scale="1"">
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<link rel="stylesheet" type="text/css" href="http://dev.jtsage.com/cdn/simpledialog/latest/jquery.mobile.simpledialog.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/simpledialog/latest/jquery.mobile.simpledialog2.min.js"></script>
<style>
.ui-simpledialog-screen-modal{
opacity: 0.4;
}
.ui-simpledialog-container {
border: 1px solid rgb(221, 221, 221) !important;
}
.ui-grid-a > div {
padding: 2px;
}
</style>
<script>
$(document).on("pagecreate", "#page1", function () {
$(document).on('click', '#openPopup', function() {
$('#inlinecontent').simpledialog2({
mode: "blank",
headerText: "Select Item(s)",
headerClose: false,
blankContent: true,
themeDialog: 'a',
width: '75%',
zindex: 1000
});
});
$(document).on('click', '#dialogSubmit', function() {
var numChecked = $('#cBoxes').find('[type=checkbox]:checked').length;
if (numChecked > 0){
$(document).trigger('simpledialog', {'method':'close'});
} else {
$('<div>').simpledialog2({
mode: 'blank',
headerText: 'Warning',
headerClose: true,
transition: 'flip',
themeDialog: 'b',
zindex: 2000,
blankContent :
"<div style='padding: 15px;'><p>Please select at least one checkbox first.</p>"+
// NOTE: the use of rel="close" causes this button to close the dialog.
"<a rel='close' data-role='button' href='#'>OK</a></div>"
});
}
});
});
</script>
</head>
<body>
<!-- the page markup -->
<div data-role="page" id="page1">
<div data-role="header" data-position="fixed">
<h1>SimpleDialog2 Chained Popup</h1>
</div>
<div class="ui-content" role="main">
<!-- button that opens the popup -->
<button id="openPopup">Select One or More Item(s)...</button>
</div>
</div>
<!-- the popup markup -->
<div id="inlinecontent" style="display:none" >
<div style="padding: 15px;">
<fieldset id="cBoxes" data-role="controlgroup" >
<legend>Favorite Fruit:</legend>
<input type="checkbox" name="checkbox-v-2a" id="checkbox-v-2a" />
<label for="checkbox-v-2a">Apple</label>
<input type="checkbox" name="checkbox-v-2b" id="checkbox-v-2b" />
<label for="checkbox-v-2b">Banana</label>
<input type="checkbox" name="checkbox-v-2c" id="checkbox-v-2c" />
<label for="checkbox-v-2c">Orange</label>
</fieldset>
<div class="ui-grid-a">
<div class="ui-block-a"><button id="dialogSubmit" data-theme="b">OK</button></div>
<div class="ui-block-b"><button id="dialogCancel" rel='close'>Cancel</button></div>
</div>
</div>
</div>
</body>
</html>
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/