Назад
Создание прибыльного бизнеспроекта на базе сайта

SEO + ASP.NET 4.0 + БИЗНЕСМОДЕЛЬ = ПРИБЫЛЬНЫЙ САЙТ

Инструмент быстрого построения прибыльного онлайн бизнеса своими силами без капиталовложений за 4 месяца все подробности на SEO + ASP.NET 4.0.

Подписка на рассылку

МАГИЯ C#!

Создание вебсайта с формой автоматического приема онлайн платежей по WebMoney!
Ваше имя
Ваш e-mail
Уроки по ASP.NET c# ADO.NET
     

18 видеоуроков
более 5 часов
по созданию сайта,
выполняющего
продажи ваших продуктов (физических/электронных) на полном автомате с личным оповещением на e-mail, а также ...
DVD-курс по C#, .NET

3 часть. Введение в ASP.NET. WebServices Профессиональная подготовка разработчика по языку C# на платформе .NET

asp.net webservices dvd c# gridview Гудок курс Более 65 подробных видео уроков по теоретическим основам технологии сайтостроения ASP.NET и процессу создания и использованию вебсервисов.

DVD-курс по C#, .NET

2А часть. XML/TXT в аспекте ADO.NET Профессиональная подготовка разработчика по языку C# на платформе .NET

xml txt dvd c# ADO ADO.NET Гудок курс 70 подробных видео уроков по работе с форматами xml, txt, по работе с файлами и директориями. Разработка высокоорганизованных свойств для значительного сокращения объема исходного кода и облегчения дальнейшей модификации и многое-многое другое...

DVD-курс по C#, .NET

1 часть. Windows Forms Профессиональная подготовка разработчика по языку C# на платформе .NET

Профессиональная подготовка на c# А. Гудок

185 подробнейших уроков (70 часов) лекций в формате видеоуроков по теории языка c# и платформы .NET. Практическое закрепление теоретического материала на примере создания Windows Forms - приложения видеоигры "Tanks"

DVD-курс по C#, .NET

2 часть. ADO.NET/SQL Профессиональная подготовка разработчика по языку C# на платформе .NET

Профессиональная подготовка на c# А. Гудок ADO.NET sql

165 подробных видео уроков по созданию приложений распределенных баз данных на примере разработки проектов с использований технологий ADO.NET (Connected model, Disconnected model, Typed DataSet, ...)

Бодибилдинг
Программы тренировок для занятий штангой, гантелями; описание тренажеров

Я записываю курсы!
  Курс валют

НБУ курс евро






AJAX скрипт добавления комментариев на сайт с использованием PHP/MySql/JQuery с помощью JSON (ЧАСТЬ 2)



Данная статья располагается на двух страницах. Первая часть

Видеоурок к ней

Успешный ответ.

{
    "status": 1,
    "html": "HTML код приходит сюда ..."
}

HTML свойство содержит код комментария, аналогичные для разметки в шаге 1.

{
    "status": 0,
    "errors": {
        "email": "Пожалуйста, введите адрес электронной почты.",
        "body": "Пожалуйста введите текст комментария.",
        "name": "Пожалуйста введите имя."
    }
}

В случае неудачи, JQuery перебирает ошибки объекта, и выводит ошибки рядом с полями, причины ошибок.

Шаг 3 - CSS

Теперь, когда у нас есть вся разметка, должным образом сгенерированная и отображенная на странице, мы можем перейти к css.

styles.css – Часть 1

.comment,
#addCommentContainer{
	padding:12px;
	width:400px;
	position:relative;
	background-color:#fcfcfc;
	border:1px solid white;
	color:#888;
	margin-bottom:25px;

	/* CSS3 закругленные углы и тени */

	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;

	-moz-box-shadow:2px 2px 0 #c2c2c2;
	-webkit-box-shadow:2px 2px 0 #c2c2c2;
	box-shadow:2px 2px 0 #c2c2c2;
}

.comment .avatar{

	/*
	/	Аватар позиционируется абсолютно
	/*/

	height:50px;
	left:-70px;
	position:absolute;
	width:50px;
	background:url('img/default_avatar.gif') 
	    no-repeat #fcfcfc;

	/* вертикальном положении: */

	margin-top:-25px;
	top:50%;

	-moz-box-shadow:1px 1px 0 #c2c2c2;
	-webkit-box-shadow:1px 1px 0 #c2c2c2;
	box-shadow:1px 1px 0 #c2c2c2;
}

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

styles.css - Часть 2

.comment .avatar img{
	display:block;
}

.comment .name{
	font-size:20px;
	padding-bottom:10px;
	color:#ccc;
}

.comment .date{
	font-size:10px;
	padding:6px 0;
	position:absolute;
	right:15px;
	top:10px;
	color:#bbb;
}

.comment p,
#addCommentContainer p{
	font-size:18px;
	line-height:1.5;
}

#addCommentContainer input[type=text],
#addCommentContainer textarea{

	/* стили текстовых полей */

	display:block;
	border:1px solid #ccc;
	margin:5px 0 5px;
	padding:3px;
	font-size:12px;
	color:#555;
	font-family:Arial, Helvetica, sans-serif;
}

#addCommentContainer textarea{
	width:300px;
}

label{
	font-size:10px;
}

label span.error{
	color:red;
	position:relative;
	right:-10px;
}

#submit{

	/* Кнопка "отправить" */

	background-color:#58B9EB;
	border:1px solid #40A2D4;
	color:#FFFFFF;
	cursor:pointer;
	font-family:'Myriad Pro',Arial,Helvetica,sans-serif;
	font-size:14px;
	font-weight:bold;
	padding:4px;
	margin-top:5px;

	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	border-radius:4px;
}

#submit:hover{
	background-color:#80cdf5;
	border-color:#52b1e2;
}

Во второй части таблицы стилей, мы дадим стиль комментариям и элементам форм. Обратите внимание, что input[type=text] , который выбирает элементы в зависимости от типа атрибута.

script.js

$(document).ready(function(){
  /* Следующий код выполняется один 
  /раз после загрузки DOM */

  /* Этот рубеж будет препятствовать 
  /нескольким комментариям подряд: */
  var working = false;

  $('#addCommentForm').submit(function(e){

	e.preventDefault();
	if(working) return false;

	working = true;
	$('#submit').val('Working..');
	$('span.error').remove();

	/* Отправка формы для Поля submit.php: */
	$.post('submit.php',$(this).
	    serialize(),function(msg){

		working = false;
		$('#submit').val('Submit');

		if(msg.status){

			/*
			/ Если вставка была успешной,
			/ добавить комментарий ниже последней
			/ на странице с slideDown эффект
			/*/

			$(msg.html).hide().
			    insertAfter('.comment:last').slideDown();
			$('#body').val('');
		}
		else {


			$.each(msg.errors,function(k,v){
				$('label[for='+k+']').append(
				    '<span class="error">'+
					v+'</span>');
			});
		}
	},'json');

});

});

Начиная сверху, у нас есть $(document).ready(). вызов, который связывает функцию с содержанием DOM загруженного события. Рабочая переменная выступает как флаг, который сообщает, что сценарий ведёт запрос AJAX (для предотвращении двойного размещения). В функции обратного вызова для запроса POST AJAX, мы проверяем комментарий. Мы получили разметку на странице после последнего комментарий с slideDown анимации. Если были проблем, мы показываем, сообщения об ошибках, путем добавления сообщения об ошибках соответствующие элементы.

С помощью этой простой AJAX система комментарии стали изящней и приятней. Урок по комментарием завершен! Спасибо за внимание и пользуйтесь на здоровье :)

Исходники



Больше информации читайте по теме:



Оценить статью:

Оценивая статью, Вы подсказываете нам насколько данная информация стала полезной именно для Вас. Мы ожидаем, прежде всего, оценку доступности материала для понимания и простоты его изложения. Дополнительные комментари, вопросы, дополнения и замечания Вы можете указать на странице От Вас

Частичное, или полное копирование материала данной статьи возможно лишь при размещении ссылки на данную страницу.


            
        


        Максим    07.08.2010 21:20:44
        

Напишите пожалуйста как установить комментарии на сайт используя исходники.


        Lev    09.08.2010 18:55:55
        

Максим привет =) Ждите этот урок в видео формате.


        мама    20.09.2010 22:23:57
        

Привет


        Саша Гудок    20.09.2010 22:35:19
        

Здравствуйте-здравствуйте


        Александр    25.11.2010 20:57:56
        

Добрый вечер! Для знающих только Html можно по подробнее.


        Саша Гудок    25.11.2010 21:10:01
        

Александр, Вы можете обратиться к авторам статьи (Лев и Кирилл Нужные) прямо на почтовый ящик. Их позывные есть во втором отзыве на сайте winforms.ru. Просто они сейчас сильно заняты и редко заглядывают сюда. Попробуйте связаться с ними на имеил - они очень дружелюбные ребята.


        Саша Гудок    27.11.2010 11:49:19
        

Вот и дождались видео урока по скрипту. Лев очень старался - поддержите в его первом опыте записи видео


        Александр    21.12.2010 22:04:27
        

Спасибо за урок. У меня все получилось. Но, я не могу интегрировать форму комментариев на свою страницу. Подскажите как это сделать пошагово.


        zugzug    04.03.2011 17:19:38
        

Спасибо, вам, ребята! Возможно внедрю на страницу своего сайта. После пары дней ковыряний все таки поставил ровно и скрипт работает. Так держать, еще раз спасибо!

81.23.193.208


        Михаил    26.07.2011 13:24:44
        

Пытался перевести все содержимое на родной язык, но выходят корякозябры. Менял кодировку тогда нет никого толка от ajax приходится обновлять страницу чтобы текст появился. Как это исправить?

77.223.92.213


        Sam    14.08.2011 13:05:02
        

it's great stuff!

83.149.9.76


        Денис    30.11.2011 6:32:59
        

очень полезный урок

83.239.13.254


        Юрий    07.12.2011 15:36:57
        

Так,ролизведем проверку!

83.149.3.141


        Александр    18.12.2011 13:42:30
        

Хотелось бы демку прямо на сайт...

94.179.230.6


        An    22.01.2012 20:10:49
        

Попробую

95.28.215.129


        Елена    25.02.2012 11:42:10
        

Заказывала у http://radugastudio.ru У них цены супер и делают быстро и профессионально!

94.233.0.39


        кеуфывфы    03.03.2012 16:30:04
        

укеуКфывфывфывфывфывфыв

46.0.174.141


        кеуфывфы    03.03.2012 16:30:27
        

укеуКфывфывфывфывфывфыв

46.0.174.141


        dfgdfg    10.03.2012 2:38:43
        

pasha watches fake watches quality bags but also umbrellas [url=http://www.canwatch.org/]replica watches[/url] cd watch.

101.66.91.197


        Я    10.03.2012 12:37:21
        

Ребята опишите плз как сделать чтоб каждая страница отображала свои коментарии а не все, тоесть чтоб при отправке ком. передавался и ид стати или еще чего в базу.

46.247.211.97


        ref    06.04.2012 14:30:43
        

http://mmm2011-penza.com/index.php/o-mmm-2011/2-dobro-pozhalovat инвестиции!!! от20 до75 % от вложений, регистрация, помощь, бесплатная лотерея !! 20$ в подарок при регистрации!!!!!

93.124.93.208


        Joint    16.04.2012 8:43:07
        

неплохо

95.58.8.195




Имя:  


Текст комментариев (не больше 600 знаков):  
введите не более 600 знаков



Введите символы с картинки:
Капча имеет "срок годности". Поэтому, если необходимо обновите страницу.



Черный список покупателей
c# курс Гудок   курс по ASP.NET Гудок   курс по ADO.NET Гудок   курс по XML txt Гудок   курс по рефлексии и многопоточности Гудок