[XHTML/AJAX/JS] autosubmit form

[burrug]

XHTML:

<script type="text/JavaScript">
AIM = {
 
    frame : function(c) {
 
        var n = 'f' + Math.floor(Math.random() * 99999);
        var d = document.createElement('DIV');
        d.setAttribute("id", "iframediv"); //(ID SET)//
        d.innerHTML = '<iframe style="display:none" src="about:blank" id="'+n+'" name="'+n+'" onload="AIM.loaded(\''+n+'\')"></iframe>';
        document.body.appendChild(d);
 
        var i = document.getElementById(n);
        if (c && typeof(c.onComplete) == 'function') {
            i.onComplete = c.onComplete;
        }
 
        return n;
    },
 
    form : function(f, name) {
        f.setAttribute('target', name);
    },
 
    submit : function(f, c) {
                
        AIM.form(f, AIM.frame(c));
        if (c && typeof(c.onStart) == 'function') {
            return c.onStart();
        } else {
            return true;
        }
    },
 
    loaded : function(id) {
        var i = document.getElementById(id);
        if (i.contentDocument) {
            var d = i.contentDocument;
        } else if (i.contentWindow) {
            var d = i.contentWindow.document;
        } else {
            var d = window.frames[id].document;
        }
        if (d.location.href == "about:blank") {
            return;
        }
 
        if (typeof(i.onComplete) == 'function') {
            i.onComplete(d.body.innerHTML);
        }
    }
 
}
//
// afhandelingen
//
function startCallback() {
    // make something useful before submit (onStart)
    document.getElementById('loader').innerHTML = "<img src='IMG/loading_circle.gif' alt='loading...' title='' /><span class='aanwezig'> Een ogenblik geduld a.u.b...</span>";
    return true;
}
function completeCallback(response) {
    // make something useful after (onComplete)
    document.getElementById('loader').innerHTML = "";
    document.getElementById('debresult').innerHTML = response;
    return true;
}
</script>
<form id="debzoeker" enctype="multipart/form-data" method="post" action="scripts/debiteur_result.php" onsubmit="return AIM.submit(this, {'onStart' : startCallback, 'onComplete' : completeCallback});" >
<table style="width:660px;border:0px solid;">
<tr>
<!-- //Het invulveld welke wordt gefocust bij loading -->
    <td style="width:100px;" valign="middle">Zoekcriteria</td>
    <td style="width:560px;" colspan="2">
        <input type="text" id="trefwoord" name="trefwoord" value="<?php echo trim($_SESSION['deb_trefwoord']); ?>" />
        <input class="zoekknop" type="submit" id="submit" name="submit" value="" />
    </td>
</tr>
</table>
</form>
<script type="text/JavaScript">
document.getElementById('trefwoord').focus();
if (trim(document.getElementById('trefwoord').value) != '' && document.getElementById('trefwoord').value != 'Uw zoekcriteria...') {
    document.getElementById('trefwoord').select();
    function altsubmit() {
       var form = document.forms['debzoeker'];
       form.submit;
        
    }
altsubmit();
}
</script>

Het probleem in bovenstaande code is het feit dat wanneer ik het form automatisch wil laten posten indien er automatisch een trefwoord is ingevuld aan de hand van de PHP-sessie, dit niet werkt.

Dit doe ik in de JS-functie "altsubmit();" , Waarbij ik ipv form.submit; ook de volgende combinaties heb geprobeerd;

- AIM.submit(form, {'onStart' : startCallback, 'onComplete' : completeCallback});
- document.forms['debzoeker'].elements['submit'].submit;
- form.onsubmit();

Bij de tweede combinatie doet niets het en krijg ik een syntaxfout
Bij de eerste en derde combinatie krijg ik de volgende fout in IE8;

Foutdetails webpagina

Gebruikersagent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 1.1.4322; .NET CLR 2.0.50727; .NET CLR 3.0.04506.30)
Tijdstempel: Wed, 21 Oct 2009 07:36:44 UTC


Bericht: HTML Parsing Error: Unable to modify the parent container element before the child element is closed (KB927917)
Regel: 0
Teken: 0
Code: 0
URI: http://localhost/index.php?afd=1&page=1


In firefox krijg ik geen foutmleding en wordt er wel een start gemaakt met de onStart-functie 'startCallback', maar gebeurt er verder ook niets.

Wat doe ik hier nu fout? Er is behoorlijk weinig te vinden over dit icm de foutgegevens van IE8.
Kan iemand mij verder helpen?

[Verwijderd]

function altsubmit() {
document.debzoeker.submit();
}

En verander de name en id van je submit knop naar iets wat geen "submit" is en de name van je form in "debzoeker"

Oja, had ook de trim functie weggehaald want die bestaat bij mij niet

edit:

function altsubmit() {
document.forms['debzoeker'].submit();
}

Kan ook, hoef je de name van het form niet in te stellen

[ Voor 83% gewijzigd door Verwijderd op 21-10-2009 10:11 ]

[burrug]

Bedankt voor je reply.

Ik heb het even aangepast en het form submit zich nu automatisch, dus dat werkt.
Echter worden de resultaten niet in de div geladen zoals gedefinieerd in de functie 'CompleteCallback', maar wordt een nieuwe pagina geopend met daarin de resultaten.

XHTML:

<script type="text/JavaScript"> 
AIM = { 
  
    frame : function(c) { 
  
        var n = 'f' + Math.floor(Math.random() * 99999); 
        var d = document.createElement('DIV'); 
        d.setAttribute("id", "iframediv"); //(ID SET)// 
        d.innerHTML = '<iframe style="display:none" src="about:blank" id="'+n+'" name="'+n+'" onload="AIM.loaded(\''+n+'\')"></iframe>'; 
        document.body.appendChild(d); 
  
        var i = document.getElementById(n); 
        if (c && typeof(c.onComplete) == 'function') { 
            i.onComplete = c.onComplete; 
        } 
  
        return n; 
    }, 
  
    form : function(f, name) { 
        f.setAttribute('target', name); 
    }, 
  
    submit : function(f, c) { 
                 
        AIM.form(f, AIM.frame(c)); 
        if (c && typeof(c.onStart) == 'function') { 
            return c.onStart(); 
        } else { 
            return true; 
        } 
    }, 
  
    loaded : function(id) { 
        var i = document.getElementById(id); 
        if (i.contentDocument) { 
            var d = i.contentDocument; 
        } else if (i.contentWindow) { 
            var d = i.contentWindow.document; 
        } else { 
            var d = window.frames[id].document; 
        } 
        if (d.location.href == "about:blank") { 
            return; 
        } 
  
        if (typeof(i.onComplete) == 'function') { 
            i.onComplete(d.body.innerHTML); 
        } 
    } 
  
} 
// 
// afhandelingen 
// 
function startCallback() { 
    // make something useful before submit (onStart) 
    document.getElementById('loader').innerHTML = "<img src='IMG/loading_circle.gif' alt='loading...' title='' /><span class='aanwezig'> Een ogenblik geduld a.u.b...</span>"; 
    return true; 
} 
function completeCallback(response) { 
    // make something useful after (onComplete) 
    document.getElementById('loader').innerHTML = ""; 
    document.getElementById('debresult').innerHTML = response; 
    return true; 
} 
</script> 
<form id="debzoeker" enctype="multipart/form-data" method="post" action="scripts/debiteur_result.php" onsubmit="return AIM.submit(this, {'onStart' : startCallback, 'onComplete' : completeCallback});" > 
<table style="width:660px;border:0px solid;"> 
<tr> 
<!-- //Het invulveld welke wordt gefocust bij loading --> 
    <td style="width:100px;" valign="middle">Zoekcriteria</td> 
    <td style="width:560px;" colspan="2"> 
        <input type="text" id="trefwoord" name="trefwoord" value="<?php echo trim($_SESSION['deb_trefwoord']); ?>" /> 
        <input class="zoekknop" type="submit" id="submitdeb" name="submitdeb" value="" /> 
    </td> 
</tr> 
</table> 
</form> 
<script type="text/JavaScript"> 
document.getElementById('trefwoord').focus(); 
if (trim(document.getElementById('trefwoord').value) != '' && document.getElementById('trefwoord').value != 'Uw zoekcriteria...') { 
    document.getElementById('trefwoord').select(); 
    function altsubmit() { 
              document.debzoeker.submit();  
    } 
altsubmit(); 
} 
</script>

De trim() functie heb ik in een extern .js script gedefinieerd werkt in PHP zelf ook makkelijk en zodoende heb ik die ook in JS geimplementeerd.

De name van form kan ik definieren omdat ik werk in XHTML 1.0...

[Verwijderd]

burrug schreef op woensdag 21 oktober 2009 @ 10:36:
Bedankt voor je reply.

Ik heb het even aangepast en het form submit zich nu automatisch, dus dat werkt.
Echter worden de resultaten niet in de div geladen zoals gedefinieerd in de functie 'CompleteCallback', maar wordt een nieuwe pagina geopend met daarin de resultaten.

code

De trim() functie heb ik in een extern .js script gedefinieerd werkt in PHP zelf ook makkelijk en zodoende heb ik die ook in JS geimplementeerd.

De name van form kan ik definieren omdat ik werk in XHTML 1.0...

Jah gokte al op xhtml 1.0

function altsubmit() {
var form = document.forms['debzoeker'];
AIM.submit(form, {'onStart' : startCallback, 'onComplete' : completeCallback});
}

Kan het niet echt testen verder even nu

[ Voor 5% gewijzigd door Verwijderd op 21-10-2009 10:47 ]

[Raynman]

Verwijderd schreef op woensdag 21 oktober 2009 @ 10:45:
[...]


Jah gokte al op xhtml 1.0

function altsubmit() {
AIM.submit(this, {'onStart' : startCallback, 'onComplete' : completeCallback});
}

Kan het niet echt testen verder even nu

"this" heeft toch weinig zin in een losse functie? form heeft een id, wat is er mis met document.getElementById('debzoeker') ?

Verder vind ik het een beetje vreemd om die altsubmit binnen die if te definiëren en hem dan meteen aan te roepen. Dan kun je ook gewoon direct je submit-actie binnen die if uitvoeren.

[burrug]

function altsubmit() {
var form = document.forms['debzoeker'];
AIM.submit(form, {'onStart' : startCallback, 'onComplete' : completeCallback});
}
altsubmit();

Heb ik al eens gedaan Hiermee kreeg ik ook de volgende foutmelding;

Foutdetails webpagina

Gebruikersagent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 1.1.4322; .NET CLR 2.0.50727; .NET CLR 3.0.04506.30)
Tijdstempel: Wed, 21 Oct 2009 08:56:35 UTC


Bericht: HTML Parsing Error: Unable to modify the parent container element before the child element is closed (KB927917)
Regel: 0
Teken: 0
Code: 0
URI: http://localhost/index.php?afd=1&page=1

Verder gebeurt er niets in IE8 en in firefox laat hij alleen de StartCallback functie zien zonder foutmeldingen..

[ Voor 1% gewijzigd door burrug op 21-10-2009 10:58 . Reden: typo ]

[Verwijderd]

burrug schreef op woensdag 21 oktober 2009 @ 10:57:
function altsubmit() {
var form = document.forms['debzoeker'];
AIM.submit(form, {'onStart' : startCallback, 'onComplete' : completeCallback});
}
altsubmit();

Heb ik al eens gedaan Hiermee kreeg ik ook de volgende foutmelding;

Foutdetails webpagina

Gebruikersagent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 1.1.4322; .NET CLR 2.0.50727; .NET CLR 3.0.04506.30)
Tijdstempel: Wed, 21 Oct 2009 08:56:35 UTC


Bericht: HTML Parsing Error: Unable to modify the parent container element before the child element is closed (KB927917)
Regel: 0
Teken: 0
Code: 0
URI: http://localhost/index.php?afd=1&page=1

Verder gebeurt er niets in IE8 en in firefox laat hij alleen de StartCallback functie zien zonder foutmeldingen..

Kan je de hele code nog is laten zien? Hier krijg ik geen foutmelding in IE8 en komt er wel gewoon de "een ogenblik geduld" melding te staan..

[Raynman]

Je hebt toch geen name aan je form hangen? document.forms[] werkt voor zover ik weet met die namen of met nummers, maar id's weet ik niet. Je kunt nog document.forms[0] proberen (tenzij je meer formulieren hebt uiteraard) of getElementById() maar het kan ook iets anders zijn natuurlijk, met die foutmelding kan ik ook niet veel.

Edit: waar zou het formulier nu dan eigenlijk verzonden moeten worden? Als ik zo even snel kijk geloof ik dat je dat normaal laat gebeuren door AIM.submit, die aangeroepen wordt bij een onsubmit-event gegenereerd door het klikken op de submitbutton, true terug te laten geven. Nu roep je AIM.submit zelf aan (zonder submitevent) en moet je dus zelf nog document.getElementById('debzoeker').submit() uitvoeren. (Maar ik heb het niet uitgebreid bekeken dus misschien praat ik onzin.)

[ Voor 42% gewijzigd door Raynman op 21-10-2009 11:18 ]

[burrug]

Dat klopt, maar als ik hem naast de AIM.submit functie ook zelf submit dmv form.submit();, ga ik naar een nieuwe pagina. DIt komt denk ik zelf doordat hij het form wel submit maar niet de onsubmitfunctie meeneemt. Hoe kan ik deze dus wel meenemen?

De code die ik nu heb;

XHTML:

<script type="text/JavaScript"> 
AIM = { 
  
    frame : function(c) { 
  
        var n = 'f' + Math.floor(Math.random() * 99999); 
        var d = document.createElement('DIV'); 
        d.setAttribute("id", "iframediv"); //(ID SET)// 
        d.innerHTML = '<iframe style="display:none" src="about:blank" id="'+n+'" name="'+n+'" onload="AIM.loaded(\''+n+'\')"></iframe>'; 
        document.body.appendChild(d); 
  
        var i = document.getElementById(n); 
        if (c && typeof(c.onComplete) == 'function') { 
            i.onComplete = c.onComplete; 
        } 
  
        return n; 
    }, 
  
    form : function(f, name) { 
        f.setAttribute('target', name); 
    }, 
  
    submit : function(f, c) { 
                 
        AIM.form(f, AIM.frame(c)); 
        if (c && typeof(c.onStart) == 'function') { 
            return c.onStart(); 
        } else { 
            return true; 
        } 
    }, 
  
    loaded : function(id) { 
        var i = document.getElementById(id); 
        if (i.contentDocument) { 
            var d = i.contentDocument; 
        } else if (i.contentWindow) { 
            var d = i.contentWindow.document; 
        } else { 
            var d = window.frames[id].document; 
        } 
        if (d.location.href == "about:blank") { 
            return; 
        } 
  
        if (typeof(i.onComplete) == 'function') { 
            i.onComplete(d.body.innerHTML); 
        } 
    } 
  
} 
// 
// afhandelingen 
// 
function startCallback() { 
    // make something useful before submit (onStart) 
    document.getElementById('loader').innerHTML = "<img src='IMG/loading_circle.gif' alt='loading...' title='' /><span class='aanwezig'> Een ogenblik geduld a.u.b...</span>"; 
    return true; 
} 
function completeCallback(response) { 
    // make something useful after (onComplete) 
    document.getElementById('loader').innerHTML = ""; 
    document.getElementById('debresult').innerHTML = response; 
    return true; 
} 
</script> 
<form id="debzoeker" enctype="multipart/form-data" method="post" action="scripts/debiteur_result.php" onsubmit="return AIM.submit(this, {'onStart' : startCallback, 'onComplete' : completeCallback});" > 
<div id="loader" style="position:absolute;float:left;left:400px;top:5px;border:0px;width:300px;height:20px;text-align:right;"></div>
<table style="width:660px;border:0px solid;"> 
<tr> 
<!-- //Het invulveld welke wordt gefocust bij loading --> 
    <td style="width:100px;" valign="middle">Zoekcriteria</td> 
    <td style="width:560px;" colspan="2"> 
        <input type="text" id="trefwoord" name="trefwoord" value="<?php echo trim($_SESSION['deb_trefwoord']); ?>" /> 
        <input class="zoekknop" type="submit" id="submitdeb" name="submitdeb" value="" /> 
    </td> 
</tr> 
</table> 
</form> 
<script type="text/JavaScript"> 
document.getElementById('trefwoord').focus(); 
if (trim(document.getElementById('trefwoord').value) != '' && document.getElementById('trefwoord').value != 'Uw zoekcriteria...') { 
    document.getElementById('trefwoord').select(); 
    function altsubmit() {
        var form = document.getElementById('debzoeker');
        AIM.submit(form, {'onStart' : startCallback, 'onComplete' : completeCallback});
    }
    altsubmit(); 
} 
</script>

Foutmelding;

Foutdetails webpagina

Gebruikersagent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 1.1.4322; .NET CLR 2.0.50727; .NET CLR 3.0.04506.30)
Tijdstempel: Wed, 21 Oct 2009 09:32:06 UTC


Bericht: HTML Parsing Error: Unable to modify the parent container element before the child element is closed (KB927917)
Regel: 0
Teken: 0
Code: 0
URI: http://localhost/index.php?afd=1&page=1

[ Voor 5% gewijzigd door burrug op 21-10-2009 11:37 ]

[Verwijderd]

burrug schreef op woensdag 21 oktober 2009 @ 11:33:
Dat klopt, maar als ik hem naast de AIM.submit functie ook zelf submit dmv form.submit();, ga ik naar een nieuwe pagina. DIt komt denk ik zelf doordat hij het form wel submit maar niet de onsubmitfunctie meeneemt. Hoe kan ik deze dus wel meenemen?

De code die ik nu heb;

code

Foutmelding;

Foutdetails webpagina

Gebruikersagent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 1.1.4322; .NET CLR 2.0.50727; .NET CLR 3.0.04506.30)
Tijdstempel: Wed, 21 Oct 2009 09:32:06 UTC


Bericht: HTML Parsing Error: Unable to modify the parent container element before the child element is closed (KB927917)
Regel: 0
Teken: 0
Code: 0
URI: http://localhost/index.php?afd=1&page=1

Werkt hier wel gewoon in IE8.. dus weet het ook even niet meer

[Raynman]

burrug schreef op woensdag 21 oktober 2009 @ 11:33:
Dat klopt, maar als ik hem naast de AIM.submit functie ook zelf submit dmv form.submit();, ga ik naar een nieuwe pagina. DIt komt denk ik zelf doordat hij het form wel submit maar niet de onsubmitfunctie meeneemt. Hoe kan ik deze dus wel meenemen?

Als je eerst AIM.submit uitvoert en dan submit() zou dat volgens mij niet veel moeten verschillen van wat er gebeurt na een klik op de knop. Dat hij naar een nieuwe pagina gaat, komt eerder doordat er iets misgaat met het aanpassen van de target of zo.

Maar als je nog even naar die foutmelding kijkt, zou je kunnen vermoeden dat je het automatisch submitten pas moet uitvoeren onDomReady.

[burrug]

Ik heb nu het stukje script vervangen door;

XHTML:

<script type="text/JavaScript">
document.getElementById('trefwoord').focus();
if (trim(document.getElementById('trefwoord').value) != '' && document.getElementById('trefwoord').value != 'Uw zoekcriteria...') {
    document.getElementById('trefwoord').select();
    var form = document.getElementById('debzoeker');
    form.submit(AIM.submit(form, {'onStart' : startCallback, 'onComplete' : completeCallback}));
}
</script>

Nu doet hij het perfect in Firefox, maar in IE8 krijg ik nog steeds die *&Ê$^#*E^#*!!!!-foutmelding

@Raynman;
Wat bedoel je precies met onDomReady en waar zou ik die moeten toepassen? (*googled ondertussen*)

[crisp]

Het probleem in bovenstaande code is het feit dat wanneer ik het form automatisch wil laten posten indien er automatisch een trefwoord is ingevuld aan de hand van de PHP-sessie, dit niet werkt.

Waarom laat je dan niet meteen de resultaat-pagina zien als die sessie-var is gevuld?

Anyway, je loopt tegen IE's 'operation aborted' error aan; IE kan in bepaalde gevallen geen DOM-manipulaties doen op elementen waarvan hij de end-tag van de/een parent nog niet geparsed heeft. Je zal je automatische submit dus pas uit moeten voeren als de pagina geparsed is (of in ieder geval later in de pagina dan je nu doet).

Overigens is een form met een id ook opvraagbaar als een named item in de document.forms collectie, dus dat mag geen problemen opleveren (itt een input-element name="submit" geven ).

[Verwijderd]

crisp schreef op woensdag 21 oktober 2009 @ 13:03:
[...]

Waarom laat je dan niet meteen de resultaat-pagina zien als die sessie-var is gevuld?

Anyway, je loopt tegen IE's 'operation aborted' error aan; IE kan in bepaalde gevallen geen DOM-manipulaties doen op elementen waarvan hij de end-tag van de/een parent nog niet geparsed heeft. Je zal je automatische submit dus pas uit moeten voeren als de pagina geparsed is (of in ieder geval later in de pagina dan je nu doet).

Overigens is een form met een id ook opvraagbaar als een named item in de document.forms collectie, dus dat mag geen problemen opleveren (itt een input-element name="submit" geven ).

Begon bij mij te haperen als je form.submit() gebruikte in combinatie met een input met de name submit

[burrug]

Klopt toen ik die submit id/name had veranderd kreeg ik al een verbeterde output.

Ik zal de functie proberen te laten uitvoeren in een later stadium en laat het weten