Ajax подгрузка блок в зависимости от куков
 

Доброго времени суток. Есть сайт. Позиции добавляются в заказ. Хранится все в куках в таком виде: name: m_ids. Value: 258%2C167%1C067 и тд. Т.е. позиции отделены в куках %. Мой вопрос, как сделать так, чтобы при нажать на кнопку:

<a href="#" onClick="doAdd(^[$id]); return false;"></a>

т.е. на кнопку добавления позиции в корзину, без обновления страницы подгружался блок, в котором было бы просто написано: у вас выбрано 1(2\3\4) позиции. Как считать количество записей в куках (в поле Value) без перезагрузки страницы? И чтобы появившийся блок оставался и на других страницах, пока в куках в поле m_ids что-то есть?
Ставятся куки так:

function setCookie (name, value, expiredays, path, domain, secure) {
	if (expiredays) {
		var todayDate = new Date();
		todayDate.setDate(todayDate.getDate() + expiredays);
	}

	var curCookie = name + "=" + escape(value) + 
		((expiredays) ? ";expires=" + todayDate.toGMTString() : "") + 
		((path) ? ";path=" + path : "") + 
		((domain) ? ";domain=" + domain : "") + 
		((secure) ? ";secure" : "");
   if ((escape(value)).length <= 4000) document.cookie = curCookie+";";
} 

function getCookie (name) {
   var prefix = name + "=";
   var cookieStartIndex = document.cookie.indexOf(prefix);
   if (cookieStartIndex == -1) return null;
   var cookieEndIndex = document.cookie.indexOf(";", cookieStartIndex + prefix.length);
   if (cookieEndIndex == -1) cookieEndIndex = document.cookie.length;
   return unescape(document.cookie.substring(cookieStartIndex + prefix.length, cookieEndIndex));
} 

function deleteCookie (name, path, domain) {
   if (getCookie(name)) {
       document.cookie = name + "=" + 
       ((path) ? "; path=" + path : "") + 
       ((domain) ? "; domain=" + domain : "") + "; expires=Thu, 01-Jan-99 00:00:01 GMT" 
   }
}

Оформить подгружаемый блок я смогу. Я не могу сделать так, чтобы этот блок с счетчиком, собственно, появился, считал и оставался на сайте.
Если нужно что-то еще из кода - могу предоставить. Спасибо за помощь.

https://yadi.sk/i/PsLJE5QAY5Xiv
вот скрин с куками. Трехзначное число в куках - это id из БД. Потом по нему на странице оформления выводятся позиции из БД.

Удалено.

Нет, это вот этот кусок. Ошибся.

function doAdd(id) {
	var m_ids = getCookie('m_ids');
	if (m_ids) {
		var arr = new Array();
		arr = m_ids.split(',');
		var find = 0;
		for (i=0; i<arr.length; i++) {
			if (arr[i] == id) {
				find = 1;
				alert("Модель уже есть в списке заказа.");
				return false;
			}
		}
		arr.push(id);
		setCookie('m_ids', arr.join(","), '', "/");
	} else {
		setCookie('m_ids', id, '', "/");
	}

	alert("Модель добавлена в список заказа.");

	return false;
}

function doDelete(id) {
	if (!confirm("Удалить модель из списка?")) return;
	var m_ids = getCookie('m_ids');
	if (m_ids) {
		var arr = m_ids.split(',');
		var new_arr = new Array();
		for (var i=0; i<arr.length; i++) {
			if (arr[i]!=id) new_arr.push(arr[i]);
		}
		if (new_arr.length>0) {
			setCookie('m_ids', new_arr.join(","), '', "/");
		} else {
			deleteCookie('m_ids', "/");
		}
		window.location.reload();
	}
}

function doClear() {
	if (!confirm("Удалить всех моделей?")) return;
	deleteCookie('m_ids', "/");
	window.location.reload();
}

function showError() {
	try {
		if (error) alert(error);
	} catch(e) {}
}

Работает!!! Спасибо огромное!!!

Вы можете мне еще чуть-чуть помочь? :)
Код, что вы написали, отлично работает. Хочу еще немного улучшить отображение на сайте.

<a href="#" onClick="doAdd(^[$id]); return false;"><img src="/images/design/add_model.gif" width="152" height="29" border="0"></a>

Вот внутри есть картинка. Я хочу, чтобы она после нажатия (т.е. добавления) менялась на другую (на вроде "заказать -> заказано").
Как сделать так, чтобы браузер помнил, какую позицию я заказал?
Вот здесь уже есть проверка на то, добавлена ли позиция или нет:

function doAdd(id) {
	var m_ids = getCookie('m_ids');
	if (m_ids) {
		var arr = new Array();
		arr = m_ids.split(',');
		var find = 0;
		for (i=0; i<arr.length; i++) {
			if (arr[i] == id) {
				find = 1;
				alert("Модель уже есть в списке заказа.");
				return false;
			}
		}
		arr.push(id);
		setCookie('m_ids', arr.join(","), '', "/");
	} else {
		setCookie('m_ids', id, '', "/");
	}
	showNumPos();
	alert("Модель добавлена в список заказа.");
	return false;
}

Как сделать эту проверку для картинки?

november,

<head>
<script>
function showNumPos() {
	var p = document.getElementById('nPos');
	var b = document.getElementById('btn') || document.createElement('input');
	var c = getCookie('m_ids');
	if (c) {
		var a = c.split(',');
		for (var i = 0; i < a.length; i++) {
			if (a[i] == b.alt) {
				b.src = '/images/design/added_model.gif';
				break;
			}
		}
		p.innerHTML = 'Выбрано моделей: ' + a.length;
		//if (p.style.display != 'block') p.style.display = 'block';
	} else {
		b.src = '/images/design/add_model.gif';
		p.innerHTML = 'Выбрано моделей: 0';
		//if (p.style.display != 'none') p.style.display = 'none';
	}
}
function doAdd(btn) {
	var c = getCookie('m_ids');
	if (c) {
		var a = c.split(',');
		for (i = 0; i < a.length; i++) {
			if (a[i] == btn.alt) {
				alert('Модель уже есть в списке заказа.');
				return false;
			}
		}
		a.push(btn.alt);
		setCookie('m_ids', a.join(','), '', '/');
	} else {
		setCookie('m_ids', btn.alt, '', '/');
	}
	showNumPos();
	alert('Модель добавлена в список заказа.');
	return false;
}
function doDelete(id) {
	if (!confirm('Удалить модель из списка?')) return;
	var c = getCookie('m_ids');
	if (c) {
		var a = c.split(','), n = [];
		for (var i = 0; i < a.length; i++) {
			if (a[i] != id) n.push(a[i]);
		}
		if (n.length) {
			setCookie('m_ids', n.join(','), '', '/');
		} else {
			deleteCookie('m_ids', '/');
		}
		showNumPos();
	}
}
function doClear() {
	if (!confirm('Удалить всех моделей?')) return;
	var c = getCookie('m_ids');
	if (c) {
		deleteCookie('m_ids', '/');
		showNumPos();
	}
}
(function(){
    var i = new Image();
    i.src = '/images/design/add_model.gif';
    i.src = '/images/design/added_model.gif';
})();
</script>
</head>
<body>

    <div id="nPos" style="display:block"></div>
    <input id="btn" type="image" src="/images/design/add_model.gif" alt="^[$id]" onclick="return doAdd(this)">

    <script>showNumPos();</script>
</body>

Спасибо больше за ответ! Но вот, что-то не работает. Т.е. добавление происходит - а картинка не меняется. Даже после обновления страницы.

И еще, при загрузке страницы сначала (меньше, чем на 1 сек) на месте кнопки появляется цифра (ID), потом она превращается в картинку. Примерно тоже самое происходит с блоком

<div id="nPos" style="display:none"></div>

- но это проблему я решил добавлением анимации к появлению блока.

На сколько я понимаю, все эти действия происходят после загрузки страницы, поэтому эти элементы и будут прыгать - ничего с этом не сделать.

Rise,
я могу дать адрес страницы в личку, если это возможно.