Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

id tag not loading new data with new ajax call 1

Status
Not open for further replies.

waubain

Technical User
Dec 13, 2011
200
US
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.
 
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
 
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.

 
Hi

As the [tt]XMLHttpRequest[/tt] 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 [tt]div[/tt] ? For example the generated HTML fragment does not contain further elements with that tableWx ID.

Feherke.
feherke.github.io
 
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.
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top