When an user clicks a div class="day", I wanna make a new div id="list_1 class="row list" and insert it after only the div class="row" which is a parent of div ".day".
To do this, I've tried to apply 'insertAfter', selector 'this' and 'parent'. However, it doesn't work well.
jquery file
function getDailyList(){
$.ajax({
url: "/getDailyList",
dataType: 'JSON',
success: function(data){
string = '<div id="list_1" class="row list">'
+'<div class="col-md-8 col-md-offset-2" style= "border: 1px solid gold; background-color: black; padding: 10px">';
if(data.event_list.length == 0){
return false
}
else{
for(var idx in data.event_list){
event_ = data.event_list[idx];
string = string + '<p class="text-left" style="color: white">' + event_['title'] + '</p>';
}
}
string = string + '</div></div>';
$(string).insertAfter('.row');
return false
},
});
console.log('out');
}
$(document).ready(function(){
$('.day').click(function(){
//date = datetime.date()
console.log('-------');
if($(".list").css("display") == "block"){
$(".list").remove();
}
else{
getDailyList();
}
console.log('last');
});
})
html file
<!DOCTYPE html>
<html>
<head>
<title>D.Han</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="static/js/base.js"> </script>
</head>
<body>
<div class="row">
<div id="day1" class="day col-md-4 col-md-offset-2" data-cal-date ="2014-08-14" style="border: 1px solid gold">
<p class="text-center">2014.08.26</p>
</div>
<div id="day2" class="day col-md-4" style="border: 1px solid gold">
<p class="text-center">2014.08.27</p>
</div>
</div>
<div class="row">
<div id="day3" class="day col-md-4 col-md-offset-2" style="border: 1px solid gold">
<p class="text-center">2014.09.03</p>
</div>
<div id="day4" class="day col-md-4" style="border: 1px solid gold">
<p class="text-center">2014.09.04</p>
</div>
</div>
</body>
</html>
You have some missing semicolons, an extra colon (which would break the script in IE) and your function getDailyList() doesn't know which element has been actually clicked.
This should do it:
function getDailyList(el) {
// Try to rename this variable. It's not a good idea to name a variable
// using a type.
// We declare it here so we can concatenate bits later.
var string = "";
$.ajax({
url: "/getDailyList",
dataType: 'JSON',
success: function (data) {
string = '<div id="list_1" class="row list"><div class="col-md-8 col-md-offset-2" style= "border: 1px solid gold; background-color: black; padding: 10px">';
if (data.event_list.length === 0) {
return false;
}
else {
for (var idx in data.event_list) {
event_ = data.event_list[idx];
// string = string + '' can be written like this.
string += '<p class="text-left" style="color: white">' + event_['title'] + '</p>';
}
}
string += '</div></div>';
// The function knows which element has been clicked,
// so we just insert the new element after its parent.
$(string).insertAfter(el.parents('.row'));
return false;
} // Removed the extra colon after the bracket.
});
console.log('out');
}
$(document).ready(function () {
$('.day').click(function () {
//date = datetime.date();
console.log('-------');
if ($(".list").css("display") == "block") {
$(".list").remove();
}
else {
// Pass which element has been clicked to the function
// we are calling.
getDailyList($(this));
}
console.log('last');
});
});