javascript - working jsfiddle code not working in jsf 2.2 -
i facing unusual issue javascript.(i relatively new this). have code snippet of html5 css , javascript works fine in jsfiddle. here link : jsfiddle link
code : html-->>>
<div class="form-group"> <div class="input-group"> <div class="btn-group btn-group-justified basu-radio"> <a class="btn btn-info btn-sm active" data-toggle="sex" data-title="m">male</a> <a class="btn btn-info btn-sm basu-radio-notactive" data-toggle="sex" data-title="f">female</a> </div> <input type="hidden" name="sex" id="sex" /> </div> </div> css -->>>
.basu-radio .basu-radio-notactive { color: #3276b1; background-color: #fff; } js-->>>
$('.basu-radio a').on('click', function () { var sel = $(this).data('title'); var tog = $(this).data('toggle'); $('#' + tog).prop('value', sel); $('a[data-toggle="' + tog + '"]').not('[data-title="' + sel + '"]').removeclass('active').addclass('basu-radio-notactive'); $('a[data-toggle="' + tog + '"][data-title="' + sel + '"]').removeclass('basu-radio-notactive').addclass('active'); }); the problem when try use in jsf page. have checked , confirmed files linked properly.
here jsf code:
<div class="container"> <div class="row"> <form role="form" method="post" jsf:id="signup-form" autocomplete="off"> <div class="col-md-4 pull-right"> <div class="form-wrap"> <h1 class="text-center">sign up</h1> <div class="form-group"> <label for="email" class="sr-only">email</label> <div class="input-group" data-toggle="tooltip" data-placement="left" data-original-title="please enter e-mail id" > <span class="input-group-addon"><i class="fa fa-envelope fa-fw text-primary"></i></span> <div class="required-field-block"> <input type="email" jsf:value="#{index.email}" name="email" jsf:id="email" class="form-control" placeholder="e-mail id" /> <div class="required-icon"> <div class="text">*</div> </div> </div> </div> </div> <div class="form-group"> <label for="password" class="sr-only">password</label> <div class="input-group" data-toggle="tooltip" data-placement="left" data-original-title="please enter password" > <span class="input-group-addon"><i class="fa fa-lock fa-fw text-primary"></i></span> <div class="required-field-block"> <input type="password" jsf:value="#{index.password}" jsf:id="password" class="form-control" placeholder="password" /> <div class="required-icon"> <div class="text">*</div> </div> </div> </div> </div> <div class="form-group"> <div class="input-group"> <div class="btn-group btn-group-justified basu-radio"> <a class="btn btn-info btn-sm active" data-toggle="signup-form:sex" data-title="m">male</a> <a class="btn btn-info btn-sm basu-radio-notactive" data-toggle="signup-form:sex" data-title="f">female</a> </div> <input type="hidden" jsf:id="sex" /> </div> </div> <button type="submit" jsf:id="btn-login" jsf:action="#{index.login()}" class="btn btn-primary btn-lg btn-block"> <span><i class="fa fa-check-circle fa-fw"></i> sign up</span> <f:ajax execute="@form" render=":signup-form" /> </button> </div> </div> <!-- /.col-xs-12 --> <div class="col-md-8 pull-left"> <hr /> <h3 class="text-muted"> welcome, #{index.email} </h3> <hr /> </div> </form> </div> <!-- /.row --> </div> <!-- /.container --> i have tried basic debugging console outputs. console outputs work code running in jsfiddle not jsf. issue toggling not occurring in jsf code whereas in jsfiddle. using jsf 2.2(mojarra) glassfish 4.1 java ee7 browser chrome. please let me know if need more info. pointers appreciated.
Comments
Post a Comment