Loading ...
Sorry, an error occurred while loading the content.

Re: why is this not working?

Expand Messages
  • fritz_dsouza
    Hi Josh ,Dav will try this code and your approach and see thanx for the help well and am really sorry for the incomplete question the part that was not working
    Message 1 of 4 , Nov 3, 2006
    • 0 Attachment
      Hi Josh ,Dav

      will try this code and your approach and see thanx for the help
      well and am really sorry for the incomplete question the part that was
      not working is the data that is returned from the server was not
      getting displayed on the page the data was not getting inserted inside
      the div element

      thanx for pointing out my mistake will see if this new code snippet
      helps solve my problem

      Bye
      Regards
      Fritz

      --- In ydn-javascript@yahoogroups.com, "Josh Peters" <jcpeters@...> wrote:
      >
      > Offhand, document.getElementById will likely fail (in your body's
      > first child <script>) because you're not executing it during
      > window.onload or later. You should wrap it into an event listener
      > attached to window.onload (use the YAHOO.util.Event.addListener).
      >
      > Secondly, don't use an inline declaration of <body onload="init()">
      > use a <script> element containing this code:
      > YAHOO.util.Event.addListener(window, 'load', init);
      > instead. That way you can attach more events to load as needed,
      > instead of making init take over.
      >
      > Finally, generally speaking it's a good idea to be more descriptive
      > when asking such questions. What behavior did you expect? What
      > behavior are you experiencing?
      >
      > (...time goes by...)
      >
      > I've cleaned up your code a bit and have determined that if your issue
      > is the scope inside your callback object.
      >
      > I've reworked your script elements into one and here it is:
      > <script type="text/javascript" defer="defer">
      > // adding the calendar namespace
      > YAHOO.namespace("example.calendar");
      > // the init function will be added to the window load event (could
      > also do this inline if it'll never be called after page load)
      > function init() {
      > YAHOO.example.calendar.cal1 = new
      >
      YAHOO.widget.Calendar("YAHOO.example.calendar.cal1","cal1Container");
      > /* Override the doCellMouseOver function (used for IE) to add row
      > highlighting) */
      > YAHOO.example.calendar.cal1.doCellMouseOver = function(e, cal) {
      > var cell = this;
      > var row = cell.parentNode;
      > YAHOO.util.Dom.addClass(this, cal.Style.CSS_CELL_HOVER);
      > YAHOO.util.Dom.addClass(row, "hilite-row");
      > }
      > /* Override the doCellMouseOut function (used for IE) to remove row
      > highlighting) */
      > YAHOO.example.calendar.cal1.doCellMouseOut = function(e, cal) {
      > var cell = this;
      > var row = cell.parentNode;
      > YAHOO.util.Dom.removeClass(this, cal.Style.CSS_CELL_HOVER);
      > YAHOO.util.Dom.removeClass(row, "hilite-row");
      > }
      > YAHOO.example.calendar.cal1.render();
      > }
      >
      > // attaching init to window.onload
      > YAHOO.util.Event.addListener(window, 'load', init);
      >
      > // defining our AJAX thingy
      > function makeRequest(d) {
      > var sUrl = "post.php";
      > var postData = "domaina=google.com&dater=";
      > postData = postData + d ;
      > var request = YAHOO.util.Connect.asyncRequest(
      > 'POST',
      > sUrl,
      > // the callback object
      > {
      > // i like to put arguments before the functions, so that I
      > can easily scan to see what will be in o
      > "argument": {
      > "foo": "foo",
      > "bar": "bar"
      > },
      > // defining it inline, this could be "success":
      > successHandler if you wanted
      > "success": function(o) {
      > if (o.responseText !== undefined){
      > var div = document.getElementById('container');
      > // div.innerHTML = "<li>Transaction id: " +
      o.tId + "</li>";
      > // div.innerHTML += "<li>HTTP status: " + o.status
      > + "</li>";
      > // div.innerHTML += "<li>Status code message: " +
      > o.statusText + "</li>";
      > // div.innerHTML += "<li>HTTP headers: <ul>" +
      > o.getAllResponseHeaders + "</ul></li>";
      > div.innerHTML += "<li>PHP response: " +
      > o.responseText + "</li>";
      > // div.innerHTML += "<li>Argument object: Object (
      > [foo] => " +
      > o.argument.foo +
      > " [bar] => " + o.argument.bar +" )</li>";
      > }
      > },
      > // defining it inline, this could be "failure":
      > failureHandler if you wanted
      > "failure": function(o) {
      > if (o.responseText !== undefined) {
      > var div = document.getElementById('container');
      > // div.innerHTML = "<li>Transaction id: " +
      o.tId + "</li>";
      > // div.innerHTML += "<li>HTTP status: " + o.status
      > + "</li>";
      > // div.innerHTML += "<li>Status code message: " +
      > o.statusText + "</li>";
      > }
      > }
      > },
      > postData
      > );
      > }
      > </script>
      >
      >
      >
      > I've also replaced the <body onload="init()"> with a regular <body>
      element.
      >
      > Put the <script> elements in the <head>.
      >
      >
      > On 11/2/06, fritz_dsouza <fritzd@...> wrote:
      > >
      > >
      > >
      > >
      > >
      > >
      > > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
      > > "http://www.w3.org/TR/html4/strict.dtd">
      > > <html>
      > > <head>
      > >
      > > <title>Cleanchitbox Reporting System Mainpage</title>
      > >
      > >
      > > <link type="text/css" rel="stylesheet" href="mainstyle.css">
      > >
      > > <script type="text/javascript" src="yahoo.js"></script>
      > > <script type="text/javascript" src="event.js" ></script>
      > > <script type="text/javascript" src="dom.js" ></script>
      > > <script src="connection.js"></script>
      > >
      > > <link type="text/css" rel="stylesheet" href="fonts.css">
      > > <link type="text/css" rel="stylesheet" href="reset.css">
      > >
      > >
      > >
      > > <script type="text/javascript" src="calendar.js"></script>
      > > <link type="text/css" rel="stylesheet" href="calendar.css">
      > >
      > > <style>
      > > /* highlight the whole row */
      > > .yui-calendar tr.hilite-row td.calcell {
      > > background-color:yellow;
      > > }
      > >
      > > /* highlight the current cell in the standard highlight color */
      > > .yui-calendar tr.hilite-row td.calcellhover {
      > > cursor:pointer;
      > > color:#FFF;
      > > background-color:#FF9900;
      > > border:1px solid #FF9900;
      > > }
      > >
      > > /* make sure out of month cells don't highlight too */
      > > .yui-calendar tr.hilite-row td.calcell.oom {
      > > cursor:default;
      > > color:#999;
      > > background-color:#EEE;
      > > border:1px solid #E0E0E0;
      > > }
      > > </style>
      > >
      > > <script language="javascript">
      > > YAHOO.namespace("example.calendar");
      > >
      > > function init() {
      > > YAHOO.example.calendar.cal1 = new
      > > YAHOO.widget.Calendar("YAHOO.example.calendar.cal1","cal1Container");
      > >
      > > /* Override the doCellMouseOver function (used for IE) to add row
      > > highlighting) */
      > > YAHOO.example.calendar.cal1.doCellMouseOver = function(e, cal) {
      > > var cell = this;
      > > var row = cell.parentNode;
      > >
      > > YAHOO.util.Dom.addClass(this, cal.Style.CSS_CELL_HOVER);
      > > YAHOO.util.Dom.addClass(row, "hilite-row");
      > > }
      > >
      > > /* Override the doCellMouseOut function (used for IE) to
      remove row
      > > highlighting) */
      > > YAHOO.example.calendar.cal1.doCellMouseOut = function(e, cal) {
      > > var cell = this;
      > > var row = cell.parentNode;
      > >
      > > YAHOO.util.Dom.removeClass(this, cal.Style.CSS_CELL_HOVER);
      > > YAHOO.util.Dom.removeClass(row, "hilite-row");
      > > }
      > >
      > > YAHOO.example.calendar.cal1.render();
      > > }
      > >
      > > </script>
      > >
      > >
      > >
      > > </head>
      > >
      > > <body onload="init()">
      > > <script>
      > > var div = document.getElementById('container');
      > >
      > > var handleSuccess = function(o){
      > > if(o.responseText !== undefined){
      > > // div.innerHTML = "<li>Transaction id: " + o.tId + "</li>";
      > > // div.innerHTML += "<li>HTTP status: " + o.status + "</li>";
      > > // div.innerHTML += "<li>Status code message: " + o.statusText +
      "</li>";
      > > // div.innerHTML += "<li>HTTP headers: <ul>" +
      > > o.getAllResponseHeaders + "</ul></li>";
      > > div.innerHTML += "<li>PHP response: " + o.responseText + "</li>";
      > > // div.innerHTML += "<li>Argument object: Object ( [foo] => " +
      > > o.argument.foo +
      > > " [bar] => " + o.argument.bar +" )</li>";
      > > }
      > > }
      > >
      > > var handleFailure = function(o){
      > > if(o.responseText !== undefined){
      > > // div.innerHTML = "<li>Transaction id: " + o.tId + "</li>";
      > > // div.innerHTML += "<li>HTTP status: " + o.status + "</li>";
      > > // div.innerHTML += "<li>Status code message: " + o.statusText +
      "</li>";
      > > }
      > > }
      > >
      > > var callback =
      > > {
      > > success:handleSuccess,
      > > failure:handleFailure,
      > > argument: { foo:"foo", bar:"bar" }
      > > };
      > >
      > > function makeRequest(d){
      > > var sUrl = "post.php";
      > > var postData = "domaina=google.com&dater=" ;;
      > > postData = postData + d ;
      > > var request = YAHOO.util.Connect.asyncRequest('POST', sUrl, callback,
      > > postData);
      > > }
      > > </script>
      > >
      > > <div id="pageTitle">
      > >
      > > </div>
      > >
      > > <div class="column left">
      > > <h4>Graph showcase area</h4>
      > >
      > > <p>This is where the graphs will be shown </p>
      > >
      > > </div>
      > >
      > >
      > > <div class="column right">
      > > <div style="margin-left:auto;margin-right:auto;width:150px">
      > > <div id="cal1Container"></div>
      > > <div
      > >
      style="margin-left:auto;margin-right:auto;text-align:center;width:150px;clear:both">
      > > <a href="javascript:YAHOO.example.calendar.cal1.reset()"
      > > class="navLink"
      > > style="font-size:12px;text-decoration:underline">reset</a>|
      > > <a
      > >
      href="javascript:alert(YAHOO.example.calendar.cal1.getSelectedDates())"
      > > class="navLink"
      > > style="font-size:12px;text-decoration:underline">what's selected?</a>
      > > <form><input type="button" value="Senddatetoserver"
      > >
      onClick="makeRequest(YAHOO.example.calendar.cal1.getSelectedDates());"></form>
      > > </div>
      > > </div>
      > > </div>
      > >
      > > <div id="container"></div>
      > > </body>
      > > </html>
      > >
      > > anybody can point out where i am going wrong in my code
      > > thanx for your reply i love this library makes ajax development
      really
      > > really easy
      > >
      > > Thnx
      > > Regards
      > > Fritz
      > >
      > >
      >
    Your message has been successfully submitted and would be delivered to recipients shortly.