[Firefox] Compatibility problemen

Pagina: 1
Acties:

  • turkosh
  • Registratie: December 2003
  • Laatst online: 26-04-2025
Hoi,

Wij zijn bezig om een systeem op te zetten dat gebruik maakt van op struts gebaseerde browser GUI. Dus veel jsp pagina's e.d.
Nu wordt al het testen en bekijken op IE gedaan. En natuurlijk is IE niet compatible met firafox qua pagina "rendering". Dus stuitten wij op een probleem in firefox.
Wij maken gebruik van javascript in de jsp om waardes van 'next' en 'perivious' buttons toe te kennen aan een verborgen button. Die button wordt door de struts actionform bean gelezen en doorgegeven aan de struts action bean. Daarna rolt het balletje verder en komen wij op de volgende "pagina".
Dit is wat er in de jsp zoal staat:
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<%@ taglib uri="/tags/struts-html" prefix="html"%>
<%@ taglib uri="/tags/struts-bean" prefix="bean"%>
<%@ taglib uri="/tags/struts-logic" prefix="logic"%>

<script type="text/javascript">_page.startPage("2")</script>
<html:form action="submitFamilyBrowseForm">
  <meta name="description" content="" />
  <meta name="keywords" content="" />
  <meta name="owner" content="" />
  <meta name="datemodified" content="" />
  <meta name="dateexpired" content="" />
  <link rel="stylesheet" href="css/style.css" type="text/css" />
  <script src="js/lib.js" type="text/javascript"></script>
  <script src="site_data" type="text/javascript"></script>

<script language="javascript" type="text/javascript">
  function setEvent(a_Event)
  {
     window.location.href="loadEquipmentBrowseForm.do?eqpManufacturerName=" + a_Event;
  }
  function setPrevious()
  {
     document.familyBrowseForm.button.value = 'previous';
  }
  function setNext()
  {
     document.familyBrowseForm.button.value = 'next';
  }
  function setSearch()
  {
     document.familyBrowseForm.button.value = 'search';
  }
</script>  
  <input value="" type="hidden" name="button" />
  <br>
  <h1>Select Equipment Family</h1>
  <table border="0">
     <td style="width: 150px;">
         <A href="#"  tabindex="18" onclick="setSearch();">
            <input type="image" img src="images/but_viewresults.gif" border="0" />
         </A>
     </td>
   </table>
  

  <table border="0">
    <tr bgcolor="#bbbbbb">
      <th width="25px"> &nbsp </th>
      <th width="100px">Manufacturer</th>
      <th width="100px">Model Name</th>
      <th width="100px">Machine Type</th>
      <th width="25px"> &nbsp </th>       
    </tr>
  </table>

  <div style="overflow: auto; width: 400px; height: 200px; padding: 0px; margin: 0px;">
  <table border="0" scrollbar="true">
    
    <logic:iterate id="lineItem" 
                   indexId="index"
                   name="familyBrowseForm" 
                   property="eqpFamilyList">  
      <tr bgcolor=#eeeeee>
        
          <%
            String sLineItem = "eqpFamily[" + index + "]";  
            String nest = sLineItem + ".eqpFamily.";        
            String checked = sLineItem + ".checked";       
            
            String eqpManufacturerName = sLineItem + ".eqpManufacturerName";
            String eqpModelName = sLineItem + ".eqpModelName";
            String machineType = nest + "machineType";
          %>
        
        <td width="25px"> 
         <html:checkbox property="<%=checked%>" style="width: 25px;"/>
        </td>
        
        <td width="100px">
          <A href="#" onClick="javascript:setEvent('<bean:write name="familyBrowseForm" property="<%=eqpManufacturerName%>"/>');">
            <bean:write name="familyBrowseForm" property="<%=eqpManufacturerName%>"/>
        </td>  
        <td width="100px">
          <bean:write name="familyBrowseForm" property="<%=eqpModelName%>"/>
        </td>
        <td width="100px">
          <bean:write name="familyBrowseForm" property="<%=machineType%>"/>
        </td>
        <td width="25px">&nbsp</td>  
      </tr>  
    </logic:iterate> 
  </table>
  </div>
  <table border="0">
     <tr>
       <td width="120px">&nbsp</td>
       <td>
         <A href="#" onClick="setPrevious();">
           <input type="image" src="images/but_previous.gif" border="0"/>
         </A>
       </td>
       <td>
         <A href="#" onClick="setNext();">
           <input type="image" src="images/but_next.gif" border="0"/>
         </A>
       </td>
     </tr>
   </table>
</html:form>
    
<script type="text/javascript">_page.endPage()</script>
<a href="site_data" class="p-robots"></a>


De actionform heeft dan de getters en setter voor de attribuut button die dus de waarde 'next', 'previous' en 'search' kan hebben.
De action bean voert vervolgens de actie die erbij hoort en forward ("success").
Firefox redert de pagina goed (kleine pixel verschuivingen daargelaten), maar de functionaliteit van de buttons is niet beschikbaar. Al ik de buttons klik, gebeurt er niets. Er zijn ook geen foutmeldingen.
Heeft iemand enig idee hoe dit op te lossen is?

  • T-MOB
  • Registratie: Maart 2001
  • Laatst online: 18:23
Je moet document.location.href gebruiken voor firefox :)

Regeren is vooruitschuiven


  • RM-rf
  • Registratie: September 2000
  • Laatst online: 12:14

RM-rf

1 2 3 4 5 7 6 8 9

a, als je code plaatst, plaats dan de gegenereerde code, niet de serverside code, serverside scripting is hiervoor niet van belang...

verder, de problemen met forumlierelementen komt omdat de javascript enkel op een slordige 'ie-only' manier geschreven is:
probeer het eens met bv:
code:
1
2
3
4
function setPrevious()
  {
     document.forms["familyBrowseForm"].elements["button"].value = 'previous';
  }

Intelligente mensen zoeken in tijden van crisis naar oplossingen, Idioten zoeken dan schuldigen


Verwijderd

wat zijn dat voor vage namespaces tussen door? kan me niet voorstellen dat dat lekker werkt iig, je html is echt een ramp

[ Voor 13% gewijzigd door Verwijderd op 25-04-2005 16:07 ]


  • turkosh
  • Registratie: December 2003
  • Laatst online: 26-04-2025
excuses voor de slordigheid. Jammer genoeg kan je geen source format uitvoeren voor de jsp's in Eclipse :'(

Firefox JavaScript Console uitvoer na revisie:
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
<html>
   <head>
        <title>Factory Automation Platform (FAP)</title>
        <meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="owner" content="" />
<meta name="datemodified" content="" />
<meta name="dateexpired" content="" />
<link rel="stylesheet" href="css/style.css" type="text/css" />

<script src="js/lib.js" type="text/javascript"></script>
<script src="site_data" type="text/javascript"></script>

   </head>
   <body>

<script type="text/javascript">_page.startPage("2")</script>
<form name="familyBrowseForm" method="post" action="/FAPCoreWeb/submitFamilyBrowseForm.do">

<script language="javascript" type="text/javascript">
  function setEvent(a_Event)
  {
     window.location.href="loadEquipmentBrowseForm.do?eqpManufacturerName=" + a_Event;
  }
  function setPrevious()
  {
     document.forms["familyBrowseForm"].elements["button"].value = 'previous';
  }
  function setNext()
  {
     document.forms["familyBrowseForm"].elements["button"].value = 'next';
  }
  
</script>  
   
  <input value="" type="hidden" name="button" />

  <br>
  <h1>Select Equipment Family</h1>
  
  <table border="0">
   <tr>
     <td style="width: 25px;">&nbsp</td>
     <td>
      
      <select name="propertyManufacturerName" style="width: 100px;"><option value="ALL">ALL</option>
       <option value="APPLIED">APPLIED</option>

<option value="ASML Scanner">ASML Scanner</option>
<option value="ASML Stepper">ASML Stepper</option>
<option value="ASML_SVG">ASML_SVG</option>
<option value="ASML_TEL">ASML_TEL</option>
<option value="SVG (Rite track)">SVG (Rite track)</option>
<option value="TEL">TEL</option></select>
     </td>
     <td>
      <select name="propertyModelName" style="width: 100px;"><option value="ALL">ALL</option>

       <option value="AMAT">AMAT</option>
<option value="PAS5500">PAS5500</option>
<option value="SVG90">SVG90</option></select>
     </td>
     <td style="width: 150px;">
     <A href="#"  tabindex="18" onclick="setSearch();">
         <input type="image" img src="images/but_viewresults.gif" border="0" />
      </A>

     </td>
     <td style="width: 25px;">&nbsp</td>
   </tr>

  <table border="0">
    <tr bgcolor="#bbbbbb">
      <th width="25px"> &nbsp </th>
      <th width="100px">Manufacturer</th>

      <th width="100px">Model Name</th>
      <th width="100px">Machine Type</th>
      <th width="25px"> &nbsp </th>       
    </tr>
  </table>

  <div style="overflow: auto; width: 400px; height: 200px; padding: 0px; margin: 0px;">
  <table border="0" scrollbar="true">
      <tr bgcolor=#eeeeee>
        
       <td width="25px"> 
         <input type="checkbox" name="eqpFamily[0].checked" value="on" style="width: 25px;">
        </td>
        
        <td width="100px">
          <A href="#" onClick="javascript:setEvent('APPLIED');">
            APPLIED
        </td>  
        <td width="100px">
          AMAT
        </td>

        <td width="100px">
          CENTURA 5200
        </td>
        <td width="25px">&nbsp</td>  
      </tr>  
      
      <tr bgcolor=#eeeeee>
        
          
        
        <td width="25px"> 
         <input type="checkbox" name="eqpFamily[1].checked" value="on" style="width: 25px;">
        </td>
        
        <td width="100px">
          <A href="#" onClick="javascript:setEvent('ASML Scanner');">

            ASML Scanner
        </td>  
        <td width="100px">
          PAS5500
        </td>
        <td width="100px">
          400
        </td>
        <td width="25px">&nbsp</td>  
      </tr>  
      
      <tr bgcolor=#eeeeee>
        
          
        
        <td width="25px"> 
         <input type="checkbox" name="eqpFamily[2].checked" value="on" style="width: 25px;">

        </td>
        
        <td width="100px">
          <A href="#" onClick="javascript:setEvent('ASML Scanner');">
            ASML Scanner
        </td>  
        <td width="100px">
          PAS5500
        </td>
        <td width="100px">
          500
        </td>

        <td width="25px">&nbsp</td>  
      </tr>  
      
      <tr bgcolor=#eeeeee>
        
          
        
        <td width="25px"> 
         <input type="checkbox" name="eqpFamily[3].checked" value="on" style="width: 25px;">
        </td>
        
        <td width="100px">
          <A href="#" onClick="javascript:setEvent('ASML Scanner');">
            ASML Scanner
        </td>  
        <td width="100px">

          PAS5500
        </td>
        <td width="100px">
          700
        </td>
        <td width="25px">&nbsp</td>  
      </tr>  
      
      <tr bgcolor=#eeeeee>
        
          
        
        <td width="25px"> 
         <input type="checkbox" name="eqpFamily[4].checked" value="on" style="width: 25px;">
        </td>

        
        <td width="100px">
          <A href="#" onClick="javascript:setEvent('ASML Scanner');">
            ASML Scanner
        </td>  
        <td width="100px">
          PAS5500
        </td>
        <td width="100px">
          750
        </td>
        <td width="25px">&nbsp</td>  
      </tr>  
     
  </table>

  </div>
  <table border="0">
     <tr>
       <td width="120px">&nbsp</td>
       <td>
         <A href="#" onClick="setPrevious();">
           <input type="image" src="images/but_previous.gif" border="0"/>
         </A>
       </td>

       <td>
         <A href="#" onClick="setNext();">
           <input type="image" src="images/but_next.gif" border="0"/>
         </A>
       </td>
     </tr>
   </table>
</form>
    
<script type="text/javascript">_page.endPage()</script>

<a href="site_data" class="p-robots"></a>           
   </body>
</html>


Hier ook: het werkt wel in IE maar niet in Firefox....
Het opvallende is dat de javascript gedeelte (dus de functions) geen kleur bevat.

Verwijderd

code:
1
<script src="site_data" type="text/javascript"></script>

geen extentie?
code:
1
window.location.href="loadEquipmentBrowseForm.do?eqpManufacturerName=" + a_Event;
Je moet document.location.href gebruiken voor firefox
probeer zelf eens wat debugging te doen, ipv een hele lap code neerplempen, wat zegt de js console bijvoorbeeld?

[ Voor 27% gewijzigd door Verwijderd op 25-04-2005 16:32 ]


  • T-MOB
  • Registratie: Maart 2001
  • Laatst online: 18:23
Dat geldt blijkbaar niet meer. Vond het via google, zelf testen laat echter zien dat allebei prima gaan in FF.

Wat nog wel een interessante kan zijn is deze:
As I tested it in Firefox, I found out that <button>'s default behavior is a submit button (unlike in IE). So you have to do a return false to cancel form submission. If you're running the page locally, you need to make it an absolute path and not a relative path. But if you run it online, relative path is fine.
<button onclick="testbutton(); return false;">Find!</button>
Alhoewel je links gebruikt en geen buttons kan het zijn dat firefox linkt naar "#" ipv redirect. Zal het ff testen...

Regeren is vooruitschuiven


  • turkosh
  • Registratie: December 2003
  • Laatst online: 26-04-2025
site_data heeft inderdaad geen extensie. Die wordt gebruikt voor het opslaan van de menu structuur.

nu heb ik geen foutmeldingen meer in js console, maar de button functionaliteit werkt nog steeds niet.

Ik wil het wel debuggen, maar de software loopt in JBoss. Eclipse debug werkt in dit geval niet.

Als ik de pagina link erin plak en evaluate doe: dan krijg ik syntax error op line:1
source file: javascript: http://127.0.0.1/FAPCoreWeb/loadFamilyBrowseForm.do#
Vervolgens lege view source dus.

Ik krijg inderdaad # achter de .do wanneer ik next of previous klik

Bedankt voor alle hulp.
Ik heb inmiddels de href="#" verwijderd bij buttons en het werkt zowel op IE als op Firefox. De vraag is: is dat wel een nette oplossing?

[ Voor 13% gewijzigd door turkosh op 25-04-2005 17:00 ]


  • bartware
  • Registratie: Juni 2001
  • Laatst online: 25-03-2023

bartware

@jabber.org

Waarom niet gewoon de onclick op het INPUT element? Dan ben je van die <a href=""> af.
En volgens mij moet er nog een submit() bij om de hidden data ook te versturen:
code:
1
onclick="setNext();submit();"

Ik heb dit op een vorig project ook zo gedaan met 1 functie die ik bij alle buttons aanriep. Zodat ik in de action maar 1 parameter hoef uit te lezen.
Nu in een volgend project doe ik het met een LookupDispactchAction. Mooier IMHO en geen afhankelijkheid van javascript meer.

Heb ik me begrepen?
Cycle Vision 2020: 17-20 juli Sportpark Sloten & Wheelerplanet Spaarnwoude


  • T-MOB
  • Registratie: Maart 2001
  • Laatst online: 18:23
turkosh schreef op maandag 25 april 2005 @ 16:50:
Bedankt voor alle hulp.
Ik heb inmiddels de href="#" verwijderd bij buttons en het werkt zowel op IE als op Firefox. De vraag is: is dat wel een nette oplossing?
Het verwijderen van de href is niet echt een nette oplossing. Normaal gesproken vang je het default event af door een return false toe te voegen aan de onclick.
HTML:
1
<a href="#" onclick="function(); return false;">link</a>


Als het om navigatie op je site gaat is het helemaal netjes om in de href een pagina op te nemen die in vergelijkbare fuctionaliteit voorziet voor degenen zonder JS.

Regeren is vooruitschuiven


  • turkosh
  • Registratie: December 2003
  • Laatst online: 26-04-2025
Ik snap wat je bedoelt.

Het punt is hier dat de next en previous (en search) buttons, interne "links" zijn. Die buttons worden gebruikt om door een tabel heen te fietsen in hetzelfde pagina.

trouwens: return false; opnemen bij onClick veroorzaakt weer hetzelfde probleem - niet gebruik kunnen maken van de setNext() en setPrevious() functionaliteit.

  • T-MOB
  • Registratie: Maart 2001
  • Laatst online: 18:23
Je hebt het dus over dit stukje code?:
code:
1
2
3
         <A href="#" onClick="setNext();">
           <input type="image" src="images/but_next.gif" border="0"/>
         </A>

Dan post bartware hierboven volgens mij de juiste oplossing.
code:
1
<input type="image" src="images/but_next.gif" border="0" onclick="setNext()">

Maar volgens mij moet het ook zonder JS kunnen:
code:
1
<input type="image" src="images/but_next.gif" border="0" name="button" value="next">

Regeren is vooruitschuiven


  • turkosh
  • Registratie: December 2003
  • Laatst online: 26-04-2025
Ik heb even ermee gespeel en kwam tot de conclusie dat deze codes wel werken:
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
<td>
      <input type="image" src="images/but_previous.gif" border="0" onclick="setPrevious();"/>
</td>
<td>
      <a>
           <input type="image" src="images/but_next.gif" border="0" onclick="setNext();submit();"/>
      </a>
</td>
<td>
      <a onclick="setSearch();>
           <input type="image" src="images/but_next.gif" border="0"/>
      </a>
</td>


Ik heb voor alle 3 buttons andere implementatie dus.
Als er een href in zou staan, dan werkt die bij FF niet. En de oplossing zonder JS:
code:
1
 name="button" value="next"
werkt in beide browsers niet.

omdat het kennelijk niet uitmaakt of er submit(); wel of niet wordt opgenomen in code, neig ik naar de eerste oplossing. Wat is de functie van submit(); in dit geval?

  • T-MOB
  • Registratie: Maart 2001
  • Laatst online: 18:23
turkosh schreef op dinsdag 26 april 2005 @ 16:34:
omdat het kennelijk niet uitmaakt of er submit(); wel of niet wordt opgenomen in code, neig ik naar de eerste oplossing. Wat is de functie van submit(); in dit geval?
Dat is om het formulier te submitten. Maar aangezien een <input type="image"> standaard al het formulier opstuurt als er op geklikt wordt heb je die niet nodig.

[ Voor 4% gewijzigd door T-MOB op 26-04-2005 16:52 ]

Regeren is vooruitschuiven

Pagina: 1