Dynamic JQuery Modal + JSF Interaction

Question

i'm new to all this stuff and I want to know what I am doing wrong here.

I did a modal which contains some labels, inputs and a button. All the javascript code that create the modal runs in a separated file.

I am trying to trigger a java function on the click of the modal's button.

I am using NetBeans, Glassfish, JSF 2.2, Jquery and Bootsrap here come code:

<h:body>                        
        <div class="wrapper">
            <div class="well content-container vertical-center-aligned">                
                <h:form 
                      ...                    
                    <a id="lnkRememberPass" class="label-md col-md-6" href="#" style="text-align: right;">Remember Password</a>

                    <h:commandButton id="btnEmail" action="#{appFunctions.sendPasswordEmail}" rendered="#{!generalManagement.logged}"></h:commandButton> 
                </h:form>                                
            </div>                                                                                   
        </div>                                    
    </h:body>


<script type="text/javascript">  
    $(document).ready(function(e){  
        //send all the parameters to the JS file and create the modal.
    $('#lnkRememberPass').modal({           
        'modalClass': 'modal-window ',
        'shadeClass':'modal-shade',
        'closeText':'Close',
        'closeClass':'modal-close',
        'outputClass':'',
        'inputClass':'input-md form-control',            
        'buttonClass':'btn btn-primary btn-sm form-control sendMail', //sendMail is a class to find the button
        'formClass':'form-group vertical-center-aligned modal-form'
    });                      

      $(document).find(".sendMail").click(function(ex){ //find the 'sendMail' class and trigger a click at the hidden button    
            try{
                $("#btnEmail").trigger("click");              
            }catch(exception ex){
                console.log(ex);
            }
        });              
    });             
</script>

I don't know the right way to do all this stuff, i'm just learning =[

turbopipp · Answer 1 · 2015-09-30T22:42:06.740

0

$(document).on("click", ".sendMail", function(event){    
  $(this).on("click", "#btnEmail", function(e) {
    console.log('do something');
  });
});

This might work better. (source)

edited Sep 30 '15 at 22:42

answered Sep 30 '15 at 22:18

turbopipp

1,245
2
14
27

I tried it, the problem is that the javaScript can't find the element that have the class. That is why my last try was using the .find() – Flavio Pegas Sep 30 '15 at 22:29
How about that double thingy I just updated? Any luck? – turbopipp Sep 30 '15 at 22:42

score 0 · Answer 2 · answered Oct 01 '15 at 00:11

Thank you for your help turbopipp but I figured out the problem here.

I was trying to reach a button created at the JS file when I think I should do the opposite. (reach the html button from the JS file).

Then here what worked for me:

<h:commandButton id="btnEmail" class="hidden myClass" action="#{appFunctions.sendPasswordEmail}">
                 <f:ajax execute="@form" render="@none" /> //Not allowing the page to refresh 
</h:commandButton>

and at the JS file where I created the whole modal I reached the html button at the main page.

button = $('<button />', {                  
            class:settings.buttonClass,
            text:'Request password'               
        }).on('click', function(e){ 
            e.preventDefault();
            console.log('something');
            $('.myClass').trigger('click');  
            console.log('success');                
        });

But I really hate the idea of having a hidden button to make what I need...

Dynamic JQuery Modal + JSF Interaction

2 Answers2