I am trying to do that if I click on this:
<div class="dec qtybutton" data-id="{{ $item->id }}"><i class="zmdi zmdi-chevron-down"></i></div>
It displays an alert to know that it really works, my jQuery code is this one:
$('.dec').on('click', function () {
var id = $(this).attr('data-id');
alert(id);
});
The thing is that I have tried all this and it has not worked:
$('.dec').on('click', function () {
var id = $(this).attr('data-id');
alert(id);
});
$('.dec > i').on('click', function () {
var id = $(this).attr('data-id');
alert(id);
});
I do not know how to do that this jquery reads the .dec i or the .dec then if I push it does not do anything, it does not display the alert.. so I wonder what is the problem? because it has not worked at all.
Thanks!
Try this , In jquery you can directly access data attribute.
$(".dec").click(function(){
let id = $(this).data('id');
alert(id)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dec qtybutton" data-id="2">click<i class="zmdi zmdi-chevron-down"></i></div>
Related
I am generating dynamic html element from angularjs controller.I have used $compile
to make ng-click work inside html element.But still it is not calling the function.
Here is my js
var accountApp = angular.module('accountApp', ['ngRoute']);
accountApp.config(['$compileProvider',function($compileProvider )
.controller('myController',function($scope,$compile)
{
var searchHTML = '<li><a href="javascript:void(0)" data-ng-
click="setMarkerToCenterA()">'+item.title+'</a></li>';
$compile(searchHTML)($scope);
$scope.setMarkerToCenterA = function() {
alert("this alert is not calling");
}
});
}]);
I have injected the dependencies also.Can anyone tell why ng-click is not calling function even though i am using $compile?
First you need an element where this li element will be located.
<div ng-controller="myController">
<ul id="list"></ul>
</div>
Then in your controller:
var element = angular.element("#list");
element.html($compile(html)($scope));
$scope.setMarkerToCenterA = function() {
alert("Here");
};
Probably you missed to parse the HTML string using angular.element(htmlString) which is then compiled.
var app = angular.module('stackoverflow', []);
app.controller('MainCtrl', function($scope, $compile, $sce) {
var searchHTML = 'hello';
var template = angular.element(searchHTML);
$compile(template)($scope);
angular.element(document.querySelector('#container')).append(template);
$scope.setMarkerToCenterA = function() {
alert("this alert is now calling");
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.9/angular.min.js"></script>
<div ng-app="stackoverflow" ng-controller="MainCtrl">
<div id="container"></div>
</div>
I have a Button on my Page that toggles front-View like such:
<div id="toggleFrontView">
<span class="cats"><i class="fa fa-tags"></i> Stöbern</span>
<span class="search active"><i class="fa fa-search"></i> Suchen</span>
</div>
What I am trying to do now is create a html-link from somewhere to link to the toggled View "Stöbern".
Like such:
link
Unfortunately this does scroll to the anchor point, but does not toggle the view.
Can someone help?
Thanks
Flo
use Javascript or JQuery. U cant do this only with HTML and CSS.
in jquery there is a toggle display method...
(There are many examples on the net. just give a search before asking a question)
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<div id="toggleFrontView">toggle section</div>
<div id="clk">click me</div>
<script>
$( "#clk" ).click(function() {
$("#toggleFrontView").toggle();
});
</script>
Yes you are right. There is some angular behind it.
Unfortunately I do not understand it.
Here it is:
// Search / cats home
setTimeout(function () {
$('#searchBase').addClass('vis');
}, 500)
$('#toggleFrontView .cats').click(function () {
var toggle = $('#toggleFrontView .cats'),
searchBtn = toggle.find('.search'),
catBtn = toggle.find('.cats'),
filterCats = $('#filterCategories'),
searchHead = $('#searchHead'),
searchBase = $('#searchBase'),
catItem = $('.catItem');
toggle.addClass('active');
$('#toggleFrontView .search').removeClass('active');
filterCats.addClass('vis');
searchBase.removeClass('vis');
searchBtn.addClass('vis');
//catBtn.addClass('hidden');
searchHead.find('h1').removeClass('vis');
searchHead.find('h2').addClass('vis');
loop_();
function loop_() {
animateIn = setTimeout(function () {
$(catItem[0]).addClass('vis');
catItem.splice(0, 1);
if (catItem.length != 0) {
loop_();
}
}, 50);
}
});
$('#toggleFrontView .search').click(function () {
var toggle = $('#toggleFrontView .search'),
searchBtn = toggle.find('.search'),
catBtn = toggle.find('.cats'),
filterCats = $('#filterCategories'),
searchHead = $('#searchHead'),
searchBase = $('#searchBase');
catItem = $('.catItem');
toggle.addClass('active');
$('#toggleFrontView .cats').removeClass('active');
clearTimeout(animateIn);
filterCats.removeClass('vis');
catItem.removeClass('vis');
searchBase.addClass('vis');
searchBtn.removeClass('vis');
//catBtn.removeClass('hidden');
searchHead.find('h1').addClass('vis');
searchHead.find('h2').removeClass('vis');
});
$scope.onImgLoad = function () {
wall.fitWidth();
};
<a ng-attr-href="{{page==1 && 'javascript:void(0)' || '#a/'+tid+'/'+(page-1)}}">Prev</a>
I want to get that when page = 1
Prev
But the result:
Prev
use ng-click on a and pass $event to your function.
Click
In your function do the following
$scope.yourFunction = function(e) {
e.preventDefault();
};
new angular you have to white list javascript
angular.module("app", [])
.config(['$compileProvider', function ($compileProvider) {
$compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|javascript):/);
}]);
or
Click
$scope.foo = function(e) {
e.preventDefault();
};
or
<a ng-click="foo($event);">Click</a>
Use ng-click in <a>
<a href="" ng-click="go(tid)">
And in controller
app.controller('whatever', function($scope, $location){
$scope.go = function(id){
if($scope.page == 1) {
return;
}
var url = '/a/' + id + '/' + ($scope.page - 1);
$location.url(url);
}
});
This way you also move logic out of template.
don't use href="javascript:void(0);"; try href="" or href="#" instead.
i am trying to Refresh div using java script . setInterval() and clearInterval (), its working fine, but i want stop Refresh process for single div when i clicked stop button ..clear Interval not working herer
<script type ="text/javascript">
$(document).ready(function () {
$('.output').click(function () {
var id = $(this).closest('.g').attr('id');
Go(id);
})
$('.bt').click(function () {
var id = $(this).closest('.g').attr('id');
stop(id)
});
function Go(id) {
id = setInterval(function () {
Chat_msg('Ch04', id, u)
}, 3000);
};
function stop(id) {
clearInterval(id);
}
})
</script>
</head>
<body>
<div id="a" class='g'>
<div class="output"></div>
<input id="Button1" type="button" value="stop" class="bt" />
</div>
<div id="b">
<div class="output"></div>
<input id="Button2" type="button" value="stop" class="bt"/>
</div>
<div id="c">
<div class="output"></div>
<input id="Button3" type="button" value="stop" class="bt" />
</div>
</body>
</html>
Use a global variable for your interval.
var interv = null;
interv = setInterval(function { ... }, 5000);
$('#btn').on('click', function(){
if (interv) clearInterval(intev);
})
It's likely the reference you associated with setInterval is not within the scope of your stop-button handler.
$("#start").on("click", function(){
var interv = setInterval(function(){ /*...*/ }, 1000);
});
$("#stop").on("click", function(){
clearInterval(interv);
});
In the code above, our interv variable is not within the scope of our #stop button handler. We could change this by moving it up another level:
var interv;
$("#start").on("click", function(){
interv = setInterval(function(){ /*...*/ }, 1000);
});
$("#stop").on("click", function(){
clearInterval(interv);
});
Now both handlers have access to the interv variable.
Looks like a combination of a scoping issue, and interchangeably using id DOM attributes with setInterval response values.
<script type ="text/javascript">
$(document).ready(function () {
var timeouts = {};
$('.output').click(function () {
var id = $(this).closest('.g').attr('id');
go(id);
});
$('.bt').click(function () {
var id = $(this).closest('.g').attr('id');
stop(id);
});
function go(id) {
timeouts[id] = setInterval(function () {
Chat_msg('Ch04', id, u)
}, 3000);
}
function stop(id) {
clearInterval(timeouts[id]);
}
});
</script>
The way I have gone about this in the past is using a function that uses a set timeout to call itself.
var stop = false
function caller () {
if (stop === true){
//do something
setTimeout(caller() , 1000);
}
else{
//do something after button has been click and stop is set to true
}
}
I'm trying to create a good looking product order form with jquery skills.
I have some shoe size values as like divs:
<div id="select-size">
<div id="size-value-19">39</div>
<div id="size-value-20">40</div>
<div id="size-value-21">41</div>
<input type="hidden" name="option[229]" id="option-size" value="">
</div>
When a customer clicks on a shoe size numbers it should take the size-value-?? part from div id and put it into #option-size hidden field.
How can I do that?
BTW: I had found a prototypejs example for this work but prototype and jquery can't work together properly.
Let me give the prototype example code for you:
<script type="text/javascript">
//<![CDATA[
document.observe("dom:loaded", function() {
function deActivate(elt) {
elt.removeClassName('active');
}
function watchClick(evt) {
var element = Event.element(evt);
if (element.hasClassName('outstock')) return;
$$('#select-size div').each(function(elt) {deActivate(elt)});
element.addClassName('active');
var eid = element.id.split('-')[2];
$('option-size').setValue(eid);
}
$$('#select-size div').invoke('observe', 'click', watchClick);
});
//]]>
</script>
I still can't believe that how js framework developers use same $ sign...
$('div').click(function(){
var id = $(this).attr('id');
$('#option-size').val(id);
});
Code presented by OP, translated to jQuery:
$(function() { // On DOM ready ...
var $sizes = $('#select-size div'), // Size elements
$input = $('#option-size'); // Hidden input
$sizes.click(function() { // On click on size element ...
var $this = $(this); // Reference to this element
if (!$this.hasClass('outstock')) { // If not out of stock ...
$sizes.removeClass('active'); // Remove .active on all
$this.addClass('active'); // Add .active on this
$input.val(this.id.split('-')[2]); // Set value in hidden field
}
});
});
(Updated demo)
On a general note:
You should be able to suppress jQuery's use of the $ symbol via the .noConflict() setting. However, it is advisable to translate the functionality into jQuery if this library is already present and you have no other use for prototypejs.
add jquery
<script type="text/javascript" src="script/jquery-1.5.1.js"></script>
and add this script to your page
<script type="text/javascript">
$(document).ready(function () {
$('#size-value-19').click(function () {
$('#option-size').val($(this).text());
});
$('#size-value-20').click(function () {
$('#option-size').val($(this).text());
});
$('#size-value-21').click(function () {
$('#option-size').val($(this).text());
});
});
</script>