Develop Reference

Using jQuery to insert tags into box?

What I’m looking to create is something like the Stack overflow tag insert. I want to be able to type the tag into the insert box and when I click the ‘Add’ button, it adds it to the box above. I also want it to push the new tag into the ‘SelectedTags’ array. If the user removes it from the box, it'll need to be removed from the array. I guess I would need to push into the array first then populate the box based on the arrays content? I’ve tried creating it in JSFiddle but can’t get it working. Can someone help using the JSFiddle example? http://jsfiddle.net/uVxXg/117/
I assume this is what make it look like a tag?
$("#tags").tagit({
availableTags: SelectedTags
});

This is how you do it:
$(document).ready(function() {
var sampleTags = [];
$('#tags').tagit({
availableTags: sampleTags,
afterTagRemoved: function(evt, ui) {
console.log(ui.tagLabel)
for(var i = 0; i < sampleTags.length; i++) {
if (sampleTags[i] == ui.tagLabel) {
sampleTags.splice(i, 1); //Here is the update
}
}
}
});
$('form').submit(function(e) {
var inp = $('#tagInput').val();
$('#tagInput').val('');
$('#tags').tagit('createTag', inp);
sampleTags.push(inp);
e.preventDefault();
console.log(sampleTags)
});
$("#array").click(function(e){
console.log("MyArray",sampleTags)
})
});
Try out the fiddle, and when you add something to the SelectedTags array you will then have the tags as "find wile type" in the tags input.

change rows depending on the ordernumber in database

I'm creating for my education-project a pizza-ordering website. With the help of the stackoverflow-community I've achieved already a lot - so thank you! But now I'm stuck and can't find any working solution to my problem.
Question
How can I change the row color alternating (white / grey / white / grey ...) depending on the ordernumber in the database(mysqli)? The ordernumber can be in more than one row, so I can not simple change the color row by row.
I've tried with jquery, but this works only if the ordering numbers remain always in the list (even/odd) ... if an order is cancelled, then it doesn't works anymore (see image with missing ordernumber 7)
Here is the code in jquery:
$(document).ready(function() {
var check = 0;
for(var i =0; i<= $("tr").length;i++){
$("tr").each(function(){
if(parseInt($(this).find("#bestnr").text())==check){
if(check%2 == 0){
$(this).css("background-color","white");
}else{
$(this).css("background-color","#DCDCDC");
}
}
});
check +=1;
}
});
Any ideas? Thanks for your help!

Since you're working with JQuery, something like this ought to do the trick - explanations in code comments.
$(document).ready(function() {
// define the initial "previous order id" as 0 assuming
// there will never be an order with id 0
var previousOrderId = 0;
var previousBgColour = '#dcdcdc';
var thisBgColour;
// loop the table rows
$("tr").each(function() {
// determine "this" row id (assuming bestnr is short for bestelnummer)
// and that the text in that table cell *is* the order number
// I've changed this to a class as an id HAS to be unique
// you'll need to update your code to accommodate
var thisOrderId = parseInt($(this).find(".bestnr").text());
// define the background colour based on whether the order id has changed
// if it has change it
if(thisOrderId != previousOrderId) {
thisBgColour = previousBgColour == '#dcdcdc' ? '#ffffff' : '#dcdcdc';
previousBgColour = thisBgColour;
}
else {
thisBgColour = previousBgColour;
}
$(this).css({'background-color' : thisBgColour});
//update the previousOrderId to this id
previousOrderId = thisOrderId;
});
});
You're basically storing the previous order id and comparing it to the current order id - if the order id hasn't changed it'll use the previous background colour, if it has it'll flipflop it to the alternate colour.

If it is just alternating colors, you can use CSS directly and not worry about anything else:
tr:nth-child(odd) {
background-color:white;
}
tr:nth-child(even) {
background-color:#DCDCDC;
}
If this is somehow dependent on logic from the backend, we can look at adding a class in jQuery and adding colors to this class via CSS

How do I get the value of each ListItem in a ListBox using JavaScript

I have a ListBox that's dynamically populated. I'd like to mark each selected ListItem as "selected" if the value of the ListItem matches a specific string of characters.
ASP.NET:
<asp:ListBox ID="lstComputers" runat="server"></asp:ListBox>
C#:
//code that populates lstComputers.
//I got this part working properly already
Javascript:
//I'm really bad at javascript, so here's the sudo code of what I'd like done
For each ListItem in lstComputers{
If ListItem.value like 'HP%' then{ //assuming % is like a wild card in SQL
ListItem.selected = true;
}
}
Please help me out with the JavaScript.
Thanks

Try this:-
function SelectListBox() {
var lstComputers = document.getElementById("<%= lstComputers.ClientID %>");
for (var i = 0; i < lstComputers.options.length; i++) {
if (lstComputers.options[i].text.indexOf("HP") > -1) {
lstComputers.options[i].selected = true;
}
}
}
Also, Please make sure you have SelectionMode property set to Multiple if you want multiple selection in ListBox control.

The Asp.net ListBox will generate the html of Select Tag and we can access that select element and its option in javascript using jQuery easily.
Following is the Javascript code that will do your work.
<script>
$("#lstComputers option").each(function(){
var option = $(this);
if(option.text().indexOf('HP') == 0)
{
option.attr('selected','selected');
}
});
</script>

performing sortable using JavaScript

i have a situation where i need to achieve this, in a table having n rows. if i click on a row in a table and then click on another row. the content in row of first click should go to content in row of second click and then each row should be shifted by on step backward or forward. this can be taken equivalent to JQUERY sortable.
Example:
|1|2|3|4| if i click on 1 and 4 then it should be |2|3|4|1|
how to record two clicks, and the contents of my rows are div elements containing many input elements. I thought of this idea and is this a good way to achieve sortable or is there a still better way, i want to do it using java script.
thanks in advance.

my script fucntion goes like this. I really should have thought for a little longer. i used flags here, i got two questions more, can i do that with out flags?, is there a better way?
<script>
var flag=0;
var id1;
var id2;
function Myfunction(id)
{
if(flag==0)
{
id1=id;
flag=1;
}
else
{
id2=id;
var x=document.getElementById(id1).innerHTML;
var num1=parseInt(id1);
var num2=parseInt(id2);
for(var i=num1;i<num2;i++)
{
var j=i.toString();
var k=(i+1).toString();
document.getElementById(j).innerHTML=document.getElementById(k).innerHTML;
}
document.getElementById(id2).innerHTML=x;
flag=0;
}
}
</script>

I made up a little http://jsfiddle.net/zxKeg/. Works with jQuery only, no additional plugins needed. Hope this will help you!
JS Code:
$(document).ready(function() {
var $table = $('table');
var $toCopy = null;
$table.on('click', 'tr', function() {
if($toCopy === null || $toCopy[0] == this) {
$toCopy = $(this);
}
else {
$toCopy.remove();
$(this).after($toCopy);
$toCopy = null;
}
});
});

how can I get text of link button in my rad grid by jquery?

I have a grid that contains link-button for code column .The user can check each checkbox and when user clicked on the top button of my page all of code that user checked will be displayed in a text-box in another page. It means : (the user can select multiple row by checked check-box and pass all code that user select by jQuery function to text-box in another page), but my problem is I cant access and get text of the code. I used CSS and it works. It become yellow, but I can't access text when i run it. the alert statement represent me this text instead of code:
function (e){
return b.access(this,function(e){
return e===t?b.text(this):this.empty().append(
(this[0]&&this[0].ownerDocument || o).createTextNode(e))
},null,e,arguments.length)
}
How can I fix this problem? if anybody knows please help me to fix it, thanks.
function selectcheckCheckBoxes() {
alert("1234 ");
var gridClientID = $("#gvwHuman");
jQuery.each($("#gvwHuman input:checkbox"), function () {
if (this.checked) {
$(this).parent().next().css('background-color', 'green');
var a = $(this).parent().next().css('background-color', 'red'); ;
var j = $(a).find(".link").css('background-color', 'yellow'); ;
var j2 = $(j).text;
alert(j2);
}
});
}

try this:
var j2 = $(a).find(".link").text();
if it doesn't work, could you post your HTML as well?

The below code won't give the text of the link.its wrong syntax.
var j2 = $(j).text;
So change this as
var j2 = $(a).find(".link").text();