Sidan uppdateras inte med genererat från AJAX

[sundrik]

EDIT: Läs senaste posten nere, så är problemet med utstakat.

 

Jag listar upp en sida med 20rader.

 

Varje rad är en egen FORM där det finns tre CHECKBOX. I slutet på varje rad har jag en knapp för lägger in infon (mha AJAX) man valt med checkboxarna i dbn.

 

Detta fungerar jättebra.

 

 

Nu vill jag utveckla detta lite. När man trycker på en CHECKBOX skall det komma fram en SELECT med alternativ. Detta har jag gjort mha AJAX och fungerar bra.

 

 

Mitt problem är att jag kan inte få med valet i SELECTen när jag trycker på lägg in knappen. Jag förmodar att det är för att SELECTen inte är där när sidan laddas först, utan hamnar där med AJAX senare (lokalt).

 

Finns det någon lösning på detta?

[Jonas__B]

Om du använder jQuery kan du använda "live-metoden".

 

<script>$("select#min-select").live("change",function(){
// vad att göra när man ändrar #min-select

});</script>

 

Värt att kolla in iaf.

[sundrik]

Tack!

[sundrik]

Får väl fortsätta med denna då jag får fel i Chrome men fungerar i IE.

 

Jag har en rad med checkboxar.

Klickar jag på den, så kommer det upp en dropbox (med ajax). Allt så långt bra.

 

Sen när jag valt i dropboxen, och vill köra in detta i dbn, så har jag en knapp med onklick, som hämtar värdena från dropboxen, så jag sedan kan skicka in dom i dbn med ajax.

 

Onklicken ser ut så här:

onclick="DoCheck(document.form<%=cntX %>.TC.value,document.form<%=cntX %>.TI.value,document.form<%=cntX %>.TB.value) ; add_col(document.form<%=cntX %>.gID.value,tC,tI,tB,document.form<%=cntX %>.tDate.value, document.form<%=cntX %>.tCost.value,tCcode,tIcode,tBcode);"

 

DoCheck ser ut såhär:

function DoCheck(TC,TI,TB) 
{
   if (TC == "0"){
       tC = "2";
       tCcode = "0";
//        alert("C - "+ tCcode);
       }
   else  if (TC > "0")  {
       tC = "2";
       tCcode = TC;
//        alert("C - " + tCcode);
       }
   else {
       tC = "1";
       tCcode = "0";
//        alert("NO - " + tCcode);
       }


   if (TI == "0") {
       tI = "2";
       tIcode = "0";
//        alert("I - " + tIcode);
   }
   else if (TI > "0") {
       tI = "2";
       tIcode = TI;
//        alert("I - " + tIcode);
   }
   else  {
       tI = "1";
       tIcode = "0";
//        alert("NO - " + tIcode);
   }


   if (TB == "0") {
       tB = "2";
       tBcode = "0";
//        alert("B - " + tBcode);
   }
   else if (TB > "0") {
       tB = "2";
       tBcode = TB;
//        alert("B - " + tBcode);
   }
   else {
       tB = "1";
       tBcode = "0";
//        alert("NO - " + tBcode);
   }        


}   

Do checken gör alltså så jag kna använda värdena från dropboxen som jag tagit in med ajax.

 

Detta fungerar alltså jättebra med IE men inte med Chrome.

 

Hur löser man så det fungerar i båda?

[sundrik]

Just det. Kan väl vara bra att ha .asp sidan. samt .js och .asp för AJAX också.

 

<form method='POST' name='form<%=cntX %>' action='?'>
   <script src="includes/javascript/DoCheck.js"></script>
   <script src="includes/javascript/ajax_dropbox.js"></script>
   <script src="includes/javascript/ajax_add.js"></script>
   <tr <%IF cntRow = 2 THEN %>bgcolor="#c3c3c3"<%END IF %>
     <td width='20'><%=cntX %></td>
     <td width="*"><%=gName %></td>
     <td width="100" valign="top">
       <input type="hidden" name="cntX" value="<%=cntX %>" />
       <input type="hidden" name='gID' value='<%=gID %>' />
       <input type="hidden" name='tDate' value='<%=now() %>' />
       <input type="hidden" name='tCost' value='0' />

       <div id='divUpdate<%=cntX %>pC'>
       <input type="checkbox" name='tC_ch' onclick="Get_dropbox(<%=gID %>,'pC',<%=cntX %>)" />
       <input type="hidden" name='TC' value='' />
       </div>        
     </td>
     <td width="100" valign="top">
       <div id='divUpdate<%=cntX %>pI'>
       <input type="checkbox" name='tI_ch' onclick="Get_dropbox(<%=gID %>,'pI',<%=cntX %>)" />
       <input type="hidden" name='TI' value='' />
       </div>        
     </td>
     <td width="100" valign="top">
        <div id='divUpdate<%=cntX %>pB'>
           <input type="checkbox" name='tB_ch' onclick="Get_dropbox(<%=gID %>,'pB',<%=cntX %>)" />
           <input type="hidden" name='TB' value='' />
           </div>            
     </td>     
     <td width="40">        
       <div id='txtAdd<%=gID %>'>            
           <img src='images/add.png' height='20' <%=antID %>' onclick="DoCheck(document.form<%=cntX %>.TC.value,document.form<%=cntX %>.TI.value,document.form<%=cntX %>.TB.value) ; add_col(document.form<%=cntX %>.gID.value,tC,tI,tB,document.form<%=cntX %>.tDate.value, document.form<%=cntX %>.tCost.value,tCcode,tIcode,tBcode);" />            
       </div>
     </td>
   </tr>        
   </form>

 

 

.js för ajax:

var xmlHttp


function add_col(gID, tC, tI, tB, tDate, tCost, tCcode, tIcode, tBcode) {
   xmlHttp = new XMLHttpRequest();
   if (xmlHttp == null) {
       alert("Webläsaren klarar inte AJAX!");
       return;
   }

   var url = "/includes/ajax_add.asp";
   url = url + "?gID=" + gID + "&tC=" + tC + "&tI=" + tI + "&tB=" + tB + "&tDate=" + tDate + "&tCost=" + tCost + "&Ccode=" + tCcode + "&Icode=" + tIcode + "&Bcode=" + tBcode;
   url = url + "&sid=" + Math.random();

   xmlHttp.onreadystatechange = function() {
       if (xmlHttp.readyState == 4)
           if (xmlHttp.status == 200)
           stateChanged_add(xmlHttp, gID);
   }

   xmlHttp.open("GET", url, true);
   xmlHttp.send(null);
}


function stateChanged_add(xmlHttp, gID) {
   document.getElementById("txtAdd" + gID).innerHTML = xmlHttp.responseText;
}


function GetXmlHttpObject()
{
var xmlHttp=null;
try
   {
   // Firefox, Opera 8.0+, Safari
   xmlHttp=new XMLHttpRequest();
   }
catch (e)
   {
   // Internet Explorer
   try
       {
       xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
       }
   catch (e)
       {
       xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
       }
   }
return xmlHttp;
}

 

samt .asp för ajax:

<%
gID = Request("gID")
tC = Request("tC")  
tI = Request("tI")  
tB = Request("tB")  
Ccode = Request("Ccode")  
Icode = Request("Icode")  
Bcode = Request("Bcode")  
tDate = Request("tDate")
tCost = Request("tCost")
usrID = session("userID")

IF LEN(gID) < 1 OR LEN(usrID) < 1 THEN

       Response.Write "<table class='errorTableSmall'>"
       Response.Write "<tr>"
       Response.Write "<td valign='top'><strong>&nbsp ! &nbsp id saknas</strong></td>"
       Response.Write "</tr>"
       Response.Write "</table>"

ELSEIF LEN(gID) > 0 AND LEN(usrID) > 0 AND (tC > 1 OR tI > 1 OR tB > 1) THEN

   connect.execute("INSERT INTO add_col SET pUID = '" & usrID &"', pGID = '" & gID &"', pC = '" & tC &"', pI = '" & tI &"', pB = '" & tB &"', pDateAdded = '" & tDate &"', pDate = '" & tDate &"', pCost = '" & tCost &"', pCcode = '" & Ccode &"', pIcode = '" & Icode &"', pBcode = '" & Bcode &"', pInactive = 0")        
       Response.Write "<img src='images/thumbs_up.gif'>"

ELSE
   Response.Write "<table class='errorTableSmall'>"
   Response.Write "<tr>"
   Response.Write "<td valign='top'>&nbsp ! &nbsp</td>"
   Response.Write "</tr>"
   Response.Write "</table>"
END IF
%>

[sundrik]

Kan även tillägga att det inte fungerar i Firefox heller. Så det är Endast i IE det fungerar.

 

Jag kanske gör helt fel när jag använder ajaxen. Är inte riktigt hundra på ajax, om man säger så.

[Jonas__B]

det är för du hämtar in värderna på ett sätt som endast IE klarar, tror jag.

 

För att komma åt ett element använd getElementById

 

document.getElementById('elementetsID').value

 

 

Annars, kan du felsöka VAR felet ligger i?

Är det redan med javascriptet som kör funktionen eller hanterar ajaxfunktionen fel?

 

Gör en grundlig felsökning så blir det lättare att fixa, både för dig och inte minst för oss-

[sundrik]

Det fungerade mycket bättre med elementID. Jag fick allt att fungera med det.

 

Dock har jag ett problem.

 

Den uppdatera inte en sak. js-filen körs och anropas asp-filen, och innehållet körs korrekt. Men resultatet från asp-filen uppdateras inte till sidan.

 

Jag har testat att lägga in en Alert i functionen som skall göra så sidan updateras. Den functionen som anropas i rätt seadyState. Men jag får ingen popup. Så jag förmodar att det aldrig blir rätt readyState?

 

Bör tillägga att jag inte alls bra på javascript.

Här är koden från js-filen.

function update_region(cID, rID, cntX, change)
{
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null)
   {
   alert ("Webläsaren klarar inte AJAX!");
   return;
   }

var url="update_region.asp";
url = url + "?cID=" + cID + "&rID=" + rID + "&change=" + change + "&cntX=" + cntX;
url = url + "&sid=" + Math.random();

xmlHttp.onreadystatechange = function() {
   if (xmlHttp.readyState == 4)
       if (xmlHttp.status == 200)
           stateChanged_updateRegion(xmlHttp, cntX, change);
}

xmlHttp.open("GET", url, true);
xmlHttp.send(null);
}


function stateChanged_updateRegion(xmlHttp, cntX, change) {
   alert("Visar att funktionen körs!");
   document.getElementById("divUpdate" + cntX + change).innerHTML = xmlHttp.responseText;

}

 

För det fungerar väl att lägga in en alert i den för att kolla så den anropas?

[Jonas__B]

felsök i följande:

xmlHttp.onreadystatechange = function() {
   if (xmlHttp.readyState == 4){
//alert("");
       if (xmlHttp.status == 200){
//alert("hittade filen");

           stateChanged_updateRegion(xmlHttp, cntX, change);
}
}
}

 

lägg annars in lite else-satser med alerts.

det är a och o i felsökning

[sundrik]

Tackar, det blev en bra start på felsökningen.

 

Fick upp tomrutan..

 

Då googlade jag och hittade att jag kunde hitta vilken State xmlHttp var i genom att lägga in det i alerten. Fick upp ett kodnummer som visade att det var fel i asp-sidan.

 

Tyvärr inget mer än det.

 

Tillslut hittade jag fel på en function, som gjorde att det inte gick ordentligt. Så nu rullar det på igen.

 

Tack för all hjälp!