Best Way To Add Reviews on Chart Pages

Dazed
@dazed
10 years ago
1,022 posts

I want to add a review button on some pages that will display existing comments as well as allow users to comment without having to go to the artist pages every time.

Best way to accomplish?

Thanks!
updated by @dazed: 09/15/14 05:44:26PM

@douglas
10 years ago
2,791 posts

Checkout how the news_story.tpl file is setup, you could probably use that as a starting point or guide.

Hope this helps,
Douglas

--

Douglas Hackney
Jamroom Team - Designer/Developer/Support
FAQ-Docs-Help Videos

Dazed
@dazed
10 years ago
1,022 posts

Thanks Douglas. Looking now.

Dazed
@dazed
10 years ago
1,022 posts

went to site_name/news_story and I have side content but no main content hehe. Anyway I pulled the jrcomment item_detail as a start which helps but not a lot. It gave me the first artist name in the chart for every song.

still looking lol

@douglas
10 years ago
2,791 posts

If you have the news page setup, the news title links should use the news_story.tpl file.

The basic URL for the news_story.tpl would look something like

http://yoursite/news_story/blogID/blogtitle

Hope this helps,
Douglas

--

Douglas Hackney
Jamroom Team - Designer/Developer/Support
FAQ-Docs-Help Videos
updated by @douglas: 08/10/14 10:18:45AM

Dazed
@dazed
10 years ago
1,022 posts

Helps if I actually click a link vs pulling the url. I want to pop this in a modal and show the existing comments block you see when you go to the artist page.

If I use the below code I get the first person in the rows image for all rows in the chart. Not to mention the css is a mess. It looks like I amnot getting the row info completely into the modal.


<a onclick="$('#myModal').modal();" title="Embed Audio"><div class="sprite_icon sprite_icon_18"><div class="sprite_icon_18_img sprite_icon_18_link"> </div></div></a>


<div id="myModal" class="search_box" style="display:none;">
<div style="float:right;">
<input type="button" class="simplemodal-close form_button" value="x">
</div>
<span class="title">Coming Soon</span><br><br></span>
{jrCore_module_url module="jrComment" assign="murl"}
<div class="block">

<div class="title">
<h1>Comment On: {$item.comment_item_title}</h1>
<div class="breadcrumbs">
<a href="{$jamroom_url}/{$item.profile_url}/">{$item.profile_name}</a> » <a href="{$jamroom_url}/{$item.profile_url}/{$murl}">Comment</a> » Comment On: <a href="{$item.comment_url}">{$item.comment_item_title}</a>
</div>
</div>





<div class="block_image p5">
    {jrCore_module_function function="jrImage_display" module="jrUser" type="user_image" item_id=$item._user_id size="small" alt=$item.user_name class="action_item_user_img iloutline"}
</div>

<div class="col9">
<div class="p5" style="margin-left:24px">
    <span class="info" style="display:inline-block;">{$item._created|jrCore_date_format} <a href="{$jamroom_url}/{$item.profile_url}">@{$item.profile_url}</a>:</span><br>
    <span class="normal">{$item.comment_text|jrCore_format_string:$item.profile_quota_id}</span>
</div>
</div>


<div class="col2 last">
<div class="block_config">
    {if $_params.profile_owner_id > 0}
	{* profile owners can delete comments *}
	{jrCore_item_delete_button module="jrComment" profile_id=$_params.profile_owner_id item_id=$item._item_id}
    {else}
    {* site admins and comment owners see this button *}
	{jrCore_item_delete_button module="jrComment" profile_id=$item._profile_id item_id=$item._item_id}
    {/if}

 {jrComment_form module="jrAudio" profile_id=$item._profile_id item_id=$item._item_id}

</div>


</div>
</div>
</div>

updated by @dazed: 08/10/14 11:56:07AM

@douglas
10 years ago
2,791 posts

When you say reviews, are you referring to comments only?

Do you have a link so I can see what you have so far?

Thanks!

--

Douglas Hackney
Jamroom Team - Designer/Developer/Support
FAQ-Docs-Help Videos

Dazed
@dazed
10 years ago
1,022 posts

Appreciate the help Douglas.

yes - audio comments.

Go here and click the link sprite on the right - http://www.mixposure.com/music/by_newest

@douglas
10 years ago
2,791 posts

Sorry Dazed, got tied up today, will have to check this out tomorrow morning, unless you come up with something first.

I wouldn't think it would be too hard to do though.

--

Douglas Hackney
Jamroom Team - Designer/Developer/Support
FAQ-Docs-Help Videos

Dazed
@dazed
10 years ago
1,022 posts

Thanks Douglas! I looked at this for awhile yesterday but the variables did not seem to pass into the modal. Not sure what I am missing there so any help is appreciated.

@michael
10 years ago
7,719 posts

Few issues. The one with the "... the variables did not seem to pass into the modal...." looks to me to be more of an issue of there being too many modals on the page all with the title id="myModal".

You are only allowed to have 1 id on the page called "myModal". if you hit ctrl+u and look at the source for your page, you have many.

Reduce that number to just one and try putting the vars in that one, then see if they come out.

Dazed
@dazed
10 years ago
1,022 posts

Hey Michael - That link is in the for loop so it is applied to every new song row. The code is above a few comments. Are you saying it needs to be out of the loop?

@michael
10 years ago
7,719 posts

it needs to be out of the loop, or given its own unique id.

If you cant/dont want to get it out of the loop, then add something to make it unique:
id="myModal{$item_id}" so it becomes id="myModal7".

That way there would not be 2 id's on the page that are the same. You'd also need to update the function calling the modal

 onclick="$('#myModal{$item_id}').modal();

Dazed
@dazed
10 years ago
1,022 posts

Tried the below and still the same results. Ideas?

<a onclick="$('#Modal{$item_id}').modal();" title="Embed Audio"><div class="sprite_icon sprite_icon_18"><div class="sprite_icon_18_img sprite_icon_18_link">&nbsp;</div></div></a>


<div id="Modal{$item_id}" class="search_box" style="display:none;">
<div style="float:right;">
<input type="button" class="simplemodal-close form_button" value="x">
</div>
<span class="title">Coming Soon</span><br><br></span>

@michael
10 years ago
7,719 posts

The source on the http://www.mixposure.com/music/by_newest page is still showing

onclick="$('#myModal').modal();"

so there are still multiple ids that are the same on the page.

Dazed
@dazed
10 years ago
1,022 posts

oddness! OK I have it working now other than some odd looking css in areas. I had to use

 {$item._item_id}

and then it all came together. The css is breaking on the second song review and it pushes that comment out to the right for some reason.

Thanks for your help guys as always!
updated by @dazed: 08/12/14 05:21:22AM

@boplive
10 years ago
345 posts

Hey Daze..do you mind sharing that..i also at one time wanted to do that modal feature ..i ask for help and they helped me..but left it alone for awhile had a few things come up

https://www.jamroom.net/the-jamroom-network/forum/design-and-skin-customization/6192/extra-event-info-displaying-from-eventtpl-page-not-profile-page

@boplive
10 years ago
345 posts

boplive:
Hey Daze..do you mind sharing that..i also at one time wanted to do that modal feature ..i ask for help and they helped me..but left it alone for awhile had a few things come up

https://www.jamroom.net/the-jamroom-network/forum/design-and-skin-customization/6192/extra-event-info-displaying-from-eventtpl-page-not-profile-page

never mind...I got it to work... I just went back to the old code I used and remove something and added {$item._item_id}...I had it like you had it before
{$item._id}...thaNks guys

@michael
10 years ago
7,719 posts

multiple reviews? where am I looking?

Dazed
@dazed
10 years ago
1,022 posts

glad you got it working!

Dazed
@dazed
10 years ago
1,022 posts

hey Michael - here is what I had. I ended up removing the artist block and it looks better. If you go to http://www.mixposure.com/music/by_newest/p=1 and click on voices in the distance tune it was putting the first review to the far right for some reason. It looks ok without it I guess unless you have a fix lol.

artist block

		    <div class="block_image p5">
		        {jrCore_module_function function="jrImage_display" module="jrUser" type="user_image" item_id=$item._user_id size="small" alt=$item.user_name class="action_item_user_img iloutline"}
		    </div>
		    
		    <div class="col9">
		    <div class="p5" style="margin-left:24px">
		        <span class="info" style="display:inline-block;">{$item._created|jrCore_date_format} <a href="{$jamroom_url}/{$item.profile_url}">@{$item.profile_url}</a>:</span><br>
		        <span class="normal">{$item.comment_text|jrCore_format_string:$item.profile_quota_id}</span>
		        
		    </div>
		    </div>

                    <a onclick="$('#Modal{$item._item_id}').modal();" title="Song Review"><div class="sprite_icon sprite_icon_18"><div class="sprite_icon_18_img sprite_icon_18_pen">&nbsp;</div></div></a>
		    
		    
		    <div id="Modal{$item._item_id}" class="search_box" style="display:none;">
		    <div style="float:right;">
		    <input type="button" class="simplemodal-close form_button" value="x">
		    </div>
		    <span class="title">Tell The Artist What You Think!</span><br><br>
		    
		    {jrCore_module_url module="jrAudio" assign="murl"}
		    <div class="block">
		    
		    <div class="title">
		    <h1>Comment On: {$item.audio_title}</h1>
		    <div class="breadcrumbs">
		    <a href="{$jamroom_url}/{$item.profile_url}/">{$item.profile_name}</a> &raquo; <a href="{$jamroom_url}/{$item.profile_url}/{$murl}/{$item._item_id}/{$item.audio_title_url}">Comment</a> &raquo; Comment On: <a href="{$jamroom_url}/{$item.profile_url}/{$murl}/{$item._item_id}/{$item.audio_title_url}">{$item.audio_title}</a>
		    
		    </div>
		    </div>
		    
		    
		    <div class="block_image p5">
		        {jrCore_module_function function="jrImage_display" module="jrUser" type="user_image" item_id=$item._user_id size="small" alt=$item.user_name class="action_item_user_img iloutline"}
		    </div>
		    
		    <div class="col9">
		    <div class="p5" style="margin-left:24px">
		        <span class="info" style="display:inline-block;">{$item._created|jrCore_date_format} <a href="{$jamroom_url}/{$item.profile_url}">@{$item.profile_url}</a>:</span><br>
		        <span class="normal">{$item.comment_text|jrCore_format_string:$item.profile_quota_id}</span>
		        
		    </div>
		    </div>
		    
		    
		    <div class="col9">
		    <div class="p5" style="margin-left:24px">
		        {if $_params.profile_owner_id > 0}
		    	{* profile owners can delete comments *}
		    	{jrCore_item_delete_button module="jrComment" profile_id=$_params.profile_owner_id item_id=$item._item_id}
		        {else}
		        {* site admins and comment owners see this button *}
		    	{jrCore_item_delete_button module="jrComment" profile_id=$item._profile_id item_id=$item._item_id}
		        {/if}
		    
		    
		       

		    </div>
		    </div>
	      		{* Are comments enabled for this song? *}
		    	        {jrComment_form module="jrAudio" profile_id=$item._profile_id item_id=$item._item_id}
		    	
		                    {jrDisqus_comments disqus_identifier="jrAudio_`$item._item_id`"}    
		    
		    </div>
		    </div>

@michael
10 years ago
7,719 posts

What I would have done, is look at the page, open firebug, see whats wrong, play around with it for a bit to see if i can find the issue.

Can't do that by just looking at template code sorry.

Dazed
@dazed
10 years ago
1,022 posts

the code is in hehe

@michael
10 years ago
7,719 posts

That all looks ok to me. Heres a screenshot of what I see:

updated by @michael: 08/12/14 06:29:55PM

Dazed
@dazed
10 years ago
1,022 posts

go here - http://www.mixposure.com/music/by_newest
scroll to - Voice In The Distance
click on the pen sprite

updated by @dazed: 08/12/14 06:34:09PM

@michael
10 years ago
7,719 posts

I see it now. thanks.

@michael
10 years ago
7,719 posts

The issue is that that div above it is floated left.

You need to add a "clear:left" to the div with the id: #jrAudio_166144_18210_comments

so right now that codes is:

<div id="jrAudio_166144_18210_comments">

change it to:

<div id="jrAudio_166144_18210_comments" style="clear:left">

and you will be good.

Dazed
@dazed
10 years ago
1,022 posts

Thanks Michael! I will be back home in a few and will give it a shot. Appreciate the help.

@michael
10 years ago
7,719 posts

Another good point to know about is the row system.

a row is made up of 12 columns.

so if you have:

<div class="row">
  <div class="col12"></div>
</div>

That will be 1 col spanning the whole row.

if you have

<div class="row">
  <div class="col6"></div>
  <div class="col6"></div>
</div>

That will be 2 rows that span half the row each.

<div class="row">
  <div class="col3"></div>
  <div class="col6"></div>
  <div class="col3"></div>
</div>

Will be a small column then a larger column then a smaller column.

You have class="col9" but its not wrapped in a 'row' class so it does nothing.

Dazed
@dazed
10 years ago
1,022 posts

Good info. I do not see that div tag anywhere. The only div id tag I have is

<div id="Modal{$item._item_id}" class="search_box" style="display:none;">

updated by @dazed: 08/12/14 07:29:02PM

Dazed
@dazed
10 years ago
1,022 posts

actually adding that row helped!!! Thanks Michael! Is there a way to change the modal to be a smaller size? Songs with no comments is about the size I want and the songs with a lot of comments my modal gets huge. I am not sure if that is due to the text. Maybe I need to wrap it at a certain point?

ok additional oddness lol. When you are on the Newest Page and say click on By Rating and then back to Newest, one song is displayed!
updated by @dazed: 08/12/14 08:06:29PM

Dazed
@dazed
10 years ago
1,022 posts

clearing cache fixes it momentarily but repeat the steps and only one song is displayed. Nothing in the logs.

@douglas
10 years ago
2,791 posts

That is odd, it almost looks like there is an id being passed in somehow?

You might also think about adding a z-index on your modal div, otherwise it goes behind your navigation menu.

--

Douglas Hackney
Jamroom Team - Designer/Developer/Support
FAQ-Docs-Help Videos
updated by @douglas: 08/12/14 11:20:40PM

@douglas
10 years ago
2,791 posts

Dazed:
clearing cache fixes it momentarily but repeat the steps and only one song is displayed. Nothing in the logs.

Something is messed up, the footer doesn't show when you do this either?

--

Douglas Hackney
Jamroom Team - Designer/Developer/Support
FAQ-Docs-Help Videos

Dazed
@dazed
10 years ago
1,022 posts

No on the footer either. This one does not make sense! Appreciate the help guys.

Dazed
@dazed
10 years ago
1,022 posts

Any ideas or suggestions? I am going to put on the default template and see what happens but this one is not making sense to me.

Dazed
@dazed
10 years ago
1,022 posts

Put the default file back in and everything was fine. So why is a review modal blowing this up?

@michael
10 years ago
7,719 posts

Try remaking the changes one at a time until the undesired behaviour appears.

Then you will know what the issue is.

Another technique is to explain it to someone else how to reproduce it. I often found that by the time I was finished typing out what I needed help with that I had figured out where the issue was and didn't need help anymore.

SteveX
@ultrajam
10 years ago
2,584 posts

Dazed:
Put the default file back in and everything was fine. So why is a review modal blowing this up?

Check your html. You had an unbalanced number of opening div elements to closing div elements when I looked yesterday.

If they are balanced now using the default file, but not when you add in your code then that is where the html is breaking.

--
¯\_(ツ)_/¯ Education, learning resources, TEL, AR/VR/MR, CC licensed content, panoramas, interactive narrative, sectional modules (like jrDocs), lunch at Uni of Bristol. Get in touch if you share my current interests or can suggest better :)

Dazed
@dazed
10 years ago
1,022 posts

I looked at that but I may have missed one. I really need to suck it up and buy phpstorm. Actually there may be a way to view them in visual studio. That may be the better route.

Thanks for the help.

Dazed
@dazed
10 years ago
1,022 posts

no mismatches that I see. I left the music_row.tpl intact and then just did an include statement to the modal I added.

Any other ideas?

ps I removed it from my site for now so if you actually want to look at it let me know and I will put it back in.

Appreciate the help all.
updated by @dazed: 08/14/14 05:25:35PM

SteveX
@ultrajam
10 years ago
2,584 posts

Check it with http://validator.w3.org/ - that will give you some idea where the html is out.

The divs not closing is why the footer was appearing way up in the right column.

--
¯\_(ツ)_/¯ Education, learning resources, TEL, AR/VR/MR, CC licensed content, panoramas, interactive narrative, sectional modules (like jrDocs), lunch at Uni of Bristol. Get in touch if you share my current interests or can suggest better :)

Dazed
@dazed
10 years ago
1,022 posts

ok put it back and looking at it again

Dazed
@dazed
10 years ago
1,022 posts

Nice!!!

A fatal error occurred when attempting to decode response body from http://www.mixposure.com/music/by_newest. Either we do not support the content encoding specified ("none"), or an error occurred while decoding it.
The error was: Don't know how to decode Content-Encoding 'none'

@michael
10 years ago
7,719 posts

Dazed:....I really need to suck it up and buy phpstorm.....

It has a 30 day free trial.

If you use the EAP's then you can keep using it for ages.
http://confluence.jetbrains.com/display/PhpStorm/PhpStorm+Early+Access+Program

Until version 7 I was always using the EAP's even though I had a license because there were no new features that I was waiting for.

Dazed
@dazed
10 years ago
1,022 posts

Michael - I am seeing something weird looking at this in Chrome. The pen sprite has a small "?" in it. I am not sure why.

See anything wrong with this?

<a onclick="$('#Modal{$item._item_id}').modal();" title="Song Review"><div class="sprite_icon sprite_icon_18"><div class="sprite_icon_18_img sprite_icon_18_pen"></div></div></a> 


<div id="Modal{$item._item_id}" class="search_box" style="display:none;">

updated by @dazed: 08/14/14 06:41:46PM

Dazed
@dazed
10 years ago
1,022 posts

Looking at the file in phpstorm and running an inspection, it seems to point back to the modal.

Unresolved function or method modal() (at line 38)

updated by @dazed: 08/14/14 07:03:20PM

@michael
10 years ago
7,719 posts

my guess is you copy+pasted the code and a stray character came along for the ride.

remove all the space between the /a and the /div

></a></div>

Dazed
@dazed
10 years ago
1,022 posts

killed all the space after the tag which seemed to resolve that issue but everything is still disappearing. &%*&T^&*)* so on that note I am calling it a week on this. If someone has ideas on what is causing this please post a reply. I have tried multiple changes and the footer is displayed on the page after bouncing around but all pages just show the latest song after a few clicks.

Thanks for your help Michael. It is appreciated.

@michael
10 years ago
7,719 posts

Still reckon you should go one step at a time.
* does the modal open. yes?, ok move on.
* add a container div. Look ok?, yes move on.
* add one more thing. look ok?, yes move on.

@douglas
10 years ago
2,791 posts

Hey Dazed,

I'm not sure what your wanting in the modal, but this is what I come up with and it seems to work....

                        <a onclick="$('#review_{$item._item_id}').modal();" title="Reviews For {$item.audio_title}">{jrCore_icon icon="pen"}</a>
                        <div id="review_{$item._item_id}" class="search_box" style="display:none;">
                            <div class="block">

                                <div class="block_title">
                                    <h2>Reviews For {$item.audio_title}</h2>
                                </div>

                                <div class="block_config">
                                    <input type="button" class="simplemodal-close form_button" value="x">
                                </div>
                                <div class="clear"></div>
                                <br><br>
                                <div class="block_content">

                                    {jrComment_form module="jrAudio" profile_id=$item._profile_id item_id=$item._item_id}

                                </div>

                            </div>
                        </div>

Maybe this will help get you what your looking for?

--

Douglas Hackney
Jamroom Team - Designer/Developer/Support
FAQ-Docs-Help Videos

Dazed
@dazed
10 years ago
1,022 posts

Much thanks Douglas. I just tossed it in and that is doing exactly what I want. When I get home I want to review the differences and see where mine was off.

Thanks again for your help!

@boplive
10 years ago
345 posts

you guys are definetly troopers...always coming through for everyone

solved Best Way To Add Reviews on Chart Pages