We Keep Coding

searchbar alert when there is no match jQuery

I made simple searchbar for my app. Right now it searching the users by data attribute but when it doesn't find any match it display nothing. I want it to show error message when there is no match. I made if statement but it only display when I type something into input and delete it. How to display error message immediately when searchbar doesn't find any user.
JS
$(document).ready(function () {
// Pokaż/Ukryj wyszukiwarkę
$('.show-hide-search-bar').on('click', function () {
if ($('.searcher-section').is(":visible")) {
$('.searcher-section').hide("slide");
$('.show-hide-search-bar').text('Pokaż Wyszukiwarkę');
} else {
$('.searcher-section').show("slide");
$('.show-hide-search-bar').text('Ukryj Wyszukiwarkę');
}
});
// Zmiana tekstu w zależności od pojawienia się searchera
if ($('#agents').length > 0) {
$('#label-searchbar').html('Imię, Nazwisko, Adres email');
$('#input-searchbar').attr('placeholder', 'Podaj imię, nazwisko lub adres email');
} else if ($('#company').length > 0) {
$('#label-searchbar').html('Nazwa biura');
$('#input-searchbar').attr('placeholder', 'Podaj nazwę biura');
}
//Dynamiczne wyszukiwanie .card dla agentów | .clearfix dla listy
$('.searcher-input').keyup(function (event) {
$('.null-data').hide();
if ($(this).val()) {
var input = $(this).val();
var trimmedInput = input.trim();
var terms = input.split(/\W+/g);
$(".card").hide();
$(".clearfix.alt").hide();
$(".card[data-agent*='" + trimmedInput + "' i]").show();
$(".clearfix[data-name*='" + trimmedInput + "' i]").show();
// $(".card[data-lastname*='" + trimmedInput + "']").show();
// $(".card[data-lastname*='" + trimmedInput + "'][data-firstname*='" + trimmedInput + "']").show();
// $(".card[data-email*='" + trimmedInput + "']").show();
$(".col-xs-12").css("min-height", "0");
$(".col-md-4").css("min-height", "0");
$(".col-sm-5").css("min-height", "0");
if ($('.card').is(':visible').get(0)) {
$('.null-data').show(function () {
$(this).effect("shake");
});
}
if (!$('.clearfix').is(':visible').get(0)) {
$('.null-data').show(function () {
$(this).effect("shake");
});
}
} else {
$(".clearfix.alt").show();
$(".card").show();
$('.null-data').show(function () {
$(this).effect("shake");
});
}
});
});
HTML
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-12">
<div class="searcher-section" style="display: none">
<div class="show-hide-searcher">
<div class="input-section">
<div class="label-input-searcher">
<label for="" class="searcher-label" id="label-searchbar"></label>
<input type="text" placeholder=""
class="searcher-input form-control" id="input-searchbar"/>
<div class="null-data" style="display: none;">Wprowadź poprawne dane</div>
</div>
</div>
</div>
</div>
</div>
<div class="show-hide-section">
<button class="btn btn-success show-hide-search-bar" id="searchbar-button">Pokaż wyszukiwarkę</button>
</div>
</div>
</div>
<div class="container">
<div class="row">
<h3 class="title" id="agents">Doradcy</h3>
<div class="cards">
#foreach($agents as $agent)
<div class="col-xs-12 col-sm-5 col-md-4">
<div class="card" data-agent="{{$agent->firstname}} {{$agent->lastname}} {{$agent->email}}">
<figure>
<div class="img-ref">
<a href=""
class="">
#if(isset($agent->has_avatar) && $agent->has_avatar !== 0)
<div style="background: url(''); background-size: cover;" class="photo"></div>
#else
<div style="background: url(''); background-size: cover;"
class="photo"></div>
#endif
</a>
</div>
<ul>
<li>
<a href=""
class="teamLink agent-color">
<h3 class="agent-name">{{$agent->firstname}} {{$agent->lastname}}</h3> </a>
</li>
</ul>
#if(isset($agent->company_name))
<div class="teams-summary">
{{$agent->company_name}}
</div>
#endif
<div class="contact-position">
{{--telefon kontaktowy--}}
<div class="mobile-info card-contact-info">
{{$agent->phone}}
</div>
{{--adres mailowy--}}
<div class="email-info card-contact-info">
{{$agent->email}}
</div>
</div>
</figure>
</div>
</div>
#endforeach
</div>
{{----}}
</div>
</div>

check element length
........
$(".clearfix.alt").hide();
if($(".card[data-agent*='" + trimmedInput + "' i]").length == 0) {
alert("no result");
return;
}
$(".card[data-agent*='" + trimmedInput + "' i]").show();
....

Filtering a property with multiple values for one field - List.js and Filter.js

I am currently using the list.js plugin along with it's filter extension to produce a search results page that allows the user to filter down the end results to make it easier for them to find exactly what they are looking for.
I have been using their API to try and come up with a solution but in all honesty it is a little dated and not sure when it was last updated.
http://www.listjs.com/docs/list-api
My code is as follows:
HTML
<div id="search-results">
<div class="col-md-3">
<div class="panel panel-warning">
<div class="panel-heading">Filters</div>
<div class="panel-body">
<div class="search-filter">
<ul class="list-group">
<li class="list-group-item">
<div class="list-group-item-heading">
<h4>Filter Options</h4>
</div>
</li>
<li class="list-group-item">
<div class="nameContainer">
<h5 class="list-group-item-heading">Name</h5>
</div>
</li>
<li class="list-group-item">
<div class="typeContainer">
<h5 class="list-group-item-heading">Type</h5>
</div>
</li>
<li class="list-group-item">
<div class="difficultyContainer">
<h5 class="list-group-item-heading">Difficulty</h5>
</div>
</li>
<li class="list-group-item">
<label>Tour contains</label>
<input class="search form-control" placeholder="Search" />
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-md-9">
<div class="panel panel-primary">
<div class="panel-heading">Results</div>
<div class="list panel-body">
<div class="package well">
<div class="name">Niagra Falls</div>
<div class="type hidden">Boat Trip</div>
<div class="difficulty">Relaxed</div>
</div>
<div class="package well">
<div class="name">Pyramids</div>
<div class="type hidden">History Holiday</div>
<div class="difficulty">Relaxed</div>
</div>
<div class="package well">
<div class="name">Great Barrier Reef</div>
<div class="type hidden">Snorkling Holiday</div>
<div class="difficulty">Dangerous</div>
</div>
<div class="package well">
<div class="name">Boar Hunting</div>
<div class="type hidden">Hunting Trip</div>
<div class="difficulty">Active</div>
</div>
<div class="package well">
<div class="name">Thames Cruise</div>
<div class="type hidden">Cruise</div>
<div class="difficulty">Easy</div>
</div>
</div>
<ul class="pagination"></ul>
</div>
</div>
</div>
Javascript
var options = {
valueNames: ['name', 'type', 'difficulty'],
page: 3,
plugins: [
ListPagination({})
]
};
var userList = new List('search-results', options);
var updateList = function () {
var name = new Array();
var type = new Array();
var difficulty = new Array();
$("input:checkbox[name=name]:checked").each(function () {
name.push($(this).val());
});
$("input:checkbox[name=type]:checked").each(function () {
type.push($(this).val());
});
$("input:checkbox[name=difficulty]:checked").each(function () {
difficulty.push($(this).val());
});
var values_type = type.length > 0 ? type : null;
var values_name = name.length > 0 ? name : null;
var values_difficulty = difficulty.length > 0 ? difficulty : null;
userList.filter(function (item) {
return (_(values_type).contains(item.values().type) || !values_type)
&& (_(values_name).contains(item.values().name) || !values_name)
&& (_(values_difficulty).contains(item.values().difficulty) || !values_difficulty)
});
}
userList.on("updated", function () {
$('.sort').each(function () {
if ($(this).hasClass("asc")) {
$(this).find(".fa").addClass("fa-sort-alpha-asc").removeClass("fa-sort-alpha-desc").show();
} else if ($(this).hasClass("desc")) {
$(this).find(".fa").addClass("fa-sort-alpha-desc").removeClass("fa-sort-alpha-asc").show();
} else {
$(this).find(".fa").hide();
}
});
});
var all_type = [];
var all_name = [];
var all_difficulty = [];
updateList();
_(userList.items).each(function (item) {
all_type.push(item.values().type)
all_name.push(item.values().name)
all_difficulty.push(item.values().difficulty)
});
_(all_type).uniq().each(function (item) {
$(".typeContainer").append('<label><input type="checkbox" name="type" value="' + item + '">' + item + '</label>')
});
_(all_name).uniq().each(function (item) {
$(".nameContainer").append('<label><input type="checkbox" name="name" value="' + item + '">' + item + '</label>')
});
_(all_difficulty).uniq().each(function (item) {
$(".difficultyContainer").append('<label><input type="checkbox" name="difficulty" value="' + item + '">' + item + '</label>')
});
$(document).off("change", "input:checkbox[name=type]");
$(document).on("change", "input:checkbox[name=type]", updateList);
$(document).off("change", "input:checkbox[name=name]");
$(document).on("change", "input:checkbox[name=name]", updateList);
$(document).off("change", "input:checkbox[name=difficulty]");
$(document).on("change", "input:checkbox[name=difficulty]", updateList);
I've also created a working example on Codepen.
http://codepen.io/JasonEspin/pen/bdajKo
What I wish to achieve is for some packages, they may have multiple type values such as:
<div class="package well">
<div class="name">Niagra Falls</div>
<div class="type hidden">Boat Trip</div>
<div class="type hidden">Other trip type</div>
<div class="difficulty">Relaxed</div>
</div>
So in this situation, I would expect my filter to detect that there is a type of Boat Trip and Other trip type and display these options as a filter option. If either is selected, this package is then returned. However, it seems to ignore the second type.
I have even tried it like this as I expected it to act like an array but this was not the case. It just mashed the two items together to create a random option.
<div class="package well">
<div class="name">Niagra Falls</div>
<div class="type hidden"><div>Boat Trip</div><div>Other Trip Type</div> </div>
<div class="difficulty">Relaxed</div>
</div>
So, does anyone have any ideas how I can adapt my code to accept multiple options? My ideal scenario would be for me to attach a number of departure dates to each package and enable the user to filter by these departure dates.
Any help would be greatly appreciated as I believe the issue may be with my Lodash code but as it is my first time using Lodash i'm a little bit unsure of what it is actually doing due to its unusual syntax.

This was actually fairly straightforward to implement using a combination of string.split() definitions and array concatenations.
HTML
<div id="search-results">
<div class="col-md-3">
<div class="panel panel-warning">
<div class="panel-heading">Filters</div>
<div class="panel-body">
<div class="search-filter">
<ul class="list-group">
<li class="list-group-item">
<div class="list-group-item-heading">
<h4>Filter Options</h4>
</div>
</li>
<li class="list-group-item">
<div class="nameContainer">
<h5 class="list-group-item-heading">Name</h5>
</div>
</li>
<li class="list-group-item">
<div class="typeContainer">
<h5 class="list-group-item-heading">Type</h5>
</div>
</li>
<li class="list-group-item">
<div class="difficultyContainer">
<h5 class="list-group-item-heading">Difficulty</h5>
</div>
</li>
<li class="list-group-item">
<label>Tour contains</label>
<input class="search form-control" placeholder="Search" />
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-md-9">
<div class="panel panel-primary">
<div class="panel-heading">Results</div>
<div class="list panel-body">
<div class="package well">
<div class="name">Niagra Falls</div>
<div class="type hidden">Boat Trip|Other Trip|My Trip</div>
<div class="difficulty">Relaxed</div>
</div>
<div class="package well">
<div class="name">Pyramids</div>
<div class="type hidden">History Holiday</div>
<div class="difficulty">Relaxed</div>
</div>
<div class="package well">
<div class="name">Great Barrier Reef</div>
<div class="type hidden">Snorkling Holiday</div>
<div class="difficulty">Dangerous</div>
</div>
<div class="package well">
<div class="name">Boar Hunting</div>
<div class="type hidden">Hunting Trip</div>
<div class="difficulty">Active</div>
</div>
<div class="package well">
<div class="name">Thames Cruise</div>
<div class="type hidden">Cruise</div>
<div class="difficulty">Easy</div>
</div>
</div>
<ul class="pagination"></ul>
</div>
</div>
</div>
JAVASCRIPT
var options = {
valueNames: ['name', 'type', 'difficulty'],
page: 3,
plugins: [
ListPagination({})
]
};
var userList = new List('search-results', options);
var updateList = function () {
var name = new Array();
var type = new Array();
var difficulty = new Array();
$("input:checkbox[name=name]:checked").each(function () {
name.push($(this).val());
});
$("input:checkbox[name=type]:checked").each(function () {
if($(this).val().indexOf('|') > 0){
var arr = $(this).val().split('|');
var arrayLength = arr.length;
type = type.concat(arr);
console.log('Multiple values:' + arr);
}else{
type.push($(this).val());
console.log('Single values:' + arr);
}
});
$("input:checkbox[name=difficulty]:checked").each(function () {
difficulty.push($(this).val());
});
var values_type = type.length > 0 ? type : null;
var values_name = name.length > 0 ? name : null;
var values_difficulty = difficulty.length > 0 ? difficulty : null;
userList.filter(function (item) {
var typeTest;
var nameTest;
var difficultyTest;
if(item.values().type.indexOf('|') > 0){
var typeArr = item.values().type.split('|');
for(var i = 0; i < typeArr.length; i++){
if(_(values_type).contains(typeArr[i])){
typeTest = true;
}
}
}
return (_(values_type).contains(item.values().type) || !values_type || typeTest)
&& (_(values_name).contains(item.values().name) || !values_name)
&& (_(values_difficulty).contains(item.values().difficulty) || !values_difficulty)
});
}
userList.on("updated", function () {
$('.sort').each(function () {
if ($(this).hasClass("asc")) {
$(this).find(".fa").addClass("fa-sort-alpha-asc").removeClass("fa-sort-alpha-desc").show();
} else if ($(this).hasClass("desc")) {
$(this).find(".fa").addClass("fa-sort-alpha-desc").removeClass("fa-sort-alpha-asc").show();
} else {
$(this).find(".fa").hide();
}
});
});
var all_type = [];
var all_name = [];
var all_difficulty = [];
updateList();
_(userList.items).each(function (item) {
if(item.values().type.indexOf('|') > 0){
var arr = item.values().type.split('|');
all_type = all_type.concat(arr);
}else{
all_type.push(item.values().type)
}
all_name.push(item.values().name)
all_difficulty.push(item.values().difficulty)
});
_(all_type).uniq().each(function (item) {
$(".typeContainer").append('<label><input type="checkbox" name="type" value="' + item + '">' + item + '</label>')
});
_(all_name).uniq().each(function (item) {
$(".nameContainer").append('<label><input type="checkbox" name="name" value="' + item + '">' + item + '</label>')
});
_(all_difficulty).uniq().each(function (item) {
$(".difficultyContainer").append('<label><input type="checkbox" name="difficulty" value="' + item + '">' + item + '</label>')
});
$(document).off("change", "input:checkbox[name=type]");
$(document).on("change", "input:checkbox[name=type]", updateList);
$(document).off("change", "input:checkbox[name=name]");
$(document).on("change", "input:checkbox[name=name]", updateList);
$(document).off("change", "input:checkbox[name=difficulty]");
$(document).on("change", "input:checkbox[name=difficulty]", updateList);
Codepen
http://codepen.io/JasonEspin/pen/bdajKo

jquery append() is creating two div elements

I am adding div elements dynamically to the DOM using jquery append(). I have made a controller that takes json data using $http.get() and calls a function create_mission to add the divs to DOM. I have to create a div for every object of the json, so i have done it using a loop and iterating it for json.length times. But here two div elements gets created at every iteration.
Here is my controller
mission_vision_mod.controller('mission_visionCtrl', ['$scope', '$http', function ($scope, $http) {
$scope.visiontext = "Here is the content of vision";
$scope.bkclr = ['bk-clr-one', 'bk-clr-two', 'bk-clr-three', 'bk-clr-four'];
$scope.progressbar = ['progress-bar-warning', 'progress-bar-danger', 'progress-bar-success', 'progress-bar-primary'];
$scope.missioncount = ['col-md-0', 'col-md-12', 'col-md-6', 'col-md-4', 'col-md-3', 'col-md-2.5', 'col-md-2'];
$http.get('m_id.json').success(function (data) {
$scope.missions = data;
$scope.len = data.length;
create_mission();
});
var create_mission = function () {
var i;
for (i = 0; i < $scope.missions.length; i++) {
$("#missionstart").append("<div id='" + $scope.missions[i].id + "' class='" + $scope.missioncount[$scope.missions.length] + "'></div>");
$("#missionstart").find("#" + $scope.missions[i].id + "").append("<div class='dashboard-div-wrapper " + $scope.bkclr[i] + "'></div>");
$("div#" + $scope.missions[i].id + "").find(".dashboard-div-wrapper").append("<h1>" + $scope.missions[0].missionInfo + "</h1>");
$("div#" + $scope.missions[i].id + "").find(".dashboard-div-wrapper").append("<div class='progress progress-striped active'></div>");
$("div#" + $scope.missions[i].id + "").find(".dashboard-div-wrapper").find("div").append("<div class='progress-bar " + $scope.progressbar[i] + "' role='progressbar' aria-valuenow='80' aria-valuemin='0' aria-valuemax='100' style='width: 80%'></div>");
$("div#" + $scope.missions[i].id + "").find(".dashboard-div-wrapper").append("<ul class='unorderedlist'></ul>");
}
}
}]);
The HTML file
<div class="content-wrapper" ng-controller="mission_visionCtrl">
<div class="container-fluid">
<div id="header-wrapper" class="container">
<div id="header" class="container">
<div id="logo">
<h1 class="page-head-line" id="visionh"><a>Vision</a></h1>
<p id="visionp"><a rel="nofollow">{{visiontext}}</a></p>
</div>
</div>
</div>
<div class="row" id="missionstart">
</div>
</div>
The json file
[{"id":1,"missionInfo":"mission"},{"id":2,"missionInfo":"mission1"},{"id":3,"missionInfo":"mission2"},{"id":4,"missionInfo":"mission3"}]

Since you have used angularjs, use a angularjs solution
<div class="content-wrapper" ng-controller="mission_visionCtrl">
<div class="container-fluid">
<div id="header-wrapper" class="container">
<div id="header" class="container">
<div id="logo">
<h1 class="page-head-line" id="visionh"><a>Vision</a></h1>
<p id="visionp"><a rel="nofollow">{{visiontext}}</a></p>
</div>
</div>
</div>
<div class="row" id="missionstart">
<div id="{{mission.id}}" ng-class="missioncount[missions.length]" ng-repeat="mission in missions">
<div class="dashboard-div-wrapper" ng-class="bkclr[$index]">
<h1>{{mission.missionInfo}}</h1>
<div class="progress progress-striped active">
<div class="progress-bar" ng-class="progressbar[$index]" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%"></div>
</div>
<ul class="unorderedlist"></ul>
</div>
</div>
</div>
</div>
</div>
then
mission_vision_mod.controller('mission_visionCtrl', ['$scope', '$http', function ($scope, $http) {
$scope.visiontext = "Here is the content of vision";
$scope.bkclr = ['bk-clr-one', 'bk-clr-two', 'bk-clr-three', 'bk-clr-four'];
$scope.progressbar = ['progress-bar-warning', 'progress-bar-danger', 'progress-bar-success', 'progress-bar-primary'];
$scope.missioncount = ['col-md-0', 'col-md-12', 'col-md-6', 'col-md-4', 'col-md-3', 'col-md-2.5', 'col-md-2'];
$http.get('m_id.json').success(function (data) {
$scope.missions = data;
$scope.len = data.length;
});
$scope.missions = data;
$scope.len = data.length;
}]);

Firstly, I found a possible typo in your javascript code.
$("div#" + $scope.missions[i].id + "").find(".dashboard-div-wrapper").append("<h1>" + $scope.missions[0].missionInfo + "</h1>");
I believe what you want is $scope.missions[i].missionInfo. Other than this, your code should be fine.
Secondly, in angular world, the normal way to iterate is to use ng-repeat (please see Arun's answer). Your view and controller shouldn't know each other, and they should communicate through your model.

Inside Loop try this code:
var div2=$("div></div>").addClass("dashboard-div-wrapper "+$scope.bkclr[i]);
div2.append("<h1>" + $scope.missions[0].missionInfo + "</h1>");
div2.append($("<div></div>").addClass("progress progress-striped active").append("<div class='progress-bar " + $scope.progressbar[i] + "' role='progressbar' aria-valuenow='80' aria-valuemin='0' aria-valuemax='100' style='width: 80%'></div>"));
div2.find(".dashboard-div-wrapper").append("<ul class='unorderedlist'></ul>");
var div1=$("<div></div>").id($scope.missions[i].id).addClass($scope.missioncount[$scope.missions.length]).append(div2);
$("#missionstart").append(div1);
Code not tested. Test it and let me know.

How can I group divs and calculate values?

I have the next structure:
<div class="container">
<div class="block">
<div class="id">1</div>
<div class="date">02/21/2015</div>
<div class="value">111</div>
</div>
<div class="block">
<div class="id">1</div>
<div class="date">02/21/2015</div>
<div class="value">222</div>
</div>
<div class="block">
<div class="id">1</div>
<div class="date">02/30/2015</div>
<div class="value">333</div>
</div>
<div class="block">
<div class="id">1</div>
<div class="date">02/30/2015</div>
<div class="value">444</div>
</div>
<div class="block">
<div class="id">2</div>
<div class="date">05/17/2015</div>
<div class="value">555</div>
</div>
</div>
I need group it and calculate values, then I need print this in my page.
Steps:
Group by ID
Group by Date (in ID)
Calculate Values (in each Date)
So, the result:
<div class="container">
<div class="block">
<div class="id">1</div>
<div class="date">02/21/2015</div>
<div class="value">333</div> <!-- 111+222 -->
</div>
<div class="block">
<div class="id">1</div>
<div class="date">02/30/2015</div>
<div class="value">777</div> <!-- 333+444 -->
</div>
<div class="block">
<div class="id">2</div>
<div class="date">05/17/2015</div>
<div class="value">555</div>
</div>
</div>
P.S. Of course, I don't need in comments. :)
Can you help me with JS/jQ code?

This is one way (demo):
var $container = $('.container'),
$blocks = $container.find('.block'),
results = {},
output = '';
$blocks.each(function () {
var $this = $(this),
id = $this.find('.id').html(),
date = $this.find('.date').html(),
value = $this.find('.value').html();
results[id] = results[id] || {};
results[id][date] = results[id][date] || 0;
results[id][date] += parseInt(value);
});
$.each(results, function (id, dates) {
$.each(dates, function (date, value) {
output += '<div class="block">' +
'<div class="id">' + id + '</div>' +
'<div class="date">' + date + '</div>' +
'<div class="value">' + value + '</div>' +
'</div>';
});
});
$container.html(output);

Add new row every set number of children

I am trying to add a new row every 2 childrens and place 2 new childrens inside a new row each time.
The starting html:
<div class="row_1"></div>
After the first run i get:
<div class="newRow">
<div class="span6" id="content"></div>
</div>
<div class="row_1"></div>
But as I keep adding I get:
<div class="newRow">
<div class="span6">...</div>
<div class="span6" id="content">...</div>
<div class="span6" id="content"></div> <== Empty extra div
</div>
<div class="newRow"></div> <== Empty extra div
<div class="row_1"></div>
Expected result would be
<div class="newRow">
<div class="span6">...</div>
<div class="span6" id="content">...</div>
</div>
<div class="newRow">
<div class="span6">...</div>
<div class="span6">...</div>
</div>
<div class="row_1"></div>
The following is the jQuery I am using
$(".nav li a").on("click", function(e) {
$('#content').removeAttr('id');
var $row = $(".row_1");
var $rowNew = $('.newRow');
if($rowNew.length < 2){
$('<div id="content" class="span6"></div>').appendTo('.newRow');
}
if ($rowNew.children().length > 2) {
$('<div class="row-fluid new"></div>').insertBefore($row);
}
else {
$('<div class="row-fluid new"></div>').insertBefore($row);
$('<div id="content" class="span6"></div>').appendTo('.newRow');
}
});

"Eventually I solved it with":
$(".nav li a").on("click", function(e) {
$('#content').removeAttr('id');
var $row = $(".span9");
var $rowNew = $('.new');
if ($rowNew.children().length > 1) {
$(".span9 div").removeClass("new");
$('<div class="row-fluid new"></div>').prependTo($row);
}
if ($(".new").length == 0) {
$('<div class="row-fluid new"></div>').prependTo($row);
$('<div id="content" class="span6"></div>').appendTo('.new');
} else {
$('<div id="content" class="span6"></div>').appendTo('.new');
}
});