Custom Modal Help

Dazed
@dazed
7 years ago
1,022 posts

Having an issue on some code and could use some help.

I am working on redoing some code I had on my old site that allowed reviews from music and chart rows.
https://www.mixposure.com/music/by_newest - click the pen and it pops a modal that shows reviews and a comment box. The comment box is not always working (cursor does not appear in box) and at times the comment box shrinks so no text can be added. I am beginning to think it works on the first one clicked and subsequent clicks fail.

In firefox I see in dev tools: Error: Permission denied to access property "toString" and TypeError: y is undefined coming from tinymce.

I am also seeing dual scroll bars at times (prev comments) but I can figure that out in the css eventually.

Is tinymce automatically initialized or do I need a call on the modal for that?

Ideas?

					 <a onclick="MixAP_modal('#{$item._item_id}')" title="Reviews For {$item.audio_title}">{jrCore_icon icon="pen"}</a>
					  
					    <div class="modal" id="{$item._item_id}" style="display: none">
                        <div style="padding: 1em 1em 0">
                             <h2>Reviews For {$item.audio_title}</h2>
                            <div style="float: right;">
                                {jrCore_icon icon="close" size="22" class='simplemodal-close'}
                            </div>
                        </div>
                        <div class="wrap">
                            <div style="max-height: 400px; overflow: auto">
                                {jrComment_form module="jrAudio" profile_id=$item._profile_id item_id=$item._item_id}
                            </div>
                        </div>
                    </div>

updated by @dazed: 04/18/17 04:49:30PM

@michael
7 years ago
7,715 posts

Tinymce in a modal can be trickey. It only ever wants to open one instance of itself on any page, so if you want more than one tinymce editor on a single page, including in a modal, you need to use the 'editor manager' to close one, then open another.

Easiest way would be to not use the editor in this location.

If you must use the editor in this location, you're going to need to close the editor when the modal closes.

It can take a lot of time, fiddling, and playing around to get it working correctly. See how the Site Builder system does it.

In site builder in the modal, the editor shows for one widget, then when you change to another widget, tinymce is shut down, then re-created when you come back to the html widget.

Dazed
@dazed
7 years ago
1,022 posts

It does not have to be the editor here. How about the basic comment box? How could I call that instead?

@brian
7 years ago
10,148 posts

Dazed:
It does not have to be the editor here. How about the basic comment box? How could I call that instead?

If you have the editor enabled for comments, then you won't be able to since the jrComment_form template function will use the editor.

--
Brian Johnson
Founder and Lead Developer - Jamroom
https://www.jamroom.net

Dazed
@dazed
7 years ago
1,022 posts

Thanks Brian. Was there in change in JR6? This was working in JR5.

ok that leaves me trying to figure out the other step mentioned by Michael. Any suggestions would be appreciated lol

@brian
7 years ago
10,148 posts

Dazed:
Thanks Brian. Was there in change in JR6? This was working in JR5.

No - this is not related to anything in the core - this is ALL template and javascript. The problem here is you are trying to CREATE a modal window via the "MixAP_modal()" javascript function, and it looks like you are passing a BAD DOM id to that function - all DOM ids must NOT begin with a number.

Change it to this:

<a onclick="MixAP_modal('#review-{$item._item_id}')" title="Reviews For {$item.audio_title}">{jrCore_icon icon="pen"}</a>
					  
<div class="modal" id="review-{$item._item_id}" style="display: none">
<div style="padding: 1em 1em 0">
    <h2>Reviews For {$item.audio_title}</h2>
    <div style="float: right;">
        {jrCore_icon icon="close" size="22" class='simplemodal-close'}
    </div>
</div>
<div class="wrap">
    <div style="max-height: 400px; overflow: auto">
        {jrComment_form module="jrAudio" profile_id=$item._profile_id item_id=$item._item_id}
    </div>
</div>
</div>

This also assumes that MixAP_modal() is correct as well. If that does not work you may need to style the inner div - you've got no classes on it.

--
Brian Johnson
Founder and Lead Developer - Jamroom
https://www.jamroom.net

Dazed
@dazed
7 years ago
1,022 posts

Thanks Brian. Same issue. The modal opens and either you can't type in the box or the blox closes and all you see are the user options like bold, italics etc.

Here is the original code but I had the same issue. I modified it a bit to work like the AP Modal calls.

                    <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;z-index:9999 !important;">
                            <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">

		    <div class="row">
		    <div class="col9">
		    <div class="p5">
                                    {jrComment_form module="jrAudio" profile_id=$item._profile_id item_id=$item._item_id}

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

                            </div>
                        </div>

@douglas
7 years ago
2,790 posts

That is working for me @dazed. In both FF and Chrome. I see the modal and reviews and the text editor to make a comment.

--

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

Dazed
@dazed
7 years ago
1,022 posts

Thanks Douglas, I am hit and miss. If you get one to open, close it and open a secondary and see if you can get the cursor in the box. I can't click in it.

Then on some of them I get the below when using chrome.

updated by @dazed: 01/16/17 11:40:39AM

@douglas
7 years ago
2,790 posts

My guess is it has to do with the text editor, probably not getting the js loaded that is needed for it, I switched your comments to use the regular textarea form and it is working now.

--

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

Dazed
@dazed
7 years ago
1,022 posts

yeah I guess that will have to fly. I was hoping to not reduce it to simple text across the board but do not see an option here.

@douglas
7 years ago
2,790 posts

Yeah, would have to figure out why the text editor doesn't work in a modal.

--

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

Dazed
@dazed
7 years ago
1,022 posts

I think Michael hit it on the head in his reply. What bothers me about this is that the quote option does not work in the comment mode.

@brian
7 years ago
10,148 posts

Dazed:
I think Michael hit it on the head in his reply. What bothers me about this is that the quote option does not work in the comment mode.

Quotes work in comments. I'm not sure how it would work in a modal though?

--
Brian Johnson
Founder and Lead Developer - Jamroom
https://www.jamroom.net

Dazed
@dazed
7 years ago
1,022 posts

I am open for an alternative way to do this

The modal was easier before because you could view previous comments.

@brian
7 years ago
10,148 posts

Dazed:
I am open for an alternative way to do this

The modal was easier before because you could view previous comments.

I'm assuming that was something custom? I'm not aware that we've ever had comments in a modal, but I could be wrong. Getting the editor working in a modal is another story however - not so easy.

What is it you're trying to accomplish?

--
Brian Johnson
Founder and Lead Developer - Jamroom
https://www.jamroom.net

Dazed
@dazed
7 years ago
1,022 posts

Hey Brian - Yeah this was done a few years ago with help from you guys. I just wanted an easy way to do song reviews from the new music page without going to the artist audio page each time. It was a lot of clicks getting back and forth. So adding this was an easy solution.

Dazed
@dazed
7 years ago
1,022 posts

here is the thread it was from - https://www.jamroom.net/the-jamroom-network/forum/my_posts/13079/best-way-to-add-reviews-on-chart-pages/search_string=modal

@brian
7 years ago
10,148 posts

Dazed:
Hey Brian - Yeah this was done a few years ago with help from you guys. I just wanted an easy way to do song reviews from the new music page without going to the artist audio page each time. It was a lot of clicks getting back and forth. So adding this was an easy solution.

That should be doable. You're not going to get the editor working in it very easily though. Is that required?

--
Brian Johnson
Founder and Lead Developer - Jamroom
https://www.jamroom.net

Dazed
@dazed
7 years ago
1,022 posts

Douglas moved comments to not use the editor and it is working but what bothers me is that all comments no longer have access to tinymce. So I can leave it as is but would like the quote option to at least work.

@brian
7 years ago
10,148 posts

Dazed:
Douglas moved comments to not use the editor and it is working but what bothers me is that all comments no longer have access to tinymce. So I can leave it as is but would like the quote option to at least work.

Yeah something would have to be done custom to support that. This is likely too complex for the forum here - contact us and we can see if someone can help out with it.

My 2 cents: Don't use the editor anywhere - not in comments, not in timeline, etc.

--
Brian Johnson
Founder and Lead Developer - Jamroom
https://www.jamroom.net

Dazed
@dazed
7 years ago
1,022 posts

Thanks Brian

@nate
7 years ago
917 posts

I second the editor disdain. I hate it.

solved Custom Modal Help