Currently I have star ratings for all my objects in this:
<div class="ui star rating" data-rating="0" data-max-rating="5"></div>
In my js file
$('.ui.rating')
.rating('setting', 'onRate', function(value) {
});
I am able to retrieve the value of the new star rating. In the function code, I'll like to redirect to a link which will save this rating such as
window.location.href = '/update/item/{id}/value/{value};
How would I get the item.id that the star rating falls upon?
I suggest that you bind your id value to the rating when rendered using a data- attribute (say data-id), which can then be accessed when a new rating is selected.
$('.ui.rating').rating('setting', 'onRate', function(value) {
var url = '/update/item/' + $(this).data('id') + '/value/' + value;
$('#href').text(url);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.css" rel="stylesheet" />
101: <div class="ui star rating" data-id="101" data-rating="0" data-max-rating="5"></div><br />
102: <div class="ui star rating" data-id="102" data-rating="0" data-max-rating="5"></div><br />
window.location.href = "<span id="href"></span>";
Related
I have a desktop website written in php.
I have a form that has a submit button in the form of an image displaying the word "next". When my users complete the form and click on it i want it to display the loading gif. I have placed the necessary coding (as i understand it ) to do this but it does not replace the next image with the loading gif. Can anyone pick up what i'm doing wrong.
relevant code section below.
<div class="bb"><input type="image" src="./img/next.png" alt=" Create
My Account " onclick="ButtonClicked()"/></div>
<div class="lb"><input type="image" src="./img/loading6.gif" alt="
loading button "/></div>
<BR>
<BR>
<BR>
</form>
</div>
<script type="text/javascript">
function ButtonClicked()
{
document.getElementById("bb").style.display = "none"; // to undisplay
document.getElementById("lb").style.display = ""; // to display
return true;
}
var FirstLoading = true;
function RestoreSubmitButton()
{
if( FirstLoading )
{
FirstLoading = false;
return;
}
document.getElementById("bb").style.display = ""; // to display
document.getElementById("lb").style.display = "none"; // to undisplay
}
// To disable restoring submit button, disable or delete next line.
//document.onfocus = RestoreSubmitButton;
</script>
You use class for getElementById replace class by 'id' that will work better.
Each id must be single, you cannot have many time the same id.
And use img tag rather input for picture.
And to conclude display = "" and display ="none" it's the same use display = 'block' or display = 'inline-block';
Because there are no "IDs" on your HTML. You have set class names as 'bb' and 'lb'. Replace those classes with id and it will work. So change the HTML as below.
<div id="bb"><input type="image" src="./img/next.png" alt=" Create
My Account " onclick="ButtonClicked()"/></div>
<div id="lb"><input type="image" src="./img/loading6.gif" alt="
loading button "/></div>
<BR>
<BR>
<BR>
</form>
</div>
I'am working on a project basically using Javascript (mainly webcam libraries). What i want to achieve is to manage when and where to use each library on a specific purpose.
To walk you through, first of all I provide different features that would potentially work according to what is selected from the radio buttons (See Figure 1).
For example in Default Mode none features are applied, however on the second radio button (Face Tracking Mode), I want to access a specific library and detect the face from the given input - which works.
The issue here is that I want to :
1)stop tracking faces,
2)clear everything on the canvas,
in case of changing the radio input selection.
My first idea to solve this, is to create a function that would do that every time i call it (when i change mode-radio button) -> see last function resetCanvasFeatures() that would basically use something like faceTracking.stop();
Im not sure if the following ideas (threads or jquery) would help here.
Please if you have any suggestions let me know.
HTML Code:
<!DOCTYPE html>
<html>
<head>
<title>Face Tracking</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Libraries Declaration -->
<!-- p5js -->
<script type="text/javascript" src="libraries/p5.min.js"></script>
<script type="text/javascript" src="libraries/addons/p5.dom.min.js"></script>
<script type="text/javascript" src="libraries/addons/p5.sound.min.js"></script>
<!-- tracking.js -->
<script type="text/javascript" src="libraries/tracking.js-master/tracking.js-master/build/tracking.js"></script>
<script type="text/javascript" src="libraries/tracking.js-master/tracking.js-master/build/data/face-min.js"></script>
<script src="libraries/tracking.js-master/tracking.js-master/examples/assets/stats.min.js"></script>
<!-- jquery.min.js-->
<script src="libraries/jquery-3.3.1.min.js"></script>
<!--
<script src="../node_modules/dat.gui/build/dat.gui.min.js"></script>
-->
<!-- MY SCRIPT -->
<script src="scripts/faceTrackingTool.js"></script>
<!-- Reference Cascade Style Sheet -->
<link rel="stylesheet" type="text/css" href="styles\styles.css">
</head>
<body>
<!-- ADD TITLE ELEMENT -->
<div>
<h1 id="main_Title">Mirror Mirror on the Wall</h1>
<p id="description">Welcome to this website. After enabling your webcam, simply select an option from the sections below.</p>
</div>
<!-- ADD RADIO BUTTONS (Program functionality is performed) -->
<div id="radioButtonController-container">
<form name="radioButtonControllerForm">
<section id="radioButtonsSection">
<!-- DEFAULT -->
<div>
<input type="radio" id="radio0" name="radioButtonController"
value="default">
<label for="radio0">
<h2>Default Mode : </h2>
<p>Canvas draws every frame of the video - No features are implemented here</p>
</label>
</div>
<!-- FACE TRACKING -->
<div>
<input type="radio" id="radio1" name="radioButtonController"
value="faceTracking" onClick="faceTracking()">
<label for="radio1">
<h2>Face Tracking Mode : </h2>
<p>Uses tracking.js library - Detects one or more faces from the given input</p>
</label>
</div>
<!-- SLIM TOOL -->
<div>
<input type="radio" id="radio2" name="radioButtonController"
value="slimTool">
<label for="radio2">
<h2>Slim Tool Mode : </h2>
<p>(text text text text text)</p>
</label>
</div>
<!-- HAIR TOOL -->
<div>
<input type="radio" id="radio3" name="radioButtonController"
value="hairTool" disabled>
<label for="radio3">
<h2>Hair Tool Mode : </h2>
<p>(text text text text text)</p>
</label>
</div>
<!-- BACKGROUND TOOL -->
<div>
<input type="radio" id="radio4" name="radioButtonController"
value="backgroundTool">
<label for="radio4">
<h2>Background Tool Mode : </h2>
<p>(text text text text text)</p>
</label>
</div>
<!-- MORPH WITH TOOL -->
<div>
<input type="radio" id="radio5" name="radioButtonController"
value="morphTool">
<label for="radio5">
<h2>Morph Tool Mode : </h2>
<p>(text text text text text)</p>
</label>
</div>
</section>
</form>
</div>
<br/><br/>
<!-- ADD EDITED CANVAS DIV ELEMENT -->
<div id="editingCanvas-container">
<!-- <canvas id="editingCanvas-element"></canvas> is added here from faceTrackingTool.js -->
<!-- <h3>Edited Canvas</h3> -->
</div>
<!-- ADD ORIGINAL VIDEO DIV ELEMENT -->
<div id="originalVideo-container">
<!-- <video id="originalVideo-element"></video> is added here from faceTrackingTool.js -->
<!-- <h3>Original Canvas</h3> -->
</div>
</body>
</html>
JAVASCRIPT FILE:
var canvas;
var canvasWidth = 640;
var canvasHeight= 480;
var videoElement; //Holds the video element (<video....>)
var frame; //Holds an image() object of every frame of the video
var selectedRadioButton; //Holds the value of the selected radio button
var tracker;
var trackingTask;
var faceTrackingMode = false; //TRUE- Open Tracking, FALSE-Declare variables once
function setup(){
//Set Default Radio Button (Get access from <form> element)
document.radioButtonControllerForm.radioButtonController[0].checked= true; //Default Mode
//Create original canvas and move it
//so it’s inside <div id="editedCanvas-container">
canvas = createCanvas(canvasWidth, canvasHeight); //480p
canvas.parent('editingCanvas-container');
canvas.id("editingCanvas-element");
//Change the style of the canvas so it presents a mirror
document.getElementById("editingCanvas-element").style.border = "1px solid black";
document.getElementById("editingCanvas-element").style.borderRadius = "40px";
//Activate Web-Camera,set attributes and move it
//so it’s inside <div id="originalVideo-container">
videoElement = createCapture(VIDEO);
videoElement.parent('originalVideo-container');
videoElement.id("originalVideo-element");
videoElement.size(canvasWidth, canvasHeight); //480p
//originalCapture.hide(); //Do not Hide Original Capture
var canvasTitle = createElement("h3", "Editing Canvas");
canvasTitle.parent('editingCanvas-container');
var videoTitle = createElement("h3", "Original Video");
videoTitle.parent('originalVideo-container');
}
function draw(){
/* Store every frame in the variable (Holds image() Object)*/
frame = image(videoElement, 0, 0, width, height);
// (Default, Face Tracking, Slim Tool, Hair Tool, Background Tool, Morph Tool)
selectedRadioButton = getSelectedRadioButtonValue();
radioButtonsMananger(selectedRadioButton); //Pass the selected Option Value to function
}
function getSelectedRadioButtonValue(){
var selected; //Set variable to hold selected value
//Default
if (document.radioButtonControllerForm.radioButtonController[0].checked) {
selected = document.radioButtonControllerForm.radioButtonController[0].value;
}
...........
else if (document.radioButtonControllerForm.radioButtonController[5].checked) {
selected = document.radioButtonControllerForm.radioButtonController[5].value;
}
return selected; //Return selected values
}
function radioButtonsMananger(selectedOption){
switch(selectedOption){
case "default":
resetCanvasFeatures();
//console.log("use default");
break;
case "faceTracking":
resetCanvasFeatures();
//faceTracking();
break;
...........
}
}
function faceTracking(){
//Check if the variables are already declared
if(faceTrackingMode === false){
myVideo = document.getElementById('originalVideo-element');
myCanvas = document.getElementById('editingCanvas-element');
myCanvasContext = myCanvas.getContext('2d');
//Open Tracker from tracking.js library
//Open tracker - use array (ObjectTracker(['face','eye','mouth']))
tracker = new tracking.ObjectTracker('face');
tracker.setInitialScale(4);
tracker.setStepSize(2);
tracker.setEdgesDensity(0.1);
trackingTask = tracking.track(myVideo, tracker, { camera: true });
faceTrackingMode = true; //Set to TRUE - Do not declare those variables again
}
trackingTask.run();
tracker.on('track', function(event) {
event.data.forEach(function(rect) {
myCanvasContext.strokeStyle = '#a64ceb';
myCanvasContext.strokeRect(rect.x, rect.y, rect.width, rect.height);
myCanvasContext.font = '11px Arial';
myCanvasContext.fillStyle = '#000000 ';
myCanvasContext.fillText('x: ' + rect.x + 'px', rect.x +
rect.width + 5, rect.y + 11);
myCanvasContext.fillText('y: ' + rect.y + 'px', rect.x +
rect.width + 5, rect.y + 22);
});
});
}
function resetCanvasFeatures(){
setTimeout(function () {
trackingTask.stop();
}, 10000);
}
FIGURE
Using onchange tag on the input seems to be working great. no repeated loop functions.
<input type/id/name/value onchange="nameOfTheFunction()">
I have some issues figuring out how to get the selected value in a multi select form from ui-select.
I have made a snippet to show you what I want to do. In my html I have a made an ui-select with an ng-change-event callback: ng-change="onDatasetChanged(whatShouldBehere?)". When the option is selected, I want to print the selected model only inside the onDatasetChanged()-method in my controller.
angular.module('myApp',['ui.select']).controller('MyController', function ($scope) {
$scope.myUiSelect={model:{}}; // encapsulate your model inside an object.
$scope.availableData=["a","b","c"]; //some random options
$scope.onDatasetChanged = function(selectedValue){
console.log("selectedValue",selectedValue);
}
});
<link href="https://rawgit.com/angular-ui/ui-select/master/dist/select.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://rawgit.com/angular-ui/ui-select/master/dist/select.js"></script>
<body ng-app="myApp" ng-controller="MyController">
<ui-select multiple ng-model="myUiSelect.model" close-on-select="false" title="Choose a dataset" ng-change="onDatasetChanged(whatShouldBehere?)">
<ui-select-match placeholder="Select something">{{$item.label}}</ui-select-match>
<ui-select-choices repeat="data in availableData | filter:$select.search">
{{data}}
</ui-select-choices>
</ui-select>
</body>
After a bit of research on the repository page for the ui-select-directive
I figured you could use an on-select event binding like this:
on-select="onSelect($item, $model)". See the updated snippet:
angular.module('myApp',['ui.select']).controller('MyController', function ($scope) {
$scope.myUiSelect={model:{}}; // encapsulate your model inside an object.
$scope.availableData=["a","b","c"]; //some random options
$scope.onSelect = function(item,model){
console.log("selectedItem",item);
}
});
<link href="https://rawgit.com/angular-ui/ui-select/master/dist/select.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://rawgit.com/angular-ui/ui-select/master/dist/select.js"></script>
<body ng-app="myApp" ng-controller="MyController">
<ui-select multiple ng-model="myUiSelect.model" close-on-select="false" title="Choose a dataset" on-select="onSelect($item, $model)">
<ui-select-match placeholder="Select something">{{$item.label}}</ui-select-match>
<ui-select-choices repeat="data in availableData | filter:$select.search">
{{data}}
</ui-select-choices>
</ui-select>
</body>
I am in a tricky situation,
Scenario- There are gadgets which are to be shown in mobile site.
2.One of the gadget is RSS which user can add multiple times for different topics like one for security, one for news, one for events.
3. So we have 1 partial view for RSS, but if the user has 2 RSS gadgets then the same partial view should load with different gadget name. Here the functionality is working fine using foreach loop.
#foreach (var rssFeed in Model.RSSFeedList)
{
<article class="bm2014_bigBoxWrap bm2014_bigBoxRSS bm2014_paginate">
<img src="~/Content/images/iconRefresh.png" width="20" height="20" alt="refresh icon" title="refresh icon">
<div class="bm2014_expColCtrl">
<h1 class="bm2014_bigBoxHdr">
<span class="bm2014_hiddenHdr"> </span>
<!-- for markup validation -->
#if (rssFeed.Channel.Name == "xyznews")
{
<span>#Html.Label(Labels.Title_xyz)</span>
}
else if(rssFeed.Channel.Category=="xyzRSSFeed")
{
<!--<span>#Html.Label(Labels.xyz) - #rssFeed.Channel.Title</span>-->
<span>#rssFeed.Channel.Title</span>
}
<span class="bm2014_expColBtn"><img src="~/Content/images/iconPlus.png" width="32" height="32" alt="expand collapse icon" title="expand collapse icon"></span>
</h1>
<div class="bm2014_expColContent bm2014_bellnetRSSWrapper" id="bm2014_divBellnetRSS">
#Html.Partial("~/Views/Shared/_RSS.cshtml", rssFeed)
</div>
</div>
</article>
}
<!-- RSS Panel end here -->
Problem is with refresh issue
if i hit the refresh button for selected gadget, it is by default taking only one RSS name and loading the content irrespective of different gadget selected.
partialview page code-
#model Models.RSSFeed
#{
Layout = null;
}
<script src="~/Scripts/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js" type="text/javascript"></script>
<script src="~/Scripts/jquery.multilevelpushmenu.js" type="text/javascript"></script>
<script src="~/Scripts/jquery-simple-pagination-plugin.js" type="text/javascript"></script>
<script src="~/Scripts/jquery.dataTables.js" type="text/javascript"></script>
<script type="text/javascript">
/* scripts to load after the DOM gets ready */
$(function () {
offCanvasMenu(); // trigger Javascript controlled OFF canvas menu after AJAX refresh
$.ajaxSetup({ cache: false });
$("article.bm2014_bigBoxRSS #btnRefresh").on('click', function (event) {
var $rssGadgetID = $(this).parents("article.bm2014_paginate").find("div#bm2014_divBellnetRSS");
var $rssGadgetLdr = $rssGadgetID.find("div#bm2014_gadgetLoader");
ajaxLoaderHeightCtrl($rssGadgetID, $rssGadgetLdr);
// AJAX control
$.ajax({
url: '#Url.Action("RefreshBellnetRSS", "Home", new { feedName = Model.Channel.FeedName })',
contentType: 'application/html; charaset=utf-8',
type: 'GET',
dataType: 'html',
success: function (result) {
$rssGadgetLdr.fadeOut(100, function () {
$rssGadgetID.html(result);
var moveRSS = $("article.bm2014_bigBoxWrap").css("float");
if (moveRSS == "left") {
mQueryAJAX("portrait", $rssGadgetID);
}
else if (moveRSS == "none") {
if (window.matchMedia("(orientation: portrait)").matches) {
mQueryAJAX("portrait", $rssGadgetID);
}
if (window.matchMedia("(orientation: landscape)").matches) {
mQueryAJAX("portrait", $rssGadgetID);
}
}
hideTableHeader();
});
},
error: function (xhr, status) {
alert(status);
}
});
});
});
</script>
<div class="bm2014_gadgetLoader" id="bm2014_gadgetLoader" style="display: none;">
<img src='#Url.Content("~/Content/Images/loaderGadget.gif")' width="48" height="48" alt="ajax loader image" title="ajax loader image">
</div>
<div class="bm2014_strategyContent">
#if (Model.url != null)
{
<table>
<thead>
<th>dummy header - to be hidden</th>
</thead>
<tbody>
#foreach (var url in Model.url)
{
<tr>
<td>
#url.Name
</td>
</tr>
}
</tbody>
</table>
}
</div>
need help/suggestions
If I understand correctly, you need to have 3 refresh buttons for 3 RSS gadgets e.g. one for security, one for news, one for events.
In the current example, every time you call the code to apply click event, you replace the earlier event and the 'feedname' parameter in url for ajax call also gets updated.
$("article.bm2014_bigBoxRSS #btnRefresh").on('click', function (event) {
......
}
You need to be able to distinguish between the refresh buttons and pass correct parameters. One way is to use data-feedname attribute on your btnRefresh anchor tag (if using HTML5)
i have an aspx page containing following code
<body>
<script language="javascript" type="text/javascript">
function Hidee()
{
alert(window.frames["frame1"].document.getElementById("Label1").text);
}
</script>
<form id="form1" runat="server">
<div>
<iframe id="frame1" name="frame1" class="frame" frameborder="0" src="Default4.aspx"></iframe>
<a onclick="javascript:Hidee()" style="cursor: pointer">close</a>
</div>
</form>
</body>
in Default4 page i have a label with id Label1
when i click on close button i get undefined alert message
getElementById("Label1").text
An HTMLLabelElement doesn't have a text property.
If it's a simple label that contains only a single Text node, you can say:
getElementById('Label1').firstChild.data
If it might contain more complicated text and element nodes, you'd have to iterate over them to pick up the text, or use the DOM Level 3 Core textContent property, with backup for IE which doesn't support it:
var label= frames['frame1'].document.getElementById('Label1');
var text= ('textContent' in label)? label.textContent : label.innerText;
try with:
function Hidee() {
var ifr=document.getElementById("frame1"),
cd=ifr.contentDocument || ifr.contentWindow.document;
alert(cd.getElementById("Label1").innerHTML);
}