Category: [JS] Dúvidas e Problemas


Adicionar evento "onclick" a um botão dentro de um Repeater (em codebehind c#)

Boas, antes de mais: good to be back!

Tenho aqui um problema do meu site pessoal que já ando a tentar resolver há uma semana. Involve javascript e C#!

NOTA: Para verem a situação pelos vossos próprios olhos, vão ao meu site -> No tem permisso para visualizar links. Registar ou Login

Problema: Como diz o texto do tópico, tenho um repeater na minha masterpage que serve para apresentar noticias/updates. Esta informação vem da BD por um DataSet. Tentei fazer uma funcionalidade do tipo "Mostrar mais texto/Mostrar menos texto" para controlar quanto de cada noticia/update mostro para cada registo (neste caso são no máximo 120 caracteres). Para isso, adicionei junto à label (que mostra a noticia) dentro do repeater um elemento do tipo button, em que quando carrego, deve mostrar mais ou menos dessa noticia.

[Código Javascript]
Código: No tem permisso para visualizar links. Registar ou Login
function toggle(lblID,buttonID,noticia) {
var lID = lblID;
var bID = buttonID;
var str = "Ler mais...";
var texto = noticia;
var tempstring = "";
var arraychars = new Array();
var auxarray = texto.split('-');
var i = 0;
var j = 0;

if (document.getElementById(bID).value == "Ler mais...") {
str = "Ler menos...";

for (i = 0; i < 10; i++) {
if (i < auxarray.length)
arraychars[i] = auxarray[i].length;
}

tempstring = "<ul>";

for (j = 0; j < auxarray.length; j++) {
tempstring = tempstring + "<li>" + auxarray[j] + "</li>";
}
}
else {
var charcount = 0;

for (i = 0; i < 10; i++) {
if (i < auxarray.length)
arraychars[i] = auxarray[i].length;
}

tempstring = "<ul>";

for (j = 0; j < auxarray.length; j++) {
charcount += arraychars[j];

if (charcount <= 120)
tempstring += "<li>" + auxarray[j] + "</li>";
else
break;
}
}

tempstring = tempstring + "</ul>";

document.getElementById(bID).value = str;
document.getElementById(lID).innerHTML = tempstring;
}

[Código Repeater]
Código: No tem permisso para visualizar links. Registar ou Login
<asp:Repeater ID="Repeater1" runat="server">
<ItemTemplate>
<tr>
<td align="left">
<%#DataBinder.Eval(Container.DataItem, "titulo").ToString()%> - <%#DateTime.Parse(DataBinder.Eval(Container.DataItem, "datanoticia").ToString()).ToString("dd-MM-yyyy")%>
</td>
</tr>
<tr>
<td align="left">
<asp:Label ID="lbNewsUL" runat="server" Text=""></asp:Label>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input id="showhide" class="showhide" type="button" visible="false" runat="server" />
<asp:Label ID="HiddenID" runat="server" Visible="false" Text='<%#DataBinder.Eval(Container.DataItem, "id").ToString()%>'></asp:Label>
</td>
</tr>
</ItemTemplate>
</asp:Repeater>

[Código C#]
Código: No tem permisso para visualizar links. Registar ou Login
void Repeater1_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
{
Label lbl = (Label)e.Item.FindControl("HiddenID");

if (lbl != null)
{
Label news = (Label)e.Item.FindControl("lbNewsUL");

if (news != null)
{
DataSet noticia = Noticia.ListaNoticiaByID(long.Parse(lbl.Text));

if (noticia != null)
{
if (noticia.Tables[0].Rows.Count > 0)
{
string texto = noticia.Tables[0].Rows[0]["descricao"].ToString().Replace("\"", "\\\"").Replace("'", "\\'");
int[] arraychars = new int[10];
string[] auxarray = new string[10];
auxarray = texto.Split('-');
int charcount = 0;

for (int i = 0; i < 10; i++)
{
if (i < auxarray.Length)
arraychars[i] = auxarray[i].Length;
}

news.Text = "<ul>";

for (int j = 0; j < auxarray.Length; j++)
{
charcount += arraychars[j];

if (charcount <= 120)
news.Text += "<li>" + auxarray[j] + "</li>";
else
break;
}

news.Text += "</ul>";

HtmlInputButton button = (HtmlInputButton)e.Item.FindControl("showhide");

button.Attributes.Add("onclick", "toggle('"+ news.ClientID + "','" + button.ClientID + "','" + texto + "');");
button.Value = "Ler mais...";
button.Visible = true;
}
}
}
}
}
}

PS: O texto é tratado tanto no ItemDataBound como na function javascript, mas isso não é o problema, é apenas o funcionamento do botão que está em causa! Aparece tudo bem (texto E botão), só que o botão não faz nada quando clicko nele! Eu já tentei este código fora do repeater, com o input de texto feito por outro botão e tendo apenas uma label para apresentar o texto final + botão "Ler Mais/Ler Menos" e funciona perfeitamente. Penso que o problema será por estar dentro do repeater mas não consigo perceber o porque de não funcionar.

PS2: Se este tópico não estiver na zona correcta, por favor movam-no ou notifiquem-me para eu mover!

Agradeço ajuda!

Cumps,
MadGatsu

Re: Adicionar um input box num form atraves de javascript…

alguem?  :)

Adicionar um input box num form atraves de javascript…

Boas pessoal.

Estou a adicionar um input box num formulário através de javascript para fazer upload de imagens.

Código: No tem permisso para visualizar links. Registar ou Login
<script language="javascript">
fields = 0;
function addInput() {
if (fields != 20) {
document.getElementById('div_imo').innerHTML  = "<input type='file' value='' name='upload[]' id='upload[]' /><br />";
fields  = 1;
} else {
document.getElementById('div_imo').innerHTML  = "<br />Only 20 upload fields allowed.";
document.form.add.disabled=true;
}
}
</script>

Depois chamo isto através de :
Código: No tem permisso para visualizar links. Registar ou Login
<div id="div_imo"></div>
<input type="button" onclick="addInput()" name="add" value="Adicionar foto" />

Ora o problema é o seguinte:
Adiciono um input box para adicionar imagem e escolho a imagem que quero sem problema.
Quando volto a clicar para adicionar mais um input box para escolher uma segunda imagem, o valor do input box anterior fica vazio.
Faz sentido pois estou a introduzir novo html no id "div_imo" e a informação que lá estava vai ao ar.

Os meus conhecimentos de javascript são... limitados! Este script agarrei num site qualquer.

Como posso contornar esta questão de modo a poder carregar mais que uma imagem ao mesmo tempo?

Espero ter-me feito entender.

Obrigado pela atenção...