Php echo content into div

Question

I am trying to insert html and javascript which is generated in php into a div in the page.

a.php file:

function get_preset() {
    return (bunch of html, javascript);
}

b.php:

<div id="preset_preview">
    //<?php echo get_preset(); ?> //this works well, but I need to execute this every time I click a button in jquery.
</div>

I can use ajax to communicate between my jquery and a.php successfully, but how do I place returned content from get_preset function call in php into preset_preview div?

Is there a way to do this without sending data with ajax from get_preset function call into jquery, then use jquery to put this into preset_preview div?

Can php somehow do it alone each time on request from jquery like this?

So I use jquery ajax to call php to execute this:

<div id="preset_preview">
    <?php echo get_preset(); ?>
</div>

What is confusing to me is that php can do it successfully (as example above demonstrates) without sending data with ajax to jquery first.

Answer 1

a.php file

function get_preset() {
    return (bunch of html, javascript);
}

echo get_preset();

b.php file

<button type="button" id="preview">Preview Preset</button>
<div id="preset_preview">
    <?php include "a.php"; ?>
</div>

<script>
    $('#preview').on('click', function(e) {
        e.preventDefault();
        $("#preset_preview").load('a.php');
    });
</script>

There are several methods of jQuery AJAX which you can actually use. Example above is using load() which wraps your request with get method (you can override its request method by calling ajaxSetup() , anyways) to relative URL of a.php.

You can see a.php echo ing (string of?) get_preset() function which will then placed inside <div id="preset_preview"> in b.php file.

---

To expand the needs of AJAX in this case is because PHP only does something like

1. Getting a request, no matter what the method is (get, post, put, etc)
2. Returns a response. Usually after you do some logic related to request value.

It dies whenever your expected response rendered to client side. You can't do anything magic behind the wall right after response is returned. In the other word, a page load is needed.

And then AJAX comes to help you create another request to corresponding PHP file. It revives a PHP file to do (another) request -> do some logic -> then do returning it. Silently, without a page load.

And in respond of comment -- Can this be done with function calls somehow without including the actual php file in preset_preview?

It's all yes. As long as you serve whatever the caller needs.

a.php file

function get_preset() {
    return (bunch of html, javascript);
}

echo get_preset();

The a.php is simply echo ing get_preset() .

b.php

<button type="button" id="preview">Preview Preset</button>
<div id="preset_preview"></div>

<script>
    $('#preview').on('click', function(e) {
        e.preventDefault();
        $("#preset_preview").load('a.php');
    });
</script>

The b.php file is simply doing a request to a.php file. Whenever the button with selector id #preview is clicked it will load whatever a.php content to #preset_preview .

You can also render the content of a.php just after the page ready. This is similar approach like my first snippet as written on above.

<script>
    $(document).ready(function() {
        $('#preset_preview').load('a.php');
    });

    $('#preview').on('click', function(e) {
        e.preventDefault();
        $("#preset_preview").load('a.php');
    });
</script>

It simply tells you that you should load a.php right after the b.php page is ready and "reload" it once the button clicked.