Render Element using AJAX

1

Hello everyone,
Is there a way o “re-render” an ELEMENT (that i’m using inside a Template), using AJAX?
My AJAX return a ARRAY, and I use this ARRAY as a variable of my Element.

Thanks.

2

What do you mean by “re-render”? Where is your Ajax returning this array to? Some code would probably help to understand the situation.

3

Thanks @Zuluru,

My ajax is like this:

> $.ajax({
>        type: 'POST',
>        url: url_ajax,
>        data: data_ajax, 
>        success: function (result) {
>            // DATA TO MY TEMPLATE (array)
>         };,
>        dataType: 'json',
>    });

My controller:

> public function ajaxFunction()
> 	{
> 		$this->viewBuilder()->setLayout('ajax');
> 
> 		// MANIPULATE DATA HERE
> 
> 		$this->set('array_data', $array_output);
> 
> 		return;
> 	}

And, in my template I made like this:

> <span id="ID-ARRAY-DATA"></span>

So, my question is:

I don’t want to create the HTML of my View, inside the Controller. It’s a little bit ugly manipulate HTML inside the Controller.
So I want to send the AJAX response to render again my ELEMENT.
How can I do it using cake? (Iḿ using version 3.5)

Thanks

4

Does the data that you return via Ajax need to be an array? Can it instead be a snippet of formatted HTML (generated by your element), or an array that includes, among other things, that snippet of formatted HTML?

5

The data doesn’t need to be a array.
The problem is…Today I’m building the HTML inside my Controller. But it’s not a good solution, I think…
Thanks

6

Sorry, in this case I guess I’m not understanding what the problem is with using the normal template method to generate the output. You said:

Is that being used at all?

7

@Zuluru, thanks for your patience.

I will explain better:

I’m building the HTML output in my controller, using data sent by AJAX (to my controller), just like this:

> public function buildTable($array_col, $array_lin)
> 	{
> 
> 		$table = '<div class="table-responsive">
>             <table class="table table-striped table-hover">
> 			<thead>
>                 <tr>';
> 
> 		foreach ($array_col as $item) {
> 			$table .= '<th>';
> 			$table .= $item;
> 			$table .= '</th>';
> 		}
> 		$table .= '</tr></thead>';
> 		$table .=  '<tbody>';
> 		if (!is_null($array_lin)) {
> 			foreach ($array_lin as $linha) {
> 				$table .= '<tr>';
> 				foreach ($linha as $item) {
> 					$table .= '<td>' . $item . '</td>';
> 				}
> 				$table .= '</tr>';
> 			}
> 		}
> 		$table .= '</tbody></table></div>';
> 
> 		return $table;
> 	}

Summarizing my doubt:

Is it correct to build the HTML code inside the Controller, using the data provided by the AJAX request, or is there another way to build the HTML, using Element?

Thanks

8

You should have all of that code in the template for this action. There is no need for an element at all. Rendering output for Ajax is basically the same as rendering output for an index or view or edit page.

9

Proposal and approach I can good live with it, assuming that this table code snippet is of course a part of an existing view with its own controller:

controller A -> view A
view A has ajax code in it, where you fetch the table snippet and update some section in your view A

Refactor it to:

  1. put your html code “buildtable” from the ajax controller action to an element or also ok a seperate view template e.g. myviewelement.php

  2. change your buildtable ajax controller action accordingly, that it responses the rendered element myviewelement. e.g $this->render(‘myviewelement’); of course take care, that you set the corresponding view variables before in the controller action buildTable.

  3. in ajax you set the response on success with $(yourelement).html(response);

additionally if you need your table always in your view and not only by ajax response you can include the buildTable element in your view with $this->element(myviewelement)

additionally and depending on your logic in your main controller for your view, it could be also much cleaner, to do the ajax rendering in the main controller action: here you detect if the request is an ajax request, and render only the buildTable snippet instead of proceeding with standard rendering the enclosing view.

summary:
move html code away to view or element snippets
view includes the snippets
ajax requests via controller actions the snippets