jQuery: refresh div content on button click, from a php file

Question

I am trying to refresh <div id="refreshableDiv"> on button1 click, using jQuery. I want to load the content of http://shiro-desu.com/scr/test/test.php to the <div> every time the button1 is clicked. As i haven't used jQuery before, i fail to understand why the following doesn't reload the content of div.

script code:

$(document).ready(function(){
 $('#button1').click(function(){
        $.post(
        "http://shiro-desu.com/scr/test/test.php",
        {
        },
        function(data){
        $('#refreshableDiv').html(data);
        });
    });
});

test.php

<?php echo "543"; ?>

html code:

<div id="refreshableDiv">Primary content</div>
<input type="submit" class="button1" name="button1" value="Reload"/>

Any ideas?

http://jsfiddle.net/feqnLs6o/

You are using an id-selector(`#button1`) but the button don't have an id. Also you are trying to make a cross domain ajax request(Same Origin Policy).. you need to enable CORS for that... — Arun P Johny, Oct 04 '14 at 17:00
@ArunPJohny i added id="button1" http://jsfiddle.net/feqnLs6o/3/ , and it doesnt work, i do not know what CORS is , could you perhaps edit this fiddle so that it works ? if thats possible since its only 5 lines code — rez, Oct 04 '14 at 17:04
[CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS)([Same Origin Policy](https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy)) has to be enabled in the server side... for PHP [see this](http://enable-cors.org/server_php.html) — Arun P Johny, Oct 04 '14 at 17:08
@ArunPJohny thanks for your reply, problem was that it running on jsfiddle i see what you mean now , thanks a lot , also the id="button1" was the problem, it worked great on my server — rez, Oct 04 '14 at 17:11
yes... if your code also runs in the same domain as your script then there is no need to do that — Arun P Johny, Oct 04 '14 at 17:11
can i ask something more, in my website , i will have a lot of `
` will have exactly one `button` inside. However want to refresh only the div of the button that was clicked! do you know how could i achieve that ? i dynamically create `
s` and `` with php — rez, Oct 04 '14 at 17:14
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/62465/discussion-between-arun-p-johny-and-shiro). — Arun P Johny, Oct 04 '14 at 17:15
@ArunPJohny is it possible to prevent a certain `
` in my page from refreshing ? for example, when i click an `` and i get redirected to `www.mysite.com/?var=value` , can i stop a `
` from refhreshing ? — rez, Oct 05 '14 at 00:04
@ArunPJohny just trying to make my mp3 player in my website not stop playing when i click links — rez, Oct 05 '14 at 00:10
@ArunPJohny i suppose i have to make a different function for every single `` case and do it that way ? is there some easier way ? — rez, Oct 05 '14 at 00:19
you need to prevent the default action in the click handler - http://jsfiddle.net/arunpjohny/feqnLs6o/5/ — Arun P Johny, Oct 05 '14 at 00:55
@ArunPJohny i opened a new question http://stackoverflow.com/questions/26198595/jquery-ajax-make-part-of-a-page-div-not-refresh-on-website-navigation — rez, Oct 05 '14 at 00:55

score 0 · Answer 1 · answered Oct 04 '14 at 17:06

0

Just change your html code of button to:

<input type="submit" id="button1" name="button1" value="Reload"/>

You are using id when binding click event.

answered Oct 04 '14 at 17:06

Apul Gupta

3,044
3
22
30

It is just because you are making cross domain Ajax request. If you want to test in fiddle just change the URL to /echo/html and pass html data in data parameters like {html:'
test
'} – Mohd. Shaukat Ali Oct 04 '14 at 17:13

score 0 · Answer 2 · answered Oct 04 '14 at 17:16

Seeing as you're not posting any data - it would make more sense to do an AJAX GET Request instead.

$(document).ready(function(){
 $('.button1').click(function(){
     $.ajax({
         url:'http://shiro-desu.com/scr/test/test.php'
     }).done(function(response) {
        $('#refreshableDiv').html(response); 
     });
 });
});

Inspecting console log for the request shows the following error:

XMLHttpRequest cannot load http://shiro-desu.com/scr/test/test.php. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://fiddle.jshell.net' is therefore not allowed access. fiddle.jshell.net/_display/:1

Putting:

<?php header('Access-Control-Allow-Origin: *'); ?>

At the top of http://shiro-desu.com/scr/test/test.php should solve that issue.

It's in regards to http://en.wikipedia.org/wiki/Same-origin_policy

jQuery: refresh div content on button click, from a php file

2 Answers2