×
INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Students Click Here

id tag not loading new data with new ajax call

id tag not loading new data with new ajax call

id tag not loading new data with new ajax call

(OP)
In my retirement, I am building a local weather site. Data is loaded to a MySQL database. Everything works fine, so I wanted to add a previous and next buttons see past monthly data.

The data loads on initial page loading, but when I click the previous button the date changes, but the previous month data does not reload into the id tag.

Here is the code.

CODE -->

<body onload="loadDate()">


            <div class='row'>
                <div class='column left'> <a class="prevmonth" onclick="plusMonth(-1)">&#10094;</a></div>
                <div class='column middle' id="displaydate"></div>
                <div class='column right'><a class="nextmonth" onclick="plusMonth(1)">&#10095;</a></div>
            </div>
            <div id="tableWx"></div>

<script>
    dt = new Date();    
function loadDate() {
    var engMonth = dt.toLocaleString('en-IT', { month: 'long' });
    var year = dt.getFullYear();
    document.getElementById("displaydate").innerHTML = engMonth+' '+year;
    showWx();
}
</script>
<script>
function plusMonth(n) {
    var month = dt.getMonth();
    dt.setMonth(dt.getMonth() + n);
        while (dt.getMonth() === month) {
            dt.setDate(dt.getDate() - 1);
        }
        var engMonth = dt.toLocaleString('en-IT', { month: 'long' });
        var year = dt.getFullYear();
        document.getElementById("displaydate").innerHTML = engMonth+' '+year;
    showWx();    
}
</script>
<script>
function showWx() {
    
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        document.getElementById("tableWx").innerHTML = this.responseText;
      }
    };
    xmlhttp.open("GET","get_month_summary.php?q="+dt,true); 
    xmlhttp.send();
  }
</script>
</body> 

Can someone point to what I am not doing correctly?"
Thanks.

RE: id tag not loading new data with new ajax call

Hi

This seems to work consistently in my local simulation. Are you sure the issue is not in the PHP code ? Checked what your browser's developer tools are saying in the Network tab about that AJAX request ?

Feherke.
feherke.github.io

RE: id tag not loading new data with new ajax call

(OP)
The Status is 200 and the date listed in the "file" column matches the date on the request each time I click on the previous or next button. My PHP code works perfectly the first time loading the html page and also if I run it by itself, so I don't think it is the PHP code.

I do not know enough to know if this is true, but on another forum (can't find link), someone stated that the reloading of an id tag can't be done, because it violates security protocols?? After that everything that was mentioned was over my head.

There was quite a few JQuery examples. I will take a closer look at those.

RE: id tag not loading new data with new ajax call

Hi

As the XMLHttpRequest connects to the same host from where the page itself was loaded, there should be no security concerns by default. And if you see the request being performed and completes successfully, then I can not imagine any security issue. Also clicked the request in the Network tab, to see the Response received is what you expected ?

I would still check that get_month_summary.php to see it does not deliver something that messes up the page structure. Sure it generates only a HTML fragment suitable to be inserted inside the tableWx div ? For example the generated HTML fragment does not contain further elements with that tableWx ID.

Feherke.
feherke.github.io

RE: id tag not loading new data with new ajax call

(OP)
I am embarrassed to say I found the problem. I was calling the wrong php file. I was calling the original which was fixed on the current month and not the beta php file, so thus the output never changed. Although it is not working as I expected, the data does change.

Thank you for trying to help.

Red Flag This Post

Please let us know here why this post is inappropriate. Reasons such as off-topic, duplicates, flames, illegal, vulgar, or students posting their homework.

Red Flag Submitted

Thank you for helping keep Tek-Tips Forums free from inappropriate posts.
The Tek-Tips staff will check this out and take appropriate action.

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members! Already a Member? Login

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close