AJAX update div without creating partial

问题

I have some page:

title = "page"
url = "/page"
layout = "default"
==
function onTest()
{
    $this['result'] = 'Test string';
}
==

<!-- AJAX enabled form -->
<form data-request="onTest" data-request-update="mypartial: '#myDiv'"></form>

<!-- Result container -->
<div id="myDiv"></div>

After submitting the form I can get 'result' variable only in partial 'mypartial', where code is: Here is {{ result }}. And this code inserts into #myDiv.

How can I get 'result' variable without creating partial? Why should I create .htm file (partial) for each little AJAX query?

回答1:

I guess you can easily update your div with id myDiv from server side.

You just need to push markup with proper id #myDiv it will update that Html Element with given ID automatically. [ we do not need to ask for partial or need partial ]

title = "page"
url = "/page"
layout = "default"
==
<?php
function onTest()
{
    $result = 'Test string';    
    return ['#myDiv' => 'New Result: ' . $result]; 
}
?>
==
<!-- AJAX enabled form -->
<form data-request="onTest">
    <button type="submit">Submit Fire Ajax</button>
</form>

<!-- Result container -->
<div id="myDiv">old result</div>

After successful Ajax request markup for myDiv will be

<div id="myDiv">New Result: Test string</div>

Good thing is you do not need to write javascript to update myDiv as part of October Ajax framework it will automatically search #myDiv and update its markup.

When you return an Array for an Ajax api of October Cms

return ['#myDiv' => 'Hello'];

At client side it will automatically search element with id myDiv and if it found it, It will update it with given markup on successful Ajax request, for this example its Hello

If any doubt please comment.

来源：https://stackoverflow.com/questions/53675304/ajax-update-div-without-creating-partial

标签

ajax

octobercms