Include PHP file inside a DIV using Jquery & AJAX [duplicate]

See here for your updated jsfiddle

You had marked the change button with a name of Change but were trying to select it with an id of change. Also, you had not told jsfiddle to include jQuery.

Try the following:

<button name="Change" id="Change">Change Div</button>

You are specifying a click function on an id, but no id is set on the button.

You can try with load() function in jquery

http://api.jquery.com/load/

PHP is a server-side script language, which will be executed before a JavaScript script did.

Therefore, you cannot use .load() to execute a PHP code, however, you may try .ajax() to create an AJAX request to the server which can implement the PHP code.

Please see http://api.jquery.com/jQuery.ajax/ if you have trouble on using .ajax().

Note: in .ajax() method, there is a setting called beforeSend, which "can be used to modify the jqXHR (in jQuery 1.4.x, XMLHTTPRequest) object before it is sent". Hope this method helps you in any way.

Then, your JavaScript code will be like this:

$(document).ready(function(){
  $("#Change").click(function(){
    //doing AJAX request
    $.ajax({
      url:"include/start10.php",
      beforeSend:function(){
        $('#myDiv').fadeOut('slow');
      },
      success:function(data){
        // do something with the return data if you have
        // the return data could be a plain-text, or HTML, or JSON, or JSONP, depends on your needs, if you do ha

        $('#myDiv').fadeIn('slow');
      }
    });    
  });
});

You cannot include PHP file with AJAX, but instead the response of the AJAX server-side script, which is the PHP (which has the same effect).

The JS file (code):

function ajaxalizeDiv()
{
    $.ajax({
        type: "get",
        url: "/path/to/the/php/you/want/to/include",
        data: {
            // Anything in json format you may want to include
            id: myvarwithid, // descriptive example
            action: "read" // descriptive example
        },
        dataType: "json",
        success: onAjax
    });
}

function onAjax(res)
{
    if(!res || !res.text)
        return;

    $("#mydiv").html(res.text);
}

And here goes the PHP file:

<?php
    $id = (int) @$_GET['id']; // same as in data part of ajax query request
    $action = @$_GET['action']; // same as in data part of ajax query request

    $text = '<a href="/index.php?id=' . $id . '&action=' . $action . '">click me</a>';

    // Note this is short example you may want to echo instead of die
    // You may use not JSON, but raw text. However, JSON is more human-friendy (readable)
    // and easy to maintain.
    // Note also the array keys are used in the onAjax function form res (response).
    die(json_encode(array('text' => $text /* and anything else you want */)));
?>