Refresh chart(javascript) after doing mysql Query

Question

I've got a javascript for drawing a chart. I get my information out of my MySQL base. And I got 3 different buttons to get the different information out of the database.

My problem now is, I get the information out of my database, it shows it in the chart but when it shows the information it refreshes the page.

Is there a way to show the information after my page is refreshed? I actually tried to use the window.onload but that doesn't give me the wanted result.

in php I use the following code to get the info from my MySQL DB:

if(isset($_POST['btnProduct']))
{   
  ....
}

in html it's like this:

<div class="content">
        <form action="" method="post" enctype="multipart/form-data">
            <input type="submit" name="btnProduct" id="btnFilterProduct">
        </form>
</div>

And in JS I use this code:

<script type="text/javascript"> 
    window.onload = function()
    {   
        document.getElementById('btnFilterProduct').onclick = function()
        {
         ....
        }
    }

I know the PHP needs to refresh to get the data. and Javascript doesn't. But can I change the order? Or is there a way to change my JS to let it load AFTER the page is refreshed?

Matthew Herbst · Accepted Answer · 2016-01-19 07:37:16Z

1

To stop the page reload, modify your onclick function to be:

document.getElementById('btnFilterProduct').onclick = function(event) {
  event.preventDefault();
  ...
}

event.preventDefault stops the default behavior of the event, which in this case is to refresh the page since you have an empty action. Another option would be to not use a form. Just use the <button> element instead.

edited Jan 19, 2016 at 7:37

answered Jan 19, 2016 at 7:28

Matthew Herbst

32.3k27 gold badges92 silver badges141 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Bart88 Over a year ago

Yea that worked. Don't I need the form when I'm using php?

Matthew Herbst Over a year ago

@Bart88 not at all. The form is only an HTML thing (unless you are using it for an action, which you aren't). Are you using jQuery to make the actual request to your PHP inside of the onclick?

Bart88 Over a year ago

No,I use the onclick just to do some calculations and set the information in my chart.

Matthew Herbst Over a year ago

Ah, your posting the page to itself. Then yes, keep the form. A more ideal way would be to separate out the PHP code that gets the data into its own script which can be called with an AJAX call. That way your server only sends the new data again instead of the entire page.

Bart88 Over a year ago

Let us continue this discussion in chat.

|

Collectives™ on Stack Overflow

Refresh chart(javascript) after doing mysql Query

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related