Updatepanel y javascript

[NetJava]

Buenas, tengo un problema con updatepanel y javascript. Explico un poco, tengo un updatepanel que en su interior tiene un panel que llama a una función javascript que se ocupa del diseño del scroll.
El problema está en que cuando se actualiza el updatepanel que tiene en su interior un panel y dentro de este un Accordion, el scroll no se actualiza. El Accordion es dinámico, cambia según los datos de bd.
Cuando se recarga la página por completo, no surge este problema, únicamente surge cuando se actualiza el updatepanel, que contiene el panel con la función javascript.

Código [Seleccionar] Expandir


<asp:UpdatePanel ID="UpdatePanel_room" runat="server" ChildrenAsTriggers="False" UpdateMode="Conditional" OnLoad="ms_room">
                <ContentTemplate>                 
                        <asp:Panel ID="pnl_room" runat="server" ScrollBars="Vertical" Width="150px" Height="330px" class="flexcroll">
                            <div class="lipsum">
                                <asp:Timer ID="timer_room" runat="server" OnTick="timer_room_Tick" Interval="10000" Enabled="true"></asp:Timer>
                                <!---*****************-->
                                <Ajax:Accordion ID="Accordion_room" runat="server"
                                   HeaderCssClass="Header" ContentCssClass="Contents"
                                   HeaderSelectedCssClass="SelectedHeader"
                                   Font-Names="Trebuchet MS" Font-Size="10"
                                   BorderColor="#000000" BorderStyle="Solid" BorderWidth="0"
                                   FramesPerSecond="100" FadeTransitions="true"
                                   TransitionDuration="500">
                                    <Panes>
                                    </Panes>
                                </Ajax:Accordion>
                                <!---*****************-->
                            </div>
                        </asp:Panel>
                </ContentTemplate>
            </asp:UpdatePanel>


Si sacase del updatepanel el panel con el diseño del scrollo, este tampoco se actualizaría con el nuevo tamaño del Accordion :X Qué opináis?! Yo estoy un poco en el limite de la locura.

[NetJava]

Bueno, pues estoy más o menos encaminado con el problema que tengo, pero no consigo ajustarme xD. Os comento, perimero url:


http://parametheus.wordpress.com/2011/08/27/javascript-dentro-de-un-asp-net-ajax-updatepanel/


Código en Page_Load

Código [Seleccionar] Expandir


ScriptManager.RegisterStartupScript(Me, Page.GetType, "scriptkey1", "eval();", True)


La función de javascript esta en un archivo y se carga como ya conocéis todos:

Código [Seleccionar] Expandir


<script type='text/javascript' src="../scripts/script1.js"></script>


pues algo debe estar fallando o faltando, qué os parece?

[NetJava]

Buenos, tras patearme todo google, todos los comentarios, toda la ayuda de microsoft, la solución para mi caso es la siguiente:


http://stackoverflow.com/questions/802506/cant-get-scriptmanager-registerstartupscript-in-webcontrol-nested-in-updatepane?rq=1


Particularmente el cuarto comentario:

Código [Seleccionar] Expandir


ScriptManager.RegisterClientScriptBlock(UpdatePanel1, UpdatePanel1.GetType(), "UpdatePanel1_PreRender", _
                   "<script type='text/javascript' id='UpdatePanel1_PreRender'>" & _
                   "include('yourDynamic.js');" & _
                   "removeDuplicatedScript('UpdatePanel1_PreRender');</script>" _
                   , False)


Código [Seleccionar] Expandir


// Include a javascript file inside another one.
function include(filename)
{
    var head = document.getElementsByTagName('head')[0];

    var scripts = document.getElementsByTagName('script');
    for(var x=0;x<scripts.length;>    {
        if (scripts[x].getAttribute('src'))
        {
            if(scripts[x].getAttribute('src').indexOf(filename) != -1)
            {
                head.removeChild(scripts[x]);
                break;
            }
        }
    }

    script = document.createElement('script');
    script.src = filename;
    script.type = 'text/javascript';
    head.appendChild(script)
}

// Removes duplicated scripts.
function removeDuplicatedScript(id)
{
    var count = 0;
    var head = document.getElementsByTagName('head')[0];

    var scripts = document.getElementsByTagName('script');
    var firstScript;
    for(var x=0;x<scripts.length;>    {
        if (scripts[x].getAttribute('id'))
        {
            if(scripts[x].getAttribute('id').indexOf(id) != -1)
            {
                if (count == 0)
                {
                    firstScript = scripts[x];
                    count++;
                }
                else
                {
                    head.removeChild(firstScript);
                    firstScript = scripts[x];
                    count = 1;
                }
            }
        }
    }
    clearAjaxNetJunk();
}
// Evoids the update panel auto generated scripts to grow to inifity. X-(
function clearAjaxNetJunk()
{
    var knowJunk = 'Sys.Application.add_init(function() {';
    var count = 0;
    var head = document.getElementsByTagName('head')[0];

    var scripts = document.getElementsByTagName('script');
    var firstScript;
    for(var x=0;x<scripts.length;>    {
        if (scripts[x].textContent)
        {
            if(scripts[x].textContent.indexOf(knowJunk) != -1)
            {
                if (count == 0)
                {
                    firstScript = scripts[x];
                    count++;
                }
                else
                {
                    head.removeChild(firstScript);
                    firstScript = scripts[x];
                    count = 1;
                }
            }
        }
    }
}


Un saludo a todos.

[NetJava]

No me lo puedo creer! Ahora el updatepanel no actualiza los datos del accordion xD. Aunq el javascript si. Seguiré estudiandolo.

[Novlucker]

C#
ASPX

Código (asp) [Seleccionar] Expandir

<asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="server">
    <asp:Timer runat="server" ID="ajaxTimer" Interval="5000" Enabled="true" OnTick="ajaxTimer_Tick"></asp:Timer>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
        <ContentTemplate>
            <asp:Panel ID="mainPanel" runat="server">
                <asp:Label ID="lblFecha" runat="server"></asp:Label>
            </asp:Panel>
        </ContentTemplate>
    </asp:UpdatePanel>
</asp:Content>
Codebehind

Código (csharp) [Seleccionar] Expandir

protected void ajaxTimer_Tick(object sender, EventArgs e)
{
    lblFecha.Text = DateTime.Now.ToString();
    ScriptManager.RegisterStartupScript(UpdatePanel1, UpdatePanel1.GetType(), "afterupdate", "CallAlert();", true);
}
javascript (Main.js)

Código (javascript) [Seleccionar] Expandir

function CallAlert() {
    alert(new Date());
}
ASPX donde esta el scriptmanager, en mi caso está en la master

Código (asp) [Seleccionar] Expandir

<asp:ScriptReference Path="~/Scripts/Main.js" />

Listo!

Saludos

[NetJava]

Buenas, he estado este fin de semana dandole al tema con tu ejemplo, muchas gracias, puedo garantizar que funciona, jajaja ningún problema con el C#. Sigue sin funcionar bien, creo que es por algún problema de base por haber dado ya tantas vueltas, voy a seguir a ver que es lo que pasa y luego lo pondré aquí, para no marearos más con este tema. El fallo soy yo xD.

Muchas gracias.

[NetJava]

Es imposible xD. Os pongo el código.

Código Aspx

Código [Seleccionar] Expandir


<asp:ScriptManager ID="ScriptManager1" runat="server">
            <Scripts>
                <asp:ScriptReference Path="../scripts/flexcroll.js" />
            </Scripts>
</asp:ScriptManager>


ms_room -> Cargar el Accordion desde programación.

Código [Seleccionar] Expandir


<asp:UpdatePanel ID="UpdatePanel_room" runat="server" UpdateMode="Conditional" OnLoad="ms_room" >
                <ContentTemplate>    <!-- flexcroll  OnUnload="ms_room" OnLoad="ms_room" -->             
                        <asp:Timer ID="timer_room" runat="server" OnTick="timer_room_Tick" Interval="10000" Enabled="true"></asp:Timer>
                        <asp:Panel ID="pnl_room" runat="server" ScrollBars="Vertical" Width="150px" Height="330px" class="flexcroll">           
                            <div class="lipsum">
                                <!---*****************-->
                                <Ajax:Accordion ID="Accordion_room" runat="server"
                                   HeaderCssClass="Header" ContentCssClass="Contents"
                                   HeaderSelectedCssClass="SelectedHeader"
                                   Font-Names="Trebuchet MS" Font-Size="10"
                                   BorderColor="#000000" BorderStyle="Solid" BorderWidth="0"
                                   FramesPerSecond="100" FadeTransitions="true"
                                   TransitionDuration="500" RequireOpenedPane="false">
                                    <Panes>
                                    </Panes>
                                </Ajax:Accordion>
                                <!---*****************-->
                            </div>
                        </asp:Panel>                   
                </ContentTemplate>
            </asp:UpdatePanel>


Código vb:

Código [Seleccionar] Expandir


Public Sub timer_room_Tick(ByVal sender As Object, ByVal e As System.EventArgs) Handles timer_room.Tick
        Label1.Text = DateTime.Now.ToLongTimeString()
        ScriptManager.RegisterStartupScript(UpdatePanel_room, UpdatePanel_room.GetType(), "afterupdate", "eval();", True)
    End Sub


Código javascript (flexcroll.js)

Código [Seleccionar] Expandir


eval(
    function (p, a, c, k, e, r) {
        e = function (c) {
            return (c < a ? '' : e(parseInt(c / a))) + ((c = c % a) > 35 ? String.fromCharCode(c + 29) : c.toString(36))
        };

        if (!''.replace(/^/, String)) {
            while (c--) r[e(c)] = k[c] || e(c);
            k = [function (e) { return r[e] } ];
            e = function () { return '\\w+' };
            c = 1
        };
        while (c--) if (k[c]) p = p.replace(new RegExp('\\b' + e(c) + '\\b', 'g'), k[c]); return p
    } ('D H={38:[],5O:C(){7... Simplifico código porque si no se hace muy incomodo de ver ...prototype'.split('|'), 0, {})
                )


Si pongo el Timer fuera del Updatepanel, no hay problema, pero por que actualiza la página entera, claro en mi caso que no tiene el Conten. Sigue actualizando, pero el javascript no se ejecuta. Esto parece misión imposible... Qué opináis?!

[NetJava]

Olvidaba comentar que class="flexcroll" y class = "lipsum" son para darle al Panel el diseño del scroll, que es por lo que me estoy matando. xD

[NetJava]

Buenas, pues ya esta solucionado, comprobado, verificado. La respuesta de

Código [Seleccionar] Expandir

Novlucker es correcta al 100%, para mi caso al menos, el problema de después estaba en como yo trataba el javascript de flexcroll.

http://www.hesido.com/web.php?page=customscrollbar

Un saludo y muchas gracias.

[Novlucker]

Excelente!