jQuery function is not calling from JSF on button click

Question

I have a jQuery file with function in it. When my page loads then my script runs. Means it's invoke. Here is my jQuery file.

(function($){

    var $firstPara = $('p').eq(1);
    $firstPara.hide();

    function checkValidation() {

        var labelElementArray = $("label.mandotary");
        var inputElementArray = $("input.mandotary");
        var selectElementArray = $("select.mandotary");

        $.each(inputElementArray, function(index, element){

            var text = $(element).text();


        }); //end of $.each(inputElementArray, fn)

        $.each(selectElementArray, function(index, element) {

            ////nothing

        }); //end of  $.each(selectElementArray, fn)

    } //end of function checkValidation()

})(jQuery); //end of (function($){}

I have JSF form with button in it.

<h:head>
    <title>Facelet Title</title>
    <h:outputScript library="javascripts" name="jquery.js"  target="body"/>
    <h:outputScript library="javascripts" name="validation.js" target="body"/>

</h:head>

<h:body>

    <h:form id="validationFrom" >

        <h:commandButton id="saveButton"
                         value="Save"
                         onclick="checkValidation()"/>


        <h:commandButton id="cancelButton"
                         value="Cancel" />

    </h:form >

</h:body>

Now when i click on save button, it says that checkValidation() function is undefined. Why? What i am doing wrong here?

Thanks

Daniel · Accepted Answer · 2012-02-08 11:29:19Z

2

try to remove the

(function($){ and the

})(jQuery); //end of (function($){}

from the js file

and instead , wrap your js code with this place the

$(document).ready(function() {

});

one more thing

EDIT:

add this in the head of your page

    <h:outputScript library="primefaces" name="jquery/jquery.js"
        target="head" />
    <h:outputScript target="head">
        $ = jQuery;
    </h:outputScript>

in order to use the $ in your jQuery code

edited Feb 8, 2012 at 11:29

answered Feb 8, 2012 at 7:58

Daniel

37.2k10 gold badges122 silver badges208 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Basit Over a year ago

Your tip solve my one confusion. Actually what was happening, when i was using <h:outputScript library="javascripts" name="validation.js"/> On my jsf page and i have (function($){...})(jQuery) in my scrpt, then my scripts run before the page loads. When my page loads then i have nothing on the page,but my script was running. So i get var$firstPara null. That is why i use target="body". With this, my script include after the body element. But now when i used $(document).ready(function(){...}); and omit the target="body".

Basit Over a year ago

Then my script is including in the head section and i have my script running after page loads :). I used (function($){...})(jQuery) syntax because i also use PrimeFace. So if i use $(document).ready(fn), then there is conflict. Are$(document).ready(fn) and (function($){})(jQuery); two different things or both are same ?

Basit Over a year ago

hhmm thanks. One thing more, when we use jQuery, first we include jQuery. I am using jQery-1.7.1.js. I just want to make sure the sequences. First i will include the line <h:outputScript library="primefaces" name="jquery/jquery.js" target="head" />, then <h:outputScript target="head">$ = jQuery;</h:outputScript>, then my jQuery <h:outputScript library="javascripts" name="jquery.js" target="head"/> and then my script <h:outputScript library="javascripts" name="validation.js" target="head"/>, and after that i can use $(document).ready(fn), in my script. Am i right ?

Carter · Accepted Answer · 2012-02-08 07:50:38Z

1

Welp, I have no idea what JSF is other than the small amount of googling I just did and I'm also not familiar with some of the jQuery syntax you are using. Assuming you can work against a JSF page the same as any regular old html page, here's how I would do it...

$(function() {
    // Do any work you want to occur when the DOM is ready here.

    $("#saveButton").click(checkValidation);
}

function checkValidation() {
    // Check validation here
}

Then get rid of your onclick bit in the JSF.

answered Feb 8, 2012 at 7:50

Carter

2,86010 gold badges44 silver badges58 bronze badges

4 Comments

Basit Over a year ago

Thanks. But one thing, if i define my checkValidation() function outside of the $(function() {})(jQuery); . Then it is call on my onClick. It seems that JSF has more flexibility for javaScript than jQuery...

Carter Over a year ago

Yes, it will be called onClick. Functions should typically be placed outside of your $(function() {...}). What goes inside is what you want to happen only when the DOM has loaded. This includes hooking events up to DOM elements which is what I did there with the .click() bit.

Basit Over a year ago

HHmm actually i am new so i was think that all jQuery code should be inside the $(document).ready(fn).You mean to say if i want to hide some paragraph on my page when page loads, then this code should be inside $(document).ready(fn). But if i want to listen for click events, then i can put it outside of my $(document).ready(fn). Is it?

Carter Over a year ago

Regarding hiding the paragraph, yes. Regarding listening for click events, you tell things to listen in the document.ready and you can put functions that get called when a click is heard outside of document.ready. So in my example, I told it to listen with $("#saveButton").click(checkValidation); which is like me saying from here on out, when a click on #saveButton is heard do what is inside the parentheses, which in this case is to call the checkValidation function.

Collectives™ on Stack Overflow

jQuery function is not calling from JSF on button click

2 Answers 2

3 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related