We Keep Coding

Ignored attempt to cancel a touchstart : fastclick warning

I'm having the first popup on which another popup comes to select few fields.
To show the second popup this is the code I'm trying:
$("#select1").click(function(e) {
e.stopPropagation();
//$('#sellerModal').hide();
var tmplData = {
string:['Ready','2-3 Days','4-5 Days','1 Week','10+ Days']
};
$("#countTypePopupTemplate").tmpl(tmplData).appendTo(".maindiv");
that.closePopup();
$("#count_div").each(function() {
$("#count_div").click(function(evt) {
evt.stopPropagation();
$("#select1").text($(this).text());
$("#myCounttype").remove();
});
});
});
Here is the HTML template:
<script id="countTypePopupTemplate" type="text/x-jquery-tmpl">
<div id="myCounttype" class="popup1 layer-2">
<div class="popup5">
{{each string}}
<div id="count_div" class="popup4 bottom-border">${$value}</div>
{{/each}}
</div>
</div>
</script>
I'm getting a warning:
Ignored attempt to cancel a touchstart event with cancelable=false, for example, because scrolling is in progress and cannot be interrupted. fastclick.js
Here I'm not able to click the 4 out of 5 elements in the second popup. Only first 1 is clickable.
Snapshot of second popup.
I read all the blogs where the topic is disscussed. But didn't got any solution working for me. Looks like there is some corner case.

Try using some parent selector before $("#count_div").each(function() {
$("#count_div").click(function(evt) {
Like this $(".parent_class #count_div").each(function() {
$(".parent_class #count_div").click(function(evt) {
This will solve 1 time running each() for "#count_div".
So the actual problem is each() is running only 1 time, that's why your first element that is Ready click event is working, not others.

Your each function is pointing to id which makes you cannot click other buttons. You should use class to recognize the buttons.
$("#select1").click(function(e) {
e.stopPropagation();
//$('#sellerModal').hide();
var tmplData = {
string:['Ready','2-3 Days','4-5 Days','1 Week','10+ Days']
};
$("#countTypePopupTemplate").tmpl(tmplData).appendTo(".maindiv");
that.closePopup();
$(".pop_btns").each(function() {
$(this).click(function(evt) {
evt.stopPropagation();
$("#select1").text($(this).text());
$("#myCounttype").remove();
});
});
});
HTML template:
<script id="countTypePopupTemplate" type="text/x-jquery-tmpl">
<div id="myCounttype" class="popup1 layer-2">
<div class="popup5">
{{each string}}
<div id="count_div" class="popup4 bottom-border pop_btns">${$value}</div>
{{/each}}
</div>
</div>
</script>

.hasClass not working inside a onclick function but remove and add class functions do

$(document).ready(function(){
$('#vDets').on('mouseover',function(){
$('#vDets').removeClass("SelectDef").addClass("SelectHov");
});
$('#vDets').on('mouseout',function(){
$('#vDets').removeClass("SelectHov").addClass("SelectDef");
});
$("#vDets").on('click',function(){
$('#vDets').removeClass("SelectDef").addClass("SelectTick");
var boolCheck = $("#vDets").hasClass("SelectDef");
});
});
I am having trouble with the code above, hasClass works when not inside the onclick function but throws an error
Uncaught TypeError: $(...).hasClass is not a function
when used inside despite the fact that the functions removeClass and addClass both work.
i have used hasClass many times before and never encountered this issue

Well, I just tested it, everything seems fine on
jsfiddle - click.
JS:
$(document).ready(function(){
$('#vDets').on('mouseover',function(){
$('#vDets').removeClass("SelectDef").addClass("SelectHov");
});
$('#vDets').on('mouseout',function(){
$('#vDets').removeClass("SelectHov").addClass("SelectDef");
});
$("#vDets").on('click',function(){
$('#vDets').removeClass("SelectDef").addClass("SelectTick");
//those run after click
var boolCheck1 = $("#vDets").hasClass("SelectDef");
var boolCheck2 = $("#vDets").hasClass("SelectHov");
$('#result1').text( boolCheck1 );
$('#result2').text( boolCheck2 );
});
//run outside function without click
$('#result1').text( $("#vDets").hasClass("SelectDef") );
$('#result2').text( $("#vDets").hasClass("SelectHov") );
});
HTML:
<div id="vDets" class="SelectDef">
click me
</div>
result for SelectDef:
<div id="result1">
</div>
result for SelectHov:
<div id="result2">
</div>
Maybe are you trying to use boolCheck outside function? It's not avalible outside :)
EDIT: And you cant remove class here:
$("#vDets").on('click',function(){
$('#vDets').removeClass("SelectDef").addClass("SelectTick");
Cause when u wanna click it will be SelectHov:
$('#vDets').on('mouseover',function(){
$('#vDets').removeClass("SelectDef").addClass("SelectHov");
});

How to open one dialog- box from multiple buttons on the same html page

Div with class ="front" is clone more than once on a html page ,button nested (class=poperbtn) clone as well, the button use is to open dialog-box/pop up (class="poper"), for example : if I have 4 divs -> class=front which means 4 buttons -> class="poperbtn", everytime I click on one of these buttons the dialog-box must pop-up, how to do this? is it possible? here is a code example.
//Dialog - box open button
<div class="front">
<input type="button" class="poperbtn" value="push it!" /> </div>
// Div for Dialog box
<div id="poper"> <h1>here I am </h1></div>
//To avoid using id I select button (id=poperbtn) this way - works fine I got id="poperbtn" button .
var _btnToDialog = "";
$(".front").live("click", function () {
_btnToDialog = $(this).next().children().eq(0);
});
//Dialog box Jquery function - I am not sure about this code.. got stuck here..
$(function () {
$("#poper").dialog({
autoOpen: false,
width: 650,
height: 600,
});
$(_btnToDialog).click(function () {
$("#poper").dialog("open");
});
});
});
**According to comments,I changed the button - has no Id only class.

You can hang click handler for all input inside .front elements.
Due to dynamically created elements it should be, for example
$(document).on("click", "selector", function() {})
instead of
$("selector").click(function() {})
So finally code will look like:
$(document).on("click", ".front input", function() {
$("#poper").dialog("open");
});
You can add class (for example, .button) for required inputs. Then code can be simplified to:
$(document).on("click", ".button", function() {
$("#poper").dialog("open");
});
Update. With inputs class .poperbtn it will be
$(document).on("click", ".poperbtn", function() {
$("#poper").dialog("open");
});

You can also have a look at this JSBin solution. There are many ways you can approach this problem it depends on what the desired behavior is you want to provide and the way you have already things in your codebase.

How to execute .click() code when previous click binding finishes

I am trying to use a Twitter Bootstrap button group with data-toggle="buttons-radio" in my site. Bootstrap markup as follows.
<div class="btn-group program-status" data-toggle="buttons-radio">
<button class="btn">All</button>
<button class="btn">Active</button>
<button class="btn">Planning</button>
<button class="btn">End of Life</button>
<button class="btn">Cancelled</button>
</div>
I need to redirect to the same page with query depending on the pressed button. I tried to use following jQuery code to achieve this.
<script>
var sParamStr = '';
function addToParamStr(str) {
sParamStr += str;
}
function redirectToUpdatedLocation() {
$('.program-status > .btn.active').each(function () {
addToParamStr( '?status=' + $(this).text());
});
console.log(sParamStr);
window.location.href = "program" + sParamStr;
}
$document.ready(function () {
$('.program-status > .btn').on('click', function (e) {
redirectToUpdatedLocation();
});
});
</script>
But the browser always redirects to {site}/program without the query string. By commenting out window.location.href = "program" + sParamStr; line, I managed to observe that second click onwards, sParamStr getting appended properly.
It seems that, my code tries to read the text of the pressed button before, .button('toggle') method form bootstrap.js finished. Code worked as intended when I changed function as follows.
$document.ready(function () {
$( '.program-status > .btn').on('click', function (e) {
$(this).addClass('active');
redirectToUpdatedLocation();
});
});
While this method works for me right now, I would like to know the proper way to achieve this. i.e How to execute my code after previous click binding finishes?
UPDATE:
I found this link in the Twitter Bootstrap forum. Seems it is a known issue.
https://github.com/twitter/bootstrap/issues/2380

I'm not sure what Bootstrap's .toggle is doing exactly, but it seems like it does some sort of animation that completes with the setting of the active class. You can try enqueing your code instead:
$( '.program-status > .btn').on('click', function (e){
$(this).queue(function (next) {
redirectToUpdatedLocation();
next();
});
});
For example, click the div as it is being toggled: http://jsfiddle.net/9HwYy/
It also seems a bit silly to me to update every href instead of just the one you clicked on since you are changing the window location anyway.

try
$('.program-status > .btn.active').each(function(i,v){
v = $(v);
addToParamStr( '?status=' + v.text());
});
since im not sure "this" is working in your case.

Need help with Jquery and Ajax

Currently im developing a web application using Ajax to display the notification message. But I don't know why the closing button on the notfication message dialog is not working in any IE browser(tested with 9.0 and 7.0) but its working fine with Firefox And the werid thing is that if I hardcoded jquery code in my html code it work fine with IE browser.
I'm thinking when the message sent across from Ajax is somehow affecting the javascript but I couldn't figure out the reason.
Can anyone please help me out?
Thanks so much in advance!
Here is my jquery notification box message code
<div class="notification information png_bg">
<a href="#" class="close">
<img src="resources/images/icons/cross_grey_small.png" title="Close this notification" alt="close" /></a>
<div> You have New Lead Notification </div>
</div>
Here is my html code to trigger the ajax notfication message
<label for ="msg">notice</label>
<input type="text" name ="msg" id ="msg" />
get notice!
<script type = "text/javascript">
$(function()
{
$("#getNotice").click(function()
{
$.post("/async/getnotification" , {},
function(response)
{
var notice = $(response);
$("#notices").prepend(notice);
});
return false;
});
});
</script>
<div id ="notices">
</div>
Here is the javascript code to trigger the close function for the close button
$(".close").click(
function () {// Links with the class "close" will close parent
$(this).parent().fadeTo(400, 0, function () {
$(this).slideUp(400);
});
return false;
}
);

I finally figured out the problem is related to the Javascript DOM therefore i have to replace click with live
For more info visit link
Solutions
$(".close").live('click',
function () {
$(this).parent().fadeTo(400, 0, function () {
$(this).slideUp(400);
});
return false;
}
);