[ASP.NET/jQuery]Gridview werkt niet meer na accordion.

[Haan]

Sinds kort ben ik bezig om jQuery te ontdekken en nu loop ik tegen het eerste probleem aan. Ik heb een simpel formuliertje waar je een aantal velden in kan vullen om iets te zoeken. Na het klikken op de zoek knop vouwt het gedeelte met de zoekvelden in en wordt een GridView met resultaten getoond. Dat doe ik nu met de [urlhttp://docs.jquery.com/UI/Accordion]accordion[/] functionaliteit in jQuery en werkt prima:

JavaScript:

    $(document).ready(function()
    {
        $("#accordion").accordion({            
            autoheight: false            
    });
});
    

Het probleem is nu, dat met het accordion script de GridView niet meer werkt, beter gezegd, het javascript waarmee de grid werkt, doet het niet meer. Ik kan dus geen rijen meer selecteren, of naar een volgende pagina gaan.
Als ik bovenstaande code weghaal, werkt het grid wel weer normaal.

[R4gnax]

Haan schreef op woensdag 07 oktober 2009 @ 14:01:
Sinds kort ben ik bezig om jQuery te ontdekken en nu loop ik tegen het eerste probleem aan. Ik heb een simpel formuliertje waar je een aantal velden in kan vullen om iets te zoeken. Na het klikken op de zoek knop vouwt het gedeelte met de zoekvelden in en wordt een GridView met resultaten getoond. Dat doe ik nu met de [urlhttp://docs.jquery.com/UI/Accordion]accordion[/] functionaliteit in jQuery en werkt prima:

JavaScript:

    $(document).ready(function()
    {
        $("#accordion").accordion({            
            autoheight: false            
    });
});
    

Het probleem is nu, dat met het accordion script de GridView niet meer werkt, beter gezegd, het javascript waarmee de grid werkt, doet het niet meer. Ik kan dus geen rijen meer selecteren, of naar een volgende pagina gaan.
Als ik bovenstaande code weghaal, werkt het grid wel weer normaal.

'Hij doet het niet' hebben we weinig aan. Heb je al eens gekeken of je error meldingen in je javascript krijgt? Of heb je met Firebug oid al breakpoints in events gezet om te kijken of event handlers wel uitgevoerd worden maar het ergens anders fout gaat?

[Haan]

'Hij doet het niet' is anders exact wat de fout is, de grid reageert gewoon niet meer op kliks die normaal gesproken volgens mij met javascript afgehandeld worden (ik ben niet zo bekend met de precieze interne werking van ASP.NET)

Ik ben er overigens achter dat het niet zozeer met het grid te maken heeft, maar ook bijv. een testje met een button op disabled zetten in het onclick event werkt niet. Er worden dus blijkbaar geen events meer gefired vanaf controls. Met de ingebouwde debugger van IE8 krijg ik verder geen foutmeldingen ofzo.

Edit: nog specifieker: Controls die in het zoekgedeelte staan werken wel, controls in het resultaten gedeelte werken niet.

[ Voor 10% gewijzigd door Haan op 07-10-2009 16:52 ]

[BasieP]

Haan schreef op woensdag 07 oktober 2009 @ 16:45:
'Hij doet het niet' is anders exact wat de fout is, de grid reageert gewoon niet meer op kliks die normaal gesproken volgens mij met javascript afgehandeld worden (ik ben niet zo bekend met de precieze interne werking van ASP.NET)

Ik ben er overigens achter dat het niet zozeer met het grid te maken heeft, maar ook bijv. een testje met een button op disabled zetten in het onclick event werkt niet. Er worden dus blijkbaar geen events meer gefired vanaf controls. Met de ingebouwde debugger van IE8 krijg ik verder geen foutmeldingen ofzo.

en wat zegt firebug? of de javascript console van firefox?
Verder denk ik dat dit een bug is in die JQuery code, en dat asp.net daar de dupe van wordt.
probeer eens een testcase te bouwen met alleen JQuery in een statische pagina (dus gewoon html) en gebruik dan ook eens #accordion.

[R4gnax]

BasieP schreef op woensdag 07 oktober 2009 @ 16:52:
[...]

Verder denk ik dat dit een bug is in die JQuery code, en dat asp.net daar de dupe van wordt.

Eerder andersom. Microsoft's bestaande clientside javascript voor asp.net is namelijk één grote bende waar je wanneer mogelijk niet afhankelijk van wilt zijn.

Deze simpele jQuery UI Accordion testcase werkt in elk geval gewoon:

HTML:

<div id="accordion">
    <div>
        <h3><a href="#">First</a></h3>
        <div><input type='button' value='First' /></div>
    </div>
    <div>
        <h3><a href="#">Second</a></h3>
        <div><input type='button' value='Second' /></div>
    </div>
    <div>
        <h3><a href="#">Third</a></h3>
        <div><input type='button' value='Third' /></div>
    </div>
</div>

JavaScript:

$(document).ready(function(){

    $("#accordion")
        .accordion({header: "h3" })
        .find("input")
            .bind("click", function(event){
                alert($(this).val());               
            }); 
});

De buttons gooien gewoon correct een messagebox met de waarde v/d button omhoog.

[ Voor 3% gewijzigd door R4gnax op 07-10-2009 18:42 ]

[Haan]

BasieP schreef op woensdag 07 oktober 2009 @ 16:52:
[...]

en wat zegt firebug? of de javascript console van firefox?
Verder denk ik dat dit een bug is in die JQuery code, en dat asp.net daar de dupe van wordt.
probeer eens een testcase te bouwen met alleen JQuery in een statische pagina (dus gewoon html) en gebruik dan ook eens #accordion.

Het was inderdaad een fout in de opmaak van de html. Het was door alle andere elementen op de pagina niet goed meer te zien dat de structuur die nodig is voor de accordion niet helemaal klopte.

Alleen nu is het rare dat in IE8 de anchor van m'n onderste section niet netjes onder de bovenste section valt zoals het hoort, maar deze blijft bovenin de bovenste section zweven.. In FireFox gaat dat wel goed.