change layout in two div at the same time

[vikas251074]

I am using AJAX

function log2(str){
  xmlHttp=GetXmlHttpObject();
  if (xmlHttp==null) {
    alert ("Your browser does not support AJAX!");
    return;
  } 
  var url="checkpss.asp?q="+str+"&sid="+Math.random();
  xmlHttp.onreadystatechange=stateChanged1;
  xmlHttp.open("GET",url,true);
  xmlHttp.send(null);
}
 
function stateChanged1() { 
  if (xmlHttp.readyState==4) {
    document.getElementById("navBar1").innerHTML=xmlHttp.responseText;
  }
}

I have a form in which 4 div is used. When a button is pressed, the above function is called. At present I am able to change content in one div by using above method. I want to change content one more div which is a seperate div. How can I do this?

Thanks and regards,
Vikas

[hsriat]

I think you want to add different data to the different divs. If that's the case, tokenize the data at the server end. Split it into required parts at client side when received as responseText. Then add them in different divs.
Or Use responseXML, and parse the XML at client side.

[vikas251074]

Yes you are right.
But I don't know how to tokenize and split the data at the server end?

Thanks and regards,
Vikas

[acoder]

No, you use a unique delimiter on the server-side and split on the client-side, e.g. the string "test||test2" can be split using javascript:

var resp = xmlHttp.responseText;
respArr = resp.split("||");
// now respArr[0] contains "test" and respArr[1] contains "test2"...

[vikas251074]

As you know, I need to change in two div named 'navbar1' and 'detail'. I easily change content in 'navbar1' by using line no. 15 in code given in first posts. The change in content of div 'navbar1' is due to the code in 'checkpss.asp'.
Code of 'checkpss.asp'

<%
set conn = server.createobject("ADODB.Connection")
conn.open "Provider=MSDAORA.1; dsn=ipis; password=ipis; user id=ipis; data source=isap2000; persist security into=true"
set rs = server.createobject("ADODB.Recordset")
set rs = conn.execute("select empno, empname from hba_empmast where empno="&trim(session("userid1")))
if rs.eof then
  response.write("Invalid Password")
else
  if trim(rs("empno"))=trim(request.querystring("q")) then
    session("empname") = rs("empname")
%>
    <!--#include file="usersidebar.asp"-->
<%    
  else
    response.write("Invalid Password")
  end if
end if
%>

Using this code, the content of 'usersidebar.asp' is written in div 'navbar1'. Now I want to write the content of 'newsheadlines.asp', 'birthdaywish.asp' in another div 'detail'. How can I parse this? This is the problem I am facing?

Thanks and regards,
Vikas

[acoder]

Oh, if it's another ASP page, just make another Ajax request instead. Easy and simple.

[vikas251074]

Umm? I don't understand.

[hsriat]

Umm? I don't understand.

Pass another argument to your log2 function which would tell about which div is to be updated.
Depending upon that second argument, decide the url from where you have to get the content from (using if-else or switch). Then pass that same argument to onreadystatechange function so that it could know to which div the content is to be added when response text is received.

[vikas251074]

Pass another argument to your log2 function which would tell about which div is to be updated.

But here is only one argument. There is no other argument to pass. So why and which argument should I pass into log2 function.

Depending upon that second argument, decide the url from where you have to get the content from (using if-else or switch). Then pass that same argument to onreadystatechange function so that it could know to which div the content is to be added when response text is received.

I can't understand how the second div could be modified?

[hsriat]

But here is only one argument. There is no other argument to pass. So why and which argument should I pass into log2 function.
I can't understand how the second div could be modified?

function log2(str, divId){
  xmlHttp=GetXmlHttpObject();
  if (xmlHttp==null) {
    alert ("Your browser does not support AJAX!");
    return;
  }
  var url;
  if (divId == "div1") url = "page1.asp";
  else if (divId == "div2") url = "page2.asp";
  else url = "page3.asp";
  url += "?q="+str+"&sid="+Math.random();
  xmlHttp.onreadystatechange = function () { stateChanged1(divId);};
  xmlHttp.open("GET",url,true);
  xmlHttp.send(null);
}
 
function stateChanged1(divId) { 
  if (xmlHttp.readyState==4) {
    document.getElementById(divId).innerHTML = xmlHttp.responseText;
  }

[vikas251074]

Here I think, any one div will be modified, which is being passed as a second argument. Because it is checking for only all div one by one and if it is one the div then that div is modified.
As you know this function is called after checking username and password. If correct then two div should be modifed.

I have not checked it now, but I hopes this will not work. Anyway I may check it first then report to you.

Thanks and regards,
Vikas

[acoder]

Alternatively, pass the URL as another parameter to the function (and remove the var url; line).

[acoder]

Here I think, any one div will be modified, which is being passed as a second argument. Because it is checking for only all div one by one and if it is one the div then that div is modified.
As you know this function is called after checking username and password. If correct then two div should be modifed.

If you need to wait for the first request to be complete before making subsequent requests, then call the function when the readyState is 4 in the first request.

[hsriat]

I have not checked it now, but I hopes this will not work.

Keeps your hopes high, dude!

[vikas251074]

What to write in line no.4 where function log2 is called?

<table> 
  <tr>
    <td><a href="#">Forgot Password?</a></td>
    <td><input type="button" style="width:65px " value="Go" onclick="log2(document.myform.passwd.value);"/></td>
  </tr>
</table>

[hsriat]

What to write in line no.4 where function log2 is called?

<table> 
  <tr>
    <td><a href="#">Forgot Password?</a></td>
    <td><input type="button" style="width:65px " value="Go" onclick="log2(document.myform.passwd.value);"/></td>
  </tr>
</table>

log2(document.myform.passwd.value, 'id_of_the_div_you_want_to_add_content_into');

[vikas251074]

I am very confused now. I am getting error in different line than I suppose.

I am getting error in line no. 72. Error 'Object Expected'.
The code is given below and line no. is correct.

Thanks and regards,
Vikas

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Indian Oil Corporation Limited, Barauni Refinery</title>
<script type="text/javascript">
var xmlHttp
 
function userid2(str){
  xmlHttp=GetXmlHttpObject();
  if (xmlHttp==null) {
    alert ("Your browser does not support AJAX!");
    return;
  } 
  var url="checkuser.asp?q="+str+"&sid="+Math.random();
  xmlHttp.onreadystatechange=stateChanged;
  xmlHttp.open("GET",url,true);
  xmlHttp.send(null);
}
 
function stateChanged() { 
  if (xmlHttp.readyState==4) {
    document.getElementById("message").innerHTML=xmlHttp.responseText;
  }
}
 
function login2(str, divID){
  xmlHttp=GetXmlHttpObject();
  if (xmlHttp==null) {
    alert ("Your browser does not support AJAX!");
    return;
  } 
  var url
  if(divID=='navBar1') url='checkpasswd.asp';
  else (divID=='content') url='checkpasswd1.asp';
  url=url+"?q="+str+"&sid="+Math.random();
  xmlHttp.onreadystatechange=function(){stateChanged1(divID);};
  xmlHttp.open("GET",url,true);
  xmlHttp.send(null);
}
 
function stateChanged1(divID) { 
  if (xmlHttp.readyState==4) {
    document.getElementById(divID).innerHTML=xmlHttp.responseText;
  }
}
 
function GetXmlHttpObject(){
  var xmlHttp=null;
  try { xmlHttp=new XMLHttpRequest(); }   // Firefox, Opera 8.0+, Safari
  catch (e){ 
    try {xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");}   // Internet Explorer
    catch (e){xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");}
  }
  return xmlHttp;
}
 
</script>
</head>
<body onload="document.myform.userid1.focus();"> 
<form name="myform" action="main.asp" method="post"> 
<div id="content" style="position:absolute; left:2px; top:125px; width:500px ">   
  <div class="login1" style="position:relative; left:2px; width:175px"> 
    <table border="1" cellpadding="0" cellspacing="0">
    <tr>
      <td bgcolor="#CCCCCC"><h3>Employee Login</h3></td>
    </tr>
    <tr>
      <td>
        <table>
          <tr>
            <td align="right">Login :</td>
            <td><input type="text" name="userid1" id="userid1" style="width:100px " onblur="userid2(this.value);"/></td>
          </tr>
          <tr>
            <td align="right">Password :</td>
            <td><input type="password" name="passwd" style="width:100px "/></td>
          </tr>
        </table>
      </td>
    </tr>
    <tr>
      <td>
        <table> 
          <tr>
            <td><a href="#">Forgot Password?</a></td>
            <td><input type="button" style="width:65px " value="Go" onclick="login2(document.myform.passwd.value,'content');"/></td>
          </tr>
       </table>
      </td>
    </tr>
    <tr>
      <td>
        <table>
          <tr>
            <td><p id="message" style="width:175px ">Enter user id and password</p></td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
  </div> 
<br>
  <h2 id="pageName">Main Page</h2> 
  <div class="feature"> 
    <h1>Surfing the intranet </h1> 
    <p>
    This is a comprehensive information website on Indian Oil Corporation Limited and specially 
    dedicated to Barauni Refinery.
    </p>
  </div> 
  <div class="story"> 
    <h3>Story Title</h3> 
    <p> 
    Barauni Refinery was built in collaboration with Russia and Romania. Situated 125 kilometeres 
    from Patna, it was built with an initial cost of Rs 49.40 crore. Barauni Refinery was 
    commissioned in 1964 with a refining capacity of 1 Million Metric Tonnes per Annum (MMTPA) 
    and it was dedicated to the Nation by the then Union Minister for Petroleum, Prof. Humayun 
    Kabir in January 1965. After de-bottlenecking, revamping and expansion project, it's capacity 
    today is 6 MMTPA. Matching secondary processing facilities such Resid Fluidised Catalytic 
    Cracker (RFCC), Diesel Hydrotreating (DHDT), Sulphur Recovery Unit (SRU) have been added. 
    These state of the art eco-friendly technologies have enabled the refinery to produce 
    environment- friendly green fuels complying with international standards.
    </p>
    <p>
    Barauni Refinery was initially designed to process low sulphur crude oil (sweet crude) of 
    Assam. After establishment of other refineries in the Northeast, Assam crude is unavailable 
    for Barauni . Hence, sweet crude is being sourced from African, South East Asian and 
    Middle East countries like Nigeria, Iraq & Malaysia. The crude is brought up to Haldia by 
    Very Large Crude Carriers (VLCCs) from where it is pumped through pipeline to Barauni. 
    With various revamps and expansion project at Barauni Refinery, capability for processing 
    high -sulphur crude has been added — high-sulphur crude oil (sour crude) is cheaper than 
    low sulphur crudes — thereby increasing not only the capacity but also the profitability 
    of the refinery.
    </p> 
  </div> 
</div> 
<!--end content --> 
<br> 
<div id="navBar1" style="position:absolute; left:800px; top:125px; width:200px ">
<% if session("userid1")="" then %>
  <!--#include file="sidebar.asp"--> 
<% else %>
  <!--#include file="usersidebar.asp"--> 
<% end  if %>
</div>
</form>
</body>
</html>

[hsriat]

Add a value attrubute to the input.

I would suggest you to test your program in Firefox. IE would never tell the exact line of the code and exact error details. Such error messages are too vague.

Use Firefox, there you can find the Error console in tools. Check out your error and you would find what exactly was the problem.

[vikas251074]

I would suggest you to test your program in Firefox.

I am working in my office where I don't have firefox.

[vikas251074]

Add a value attrubute to the input.

Where to add value attribute - line no. 72 or 76. and what value has to be assigned.

Like this ?

<td><input type="text" name="userid1" id="userid1" style="width:100px " value="" onblur="userid2(this.value);"/></td>
<td><input type="password" name="passwd" style="width:100px " value=""/></td>

[hsriat]

I am working in my office where I don't have firefox.

That is really sad that your employer is working for IOCL and still it doesn't provide the developers with all the available browsers so that they could build a cross-browser web application.

Well that's not a solution for your problem. I see that on line 34, you have written

else (divID=='content') url='checkpasswd1.asp';

either remove the condition or make it else if

[hsriat]

Where to add value attribute - line no. 72 or 76. and what value has to be assigned.

Like this ?

<td><input type="text" name="userid1" id="userid1" style="width:100px " value="" onblur="userid2(this.value);"/></td>
<td><input type="password" name="passwd" style="width:100px " value=""/></td>

In the first one. But that should not do anything wrong. But again, I ain't sure about IE.

[vikas251074]

Action : Here any one div is modified not both. ???


Let me explain you what I need. I have userid password screen. If user id and password is verified then it should display content in two or more div at the same time.

[kevinhugh]

I think you want to add different data to the different divs. If that's the case, tokenize the data at the server end. Split it into required parts at client side when received as responseText. Then add them in different divs.
Or Use responseXML, and parse the XML at client side.

Hello, May I ask a question?

[hsriat]

Hello, May I ask a question?

Of course!!

You may ask it in a new thread here>> http://bytes.com/forum/newthread.php?do=newthread&f=149

[hsriat]

Action : Here any one div is modified not both. ???


Let me explain you what I need. I have userid password screen. If user id and password is verified then it should display content in two or more div at the same time.

I could not understand your requirements at all. It would be better if you explain it properly step by step.

[vikas251074]

I could not understand your requirements at all. It would be better if you explain it properly step by step.

Let me explain you.

I have first div for displaying heading information about company.
second div for displaying different option listed in right hand side of screen
third div for displaying user id password screen.
fourth div for displaying few text about company.
fifth div for displaying few text about anything.


Now when user login successfully, then all div except first div should change content using AJAX method.
second div should contain user specific option.
third div should contain list of employees having birthday today.
fourth div should contain something
fifth div should contain some other thing.

Currently I am able to change only one div i.e. second, what should be done to change rest div (third, fourth, fifth div)?

[hsriat]

When login in successful, call the ajax function again in the onreadystatechange of the first login function which would update the other divs.

[acoder]

I am working in my office where I don't have firefox.

Bah! That's no excuse ;)

Tell your employer that you need to support other browsers too - possibly up to a quarter of your visitors or more in some countries.

[vikas251074]

When login in successful, call the ajax function again in the onreadystatechange of the first login function which would update the other divs.

Can u tell me how to do this?

[vikas251074]

Bah! That's no excuse ;)

Tell your employer that you need to support other browsers too - possibly up to a quarter of your visitors or more in some countries.

There is no need because this is limited to working employees only that too in local area where over 1000 employee will use

[hsriat]

There is no need because this is limited to working employees only that too in local area where over 1000 employee will use

I wonder why people don't understand that IE is the worst thing that happened in the world of computing.

There is really lack of knowledge.

Any how,
in that onreadystatechange, if divId is content, call the log2 function again with divId as the other value.