Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 14.09.2017, 18:14
Аспирант
Отправить личное сообщение для SERblY Посмотреть профиль Найти все сообщения от SERblY
 
Регистрация: 10.03.2014
Сообщений: 87

помогите настроить модальное окно на подгрузку данных через 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 -->


Как сделать подскажите новичку первый раз задача такая встала чето не вкурю как сделать! Спасибо Всем за ранее!
Ответить с цитированием
  #2 (permalink)  
Старый 14.09.2017, 21:48
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,726

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>
Ответить с цитированием
  #3 (permalink)  
Старый 15.09.2017, 11:48
Аспирант
Отправить личное сообщение для SERblY Посмотреть профиль Найти все сообщения от SERblY
 
Регистрация: 10.03.2014
Сообщений: 87

Сообщение от Nexus Посмотреть сообщение
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>
вызов модальника срабатывает только один раз, закроешь, окно больше не вызывается и внутри кнопочки которые внутри блокнота ()контента который подгружается не работает нечего
Ответить с цитированием
  #4 (permalink)  
Старый 15.09.2017, 11:55
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,726

Сообщение от SERblY
вызов модальника срабатывает только один раз
В строке 37 «$t» замени на «$('#show_notepad')».
С остальным сам разбирайся, либо в раздел "работа".
Ответить с цитированием
  #5 (permalink)  
Старый 15.09.2017, 16:55
Аспирант
Отправить личное сообщение для SERblY Посмотреть профиль Найти все сообщения от SERblY
 
Регистрация: 10.03.2014
Сообщений: 87

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

<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

я просто теоритический понял но незнаю как написать это
и вообще я правильно делаю и понимаю ?
Ответить с цитированием
  #6 (permalink)  
Старый 16.09.2017, 11:25
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,726

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+ строк, работать с ним дико сложно. Это все имхо.
Ответить с цитированием
  #7 (permalink)  
Старый 16.09.2017, 13:20
Аспирант
Отправить личное сообщение для SERblY Посмотреть профиль Найти все сообщения от SERblY
 
Регистрация: 10.03.2014
Сообщений: 87

Спасибо вы очень помогайте, но при клике исчезают все объявления как то по айди мб можно привязать, помогите плз, проблема почти решена, вот кнопки она по айди добавляют и снимают с блокнота, но у объявления класс note2 и они все удаляются исчезают, хотя на счетчике видно что удалилось только одно и если перезагрузиться траничку то появятся остальные, но если опять одно из них удалить то опять все исчезают, как то решаемо это, всю головушку уже сломал
Ответить с цитированием
  #8 (permalink)  
Старый 16.09.2017, 18:10
Аспирант
Отправить личное сообщение для SERblY Посмотреть профиль Найти все сообщения от SERblY
 
Регистрация: 10.03.2014
Сообщений: 87

Nexus,
подскажи плиз, пости решил задачу
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Вывод информации в модальное окно frack Общие вопросы Javascript 2 04.08.2016 11:46
Помогите с отправкой данных методом POST с помощью AJAX Teneroy AJAX и COMET 6 01.01.2016 13:41
кеширование HTML переданого через ajax BorisBritva jQuery 6 02.04.2011 01:23
Как вывести возвращаемое функцией значение не через модальное окно? Bandicoot Общие вопросы Javascript 1 10.03.2011 18:34
Просмотр передаваемых данных через AJAX Гость AJAX и COMET 3 04.08.2008 14:34