I'm very new to coding and learning as I go.
My current conundrum: trying to create a multi-select list where the first three options selected (think course subjects, for example) would be free, but every additional selection thereon would carry a $200 fee, and the total would be displayed. Example:
Math - $0
English - $0
History - $0
Geography - $200
Art - $200
...until the end of the list. There's no limitation on how many options the use can select and no tie-in to a specific options; the first three are free regardless of which option is chosen.
I've been playing around with the W3 list code below because it fits the style of the rest of the form:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<h2> Select the Desired Activites </h2>
<!-- Essential JS 2 MultiSelect's dependent material theme -->
<link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" type="text/css" />
<link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet" type="text/css" />
<link href="//cdn.syncfusion.com/ej2/ej2-dropdowns/styles/material.css" rel="stylesheet" type="text/css" />
<!-- Essential JS 2 all script -->
<!-- <script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script> -->
<!-- Essential JS 2 MultiSelect's dependent scripts -->
<script src="//cdn.syncfusion.com/ej2/ej2-base/dist/global/ej2-base.min.js" type="text/javascript"></script>
<script src="//cdn.syncfusion.com/ej2/ej2-data/dist/global/ej2-data.min.js" type="text/javascript"></script>
<script src="//cdn.syncfusion.com/ej2/ej2-inputs/dist/global/ej2-inputs.min.js" type="text/javascript"></script>
<script src="//cdn.syncfusion.com/ej2/ej2-buttons/dist/global/ej2-buttons.min.js" type="text/javascript"></script>
<script src="//cdn.syncfusion.com/ej2/ej2-lists/dist/global/ej2-lists.min.js" type="text/javascript"></script>
<script src="//cdn.syncfusion.com/ej2/ej2-popups/dist/global/ej2-popups.min.js" type="text/javascript"></script>
<script src="//cdn.syncfusion.com/ej2/ej2-dropdowns/dist/global/ej2-dropdowns.min.js" type="text/javascript"></script>
</head>
<body>
<!-- Add the HTML <input> element -->
<input type="text" tabindex="1" id='select' />
<script>
var sportsData = ['Math', 'English', 'History', 'Geography', 'Art'];
// initialize MultiSelect component
var listObj = new ej.dropdowns.MultiSelect({
dataSource: sportsData,
popupHeight: '200px',
//set width to popup list
popupWidth: '250px',
// set placeholder to MultiSelect input element
placeholder: "Activity"
});
listObj.appendTo('#select');
</script>
</body>
</html>
You can count how many items are in the listObj.value from tagging and removed events:
#priceList
{
white-space: pre;
}
#priceList
{
display: inline-flex;
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- Essential JS 2 MultiSelect's dependent material theme -->
<link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" type="text/css" />
<link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet" type="text/css" />
<link href="//cdn.syncfusion.com/ej2/ej2-dropdowns/styles/material.css" rel="stylesheet" type="text/css" />
<!-- Essential JS 2 all script -->
<!-- <script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script> -->
<!-- Essential JS 2 MultiSelect's dependent scripts -->
<script src="//cdn.syncfusion.com/ej2/ej2-base/dist/global/ej2-base.min.js" type="text/javascript"></script>
<script src="//cdn.syncfusion.com/ej2/ej2-data/dist/global/ej2-data.min.js" type="text/javascript"></script>
<script src="//cdn.syncfusion.com/ej2/ej2-inputs/dist/global/ej2-inputs.min.js" type="text/javascript"></script>
<script src="//cdn.syncfusion.com/ej2/ej2-buttons/dist/global/ej2-buttons.min.js" type="text/javascript"></script>
<script src="//cdn.syncfusion.com/ej2/ej2-lists/dist/global/ej2-lists.min.js" type="text/javascript"></script>
<script src="//cdn.syncfusion.com/ej2/ej2-popups/dist/global/ej2-popups.min.js" type="text/javascript"></script>
<script src="//cdn.syncfusion.com/ej2/ej2-dropdowns/dist/global/ej2-dropdowns.min.js" type="text/javascript"></script>
</head>
<body>
<h2> Select the Desired Activites </h2>
<!-- Add the HTML <input> element -->
<input type="text" tabindex="1" id='select' />
<div class="priceListBox">Price per item: <span id="priceList"></span></div>
<div>Price total: <span id="price">0</span></div>
<script>
var sportsData = ['Math', 'English', 'History', 'Geography', 'Art'];
// initialize MultiSelect component
var listObj = new ej.dropdowns.MultiSelect({
dataSource: sportsData,
popupHeight: '200px',
//set width to popup list
popupWidth: '250px',
// set placeholder to MultiSelect input element
placeholder: "Activity",
//event listeners
tagging: getPrice, //item added
removed: getPrice //item removed
});
listObj.appendTo('#select');
//event handler
function getPrice()
{
let price = 0;
if (listObj.value.length > 3)
price = (listObj.value.length - 3) * 200;
//display total price
document.getElementById("price").textContent = price;
let priceList = [];
for(let i = 0; i < listObj.value.length; i++)
{
priceList.push(listObj.value[i] + " = " + (i > 2 ? 200 : 0));
}
//display prices for each item
document.getElementById("priceList").textContent = priceList.join("\n");
}
</script>
</body>
</html>
I don't know if this is what you want, but you could do an event listener on the tagging event, and then do the calculation with the selected tag length.
var sportsData = ['Math', 'English', 'History', 'Geography', 'Art'];
// initialize MultiSelect component
var listObj = new ej.dropdowns.MultiSelect({
dataSource: sportsData,
popupHeight: '200px',
//set width to popup list
popupWidth: '250px',
// set placeholder to MultiSelect input element
placeholder: "Activity"});
// Listen on tagging event and execute the function to calculate.
listObj.tagging = function () {
var selectedTags = listObj.value;
if (selectedTags.length > 3) {
var total = (selectedTags.length - 3) * 200;
alert('$' + total);
}
}
listObj.appendTo('#select');
I hope this helps you getting on your way.
From the documentation, you can read the following about the dropdown, and it's listObj:
change
Event
Triggers when an item in a popup is selected or when the model value is changed by user. Use change event to Configure the Cascading DropDownList
They also provide an example. So I added that to your code, by adding an 'change' property to your listObj, and then print the cost through valueChanged().
NOTE: you need to select some activities, and then click somewhere else that's not the dropdown to see the price.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<h2> Select the Desired Activites </h2>
<!-- Essential JS 2 MultiSelect's dependent material theme -->
<link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" type="text/css" />
<link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet" type="text/css" />
<link href="//cdn.syncfusion.com/ej2/ej2-dropdowns/styles/material.css" rel="stylesheet" type="text/css" />
<!-- Essential JS 2 all script -->
<!-- <script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script> -->
<!-- Essential JS 2 MultiSelect's dependent scripts -->
<script src="//cdn.syncfusion.com/ej2/ej2-base/dist/global/ej2-base.min.js" type="text/javascript"></script>
<script src="//cdn.syncfusion.com/ej2/ej2-data/dist/global/ej2-data.min.js" type="text/javascript"></script>
<script src="//cdn.syncfusion.com/ej2/ej2-inputs/dist/global/ej2-inputs.min.js" type="text/javascript"></script>
<script src="//cdn.syncfusion.com/ej2/ej2-buttons/dist/global/ej2-buttons.min.js" type="text/javascript"></script>
<script src="//cdn.syncfusion.com/ej2/ej2-lists/dist/global/ej2-lists.min.js" type="text/javascript"></script>
<script src="//cdn.syncfusion.com/ej2/ej2-popups/dist/global/ej2-popups.min.js" type="text/javascript"></script>
<script src="//cdn.syncfusion.com/ej2/ej2-dropdowns/dist/global/ej2-dropdowns.min.js" type="text/javascript"></script>
</head>
<body>
<!-- Add the HTML <input> element -->
<input type="text" tabindex="1" id='select' />
<script>
var sportsData = ['Math', 'English', 'History', 'Geography', 'Art'];
// initialize MultiSelect component
var listObj = new ej.dropdowns.MultiSelect({
dataSource: sportsData,
popupHeight: '200px',
//set width to popup list
popupWidth: '250px',
// set placeholder to MultiSelect input element
placeholder: "Activity",
// ADDED
change: (event) => { valueChanged(event.value) }
});
listObj.appendTo('#select');
// ADDED
function valueChanged(valueArr) {
let price = 0,
maxFreeActivities = 3,
costPerActivity = 200,
numberOfSelectedActivities = valueArr.length;
if (numberOfSelectedActivities > maxFreeActivities) {
price = (numberOfSelectedActivities - maxFreeActivities) * costPerActivity;
}
console.log('price:', price);
}
</script>
</body>
</html>
I am a c programmer and trying to call jquery function from html.
For example from open source I am having below, I would like to make a variable wd accessible to webdriver-app.js
A.html:
<html>
<!-- jQuery & jQuery UI + theme (required) -->
<link href="jquery-ui.css" rel="stylesheet">
<script src="jquery.js"></script>
<script src="jquery-ui.js"></script>
<!-- keyboard widget css & script (required) -->
<link href="keyboard.css" rel="stylesheet">
<script src="jquery.keyboard.js"></script>
<script src="webdriver.js"></script>
<script src="base64-arraybuffer.js"></script>
<script src="FileSaver.js"></script>
<script src="hammer.min.js"></script>
<script src="webdriver-app.js"></script>
</head>
<input name="webDriverUrlPort" type="text" onchange="wd.onWebDriverUrlPortChange()" onkeyup="wd.onWebDriverUrlPortChange()"/>
<input name="webDriverUrlPort" type="text" onchange="wd.onWebPageChange()" onkeyup="wd.onWebPageChange()"/>
webdriver-app.js contains:
....
WebDriverJsController.prototype.onWebPageChange = function() {
this.view.updateSessionDepControls();
};
document.addEventListener("DOMContentLoaded", function(event) {
window.wd = new WebDriverJsController();
});
....
Currently, changing above wd.onWebPageChange() to window.wd.onWebPageChange() gives me undefined or null error. What could be wrong in above simplified code?
I wrote the javascript, which is working absolutely fine on my computer. It shows popup window with some text and image when you press on iv element. But with wordpress it does not work. On wordpress it adds the image, which should be in popup window, bellow the content of the website.
In developer tool it shows the error:
TypeError: undefined is not an object (evaluating '$j('[data-q_id="'+a+'"]').offset().top')
Here is the code
<body>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript">
$(function() {
$('#clickMe1').click(function(event) {
var mytext = $('#literOne').val();
$('<div id="dialog">'+mytext+'</div>').appendTo('body');
event.preventDefault();
$("#dialog").dialog({
width: 600,
modal: true,
close: function(event, ui) {
$("#dialog").remove();
}
});
}); //close click
});
</script>
<script type="text/javascript">
$(function() {
$('#clickMe2').click(function(event) {
var mytext = $('#literTwo').val();
$('<div id="dialog">'+mytext+'</div>').appendTo('body');
event.preventDefault();
$("#dialog").dialog({
width: 600,
modal: true,
close: function(event, ui) {
$("#dialog").remove();
}
});
}); //close click
});
</script>
<style>
.pi_liter{
cursor: pointer;
}
</style>
<!-- begin planirovki -->
<div class="planirovki">
<div class="plan_img_main">
<div class="plan_img" id="plans">
<div class="wmain" id="ankor1">
<div class="pi_liter pl1" section="1" id="clickMe1">
Литер 1
<textarea cols="0" rows="0" id="literOne" style="display:none">Some hidden text display none <img src="http://cu33132.tmweb.ru/domnasobornoy/wp-content/uploads/2016/03/400.jpg" />
</textarea>
</div>
<div class="pi_liter pl2" section="2" id="clickMe2">
Литер 2
<textarea cols="0" rows="0" id="literTwo" style="display:none">Some hidden text display none two <img src="http://cu33132.tmweb.ru/domnasobornoy/wp-content/uploads/2016/03/400.jpg" />
</textarea>
</div>
</div>
</div>
</div>
</div>
<!-- end planirovki -->
</div>
<!-- end container_main -->
<link rel="stylesheet" type="text/css" href="css/style_adapt.css">
</body>
CSS
.wmain{max-width:1180px;margin:0 auto;}
.planirovki{}
.planirovki .tm{padding-top:88px;}
.planirovki .tm span{padding-bottom:0;padding-top:15px;}
.plan_head{padding-bottom:67px;}
.plan_img{background:url(http://cu33132.tmweb.ru/domnasobornoy/wp-content/uploads/2016/03/400.jpg) no-repeat center top;}
.plan_img .wmain{height:1144px;position:relative;}
.pi_liter{text-align:center;font-size:24px;color:#003d7f;text-transform:uppercase;font-family:'Kudrashov Plain:001.001', arial;width:171px;height:125px;background:url(http://cu33132.tmweb.ru/domnasobornoy/wp-content/uploads/2016/07/plan_plashka.png) no-repeat;line-height:42px;position:absolute;cursor:default;padding-top:44px;}
.pi_liter span{font-size:17px;}
.pl1{left:73px;top:11px;}
.pl2{left:821px;top:11px;}
.pi_liter{-webkit-transition:0.3s;-moz-transition:0.3s;-ms-transition:0.3s;-o-transition:0.3s;transition:0.3s;}
.pi_liter:hover{-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-ms-transform:scale(1.1);-o-transform:scale(1.1);transform:scale(1.1);}
related url is http://cu33132.tmweb.ru/domnasobornoy/#plan
Thank you in advance!
Hope you can help me
I'm using AngularJS. The controller is functioning; I can call functions and values from it via my view. I can assign values to my gridOptions.data without console error. I can define other properties for gridOptions without conosole error. But the grid doesn't display... at all.
My index.html has the following header:
<!--Lib-->
<!--jquery-->
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<!--<script src="https://code.jquery.com/jquery-1.12.4.js"></script>-->
<!--ng base-->
<script src="app/lib.bower/angular/angular.js"></script>
<script src="app/lib.bower/angular-route/angular-route.js"></script>
<!--ui grid-->
<script src="app/lib.bower/angular-ui-grid/ui-grid.js"></script>
<link href="app/lib.bower/angular-ui-grid/ui-grid.min.css" rel="stylesheet"/>
<!--Misc-->
<link rel="stylesheet" href="app/lib.bower/bootstrap/dist/css/bootstrap.min.css"/>
<script src="app/lib.bower/toastr/toastr.js"></script>
<link href="app/lib.bower/toastr/toastr.css" rel="stylesheet" />
<!--Custom-->
<script src="app/app.js"></script>
<!--Custom - Services-->
<script src="app/services/resetRequestService.js"></script>
<script src="app/services/adValidationService.js"></script>
<script src="app/services/userSearchService.js"></script>
<script src="app/services/passwordCreationService.js"></script>
<script src="app/services/toasterService.js"></script>
<!--Custom - Controllers-->
<script src="app/controllers/UserSearchController.js"></script>
<script src="app/controllers/HeaderController.js"></script>
<script src="app/controllers/PasswordResetRequestController.js"></script>
<!--Custom modules-->
<script src="app/modules/header.js"></script>
<!--Custom - Other-->
<link rel="stylesheet" href="app/css/passwordReset.css"/>
My controler is as such:
var userSearchController = function($scope, $interval, userSearchService) {
var vm = this;
vm.gridOptions = {
enableFiltering: true,
showGridFooter: true,
data: [
{
test: 'test',
test2: 'test2'
}
]
};
//more code
}
And the view has the following div:
<div ui-grid="vm.gridOptions" class="grid"></div>
Again, I don't get any errors, I just get... nothing on my .html; no data, no columns, not even a border, it entirely doesn't appear. I've ensured that the vm.gridOptions is assigned as soon as the controller starts up, and (again) I've ensured that I can run methods and get values from my controller.
I've poured over numerous tutorials which all have their own flavor of making ui-grid work, and I can't figure out what I'm doing wrong.
Anyone know what I'm missing?
I am trying to pop up a form on click of a button. I have included
<link href="../../Content/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.9.1.min.js"></script>
<script src="../../Scripts/jquery-ui-1.8.20.min.js">
The page .
and Using ->
<script type="text/javascript">
$(document).ready(function () {
$('#AddBook').click(function () {
$('#form').dialog({
height: 500,
width: 500,
"title": "Add Book "
}).html();
});
});
</script>
for the first time of click of "AddBook" button it is rendering the proper output.But ,when i click the button second time ,it shows an exception "0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'dialog'.
you can do it more correctly as you're using MVC:
<link href="#Url.Content("~/Content/themes/base/jquery-ui.css")" rel="stylesheet" type="text/css"/>
<script src="#Url.Content("~/Scripts/jquery-1.9.1.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-ui-1.8.20.min.js")" type="text/javascript"></script>
Or you can use bundling:
In BundleConfig.cs
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js",
"~/Scripts/jquery-ui-{version}.js"
));
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/themes/base/jquery.ui.*",
));
And usage in view:
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/jquery")
There is no need in callng .html() in your script.
Its seems Your script has not been properly included. You are missing End tag </script>
<link href="../../Content/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.9.1.min.js"></script>
<script src="../../Scripts/jquery-ui-1.8.20.min.js"></script>