Add Custom Javascript?

Newfound
(@precipitatejournal)

10 years, 2 months ago
Hi there!

Plugin’s look and functions are simply boss.

However, the custom javascript I’m using for the radio button on a form within the modal is not being recognized. Works for the form on any given page, but not opened in the modal. Hence, the modal displays both options, not hiding one or the other, as according to the js.

Is there any way I can add this custom js to the plugin or some other work around you may know of?

Here’s a link to the site with the form on a page. The modal button is in the side bar, lower right.

http://www.newfoundjournal.org/donation-test/

Also, here’s the js I’m working with:
```
<script type="text/javascript">// <![CDATA[
    (function($){
        $(document).ready(function(){
            $("#recurring").hide();
            $(".option").click(function(){
                if($(this).val()=='single'){
                    $('#recurring').hide('slow', function(){
                        $('#single').show('slow');
                    });
                } else {
                    $('#single').hide('slow', function(){
                        $('#recurring').show('slow');
                    });
                }
            });
        });
    })(jQuery);
// ]]></script>
```
Any insight would be appreciated!

Cheers,

Daniel

https://wordpress.org/plugins/easy-modal/

Viewing 3 replies - 1 through 3 (of 3 total)

Plugin Author Daniel Iser
(@danieliser)

10 years, 2 months ago

Hey newfound,

Your issue is likely caused by the fact that you are targeting #recurring by an id which can by definition only exist once in the entire site. So it targets the first one in the document and since the modals are loaded in the footer the other form takes precedence and so your show/hide isn’t triggered on the correct element.

Try removing the other form or rewriting it to use classes and jquery traversal to select the correct div to show/hide.

Thanks for the great words, please take a moment to rate and review the plugin and or support here

Thread Starter Newfound
(@precipitatejournal)

10 years, 2 months ago

Well, removed the page form altogether and still the modal isn’t recognizing my JS. I do have the JS added to a custom JS box in the form plugin. Is that maybe keeping it from applying to the footer? Any insight would be appreciated!
Plugin Author Daniel Iser
(@danieliser)

10 years, 2 months ago
I can’t see a reason why your code wouldnt work from anywhere on the page to be honest. I think you need to make the following changes though.
```
<script type="text/javascript">// <![CDATA[
    (function($){
        $(document).ready(function(){
            $("form .recurring").hide();
            $(".option").click(function(){
                var $this = $(this);
                var $form = $this.parents('form').eq(0);
                if($this.val()=='single'){
                    $('.recurring', $form).hide('slow', function(){
                        $('.single', $form).show('slow');
                    });
                } else {
                    $('.single', $form).hide('slow', function(){
                        $('.recurring', $form).show('slow');
                    });
                }
            });
        });
    })(jQuery);
// ]]></script>
```
Also i looked for this script in the html of the page returned and i didnt find it. So likely since the form ins’t in the content of the main page it didnt load its JS.

I would move the script to your themes JS or a custom JS file via plugin. The code above should allow multiple instances on one page. You will need to change your divs from id="single" to class="single".

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Add Custom Javascript?’ is closed to new replies.

Tags