Page 1 of 1

Update an empty template.loop with jQuery

Posted: 24 Jan 2017, 12:01
by Steve
just wondering how I can update an empty template loop with in phpbb?
Code I have so far; from start of the process to expected out put with in a template loop.

HTML a href link using data-ajax""

Code: Select all

                     <a href="{reaction_types.REACTION_ADD}" data-ajax="add_reaction">
                        <img src="{postrow.reaction_types.URL}" class="reaction_image_select" alt="{reaction_types.TITLE}" title="{reaction_types.TITLE}" />
                    </a>
 
Controller if is_ajax() ,php:

Code: Select all

            if ($this->request->is_ajax())
            {
                $new_reaction = $this->root_path . $this->config['reactions_image_path'] . '/' . $reaction['reaction_file_name'];

                $json_response = new \phpbb\json_response;
                $json_response->send(array(
                    'success'             => $added,
                    'POST_ID'             => $post_id, 
                    'DISPLAY_REACTIONS' => $new_reaction,
                ));
            }
Jquery code:

Code: Select all

phpbb.addAjaxCallback('add_reaction', function(res) {
	var reactionImage = res.DISPLAY_REACTIONS;
	var postId = res.POST_ID;

	if (res.success) {
		$('#my-reaction' + postId).attr('src', reactionImage);
	}
});
And now to the template loop:

Code: Select all

	<!-- BEGIN postrow.user -->
			<img id="my-reaction{postrow.user.POST_ID}" src="{postrow.user.DISPLAY_REACTIONS}" class="reaction_image_select" alt="{postrow.user.TITLE}" />
	<!-- END postrow.user -->
I can use:

Code: Select all

	<!-- IF not .postrow.user -->
		<img id="my-reaction{postrow.POST_ID}" src="A EMPTY SRC" class="reaction_image_select" alt="A EMPTY TITLE" />
	<!-- ENDIF -->
but will be an empty img src in the template

Re: Update an empty template.loop with jQuery

Posted: 25 Jan 2017, 10:36
by kasimi
I'm not sure I get what you're doing here. In your third code box you only return some JSON data, you don't render anything so there are no templates or template loops involved at that point. Are you saying that this call $('#my-reaction' + postId).attr('src', reactionImage); changes the src attribute of the img to an empty string?

Re: Update an empty template.loop with jQuery

Posted: 25 Jan 2017, 12:14
by Steve
kasimi wrote:In your third code box you only return some JSON data, you don't render anything so there are no templates or template loops involved at that point.
OK how do i get my JSON data to respond to my template loop?
<!-- BEGIN postrow.user -->
Are you saying that this call $('#my-reaction' + postId).attr('src', reactionImage); changes the src attribute of the img to an empty string?
this changes the img src, But if i visit the page it will be empty until i action the jquery.

Re: Update an empty template.loop with jQuery

Posted: 25 Jan 2017, 12:39
by kasimi
Steve wrote:OK how do i get my JSON data to respond to my template loop?
By rendering a template. Inside your if ($this->request->is_ajax()) block you don't touch the $this->template object, so there's no template being rendered, no HTML file is involved.
Steve wrote:this changes the img src, But if i visit the page it will be empty until i action the jquery.
Now I'm even more confused. :D I thought the AJAX call is what's causing you problems, but this sounds like the template isn't filled correctly when rendering the initial page.

Is your code in a GitHub repo by chance?

Re: Update an empty template.loop with jQuery

Posted: 25 Jan 2017, 13:29
by Steve
Let me look into $this->template and I will zip and upload the files when back on the computer :)

Re: Update an empty template.loop with jQuery

Posted: 03 Feb 2017, 15:42
by Steve
[SOLVED] I sent the html through the controlller file to my page, stops the empty img src for invalid html mark up for now.
A bit more experience in jQuery and the new extension stystem will come with time :lol:

Code: Select all

$html_img_src = '<img src="' . get_reaction_file($new_reaction) . '" class="reaction_image" alt="' . clean_file_name($reaction['reaction_type_title']) . '" />';
        
if ($this->request->is_ajax() && $added == true)
{
    $json_response = new \phpbb\json_response;
    $json_response->send(array(
        'success'             => $added,
        'POST_ID'             => $post_id, 
        'IMAGE_SRC'         => $html_img_src,
        'REACTION_DELETE'    => $reaction_delete_url,
    ));
}
 
Sanitizing and Validating with a custom php function and using html() in jQuery :+1:

Re: Update an empty template.loop with jQuery

Posted: 03 Feb 2017, 16:27
by kasimi
Great! :+1: