помогите настроить модальное окно на подгрузку данных через ajax
 

Ребят помогите настроить модальное окно на подгрузку данных через ajax
есть страничка блокнота(модуль) , есть модальное окно
например

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModalnote">
  Блокнот
</button>

<!-- Modal -->
<div class="modal fade" id="myModalnote" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Блокнот</h4>
      </div>
      <div class="modal-body">
      ТУТ НАДО ВЫВОДИТЬ ДАННЫЕ ИЗ ИСТОЧНИКА {%$settings.path%}notepad_ajax/ ПОЛНОСТЬЮ И СТИЛИ И Т.Д. 
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Закрыть</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Как сделать подскажите новичку первый раз задача такая встала чето не вкурю как сделать! Спасибо Всем за ранее!

SERblY, может так?

<button class="btn btn-primary btn-lg" id="show_notepad" data-modal="#myModalnote">
  Блокнот
</button>

<!-- Modal -->
<div class="modal fade" id="myModalnote" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Блокнот</h4>
      </div>
      <div class="modal-body" data-path="{%$settings.path%}notepad_ajax/">
		Loading...
	  </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Закрыть</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<script type="text/javascript">
	$(function(){
		$('#show_notepad').click(function(){
			var $t=$(this);
			if($t.attr('disabled')!==undefined)
				return;
				
			var $modal=$($t.attr('disabled',true).data('modal')),
				$modal_body=$modal.find('.modal-body');
				
			$modal.modal('show');
			$.post($modal_body.data('path'),function(res){
				$modal_body.html(res);
			}).complete(function(){
				$t.removeAttr('disabled');
			});
		});
	});
</script>

вызов модальника срабатывает только один раз, закроешь, окно больше не вызывается и внутри кнопочки которые внутри блокнота ()контента который подгружается не работает нечего

В строке 37 «$t» замени на «$('#show_notepad')».
С остальным сам разбирайся, либо в раздел "работа".

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

<script>
$('.notepad').click(function(event){

var id=$(this).attr("data-id");

var el = $(this);

var n_count = $('.n_count').html();

$.ajax({

type: "GET",

url: TPL_PATH + "fav/",

cache: false,

data: "id="+id,

success: function(html){

n_count = parseInt(n_count);

if(html == '1'){

el.removeClass('btn-success',500);

el.addClass('btn-default',500);

$('.n_count').html(n_count - 1);

}

if(html == '2'){

el.removeClass('btn-default',500);

el.addClass('btn-success',500);

$('.n_count').html(n_count + 1);

$('.n_count').css('display', 'inline');

}

 

}

});
event.preventDefault();

});
</script>

чтобы помимо кнопок еще был 1 класс например note2 это для самого дива с объявлением

например этому классу присваивалось display: none тогда он исчезнет , но как дописать не затрагивая самих кнопок чтобы и кнопки работали и вместе с событием кнопки

if(html == '1'){

el.removeClass('btn-success',500);

el.addClass('btn-default',500);

$('.n_count').html(n_count - 1);

}

например блоку с класом note2 присваивалось display: none

я просто теоритический понял но незнаю как написать это
и вообще я правильно делаю и понимаю ?

SERblY, на элемент можно повесить более одного обработчика событий.

$('.notepad').click(function(event){
	event.preventDefault();
	var id=$(this).attr("data-id"),
		el = $(this),
		n_count = $('.n_count').html();
		
	$.ajax({
		type: "GET",
		url: TPL_PATH + "fav/",
		cache: false,
		data: "id="+id,
		success: function(html){
			n_count = parseInt(n_count);
			if(html == 1){
				el.removeClass('btn-success',500).addClass('btn-default',500);
				$('.n_count').html(n_count - 1);
			}else if(html == 2){
				el.removeClass('btn-default',500).addClass('btn-success',500);
				$('.n_count').html(n_count + 1).css('display', 'inline');
			}
		}
	});
}).click(function(){//По клику на элемент с классом .notepad
	$('.note2').fadeOut(500,function(){//Элемент с классом .note2 плавно сменит display на none
		$(this).remove();//После того, как он исчезнет, он будет удален
	});
});

PS. Какого стиля кода придерживаться - личное решение каждого, но, по-моему, лучше не делать после каждой строки отступ. Маленькие скриптики еще безобидно смотрятся, однако когда открываешь файл на 400+ строк, работать с ним дико сложно. Это все имхо.

Спасибо вы очень помогайте, но при клике исчезают все объявления как то по айди мб можно привязать, помогите плз, проблема почти решена, вот кнопки она по айди добавляют и снимают с блокнота, но у объявления класс note2 и они все удаляются исчезают, хотя на счетчике видно что удалилось только одно и если перезагрузиться траничку то появятся остальные, но если опять одно из них удалить то опять все исчезают, как то решаемо это, всю головушку уже сломал

Nexus,
подскажи плиз, пости решил задачу