setar texto do carousel para o modal
28/07/2015
0
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
Post mais votado
29/07/2015
Ao clicar no título ele faz alguma busca no banco de dados? Se sim, poste esse método também.
Randrade
Mais Posts
29/07/2015
Williame Figueiredo
<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 !
29/07/2015
Randrade
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.
29/07/2015
Williame Figueiredo
29/07/2015
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.
29/07/2015
Williame Figueiredo
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!
25/10/2015
Daniel
<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
Clique aqui para fazer login e interagir na Comunidade :)