Why modal not showing?

Question

I want to show a modal but its not showing, and when i remove the bootstrap or class=modal it shows the info without the modal

usuarios.xhtml

 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">
                 </script>
    <script type="text/javascript" src="/js/scripts.js"></script>

        <div>
            <div class="container form-search">
                <div class="row">
                    <div class="input-field col s4">
                        <h:form id="formSearch">
                            <h:inputText value="#{searchMb.searchText}" id="save"
                                style="width: 80%;" />
                            <h:commandLink action="#{searchMb.searchUser()}"
                                styleClass="btn btn-info" value="Buscar Usuario">
                                <f:ajax render="listUsers" execute="formSearch"></f:ajax>
                            </h:commandLink>
                        </h:form>
                    </div>
                </div>
                <div>
                    <h:panelGroup layout="block" id="listUsers">
                        <h5 style="margin-bottom: 30px;">#{searchMb.updateSearchUserText()}</h5>
                        <ul class="collection">
                            <ui:repeat var="user" value="#{searchMb.getUsersSearch()}">
                                <li style="position: relative"><a
                                    href="#modalsearch#{user.id_user}"
                                    onclick="openModalSearch(#{user.id_user})" class="black-text">
                                        <img width="100" height="100" src="#{authMb.getSrcImage(user)}"
                                        alt="" /> <strong class="title">#{user.username}</strong>
                                        <p>
                                            Seguidores: #{followMb.getFollowersByUser(user)} <br />
                                        </p>
                                </a>
                                    <div style="position: absolute; right: 5%; top: 30%;">
                                        <h:form style="display:inline;margin-left:10px;">
                                            <h:commandLink action="#{followMb.crearFollower(user)}"
                                                styleClass="#{followMb.getMessageFollow(user)}">
                                                <i>#{followMb.getIfExists(user)}</i>
                                                <f:ajax render="listUsers" execute="@form"></f:ajax>
                                            </h:commandLink>
                                        </h:form>

                                    </div></li>
                                <div id="modalsearch#{user.id_user}" class="modal">
                                    <div class="modal-content">
                                        <h3>Posts de #{user.username}</h3>
                                        <div class="row">
                                            <ui:repeat var="post"
                                                value="#{createPostMb.getPostsByUser(user)}">
                                                <div >
                                                    <div>
                                                        <div>
                                                         <span>#{post.user.username}</span>
                                                        </div>
                                                        <div>
                                                            <p>#{post.content}</p>
                                                        </div>
                                                        <div>
                                                            <p>#{post.date}hs</p>
                                                        </div>
                                                    </div>
                                                </div>
                                            </ui:repeat>
                                        </div>
                                    </div>
                                </div>



                            </ui:repeat>
                        </ul>
                        <br />

                    </h:panelGroup>

scripts.js

<script>
$(document).ready(function(){
  $('.modal').modal('show');
  $(".button-collapse").sideNav();
  $('select').material_select();

});

function openModal(id) {
  $('#modal'+id).modal('open');
}

function openModalSearch(id) {
  $('#modalsearch'+id).modal('open');
}


$(function(){
  $('.form-seach form').on('keypress', function(event){
    if(event.which === 13 && $(event.target).is(':input')){
        event.preventDefault();
        $('#save').trigger('click');
    }
  });
});

</script>

When i erase the bootstrap.css the info shows. The modal never works the info yes, but only when i remove the class=modal in the

Also i dont know if it is well called, i have it in my folder \src\main\webapp\js

Answer 1

You need to load your JS libraries (jquery and bootstrap) before your own Javascript. Since you're loading you /js/scripts.js before the libraries, you're making use of things that don't technically 'exist' yet.