We Keep Coding

Why does my code display "player not found"?

So I have this command that's supposed to display a player's stats if it's found and says player not found otherwise. After I search a player and go to the previous screen, I get "player not found". I thought it was because my loop continues running after the player is found and my boolean becomes false, so I added a break statement. Won't work
function Search(Table, Stat1, Stat2, Stat3, Stat4, Stat5) {
onEvent("Search2.btn", "click", function() {
readRecords(Table, {}, function(records) {
var SearchPlayer = getText("text_input1");
var found = false;
for (var i = 0; i < records.length; i++) {
if ((records[i]).Player == SearchPlayer) {
setScreen("DisplaySearch");
setText("label3", records[i].Player + " Stats" + "\n" + records[i][Stat1] + " " + Stat1 + "\n" + records[i][Stat2] + " " + Stat2 + "\n" + records[i][Stat3] + " " + Stat3 + "\n" + records[i][Stat4] + " " + Stat4 + "\n" + records[i][Stat5] + " " + Stat5 + "\n");
setText("text_input1", "");
setText("label5", "");
found = true;
break;
} else if ((found == false)) {
setText("label5", "Player Not Found");
}
}
});
});

How to stop jquery $.Deferred().pipe animations

I'm creating animations on multiple objects that have to be executed one after another. For this I use construction such as this:
var deferredAnimations = $.Deferred();
deferredAnimations.pipe(function() {
return $("#" + page + " h1 span.text").unbind()
.typist({
cursor: true,
speed: 12,
text: 'Hello'
}).typistStop().delay(2000);
}).
pipe(function() {
return $("#" + page + " h2").unbind()
.typist({
cursor: true,
speed: 12,
text: 'world'
}).typistStop().delay(3000);
}).
pipe(function() {
return $("#" + page + " h2").
selectText().
delay(1000);
}).pipe(function() {
return $("#" + page + " #drop-in-tool").show().addClass("magictime slideUpRetourn").delay(1000);
}).pipe(function() {
return $("#" + page + " h2").
removeClass("fira-sans").
addClass("droid-serif green italic").
delay(1000);
}).pipe(function() {
$("#" + page + " #drop-in-tool").fadeOut("slow");
return $("#" + page + " h1").
selectText().
delay(1000);
}).pipe(function() {
return $("#" + page + " h1").
removeClass("work-sans bold").
addClass("roboto-condensed upper").
delay(1500);
}).pipe(function() {
deselectText();
$("#" + page + " .pop-lines").css("left", $("#" + page).find("h1 .text").offset().left - 20);
$("#" + page + " h1").fadeOut("slow");
$("#" + page + " h2").fadeOut("slow");
return animatePageBackground(page);
}).pipe(function() {
$("#" + page + " h1").show().addClass("magictime slideLeftRetourn");
return $("#" + page + " h2").show().addClass("magictime slideRightRetourn").delay(1000);
})
.pipe(function() {
return $("#" + page + " .pop-line1").css("visibility", "visible").addClass("magictime swashIn").delay(50);
}).pipe(function() {
return $("#" + page + " .pop-line2").css("visibility", "visible").addClass("magictime swashIn").delay(50);
}).pipe(function() {
return $("#" + page + " .pop-line3").css("visibility", "visible").addClass("magictime swashIn").delay(50);
}).pipe(function() {
return animatePageFooter(page);
});
deferredAnimations.resolve();
//page background animate
function animatePageBackground(page) {
return $("#" + page).promise().pipe(function() {
$("#" + page + " .page-grid").fadeOut();
return $("#" + page + " h1").animate({"color":"#ffffff"}, 1000).delay(1000);
}).pipe(function() {
$("#" + page + " .page-header").animate({"color":"#ffffff"}, 2000);
return $("#" + page + " .page-back").fadeIn(2000).delay(1000);
});
}
//page footer animations
function animatePageFooter(page) {
$("#" + page).promise().pipe(function() {
return $("#" + page + " .profile-icon").show().addClass("magictime slideDownRetourn").delay(500);
}).pipe(function() {
return $("#" + page + " .profile-name").show().addClass("magictime slideDownRetourn").delay(500);
}).pipe(function() {
return $("#" + page + " .icons").show().addClass("magictime slideDownRetourn").delay(500);
}).pipe(function() {
return $("#" + page + " .link").show().addClass("magictime slideDownRetourn").delay(500);
}).pipe(function() {
return $("#" + page + " .back-btn").fadeIn();
});
}
but I want to stop all the animations when I click a button and deferredAnimations.reject() doesn't work in this case because as I understand pipe creates new Deferred.
Is there a way to stop animations in pipe list.
Are there any better solution for sequential animations on multiple objects that can be interrupted?
Thanks.

Hide/show dynamic generated div based on select option

I have some divs which are generated by jquery. Inside there is showing up the price, the title and the selected option value.
I've tried a lot of things to hide each div class "result" if no option is select, but with no luck.
Is there a way to hide each div without rewriting the whole code?
JS:
function pcc_calc_forms() {
jQuery(".calcolare").each(function (e) {
var t = jQuery(this).attr("id");
var n = pcc_form_data(t);
jQuery("#" + t + "-mostra").html('<h3 class="pcc-total">Totale : ' + n[0] + "" + "€" + '</h3><div class="content">' + n[1] + '<br /><br /></div>')
})
}
function pcc_form_data(e) {
var t = new Array(0, "");
var n = new Array;
var r = new Array;
$("#" + e + " select").each(function (e) {
var title = $(this).attr("data-title");
var inside = $(this).find("option:selected").attr("data-title");
var i = $(this).find("option:selected").html();
if (inside === undefined) {
inside = " ( " + i + " ) "
} else {
inside = " ( " + inside + " ) "
}
var i = $(this).find("option:selected").attr("data-price");
var s = parseFloat($(this).attr("data-mult"));
if (isNaN(s)) {
s = 1
}
var o = parseFloat($(this).find("option:selected").text());
if (isNaN(o)) {
o = 0
}
if (i !== undefined) {
if (i == "this") {
i = o
} else {
i = parseFloat(i)
}
t[0] = t[0] + parseFloat(i) * s;
if (s == 1) {
t[1] = t[1] + "<div class=\"result\"><b>" + title + "" + inside + "</b> : " + parseFloat(i) + "" + " € " + "</div>"
} else {
t[1] = t[1] + "<div class=\"result\"><b>" + title + "" + inside + "</b> : " + parseFloat(i) + " X " + s + " = " + parseFloat(i) * s + "" + " € " + "</div>"
}
}
});
n = [];
r = [];
return t
}
$(document).ready(function () {
pcc_calc_forms();
$(document).on("change", ".calcolare select", function () {
pcc_calc_forms()
});
});
THIS is the link to the fiddle
Thanks in advance for any hint.

$(document).on("change", ".calcolare select", function () {
var i = $(this).find('option:selected').index();
alert(i);
//if(i>0) ppc_calc_forms();
//else $('.results').hide();
})
This will find the index of the selected option... as you can see, it works, just not with your function...
I would simplify that script as much as possible..

I understand not wanting to rewrite the code substantially at this point. However, for comparison, here is the way I would do it while still holding to your general pattern:
function pcc_calc_forms() {
jQuery(".calcolare").each(function (e) {
var t = jQuery(this).attr("id");
var items = pcc_item_data(t);
var totalPrice = $.makeArray(items).reduce(function(total,item,i,a) {
return total+item.price;
},0);
text = '<h3 class="pcc-total">Totale : ' + totalPrice + "" + "€" + '</h3>';
text += '</h3><div class="content">';
items.each(function(i,item) {
if (item.mult > 1)
text += "<div class=\"result\"><b>" + item.title + " ( " + item.name + " )</b> : " + item.price + " X " + item.mult + " = " + item.price * item.mult + "" + " € " + "</div>";
else
text += "<div class=\"result\"><b>" + item.title + " ( " + item.name + " )</b> : " + item.price + "" + " € " + "</div>";
});
text += '<br /><br /></div>';
jQuery("#" + t + "-mostra").html(text);
});
}
function pcc_item_data(e) {
return $("#" + e + " select").map(function (e) {
if (this.selectedIndex > 0) {
var item = {};
item.title = $(this).attr("data-title");
var inside = $(this).find("option:selected").attr("data-title");
var i = $(this).find("option:selected").html();
item.name = inside ? inside : i;
item.price = parseFloat($(this).find("option:selected").attr("data-price"));
var mult = parseFloat($(this).attr("data-mult"));
item.mult = isNaN(mult) ? 1 : mult;
return item;
}
});
}
$(document).ready(function () {
pcc_calc_forms();
$(document).on("change", ".calcolare select", function () {
pcc_calc_forms();
});
});
What I've done:
Separate data collection (pcc_item_data) from data presentation;
this makes the code more readable and easier to maintain later.
Used map (http://api.jquery.com/jQuery.map/) and reduce (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce) to transform / aggregate arrays; they're concise
and expressive once you're familiar with them.

how to take input text from alert box

I have a form in which there are input fields for mobile number ,name and email.I have two buttons add and group.Add button add new records of the selected records.Group button is used to create a group of selected fields on the records.So when you click on group button it will ask whether to create a group or not.If yes then it will create a group named as 0 or 1.But I want to give some name(user should type the name to be given) to the group.Please tell me how to do.This is the fiddle and this is the screenshot
This is the jquery
var val = 0;
var groupTrCount = 0;
$(document).ready(function () {
var obj={};
$('#btn1').click(function () {
if ($(".span4").val() != "") {
$("#mytable").append('<tr id="mytr' + val + '"></tr>');
$tr=$("#mytr" + val);
$tr.append('<td class=\"cb\"><input type=\"checkbox\" value=\"yes\" name="mytr' + val + '" checked ></td>');
$(".span4").each(function () {
$tr.append("<td >" + $(this).val() + "</td>");
});
var arr={};
name=($tr.find('td:eq(1)').text());
email=($tr.find('td:eq(2)').text());
mobile=($tr.find('td:eq(3)').text());
arr['name']=name;arr['email']=email;arr['mobile']=mobile;
obj[val]=arr;
val++;
} else {
alert("please fill the form completely");
}
});
$(document).on('click', '#btn2',function () {
var creat_group = confirm("Do you want to creat a group??");
if (creat_group) {
console.log(obj);
$("#groupsTable").append('<tr id="groupTr' + groupTrCount + '"></tr>');
$tr=$("#groupTr" + groupTrCount);
$tr.append("<td >" + groupTrCount + "</td>");
var userColumn = "<ul>";
$('#mytable tr').filter(':has(:checkbox:checked)').each(function() {
var count=0;
$(this).find('td').each(function() {
if(count == 1){
userColumn+= "<li>" + $(this).html() + "</li>" ;
}
count++;
});
});
userColumn+="<ul>";
$tr.append("<td >" +userColumn+ "</td>");
groupTrCount++;
}
});
$(document).on('change','#mytable input:checkbox',function () {
if(!this.checked)
{
key=$(this).attr('name').replace('mytr','');
alert(key);
obj[key]=null;
}
});
});

If you want to add a named group use prompt instead of confirm. This will open a popup where the user can enter a group name. Fiddle
$(document).on('click', '#btn2',function () {
var creat_group = prompt("Name your group??");
if (creat_group) {
console.log(obj);
$("#groupsTable").append('<tr id="groupTr' + groupTrCount + '"></tr>');
$tr=$("#groupTr" + groupTrCount);
$tr.append("<td >" + creat_group + "</td>");
var userColumn = "<ul>";
$('#mytable tr').filter(':has(:checkbox:checked)').each(function() {
var count=0;
$(this).find('td').each(function() {
if(count == 1){
userColumn+= "<li>" + $(this).html() + "</li>" ;
}
count++;
});
});
userColumn+="<ul>";
$tr.append("<td >" +userColumn+ "</td>");
groupTrCount++;
}
});

Update Fiddle :
http://jsfiddle.net/4GP9c/175/
var val = 0;
var groupTrCount = 0;
$(document).ready(function () {
var obj={};
$('#btn1').click(function () {
if ($(".span4").val() != "") {
$("#mytable").append('<tr id="mytr' + val + '"></tr>');
$tr=$("#mytr" + val);
$tr.append('<td class=\"cb\"><input type=\"checkbox\" value=\"yes\" name="mytr' + val + '" checked ></td>');
$(".span4").each(function () {
$tr.append("<td >" + $(this).val() + "</td>");
});
var arr={};
name=($tr.find('td:eq(1)').text());
email=($tr.find('td:eq(2)').text());
mobile=($tr.find('td:eq(3)').text());
arr['name']=name;arr['email']=email;arr['mobile']=mobile;
obj[val]=arr;
val++;
} else {
alert("please fill the form completely");
}
});
$(document).on('click', '#btn2',function () {
var creat_group = confirm("Do you want to creat a group??");
if (creat_group) {
console.log(obj);
$tr.append("<td >" + groupTrCount + "</td>");
$("#groupsTable").append('<tr id="groupTr' + groupTrCount + '"></tr>');
$tr=$("#groupTr" + groupTrCount);
$tr.append("<td >Group:" + groupTrCount + "</td>"); // or you can use whatever name you want in place of "Group:"
var userColumn = "<ul>";
$('#mytable tr').filter(':has(:checkbox:checked)').each(function() {
var count=0;
$(this).find('td').each(function() {
if(count == 1){
userColumn+= "<li>" + $(this).html() + "</li>" ;
}
count++;
});
});;
userColumn+="<ul>";
$tr.append("<td >" +userColumn+ "</td>");
groupTrCount++;
}
});
$(document).on('change','#mytable input:checkbox',function () {
if(!this.checked)
{
key=$(this).attr('name').replace('mytr','');
alert(key);
obj[key]=null;
}
});
});

You are adding groupTrCount only as the column text so you are getting the 0, 1... as indexes. You can try something like this
$tr.append("<td >Group: " + groupTrCount + "</td>");
instead of
$tr.append("<td >" + groupTrCount + "</td>");
$("#groupsTable").append('<tr id="groupTr' + groupTrCount + '"></tr>');
$tr=$("#groupTr" + groupTrCount);
$tr.append("<td >Group:" + groupTrCount + "</td>"); // or you can use whatever name you want in place of "Group:"
var userColumn = "<ul>";
$('#mytable tr').filter(':has(:checkbox:checked)').each(function() {
var count=0;
$(this).find('td').each(function() {
if(count == 1){
userColumn+= "<li>" + $(this).html() + "</li>" ;
}
count++;
});
});
UPDATE
For using the custom popup either you can made it by having a separate div on your page. Make it like an overlay with the help of CSS. Or you can easily do thi with JQUERY UI DIALOGUE.

Customize active tab with jquery / javascript

I'm trying to modify the script of the vertical tabs on this page http://www.bluimage.it/dev/ to put an arrow on the right of the tab as I can show the active/selected one. I try to call a css class as shown (note "case "left:"):
function showContentDesc(modid, ind, pos)
{
i = 0;
switch(pos)
{
case "top":
thisstyle=document.getElementById("menu_" + modid + "_" + ind).style.borderBottom;
while (document.getElementById("content_" + modid + "_" + i) != null) {
document.getElementById("content_" + modid + "_" + i).style.display = "none";
document.getElementById("menu_" + modid + "_" + i).style.borderBottom = thisstyle;
i++;
}
document.getElementById("menu_" + modid + "_" + ind).style.borderBottom = "none";
break;
case "bottom":
thisstyle=document.getElementById("menu_" + modid + "_" + ind).style.borderTop;
while (document.getElementById("content_" + modid + "_" + i) != null) {
document.getElementById("content_" + modid + "_" + i).style.display = "none";
document.getElementById("menu_" + modid + "_" + i).style.borderTop = thisstyle;
i++;
}
document.getElementById("menu_" + modid + "_" + ind).style.borderTop = "none";
break;
case "right":
thisstyle=document.getElementById("menu_" + modid + "_" + ind).style.borderLeft;
while (document.getElementById("content_" + modid + "_" + i) != null) {
document.getElementById("content_" + modid + "_" + i).style.display = "none";
document.getElementById("menu_" + modid + "_" + i).style.borderLeft = thisstyle;
i++;
}
document.getElementById("menu_" + modid + "_" + ind).style.borderLeft = "none";
break;
case "left":
default:
thisstyle=document.getElementById("menu_" + modid + "_" + ind).style.borderRight;
while (document.getElementById("content_" + modid + "_" + i) != null) {
document.getElementById("content_" + modid + "_" + i).style.display = "none";
document.getElementById("menu_" + modid + "_" + i).style.borderRight = thisstyle;
i++;
}
document.getElementById("menu_" + modid + "_" + ind).className = "sliptabs-left-menuitem-container-active";
break;
}
document.getElementById("content_" + modid + "_" + ind).style.display = "inline";
}
...and it works, but when i go to other tabs the selected in past tab remain actived! how can I deactivate the other ones and set the active only in that in which I am?

Please have a look at simplified snippet HERE.
I used jQuery as you included a jQuery tag.
$("ul.menu li").click(function() {
$(this).siblings(".selected").removeClass("selected");
$(this).addClass("selected");
});
Every menu item will get a click handler that will check for sibling with class "selected" and remove this class. After that he will set the class to "selected" of the current menu item.