I'm using an icon font on my website and I want users to vote on their favorite icon. the icon font uses and CSS to display the icon. How can I accomplish this using some type of jQuery and returning the icon to the front end along with passing it value through a form?
I know I can't add a inside of an input, so i took this approach:
I started with this jsFiddle: http://jsfiddle.net/6NVpL/42/
HTML:
<div class="iconDisplay">Display's selected icon</div>
<button class="selectIcon">Select Icon</button>
<div id="iconSelector">
<span class="icon-icon1"></span>
<span class="icon-icon2"></span>
<span class="icon-icon3"></span>
<span class="icon-icon4"></span>
<span class="icon-icon5"></span>
<span class="icon-icon6"></span>
<span class="icon-icon7"></span>
<span class="icon-icon8"></span>
</div>
JS:
$(".selectIcon").click(function () {
$("#iconSelector").fadeToggle();
});
$("#iconSelector span").click(function () {
$(this).click(function(){
$("#iconSelector").hide();
});
});
Maybe this is more what you are looking for?
I fixed the click handlers:
$("#selectIconButton").click(function () {
$("#iconSelector").fadeToggle();
});
$("#iconSelector span").click(function () {
selectIcon($(this));
});
Added a function to perform the icon selection. Note: remove the return; statement and adjust the post so it will work for your application.
function selectIcon(e){
var selection = e.attr('class');
$('#selectedIcon')
.removeClass()
.addClass(selection)
.show();
$("#iconSelector").hide();
return;
$.ajax({
url: 'urltowebsite',
type: 'POST',
data: { selectedIcon: selection }
});
}
Added a UI element to show the user what icon they selected and modified the CSS slightly to accommodate the above changes.
You need a server-side script to save the data. If you do have a script for that, you can use it like that:
$("#iconSelector span").click(function () {
var xthis = $(this);
xthis.click(function(){
$("#iconSelector").hide();
$.post('/echo/html','icon='+$(xthis).attr('class'),function(){
$(".iconDisplay").html(xthis.get(0));
});
});
});
Full fiddle: http://jsfiddle.net/6NVpL/45/
PS. Change /echo/html to your save script name.
Related
On submit of search, message with cancel button will display then via ajax data table will display. On click of cancel button loaded ajax result should get clear. But it is not getting cleared.
Kindly find my code
html file
<div class="report_result" >
<p class="report_loader" >Loading please wait...
<button type="button" aria-label="Close">
<span class="stop_load" aria-hidden="true"><u>Cancel</u></span>
</button>
</p>
</div>
js file
//wiring up future elements
$(document).on('click', '.report_result > .stop_load', function() {
$('#result').hide();
});
//using click function
$(".stop_load").click(function(){
$('#result').hide();
});
ajax call
ajaxStop: function() {
$(".report_result").hide();
}
.......
beforeSend:function() {
$('report_result').show();
},
.......
But it's not working after loading ajax . If I call before ajax call both the code works. Kindly help..
Did you try it with the body tag (or just a higher existing parent element) in the selector as well? Like:
$('body').on('click','.report_result > .stop_load',function(){
$('body #result').hide();
});
$('body').on('click','.stop_load',function(){
$('body #result').hide();
});
I'm new to using jQuery and am having trouble figuring out how to show a popup using css only once per user. I got the popup to work so that it shows up every time, I just need to only happen once per user.
My HTML Code
<div id="popUpMain" style="display: none;">
<div id="popup">
<h1 id="newsHeading">Join</h1>
<button class="buttonNews">More Info</button>
<button class="buttonNews">No Thanks</button>
</div>
</div>
The script handling the jQuery
<script>
$(document).ready(function(){
setTimeout(function(){
$('#popUpMain').css('display', 'block'); }, 3000);
});
$('.buttonNews').click(function(){
$('#popUpMain').css('display', 'none')
});
</script>
Thanks in advance.
To achieve this you need to keep track of whether or not the user has been shown the popup before. The simplest way of doing this is by using localStorage to manage a boolean flag, something like this:
$(document).ready(function() {
if (!localStorage.getItem('popupPreviouslyShown') || false) {
setTimeout(function() {
$('#popUpMain').css('display', 'block');
localStorage.setItem('popupPreviouslyShown', true);
}, 3000);
}
});
Working example
I was trying to display Kendo UI text editor when check box is checked.
However it's not working, can you help me out..
#if (Model.IsAlert!=true)
{
<td>
#(Html.Kendo().Editor().Name("Explanation").HtmlAttributes(new { style = "display:show" }))
</td>
}
Your current approach will only render that/evaluate Model.IsAlert on the initial load of screen.
I would suggest removing the if statement, and defaulting this td to hidden, then change that depending on the properties in the model via a onChange event handler mapped to your checkbox control.
<td id="thingToHide" hidden="hidden">
#(Html.Kendo().Editor().Name("Explanation").HtmlAttributes(new { style = "display:show" }))
</td>
and some jquery code:
<script type="text/javascript">
$(document).ready(function () { // On page load method, check model and show textbox if needed
var model = #Html.Raw(Json.Encode(Model)); // get model example is taken from http://stackoverflow.com/questions/16361364/accessing-mvcs-model-property-from-javascript
if (model.IsAlert) { // If model IsAlert is true, show Explanation field
$("#thingToHide").show();
}
});
$("#YourCheckBoxId").on("change", function() {
$("#thingToHide").toggle();
});
</script>
Good luck Radha!
I have an ng-nestable div and inside that there is a simple button that has an ng-click event hooked up to it. When I click on that button it doesn't register the click but rather starts the drag and drop process.
Here is my HTML Code,
<div class="col-sm-1 text-right"><button ng-click="fnEditHomeSlider({{$item.SliderID}})" class="btn btn-blue btn-sm" nestable-button><i class="fa fa-edit"></i> Edit</button>
</div>
Note: Is your code something like, try it, Hope it could also matches your need or give us your code
1.) Create a custom directive
myApp.directive('nestableButton', function() {
return {
restrict: 'A',
link: function(scope, element) {
$(element).on("mousedown", function(e) {
e.preventDefault();
return false;
});
$(element).on("click", function(e) {
e.preventDefault();
window.location = $(this).attr("href"); //if you want your URL to update
return false;
});
}
};
});
2.) In HTML
</i>
</i>
Lokesh Kakran is right about this.
And here is live demo project about your solution.
demo : http://pathik.linedeer.com/ng-nestable/
code : https://github.com/pathikdevani/ng-nestable/blob/gh-pages/index.html
I'm trying to use a single "create" button that either opens a dialog or goes to a new page using ui-router, depending on the value of an object.
I'm not sure of the best way to accomplish this, I have something that seems to work, but I'm wondering if there's a better way. I'm currently using two buttons and an ng-if to hide the button I don't need at the time, but that seems messy to me.
Here's a very simple mock up of what I'm trying to do. Rather than actually opening a dialog or changing page content, I've just added alerts.
http://codepen.io/jwelker9/pen/QNPgyE?editors=1010
In short, I'm not sure how to get ui-sref and a dialog to play together on the same button.
HTML:
<div ng-controller = "lists-detail" ng-app="app">
<table class="listing">
<thead>
<tr>
<th>Item-Id:</th>
<th>Ordinal:</th>
<th>Type:</th>
<th>Content-Id:</th>
<th>
<button ng-if="!boolean"
class="button"
aria-label="Add list item"
ui-sref="site.lists">
Add New
</button>
<button ng-if="boolean"
class="button"
aria-label="Add list item"
ng-click="dialog()">
Add New
</button>
</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
JS:
var app = angular.module('app', []);
app.controller('lists-detail', function ($scope) {
//actual code looks like:
//This calls an API to determine if it is correct type or not
//If boolean is true, it should open a new dialog
//if(listType == 'Episode'){
$scope.boolean = false;
//}
$scope.goToNewPage = function() {
alert("NewPage");
}
$scope.dialog = function() {
alert("Open Dialog");
}
})
If I'm understanding your question correctly, you could just call a function when the value changes and make the decision in the function like this:
https://jsfiddle.net/tma739u9/
Angular
vm.boolean = false;
vm.watchBoolean = function() {
var decision = (!vm.boolean) ? newPage() : dialog();
}
function newPage() {
$location.path('/page');
}
function dialog() {
alert('Open dialog');
}
HTML
<input
type="checkbox"
ng-model="ctrl.boolean"
ng-click="ctrl.watchBoolean()"> Click Me
In your ng-click, you can use an Angular expression like this:
ng-click="boolean==true? dialog() : gotoNewPage()"
This is a shorthand way of saying this in Javascript:
if (boolean) {
dialog();
} else {
gotoNewPage();
}