setar texto do carousel para o modal

.NET

Front-end

28/07/2015

Pessoal Boa tarde, é o seguinte tenho um carousel com titulo da noticia e a descrição da noticia , neste carousel tem a descrição resumida e um botão leia mais para exibir um modal com o titulo e a descrição completa, a noticia carrega do banco e estou tentando setar a noticia para o modal através do java script, o problema é que ao setar , está exibindo apenas a primeira noticia do carousel e não ha noticia em que foi clicado, preciso exibir onde a div estiver com a class = "item active" , desde já agradeço!

segue abaixo o código do modal e do java script feito até o momento!

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>         
        <h4 class="modal-title" id="myModalLabel"></h4>
      </div>
      <div class="modal-body">
         <p id="corpo"></p>
      </div>
      <div class="modal-footer">      
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>        
      </div>
    </div>
  </div>



<script type="text/javascript">

    function titulo() {
        
     
            var noticiatitulo = document.getElementById("titulo1");
            var noticiatitulo1 = noticiatitulo.innerHTML;
            document.getElementById("myModalLabel").innerHTML = noticiatitulo1;
        
    }

    function resposta() {
        var resposta = document.getElementsByTagName("p")[2];
        var resposta1 = resposta.innerHTML;        
        document.getElementById("corpo").innerHTML = resposta1;
    }   
    
    
</script>
Williame Figueiredo

Williame Figueiredo

Curtidas 0

Melhor post

Randrade

Randrade

29/07/2015

Olá Williane, somente com essas informações fica difícil lhe ajudar. Poste sua página completa.
Ao clicar no título ele faz alguma busca no banco de dados? Se sim, poste esse método também.
GOSTEI 1

Mais Respostas

Williame Figueiredo

Williame Figueiredo

28/07/2015

alguém ?
GOSTEI 0
Williame Figueiredo

Williame Figueiredo

28/07/2015

Esse é o código do carousel

<div id="NoticiasCarousel" class="carousel slide" data-ride="carousel" style="z-index:0">
    <!-- Indicators -->
    <ol class="carousel-indicators" id="lista" runat="server">
    <asp:Repeater ID="rptLi" runat="server">

    </asp:Repeater>
    </ol>
    <div id="captionTitulo" class="carousel-inner" role="listbox" runat="server">
        <asp:Repeater ID="rptNoticias" runat="server">
            <ItemTemplate>
                <div class="item">
                    <img src="../images/reunião-de-negocios.jpg" alt="" />
                    
                        <div class="carousel-caption" style="width: 100%;">
                            <div style="margin-left:45px;width: 90%">
                            <h1 id="titulo1" runat="server">
                                <%# Eval("TituloNoticia")%></h1>
                            <p id="resposta" runat="server">
                                <%# Eval("TextoNoticia")%></p>                         
                             
                           <button type="button" CssClass="label label-warning labelNoticiaPrincipal"  data-toggle="modal" data-target="#myModal" onclick="titulo();resposta();">
                              Leia Mais                          
                           </button>               
                           </div>
                        </div>                
                </div>
            </ItemTemplate>
        </asp:Repeater>             
    </div>
</div>


Como pode ver faço a busca no banco do titulo da noticia e sua descrição, o que preciso é setar a noticia clicada no modal popup , se precisar de algo mais só falar , percebi quando fiz o debug, que as div do titulo e da descrição , ficam com o class = "item active", então o que preciso é setar o texto no modal como fiz lá em cima , sendo que apenas quando aquela div estiver com o class = "item active", desde já obrigado !
GOSTEI 0
Randrade

Randrade

28/07/2015

Eu tive um problema parecido recentemente. Onde precisava editar um dado no modal (a diferença é que você precisa apenas mostrar).
O que estava ocorrendo, é que o modal não estava dando um Refresh no conteúdo. Para sanar esse problema, eu adicionei o seguinte script em meu código:


    <script>
       //função ao clicar no botão
        $('#idBotao').click(function (e) {
            e.preventDefault();
            //Carrega o conteúdo correto para o modal
                $('#myModal')
                    .html(' ')
                    .load($(this).attr('href'))
                    .modal({ show: true, backdrop: 'static' });
        });
    </script>


Testa e me avisa se funcionou.
Caso não funcione, teste clicando primeiro na segunda noticia, assim que carregar a página, e verifique se abriu a correta, ou a primeira.
GOSTEI 1
Williame Figueiredo

Williame Figueiredo

28/07/2015

não deu certo não , mas já consegui aqui , mas muito obrigado Randrade!
GOSTEI 0
Randrade

Randrade

28/07/2015

não deu certo não , mas já consegui aqui , mas muito obrigado Randrade!


Fico feliz de ter conseguido.

Se possível, poste a solução, para se alguém que tiver o mesmo problema, possa sanar suas dúvidas.
GOSTEI 1
Williame Figueiredo

Williame Figueiredo

28/07/2015

acredito que a solução que utilizei não é a mais adequada, mas irei postar mesmo assim , para ajudar!

Código java script
<script type="text/javascript">
    function titulo() {
        var ordemDiv = $(".active").closest(".item").index();       

            var titulo = document.getElementsByTagName("h1")[ordemDiv];
            var titulo1 = titulo.innerHTML;
            document.getElementById("myModalLabel").innerHTML = titulo1;
        
    }

    function resposta() {
        var ordemDiv = $(".active").closest(".item").index();        
        var inicio = 0;
        if (ordemDiv == 2) {
            inicio = 21;
            var resposta = document.getElementsByTagName("p")[inicio];
            var resposta1 = resposta.innerHTML;
            document.getElementById("corpo").innerHTML = resposta1;
        } else if (ordemDiv == 3){
            inicio = 18;
            var resposta = document.getElementsByTagName("p")[inicio];
            var resposta1 = resposta.innerHTML;
            document.getElementById("corpo").innerHTML = resposta1;    
        }
         else {
        inicio = 12;
            var resposta = document.getElementsByTagName("p")[3 * ordemDiv + inicio];
            var resposta1 = resposta.innerHTML;
            document.getElementById("corpo").innerHTML = resposta1;
        }
    }
    
    
    
</script>



<div id="NoticiasCarousel" class="carousel slide" data-ride="carousel" style="z-index:0">
    <!-- Indicators -->
    <ol class="carousel-indicators" id="lista" runat="server">
    <asp:Repeater ID="rptLi" runat="server">

    </asp:Repeater>
    </ol>
    <div id="captionTitulo" class="carousel-inner" role="listbox" runat="server">
        <asp:Repeater ID="rptNoticias" runat="server">
            <ItemTemplate>
                <div class="item">
                    <img src="../images/reunião-de-negocios.jpg" alt="" />
                    
                        <div class="carousel-caption" style="width: 100%;">
                            <div style="margin-left:45px;width: 90%">
                            <h1 id="titulo1" runat="server">
                                <%# Eval("TituloNoticia")%></h1>
                            <p id="resposta" runat="server">
                                <%# Eval("TextoNoticia")%></p>                         
                             
                           <button type="button" class="btn btn-success" CssClass="label label-warning labelNoticiaPrincipal"  data-toggle="modal" data-target="#myModal" onclick="titulo();resposta();">
                              Leia Mais                          
                           </button>               
                           </div>
                        </div>                
                </div>
            </ItemTemplate>
        </asp:Repeater>             
    </div>
</div>
              
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>         
        <h4 class="modal-title" id="myModalLabel"></h4>
      </div>
      <div class="modal-body">
         <p id="corpo"></p>
      </div>
      <div class="modal-footer">      
        <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>        
      </div>
    </div>
  </div>
</div>


Aqui a descrição da noticia completa!
<asp:Repeater ID=rptResposta runat="server" DataSourceID="SqlDataSource1">
        <ItemTemplate>
        <div>
            <p id="respostaNone" runat="server">
               <%# Eval("NI_DESC_NOTICIA")%></p>
        </div>
        </ItemTemplate>
     </asp:Repeater>    
</div>


Aqui o código do modal
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>         
        <h4 class="modal-title" id="myModalLabel"></h4>
      </div>
      <div class="modal-body">
         <p id="corpo"></p>
      </div>
      <div class="modal-footer">      
        <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>        
      </div>
    </div>
  </div>
</div>


Tá ai mesmo acreditando que não é maneira mais adequada , pode ser útil para que alguém possa melhorar!
GOSTEI 0
Daniel

Daniel

28/07/2015

Oi boa tarde como que vc fez no seu campo de editar? tenho a seguinte problema tenho vários campos para ser editado..
<td rel="name">
<span>NOME PARA APARECER</span>
<input type="hidden" name="valueList[0].id" data-type="id" class="identity dynamic" value="1">
<input type="hidden" name="valueList[0].name" data-type="name" value="opt1">
</td>
<td rel="value" class="hidden"><span>VALOR PARA APARECER</span><input type="hidden" name="valueList[0].value" data-type="value" value="opt1"></td>

quando eu clico no botão editar, a opção name e value vem vazia, queria mostar pro usuario o que vai ser editado...
Tentei identificar aonde o usuario realizou o clique para capiar o texto e jogar dentro da modal mais esta dificil vc pode me ajudar
GOSTEI 0
POSTAR