Problem with innerHTML and Javascript and Ajax in IE

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • harikumarmpl
    New Member
    • Sep 2008
    • 4
    #1

    Problem with innerHTML and Javascript and Ajax in IE

    Hi to all

    Here is the code i am trying for

    [HTML]<html>
    <head>
    <title>XMLHttpR equest</title>

    <script type="text/javascript">

    function display(){


    alert(document. getElementById( "Content").inne rHTML);

    document.getEle mentById("Conte nt").innerHTM L = "Hello";
    alert(document. getElementById( "Content").inne rHTML);}

    </script>
    </head>
    <body>
    <form name="something " onsubmit="javas cript:display() ;">
    <input type="submit" value="Click ME For Surprise" >
    </form>

    <div id="Content"></div>
    </body>
    </html>[/HTML]


    in that one when i click on the submit button it is calling the function Start()
    but after wards it is not displaying the content "hello" in the <div> tag
    and for Some period until last alert is over the Message is displayed in the body of the page ,
    after wards it is not visible can u please help me out on this...


    And one more question if i have more than one submit button in a page the output will be displayed in div tags or not?


    Any body Help me on these ..... plz....

    With Regards
    Hari Kumar
    Last edited by gits; Sep 17 '08, 08:38 AM. Reason: added code tags
    Tags: None
    • Atli
      Recognized Expert Expert
      • Nov 2006
      • 5062
      #2
      Hi.

      The problem is that you are using a <form> to do this.
      When you click the submit button, the onsubmit event is triggered, calling your function as it should, and the code is executed, changing the content of your <div>.

      But once that is done, the the form is submitted, which will refresh the page.
      Remember that forms are meant to pass data to other pages, not just to trigger JavaScript functions.

      Try replacing the form with a simple button that triggers you function in the onclick event:
      [code=html]
      <button onclick="javasc ript: display();">Cli ck me</button>
      [/code]

        Comment

        • harikumarmpl
          New Member
          • Sep 2008
          • 4
          #3
          Originally posted by Atli
          Hi.

          The problem is that you are using a <form> to do this.
          When you click the submit button, the onsubmit event is triggered, calling your function as it should, and the code is executed, changing the content of your <div>.

          But once that is done, the the form is submitted, which will refresh the page.
          Remember that forms are meant to pass data to other pages, not just to trigger JavaScript functions.

          Try replacing the form with a simple button that triggers you function in the onclick event:
          [code=html]
          <button onclick="javasc ript: display();">Cli ck me</button>
          [/code]

          Hi

          Thanks for your reply

          But my requirement is
          I have a text field to search for an item in the database and if the user enters the
          text and then he clicks the submit or go button

          the results for the particular search must be displayed on the same page

          i have all the business logic to display the results in another jsp page
          for my requirement i must not refresh the complete page whenever the user submits his search

          can u suggest me any idea

          Thanks in Advance
          Hari Kumar

            Comment

            • Atli
              Recognized Expert Expert
              • Nov 2006
              • 5062
              #4
              Ahh ok. So you want your JavaScript to fetch the content from the JSP page and display that in your DIV?

              AJAX isn't that hard to learn. It's fairly simple, especially GET request.
              POST Request are a bit more complex, but not very.

              I recommend you check out the Ajax Example in our Howto section to see how to do that.

                Comment

                • harikumarmpl
                  New Member
                  • Sep 2008
                  • 4
                  #5
                  Hi
                  I am applying the knowledge
                  Still even after the change also the same thing happening to me

                  here is the actual code

                  <%@ page contentType="te xt/html;charset=wi ndows-1252"%>


                  [HTML]<html>
                  <head>
                  <script type="text/javascript" >
                  function getItemNumber() {
                  var ItemNumber = document.forms[0].ItemNumber.val ue;
                  alert(ItemNumbe r);
                  return ItemNumber;
                  }

                  function displayResults( url){
                  url+= getItemNumber() ;
                  sendRequest(url ,"displayResult sDiv");
                  }

                  function getRequestObjec t() {
                  if (window.ActiveX Object) {
                  return(new ActiveXObject(" Microsoft.XMLHT TP"));
                  } else if (window.XMLHttp Request) {
                  return(new XMLHttpRequest( ));
                  } else {
                  return(null);
                  }
                  }

                  function sendRequest(add ress) {
                  var request = getRequestObjec t();

                  request.onready statechange = function() { handleResponse( request); };
                  request.open("G ET", address, true);

                  request.send(nu ll);
                  }
                  function handleResponse( request) {

                  alert(request.s tatus+" ,"+request.read yState);
                  if ((request.ready State == 4) && (request.status == 200) ) {
                  alert("Inside readystate");
                  alert(request.r esponseText);

                  document.getEle mentById("displ ayResultsDiv"). innerHTML ="<h1> Response is given</h1>";


                  }
                  }



                  </script>


                  <title>Price Book</title>

                  </head>
                  <body >


                  <table align="center" width="90%">
                  <tr><td>

                  <form name="pbSearch" id="pbSearch" onsubmit="displ aySearchResults ("HelloWorld.js p");" >
                  <fieldset>
                  <legend>Searc h Criteria</legend>

                  <table cellspacing="2" cellpadding="1" border="0" width="40%" align="center">

                  <tr>
                  <td>Item Number</td>
                  <td><input type="text" name="ItemNumbe r" size="15"></td>
                  <td></td>
                  </tr>

                  <tr>
                  <td>Description </td>
                  <td><input type="text" name="ItemDescr iption" size="15"></td>
                  <td></td>
                  <td><input type="Reset" value="clear" style="width:50 px;"></td>
                  <td><input type="submit" name="go" value="go" style="width:50 px;" ></td>
                  </tr>


                  </table>
                  </form>
                  </fieldset>

                  <fieldset id="searchResul tFieldSet">
                  <legend >Search Result</legend>

                  <table cellspacing="0" cellpadding="0" border="1" width="100%">
                  <tr>
                  <td width="25%"><ce nter>Item Number</center></td>
                  <td width="65%"><ce nter>Descriptio n</center></td>
                  <td width="10%"><ce nter>Details</center></td>
                  </tr>

                  <div id="displayResu ltsDiv">
                  <!-- Here i Need Output -->
                  </div>


                  </table>

                  </fieldset>


                  </body>

                  </html>

                  [/HTML]
                  if you find any mistakes in this one plz... help me out because i need it

                  Thanks
                  Hari
                  Last edited by acoder; Sep 17 '08, 11:10 PM. Reason: Added [code] tags

                    Comment

                    • acoder
                      Recognized Expert MVP
                      • Nov 2006
                      • 16032
                      #6
                      For a start, you're calling displaySearchRe sults() instead of displayResults( ).

                      PS. please use code tags when posting code.

                        Comment

                        Previous template Next
                        Working...