[Jscript] Bevestigings script werkt niet in FF

[m33p]

Ik heb onderstaand stukje code wat in IE perfect werkt, maar in FireFox niet. Ik denk alleen niet dat het probleem in onderstaand stuk code zit, maar in de onchange die ik gebruik. Ik heb in mn HTMl een formulier met daarin een select lijst met een aantal options. Op die select zelf heb ik een onchange="cAction()". Zodra ik daar bijvoorbeeld onchange="alert('test'); cAction()" van maak krijg ik geen alert in firefox. Iemand enig idee waar het aan kan liggen? Ik ben geen javascripter en online kan ik hier weinig over vinden, en wat ik heb kunnen vinden lijkt er niet echt op (wat betreft JS en FireFox problemen)

JavaScript:

function cAction()
{
    var host = document.getElementById('host').value;
    var action = document.getElementById('action').value;
    var cMessage = 'Are you sure you want to '+action+' the host \'' +host+ '\'?';

    if (action != '')
    {
        if ( confirm( cMessage ) )
        {
            window.location.replace('?host='+host+'&action='+action+'&confirmed=true');
        }
        else
        {
            document.getElementById('action').selectedIndex = 0;
        }
    }
}

Alvast bedankt!

[NMe]

* NMe geeft m33p een retourtje naar Waar hoort mijn topic? en dit topic een enkele reis naar Webdesign, Markup & Clientside Scripting.

PRG>>WEB

[André]

En wat als je van de onchange een onclick maakt?

[m33p]

zodra ik dan de list uitklap krijg ik al een melding wat ook niet de bedoeling is

excuus voor posten in verkeerde board.. zit hier al tijdje en wist waar ie hoorde maar niet goed opgelet.

[m33p]

De code waar het om gaat:

PHP:

$bTPL .= "<tr onmouseover=\"this.className='hover'\" onmouseout=\"this.className=''\" onmousedown=\"this.className='down'\">";
$bTPL .= "<td><input type=\"checkbox\" name=\"delid[]\" id=\"delid[]\" value=\"" . $host['hostID'] . "\" /></td>";
$bTPL .= "<td onclick=\"window.location.href='?host=" . urlencode($host['hostname']) . "'\">" . $host['hostID'] . "</td>";
$bTPL .= "<td onclick=\"window.location.href='?host=" . urlencode($host['hostname']) . "'\"><b>" . gethostbyname($host['hostname']) . "</b></td>";
$bTPL .= "<td onclick=\"window.location.href='?host=" . urlencode($host['hostname']) . "'\">" . $host['hostname'] . "</td>";

if (online($host['hostname'], 3389))
        $bTPL .= "<td onclick=\"window.location.href='?host=" . urlencode($host['hostname']) . "'\">[img]\"images/icons/host_online.gif\">[/img]";
else
        $bTPL .= "<td onclick=\"window.location.href='?host=" . urlencode($host['hostname']) . "'\">[img]\"images/icons/host_down.gif\">[/img]";

$bTPL .= "<form action=\"\" method=\"POST\" name=\"actionForm\">";
$bTPL .= "<td style=\"vertical-align: middle\">
                <select style=\"width: 160px; margin-right: 15px\" name=\"action\" onchange=\"cAction();\">
                        <option value=\"\" selected></option>
                        <optgroup tabindex=1 label=\"System\">
                        <option value=\"shutdown\">Shutdown now!</option>
                        <option value=\"shutdown-delayed\">Delayed shutdown</option>
                        <option value=\"\" disabled></option>
                        <option value=\"restart\">Restart now!</option>
                        <option value=\"restart-delayed\">Delayed restart</option>
                </select>
        </td>";
$bTPL .= "<input type=\"hidden\" name=\"host\" value=\"" . urlencode($host['hostname']) . "\">";
$bTPL .= "</form>";
$bTPL .= "</tr>";

Het gaat om regel 14, maar mogelijk heeft regel 1 er ook wat mee te doen?

Overigens hoef ik geen commentaar over de PHP code, ik weet dat het niet netjes is, ik ben aan het experimenteren, vandaar

[ Voor 27% gewijzigd door m33p op 09-03-2006 16:27 ]

[André]

Kun je ook de gegenereerde code laten zien

[m33p]

De output van bovenstaand

HTML:

<tr onmouseover="this.className='hover'" onmouseout="this.className=''" onmousedown="this.className='down'">
    <td>
        <input type="checkbox" name="delid[]" id="delid[]" value="3" />
    </td>
    <td onclick="window.location.href='?host=crm30-eurosoft'">3</td>
    <td onclick="window.location.href='?host=crm30-eurosoft'"><b>xxxxxx</b></td>
    <td onclick="window.location.href='?host=crm30-eurosoft'">crm30-eurosoft</td>
    <td onclick="window.location.href='?host=crm30-eurosoft'">[img]"images/icons/host_online.gif">[/img]
    <form action="" method="POST" name="actionForm">
        <td style="vertical-align: middle">
            <select style="width: 160px; margin-right: 15px" name="action" onchange="cAction();">
                <option value="" selected></option>
                <optgroup tabindex=1 label="System">
                <option value="shutdown">Shutdown now!</option>
                <option value="shutdown-delayed">Delayed shutdown</option>
                <option value="" disabled></option>
                <option value="restart">Restart now!</option>
                <option value="restart-delayed">Delayed restart</option>
            </select>
        </td>
        <input type="hidden" name="host" value="crm30-eurosoft">
    </form>
</tr>

[crisp]

JavaScript:

document.getElementById('host')
document.getElementById('action')

Ik zie geen element met id="action" of id="host", alleen met name="action" en name="host". Daarbij kan je denk ik beter de referentie naar je select gewoon middels het 'this' keyword meegeven.
Verder is je nesting van je HTML verkeerd; een form-element mag niet tussen td's worden genest (sterker nog: je hebt in deze toepassing niet eens een form-element nodig).
Verder is het netter om de value van een selected option middels de options-collection uit te vragen:

JavaScript:

var selectValue = select.options[select.selectedIndex].value;

[ Voor 18% gewijzigd door crisp op 09-03-2006 17:00 ]

[m33p]

Maar als ik het via select.options op wil halen moet ik wel form tags gebruiken als ik het goed begrijp? Anders is select niet gedefineerd (krijg ik te zien). Ik kom er nog niet helemaal uit. Ik heb 'name' naar 'id' veranderd, die had ik zelf ook kunnen zien maar na lang prutsen vallen zulke dingen soms niet eens meer op. Ook heb ik de form tags maar weg gehaald, maar het werkt niet. Ik krijg dus dat select niet gedefineerd is...

[crisp]

Als ik je optgroup netjes afsluit en het tabindex attribuut dat daar niet hoort weglaat werkt dit prima in Firefox:

HTML:

<script type="text/javascript">

function cAction(actionSelect)
{
    var host = document.getElementById('host').value;
    var action = actionSelect.options[actionSelect.selectedIndex].value;
    var cMessage = 'Are you sure you want to '+action+' the host \'' +host+ '\'?';

    if (action != '')
    {
        if ( confirm( cMessage ) )
        {
            window.location.replace('?host='+host+'&action='+action+'&confirmed=true');
        }
        else
        {
            actionSelect.selectedIndex = 0;
        }
    }
}

</script>
<select id="action" onchange="cAction(this);">
    <option value="" selected></option>
    <optgroup label="System">
        <option value="shutdown">Shutdown now!</option>
        <option value="shutdown-delayed">Delayed shutdown</option>
        <option value="" disabled></option>
        <option value="restart">Restart now!</option>
        <option value="restart-delayed">Delayed restart</option>
    </optgroup>
</select>
<input type="hidden" id="host" value="crm30-eurosoft">

[m33p]

Vreemd, dan zit het probleem ergens anders. Ik heb je code (ook) rechtstreeks gekopieerd en in mijn app geplakt, en het probleem blijft. In IE werkt het perfect, maar in FF knalt de selectie terug naar index 0 (denk ik, het is weer wit na het klikken).

Zal het met het if (action != '') stukje te makken hebben? Nogmaals, ik ken zo goed als geen javascript, en ik ken geen andere manier om dit te doen in JS. Voor zover ik zo gauw kan zien bestaat er ook geen empty functie o.i.d voor JS?

Edit:
Ik heb er nu if ((action.length!=0) && (action.value!=null))van gemaakt, wat ook niet helpt...

[ Voor 13% gewijzigd door m33p op 09-03-2006 17:36 ]

[crisp]

en als je mijn code los probeert? werkt het dan wel? (hier wel namelijk)

[m33p]

Je code los werkt hier gewoon (firefox 1.5.0.1 overigens).

De output zoals ie nu is:

HTML:

<tr onmouseover="this.className='hover'" onmouseout="this.className=''" onmousedown="this.className='down'">
    <td><input type="checkbox" name="delid[]" id="delid[]" value="1" /></td>
    <td onclick="window.location.href='?host=xxxxxxxxxx'">1</td>
    <td onclick="window.location.href='?host=xxxxxxxxxx'"><b>xxxxxx</b></td>
    <td onclick="window.location.href='?host=xxxxxxxxxx'">xxxxxxxxxx</td>
    <td onclick="window.location.href='?host=xxxxxxxxxx'">[img]"images/icons/host_online.gif">[/img]
    <td>
        <select style="width: 160px; margin-right: 15px" id="action" onchange="cAction(this);">
            <option value="" selected></option>
            <optgroup label="System">
                <option value="shutdown">Shutdown now!</option>
                <option value="shutdown-delayed">Delayed shutdown</option>
                <option value="" disabled></option>
                <option value="restart">Restart now!</option>
                <option value="restart-delayed">Delayed restart</option>
            </optgroup>
        </select>
    </td>
    <input type="hidden" id="host" value="xxxxxxxxxx">
</tr>

Het stuk javascript is van jou overgenomen. Volgens mij zie ik niks over het hoofd wat betreft de aanpassingen in de HTML wel?

Het heeft overigens ook niets te maken met de onmousedown in de tablerow, dat heb ik al getest.

[ Voor 49% gewijzigd door m33p op 09-03-2006 17:46 ]

[m33p]

Vraag me niet waarom maar opeens werkt het. Ik had de cache van FF al leeg gegooid dus daar lag het niet aan.... ik weet niet wat het was, ik zal er nog even naar kijken en als ik het weet dan staat het hier straks. Ik ben al lang blij dat het werkt, zit er al een tijdje mee te kloten.

Ik dank u allen

[crisp]

Ik zou die hidden input gewoon na de select plaatsen; binnen tr-elements mogen alleen td of th-elements voorkomen

[m33p]

Ok dat is ook fixed. Verder heb ik in het javascriptje nog de volgende regel toegevoegd:

JavaScript:

actionSelect.options[0].selected = true;

zodat er na de annulering van een keuze automatisch de eerste optie (leeg) geselecteerd is.

Nogmaals bedankt.

[ Voor 4% gewijzigd door m33p op 09-03-2006 18:00 ]

[Verwijderd]

Check sowieso ff in het menu:
Extra -> JavaScript console

Had je veel tijd kunnen besparen.

[m33p]

Het JavaScript console van firefox gaf geen (fout)meldingen...

[crisp]

m33p schreef op donderdag 09 maart 2006 @ 22:24:
Het JavaScript console van firefox gaf geen (fout)meldingen...

Omdat de onchange helemaal niet getriggered werd door fouten in je markup (hoewel een non-valid attribute op een element m.i. niet zo'n uitwerking zou mogen hebben).