Фонд 6 Раскрыть Аякс не работает

Я пытаюсь создать реальную модальную основу 6 и Ajac, но не работает. Я следовал официальному руководству

HTML страницы

<!DOCTYPE html><html lang="it">
<head>
 <title>Avvisi</title>
 <link href="http://ci.dev/assets/css/foundation.min.css" rel="stylesheet" type="text/css" />
<script src="http://ci.dev/assets/js/vendor/jquery.min.js" type="text/javascript">
</script><script src="http://ci.dev/assets/js/foundation.min.js" type="text/javascript"></script><script src="http://ci.dev/assets/js/foundation.reveal.js" type="text/javascript"></script><link href="http://ci.dev/assets/css/reveal.css" rel="stylesheet" type="text/css" /><link href="http://ci.dev/assets/css/motion-ui.css" rel="stylesheet" type="text/css" /><script src="http://ci.dev/assets/js/vendor/what-input.min.js" type="text/javascript"></script><script src="http://ci.dev/assets/js/vendor/motion-ui.js" type="text/javascript"></script></head>
<body>
<h2>Title</h2><p>Message</p>
<span><a href='http://ci.dev/AR-PIB/warn/edit_v/160/284'>Edit</a></span><span id='160|284'><a class='big-link' href='#' data-reveal-id='myModal' data-animation='fade'>Delete</a></span></div><hr/>
<script type="text/javascript">jQuery(document).ready(function() {
 jQuery('.big-link').click(function(){
 var dati = jQuery(this).parent().attr('id');
 var $modal = $('#modal');
 alert($modal)
 $.ajax({'http://ci.dev/AR-PIB/Warn/delete'})
 .done(function(resp){
 alert(resp);
 jQuery('body').append(resp); 
 $modal.html(resp.html).foundation('open');
 conaole.log(resp);
  });
 });
});
</script>
<script src="http://ci.dev/assets/js/app.js" type="text/javascript"></script></body></html>

Источник

4 ответа

Я не уверен, почему он не работает именно так, как я не могу запустить ваш код (ссылки http://ci.dev/... кажется локальным для вашей машины), но может быть одним из следующих:

  • У вас есть близко div но не открыто
  • Вы пытаетесь использовать Foundation JS ($modal.html(resp.html).foundation('open'); и т. д.) до инициализации Foundation (если в app.js, согласно вашему комментарию, это после кода Reveal)
  • foundation.min.js (если вы не создали уменьшенную версию) включает в себя как пользовательский интерфейс движения, так и раскрытие, поэтому вам не нужно добавлять каждый файл JS
  • Вы скучаете по ; после alert($modal)
  • Я думаю ты имеешь ввиду console.log(resp); скорее, чем conaole.log(resp);
  • Вы ссылаетесь на элемент $('#modal') но на странице нет элемента с идентификатором modal (ваша ссылка также имеет data-reveal-id='myModal')
Источник

Я создал пустой div с id = "modal" и исправил JS:

     jQuery('.big-link').click(function(){
     var dati = jQuery(this).parent().attr('id');
     var $modal = $('#modal');
     $.ajax('http://ci.dev/AR-PIB/Warn/delete')
     .done(function(resp){
    var $modal = $('#modal');
    alert($modal);
    $($modal).html(resp).foundation('open');
    jQuery('#Mymodal').css('display', 'block');
    jQuery('#Mymodal').css('visibility', 'visible');
    console.log(resp);
    });
    });
    });

Если я не введу свойство css, видимость на раскрытии и показе будет скрыта

Источник

Согласно Документам Фонда:

http://foundation.zurb.com/sites/docs/javascript.html

Просто добавьте Foundation.reInit('abide'); и это должно сработать прямо сейчас!

Источник

Я нашел решение, которое работает с Zurb Foundation 6.3.2, как описано в https://foundation.zurb.com/sites/docs/javascript.html

в функции Ajax Done:

var $modalContent = new Foundation.Reveal($('#modalContent'));
$modalContent.open();
Источник
Другие вопросы по тегам