Update an empty template.loop with jQuery

Extensions, styles and support for everything else about phpBB
Post Reply
Steve
Donor
Posts: 11
Joined: 29 Dec 2016, 19:22

Update an empty template.loop with jQuery

#1

Post by Steve » 24 Jan 2017, 12:01

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

User avatar
kasimi
mChat developer
Posts: 369
Joined: 06 Oct 2016, 09:56
Contact:

Re: Update an empty template.loop with jQuery

#2

Post by kasimi » 25 Jan 2017, 10:36

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?

Steve
Donor
Posts: 11
Joined: 29 Dec 2016, 19:22

Re: Update an empty template.loop with jQuery

#3

Post by Steve » 25 Jan 2017, 12:14

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.

User avatar
kasimi
mChat developer
Posts: 369
Joined: 06 Oct 2016, 09:56
Contact:

Re: Update an empty template.loop with jQuery

#4

Post by kasimi » 25 Jan 2017, 12:39

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?

Steve
Donor
Posts: 11
Joined: 29 Dec 2016, 19:22

Re: Update an empty template.loop with jQuery

#5

Post by Steve » 25 Jan 2017, 13:29

Let me look into $this->template and I will zip and upload the files when back on the computer :)

Steve
Donor
Posts: 11
Joined: 29 Dec 2016, 19:22

Re: Update an empty template.loop with jQuery

#6

Post by Steve » 03 Feb 2017, 15:42

[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:

User avatar
kasimi
mChat developer
Posts: 369
Joined: 06 Oct 2016, 09:56
Contact:

Re: Update an empty template.loop with jQuery

#7

Post by kasimi » 03 Feb 2017, 16:27

Great! :+1:

Post Reply

Who is online

Users browsing this forum: No registered users and 0 guests