2014-10-10 3 views
0

Я использую grails kickstart, чтобы добавить twitter bootstrap в мое приложение, и это вызывает проблемы с библиотеками jquery. Я не могу вызывать функции на объекты DOM:twitter bootstrap + grails kickstart breaks jquery

То, что я получил:

<script> 

$(function() 
{ 
    //Loads the modal when page loads 
    $.post('${createLink(controller: 'task', action:'create')}', 
    function(data) 
    { 
     $('#AndersonModal').html(data); 
    }, "html"); 

    $('#andersonTest').click(function() 
     { 
      console.log("modal button clicked"); 
      $('#AndersonModal').modal('show'); 
     }); 
}); 
</script> 

<a id="andersonTest" href='#'>Anderson</a> 

<div id="AndersonModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"></div> 

При нажатии на ссылку она выстреливает JS, но говорит, что «модальный» не является функцией

TypeError: $(...).modal is not a function 1:129 
Empty string passed to getElementById(). bundle-bundle_bootstrap_defer.js:4 
"modal button clicked" 

Однако все работает, модальные работы, я просто не могу использовать js, чтобы они отображались ... Действительно, это происходит с любой библиотекой, которая добавляет функцию в объект DOM, например $ ('# someID '). SomeFunction() ;. Это всегда та же ошибка:

"TypeError: $(...).someFunction is not a function" 

Кто-нибудь есть представление о том, как я могу ее решить?

плагины на мое приложение:

plugins { 
     build ":tomcat:7.0.52.1" 
     compile ":scaffolding:2.0.3" 
     compile ':cache:1.1.2' 
     compile ':spring-security-core:2.0-RC4' 
     compile ":mail:1.0.6" 
     compile ":kickstart-with-bootstrap:1.1.0" 
     compile ":rest:0.7" 
     compile ":modernizr:latest.integration" 
     compile ":uploadr:0.8.2" 
     compile ":quartz:1.0.1"//latest.integration" //1.0.1" 

     runtime ":hibernate:3.6.10.13" // or ":hibernate4:4.3.5.1" 
     runtime ":database-migration:1.4.0" 
     runtime ":jquery:1.11.0.2" 
     runtime ":resources:1.2.7" 
     runtime ':spring-security-acl:2.0-RC1' 
    } 

Edit:

Модули используются:

<g:javascript src="fastclick.js"/> 
<r:require modules="jquery"/> <%-- jQuery is required for Bootstrap! --%> 
<r:require modules="bootstrap"/> 
<r:require modules="bootstrap_utils"/> 

<r:layoutResources /> 
<g:layoutHead /> 
+0

Обычно я вижу это, когда я не загружены соответствующие ресурсы на этой странице. Если вы используете kickstart, то все необходимые вещи должны быть загружены в макет content.gsp, но, не имея возможности увидеть вашу страницу, я не могу сказать, что находится или нет. –

+1

@SteveHole, спасибо, я узнал, что это конфликт с различными версиями загружаемого jQuery. – AndersonQ

ответ

1

я узнал, что это происходит из-за конфликта, потому что более одной версии JQuery загружается. Поэтому мне нужно использовать jQuery.noConflict(), чтобы решить:

$('#andersonTest').click(function() 
    { 
     $2 = jQuery.noConflict(true); 
     console.log("modal button clicked"); 
     $2('#AndersonModal').modal('show'); 
    }); 
Смежные вопросы