We Keep Coding

How to maintain the DOM position when elements are faded out and faded in

I am trying to hide a category list on click of a particular category and load the respective contents. The loading, fading in and fading out works fine but the problem is that whenever I fade Out the div the page scroll position goes to the element before the hidden div and whenever new elements are faded in the scroll position remains in the position of the last element. What to do so that the scroll position remains the same and a text or gif can be shown so that the user can see that some work is going on before the new elements are faded in?
HERE IS MY paste.
HTML
<div id="main_container">
<div id="coupon">
<div id="left_content">
<div id="coupon_heading">COUPON ★★★ </div>
<div id="coupon_text">USE <strong><i>NEW20</i></strong> TO GET AN ADDITIONAL 20% OFF</div>
</div>
<div id="right_content">
<div id="exclamation">OPENING<br>SALE</div>
</div>
</div>
<div id="content">
<div id="category1" class="category" data-categories="SPL">
<img src="images/c_w.png"><div class="category_description">Chef's Special</div>
</div>
<div id="category2" class="category" data-categories="LCH">
<img src="images/l_w.png"><div class="category_description">Lunch</div>
</div>
<div id="category3" class="category" data-categories="SNK">
<img src="images/s_w.png"><div class="category_description">Snacks</div>
</div>
<div id="category4" class="category" data-categories="DNR">
<img src="images/d_w.png"><div class="category_description">Dinner</div>
</div>
<ul class="items">
<!-- Menu List -->
</ul>
</div>
</div>
JS
<script type="text/javascript">
$(document).ready(function(){
$('body').on('click', '.category', function(){
var category = $(this).data('categories');
//alert(category);
$('.category').fadeOut(300);
$.ajax({
type: "POST",
url: "./assets/listproducts.php",
data: {cat: category},
cache: false,
success: function(response){
//console.log(response);
$('#nav').html('Back').addClass('back');
$('.items').html(response).delay(400).fadeIn(300);
}
});
});
$('#action_bar').on('click', '.back', function(e){
e.preventDefault();
//alert('click');
$('.items').fadeOut(300);
$('.category').delay(400).fadeIn(300);
$('#nav').html('CATEGORIES').removeClass();
});
});
</script>
UPDATE
I tried using a callback in fadeOut but didn't work.
success: function(response){
//console.log(response);
$('.category').fadeOut(300, function(){
$('#nav').html('Back').addClass('back');
$('.items').html(response).delay(400).fadeIn(300);
});
}

It seems that the following works just the way I want. If there is something really wrong in the code I wrote, please correct me.
$(document).ready(function(){
$('body').on('click', '.category', function(){
var category = $(this).data('categories');
//alert(category);
$.when($('.category').fadeOut(500)).done(function(){
//Try showing a loader
});
$.ajax({
type: "POST",
url: "./assets/listproducts.php",
data: {cat: category},
cache: false,
success: function(response){
//console.log(response);
$('#nav').html('Back').addClass('back');
$('#content').append($('<ul class="items">').append(response)).delay(400).fadeIn(500);
}
});
});
$('#action_bar').on('click', '.back', function(e){
e.preventDefault();
$.when($('.items').fadeOut(500)).done(function(){
$('.items').remove();
$('#nav').html('CATEGORIES').removeClass();
$('#content').append($('.category').css('display','block')).delay(400).fadeIn(300);
});
});
});
</script>

How to remove and display this elements when ajax success?

How to remove and display this elements when ajax success ?
i want to remove this elements when success
<a class="hyper" id="1234567890">
<div class="mine">
<img src="moo.png"/>
</div>
</a>
and display this elements when success
<a class="success" id="1234567890">
<div class="sura">
<img src="naa.png"/>
</div>
</a>
and this is my ajax post code
$('body').on('click','.hyper',function() {
var my_id = $(this).attr('id');
var postData = 'mydata='+my_id+'&time=now';
$.ajax({
type: "POST",
url: "my_post.php",
data: postData,
cache: false,
success: function()
{
}
});
})
When i use follow Zentoaku
$('#1234567890').removeClass('hyper').addClass('success').html('<div class="sura"><img src="naa.png"/></div>');
after success my element display
<a class="hyper" id="1234567890">
<div class="mine">
<img src="moo.png"/>
</div>
<a class="success" id="1234567890">
<div class="sura">
<img src="naa.png"/>
</div>
</a>
</a>
but after success i want to see this
<a class="success" id="1234567890">
<div class="sura">
<img src="naa.png"/>
</div>
</a>
how can i do ?

To Hide you can use following:
success: function()
{
$('.hyper').hide();
}
You can also use remove() method to completely remove the elements from DOM.
To show use this:
success: function()
{
$('.success').show();
}
You can use Id as well as your selector, if you use different ids for both the elements.
NOTE: This solution will be applicable when you have your html code already exists on your page which you have shown in your question.

jQuery has a toggle function, with which you can toggle the visibility of an item.
http://api.jquery.com/toggle/
Your code then could look like this:
$('body').on('click','.hyper',function() {
var my_id = $(this).attr('id');
var postData = 'mydata='+my_id+'&time=now';
$.ajax({
type: "POST",
url: "my_post.php",
data: postData,
cache: false,
success: function(my_id)
{
$('#'+my_id+'.hyper').toggle();
$('#'+my_id+'.success').toggle();
}
});
})

$('#1234567890').removeClass('hyper').addClass('success');
$('#1234567890 > div').removeClass('mine').addClass('sura');
$('#1234567890 > div > img').attr('src', 'naa.png')
OR
$('#1234567890').removeClass('hyper').addClass('success').html('<div class="sura"><img src="naa.png"/></div>');

Refering to a span of a li by clicking a button

I'm trying to create a todo application using php, ajax and mysql.
There should be a button that, once clicked, deletes the item from the screen and the database, but I don't know how to refer that I want to delete a certain item.
(each item has a unique id in the database, also a text and the ID from the list that contains it)
An example of my html would be something like that:
<ul id="list">
<li class="i­tem">
<div class="draggertab">
<img src="imatges/botofletxa.jpg" width="30" height="30">
</div>
<div class="deletetab">
<img src="imatges/botocreu.jpg" width="30" height="30">
</div> <span>Buy some cookies</span>
</li>
</ul>
And I the javascript code would look like that:
$('.deletetab').live('click', function () {
var result = confirm("Are you sure?");
if (result == true) {
$(this).parent().remove();
}
});
But I don't know how to send (using ajax) the information to another php file (which connects to the database), or which variable should I use.
Sorry if that's a silly question, I'm new at programming!

I don't know how you are rendering the list (ul), suppose it's a foreach loop or something of that kind. You can store each item's ID in a hidden field, so that you can access it's value from js:
<ul id="list">
<li class="i­tem">
<input type="hidden" class="hidden_id" value="render_id_here" />
<div class="draggertab">
<img src="imatges/botofletxa.jpg" width="30" height="30">
</div>
<div class="deletetab">
<img src="imatges/botocreu.jpg" width="30" height="30">
</div> <span>Buy some cookies</span>
</li>
</ul>
js:
$('#list').on('click', '.deletetab', function(){
var result = confirm("Are you sure?");
if (result==true) {
var parent = $(this).parent();
$.ajax({
type: 'POST',
data: { idToDelete: parent.find('.hidden_id').val() }, //Find hidden ID field within parent div and read it's value
url: 'delete.php'
}).done(function() { //success callback
parent.remove();
}).fail(function(qXHR, textStatus) { //error callback
alert('Server responded with error status ' + textSatus);
});
}
});
On the server side you need to search the "idToDelete" parameter in posted data.

First, you can put your item's id on data-id attribute of each item.
<li class="item" data-id="{{ item_id"}}>
// the rest of the html
</li>
Then the javascript
$('.deletetab').click(function() {
var $this, $item;
$this = $(this);
$item = $this.closest('.item');
if (confirm('Are you sure')) {
$.post('url_to_delete.php', {id: $item.attr('data-id')}, function(data) {
$item.remove();
});
}
});

How to insert data in child div?

i met a problem when tried to put some data in my block. I have div structure like this:
<div class="1">
<div class="2">
<div class="3">
<div class="4"></div>
</div>
<div class="5"></div>
</div>
</div>
<div class="1">
<div class="2">
<div class="3">
<div class="4"></div>
</div>
<div class="5"></div>
</div>
</div>
...
and i need to place some data only in<div class="4"></div>
when i use this JS:
function sendDataChild(btn) {
var form = $(btn).closest('FORM[name=answer-form]');
var data = form.serialize();
$.ajax({
type: "POST",
url: url,
dataType: "json",
data: data,
cache: false,
success: function (data) {
form[0].reset();
$("div.4").html(data.error_name);
},
error: function (xhr, str) {
alert('Возникла ошибка: ' + xhr.responseCode);
}
});
return false;
};
it puts data in all div's with class = "4"
I tried to find parent, but it just put data in parent:
$("div.4").parent().html(data.error_name);
Can U advise how to make it right?
P.S
I used numbers just for example.)

As long as your button is under one div.1 you can replace your
$("div.4").html(data.error_name);
with
$(btn).closest("div.1").find("div.4").html(data.error_name);
Edit: Like the comments say you should not start your class names with numbers, but I hope this are just placeholders.

I suggest you identify your div by id and use the append method.

deactivate class with another event

I'm trying to make a individual dropdown container like of that on the nopnav of the google, well everything runs ok, exept the fact that i would like to deactivate the activated class of the trigger event when i click on to hide the container!
Inserted the page where are the links where will be triggered to push up the container, and the second page is the content of the container, where i put in one script to hide the container and the second one to "tabfy" the menu with the jquery tools tabs.
Here's the code:
$(function () {
"use strict";
$(".user-link").click(function (e) {
e.preventDefault();
if ($(".user-link").hasClass("#buser-box")) {
$(".user-link").removeClass("#buser-box");
} else {
$('#buser-box').show('fast');
$(".user-link").addClass("active");
}
$.ajax({
url: "conta-box/conta-home.html",
cache: false,
dataType: "html",
success: function (data) {
$("#buser-box").html(data);
if (!$(this).hasClass("#buser-box")) {
$("#buser-box").removeClass("#buser-box");
}
},
error: function (jqXHR, textStatus, errorThrown) {
alert(textStatus);
}
});
});
});
HTML of the Index:
<div class="tabs-global">
<ul id="nav">
<li class="user-link" title="Conta"><a class="user-box"></a></li>
<li class="loja-link" title="Loja"><a class="loja-box"></a></li>
<li class="ava-link" title="Avaliação"><a class="ava-box"></a></li>
</ul>
</div>
<div id="buser-box"></div>
<div id="loja-box"></div>
<div id="ava-box"></div>
HTML of the container-content:
<div class="topbar">
<span class="box-close" onclick="box.close();"></span>
</div>
<div id="menu-box">
<h2>
<span class="icones-conta"></span><span class="texto">Conta</span></h2>
<ul id="conta-tabs">
<li class="current">Configuração</li>
<li>Localização</li>
<li>Compras</li>
</ul>
</div>
<div id="conta-container"></div>
<script type="text/javascript" src="./js/jquery.tools.min.js"></script>
<script type="text/javascript">
$(".box-close").click(function () {
$("#buser-box").hide("fast");
});
</script>

If you use any Jquery property that refers to class, you then need to use a class.
For example:
if ($(".user-link").hasClass("#buser-box")) {
$(".user-link").removeClass("#buser-box");
}
Should Be:
if ($(".user-link").hasClass("buser-box")) {
$(".user-link").removeClass("buser-box");
}
Also you could try a click function for showing and a click function
for hiding:
// hide your dropdown menu by default
$('#myMenuContainer').addClass('closed').hide();
$('.mylink').click(function(showMenu){
//display your drop down menu
if($('#myMenuContainer').hasClass('closed')) {
$('#myMenuContainer').show().addClass('open').removeClass('closed');
}
});
$('.mylink').click(function(showMenu){
//hide your drop down menu
if($('#myMenuContainer').hasClass('open')) {
$('#myMenuContainer').removeClass('open').addClass('closed').hide();
}
});