Hi everyone I'm working in a Spring MVC application with JSP, my problem is in a certain moment I make a controller request to get a pice of JSP code for be included in a div. I get the JSP code from a ModelAndView answer. I put it my div by JQuery. but when I want to use my JSP container variables I can't do it. I'll show my code.
JSP Container (parent)
<div class="row" id="principalDiv">
<div id="menuZone">
<c:forEach items="${user.rol.permisos}" var="permisos">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-2 iconos methodDiv" id="${permisos.permisoMetodoMap}">
<div>
<center>
<i class="fa <c:out value="${permisos.permisoMetodoIcono}" /> fa-5x" id="icon_${permisos.permisoMetodoMap}"></i>
</center>
<br>
<center>
<div>
<c:out value="${permisos.permisoNombre}" />
</div>
</center>
</div>
</div>
</c:forEach>
</div>
<div id="loadZone">
</div>
</div>
Whit a button I made a reques to my controller, to get the content for "loadZone".
Code JSP request
function loadAsp(element) {
$.get('getInclude', {
include : $(element).attr('id')
}, function(responseText) {
$('#loadZone').html(responseText);
});
}
Controller
#Controller
#RequestMapping(value = "/getInclude")
public class IncludesDispatcherController {
#Autowired
FormModelBo boConsultas;
#GetMapping
public ModelAndView getReportesView() {
ModelAndView mav = new ModelAndView("includes/reportes");
try {
mav.addObject("consultas", boConsultas.consultaGeneral());
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return mav;
}
}
I return the view with a model to make a title table and that can see in the above JQuery fragment I put the view in the div with html() method.
JSP to be include (children)
<%# page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<%# taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%# page isELIgnored="false"%>
<div>
<center>
<legend>
<!-- //<img alt="" src="img/pen.png"> -->
Censo Métricas Triage ${user.nombre}<br /> <--- this is parent variable.
</legend>
</center>
</div>
<form action="${user.rol.rolMap}/createExcel" method="POST" role="form" id="">
<div class="form-group">
<!-- -------------------------------------------first section--------------------------- -->
<div class="row" style="padding-bottom: 22px !important;">
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
<div class="form-group">
<div class="form-group ">
<div class="input-group ">
<span class="input-group-addon">Fecha inicio</span> <input type="date" id="fecha_1" name="fecha_1" />
</div>
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
<div class="form-group">
<div class="form-group ">
<div class="input-group ">
<span class="input-group-addon">Fecha final</span> <input type="date" id="fecha_2" name="fecha_2" />
</div>
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
<div class="form-group">
<div class="input-group">
<button type="submit" class="btn btn-primary">Generar Reporte</button>
</div>
<div class="help-block with-errors"></div>
</div>
</div>
</div>
</div>
</form>
<div style="padding-bottom: 22px !important;">
<table class="table">
<thead>
<tr>
<th>Nombre de médico</th>
<th>Número de consultas</th>
</tr>
</thead>
<tbody>
<c:forEach items="${consultas}" var="consultasLista">
<tr>
<td><c:out value="${consultasLista[0]} ${consultasLista[1]} ${consultasLista[2]}" /></td>
<td><c:out value="${consultasLista[3]}" /></td>
</tr>
</c:forEach>
</tbody>
</table>
</div>
the model variables that i send in my ModelAndView are working but my parent didn't.
I try with other methods like declare variblaes
<%
String variable = "test";
%>
or
request.setAttribute("attrName", myValue); (for catch it in my children JSP with request.getAttribute())
but not works too. I don't know if it 'cause JSP parent code is alredy compiled. I need access to my parent variables.
Please help me and thanks for the time.
If you need variable ${user.nombre} in IncludesDispatcherController you need to inject it to this controller and then to the view, otherwise it will be null.
Anyway, like someone already mention JSP is serverside language and your interaction with javascript and Ajax is not really perfect. It's much better aproach if you don't send directly HTML but for instance just use JSON to send data which javascript need.
After that it would be much better if you use the data, that you already have in your parent - "${user.rol.permisos}". You can put it in "data-" tag and then easily read by JQuery. In your loop, you can do something like this:
<a href="#" id="icon_1" data-nombre="${permisos.permisoNombre}">
And read it by this:
$("a#icon_1" ).data("nombre");
Related
I am just learning Laravel and following the Laravel 5.7 from scratch (I am using 5.8)course from Laracasts.
We create a new controller that should handle tasks associated with a project. We show the tasks on the details page for the particular project. All of this works so far. Then, we add a checkbox that indicates when a task has been completed. The checkbox is in a form that submits on change.
This is my form code.
#section('content')
<div class ="col col-md-6">
<form action="/tasks/{{$task->id}}" method="POST">
#method("PATCH")
#csrf
<label class = "checkbox" for="completed">Completed</label>
<input type="checkbox" name="completed" onChange="this.form.submit()">
</form>
</div>
#endsection
Currently, in my Controller, I have the function but am just trying to see if it is hitting the function so I die and dump. Or that is what it should do anyway..
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class ProjectTasksController extends Controller
{
public function update(){
dd("hello");
}
}
And, in my web.php file, this is how I have my route set up.
Route::patch('/tasks/{task}', 'ProjectTasksController#update');
Yet, it is not working. When I check one of the checkboxes, the URL changes to this
http://127.0.0.1:8000/projects/1?_method=PATCH&_token=0menrjzIOdiSn0SEu51unY114oKU8kZ2i2B5zy4p&completed=on
So, it is like it is not hitting the route though the route is defined. I don't know what I am doing wrong as I have done exactly what is being done in the video and so I am stuck.
Can someone tell me what is wrong with this?
change patch to post
Route::patch('/tasks/{task}', 'ProjectTasksController#update');
to
Route::post('/tasks/{task}', 'ProjectTasksController#update');
and then add parameter
public function update(){
dd("hello");
}
to
public function update($task){
dd("hello");
}
php artisan route:clear
php artisan route:cache
php artisan config:clear
Seems like an issue with the route cache, have your tried clearing your cache using artisan?
php artisan route:clear
php artisan config:clear
php artisan view:clear
php artisan cache:clear
These are the 4 commands to clear all the cache Laravel may have for your configs, routes and views.
Check if you have a form inside a form or rather a form component is wrapped in with other form tags; I had the same problem.
You may find out in the parent blade you have a form and the child(medical-info-components.payment) blade that is alone has a form also.
<div>
<fieldset>
#if ($stripe)
<div class="card-body">
<script src="https://js.stripe.com/v3/"></script>
<hr>
<div class="col-md-12">
<div class="card">
<div class="card-body">
<strong class="text-bold" style="font-size:20px;">Make Payment of
{{$currency}} {{$price}}
</strong>
<br>
<strong style="font-size:20px;">Please make payments by entering
your Credit or Debit
Card</strong>
</div>
</div>
</div>
<div class="col-md-6" style="float:right;">
<form action=" {!! action('\App\Http\Controllers\PaymentController#store') !!}" method="POST"
id="payment-form" ata-cc-on-file="false"
data-stripe-publishable-key="{{env('pk_test_')}}"
enctype="multipart/form-data">
#csrf
{{-- <input type="hidden" class="" name="stripeToken" id="stripeToken" wire:model.lazy="stripeToken" /> --}}
<div class="form-row">
<label for="card-element">
Your Name
</label>
<input type="text" name="name" class="form-control" wire:model.lazy='name'
placeholder="Enter Your Name" id="">
<label for="card-element">
Your Payable Amount
</label>
<input type="text" name="grandTotal" class="form-control" wire:model.lazy='amount'
placeholder="Enter Your Amount" id="">
<label for="card-element">
Credit or debit card
</label>
<div id="card-element" class="form-control">
<!-- A Stripe Element will be inserted here. -->
</div>
<!-- Used to display form errors. -->
<div id="card-errors" role="alert"></div>
</div>
<input type="button" class="previous action-button-previous btn btn-dark"
style="margin-left: -11rem; margin-top:15px;" value="Previous" wire:click='previousStep' />
<input type="submit" class="next action-button btn btn-primary"
style="float:right; margin-top:15px;" value="Confirm" />
</form>
</div>
</div>
#elseif($paypal) #elseif($mpesa) #endif
<div class="row">
<div class="col-md-12">
</div>
</div>
</fieldset>
And then inside the mother component, you may have this
<div>
<!-- call -->
<section class="slice">
<div class="container" id="grad1">
<div class="row justify-content-center mt-0">
<div class="col-12 text-center p-0 mt-3 mb-2">
<div class="card px-0 pt-4 pb-0 mt-3 mb-3 border-0 rounded-lg">
<div class="card-body px-5">
<div class="row">
<div class="col-md-12 mx-0">
{{-- <form id="msform"> --}}
<!-- progressbar -->
#livewire('medical-info-components.payment')
{{-- </form> --}} <!--You see here we have form wrapping our component that has form, you need to take it down-->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
First, I am developer for C, C++, C#, Android and Swift but I have absolutly no experience in JavaScript or PHP or Web development.
I bought some source code for my backend server. It is kind of shop where I can enter products and store them. Now, I got everthying to work (even with 0 knowdlege in web development), but there is a text input field which checks for integer values. I want to insert decimal values like a price information, e.g. 19.99. It then complains that it has to be 19 or 20. I can not find the place where to change that or which class/function is responsible for checking that entered value. There is something called Blade. It is in HTML and javaScript as it seems to me. I can not find any class or a route to a file where the entered values go and get checked. I don't even know which class/file is responsible for writing the values to the database. I mean, wtf? It can not be that complicated to find out which file is responsible to handle the entered values. It drives me crazy.
That is the input which only takes integer values.
This is the blade code:
{{-- resources/views/admin/dashboard.blade.php --}}
#extends('adminlte::page')
#section('title', 'Products')
#include('parts.header')
#section('content_header')
<div class="col-md-12">
<h2>Add new product</h2>
</div>
#stop
#section('content')
<div class="row">
<div class="col-sm-12">
<form method="post" action="{{ route('product.add') }}" enctype="multipart/form-data">
{{ csrf_field() }}
#if(!$errors->isEmpty())
<div class="alert alert-danger alert-dismissible">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
<h4><i class="icon fa fa-ban"></i> Alert!</h4>
#foreach ($errors->all() as $error)
<div>{{ $error }}</div>
#endforeach
</div>
#endif
<div class="col-sm-12">
<div class="box box-primary">
<div class="box-header with-border">
<h3 class="box-title">Details</h3>
</div>
<!-- /.box-header -->
<!-- form start -->
<form role="form">
<div class="box-body">
<div class="row">
<div class="col-sm-4 form-group ">
<label for="name">Name</label>
<input type="text" name="name" class="form-control" id="name" placeholder="Enter name" required>
</div>
<div class="col-sm-4 form-group ">
<label for="name">Description</label>
<input type="text" name="description" class="form-control" id="name" placeholder="Enter description" required>
</div>
<div class="col-sm-3 form-group ">
<label for="category">Select category</label>
<select name="category_id" class="form-control" required>
<option value="" disabled selected>Select your option</option>
#foreach($categories as $category)
<option value="{{ $category->id }}">{{ $category->name }}</option>
#endforeach
</select>
</div>
</div>
<div class="row">
<div class="col-sm-4 form-group">
<label for="price">Price</label>
<input type="number" name="price" class="form-control" id="price" placeholder="Enter price" required>
</div>
<div class="col-sm-4 form-group">
<label for="amount">Amount</label>
<input type="number" name="amount" class="form-control" id="amount" placeholder="Enter amount" required>
</div>
<div class="col-sm-3 form-group">
<div class="row">
<div class="col-sm-6">
<img id="myImg" alt="" style="width: 100%;">
</div>
<div class="col-sm-6">
<label for="image">Image</label>
<input class="fullwidth input rqd" type="file" name="image" id="image" accept="image/*" onclick="fileClicked(event)" onchange="fileChanged(event)" required>
<div id="log"></div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<h4>Variations</h4>
<div class="box-body table-responsive no-padding">
<table id="variationTable" class="table table-bordered table-hover dataTable" role="grid">
<thead>
<tr role="row">
<th rowspan="1" colspan="1">#</th>
<th rowspan="1" colspan="1">Owner</th>
<th rowspan="1" colspan="1">Remove</th>
</tr>
</thead>
<tbody>
<tr role="row" class="odd">
<td>1</td>
<td>
<input type="text" name="owner_id[]" placeholder="Enter owner" required>
</td>
<td>
<i class="fa fa-fw fa-remove"></i>
</td>
</tr>
</tbody>
</table>
</div>
<button type="button" class="btn btn-default btn-sm addrow pull-right" style="height: 34px;">
<span class="glyphicon glyphicon-plus-sign"></span> Add
</button>
<div class="clearfix"></div>
<div>
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
<div class="col-sm-6">
<h4>Siblings</h4>
<div class="form-group">
<select name="siblings[]" class="form-control select2" multiple>
#foreach($products as $product)
<option value="{{ $product->id }}">{{ $product->name }} </option>
#endforeach
</select>
</div>
</div>
</div>
</div>
<!-- /.box-body -->
</form>
</div>
</div>
</form>
</div>
</div>
#stop
#section('js')
#include('parts.footer');
#stop
Can somebody tell me where to find the code which handles the input? Where to find the function which checks for integer? I really searched every file, but somehow I am too stupid for that web stuff.
There is something like a class mentioned: col-sm-4 form-group but I can not find it?!?
Thanks.
Use step attribute for your number input
Float
<input type="number" step="0.01">
Int
<input type="number">
Go to app/Http directory; then you have to check for the controller that handles that very view. Look for validator method in the controller file. It is something like this:
<php?
protected function validator(array $data)
{
return Validator::make($data, [
'price' => 'required|string|min:19|max:20'
]);
}
You can change it as you want.
Add step="0.01"(for example 0.01) property to your price input.
If it's been checked on client side you can check resources/views/parts/footer and find out which javascript files are included in your template then check that javascript files for the validation.
If it's server side, most common place for validations is app/Http/Requests. but before going for requests you should check the Controller and action which is responsible for responding to that request and check which Request class is input paramter for that action then got to app/Http/Requests and find that class and edit validation rules
Here I am sending data of mail id and its visibility to server for two different users for one I have included mail and its visibility and for another hiding visibility.
To hide visibility I am using <div ng-if="atom.type === 'person'">.
Hiding and showing is working properly but problem is that on both case
it is showing visibility undefined.
If I am not using <div ng-if="atom.type === 'person'">. then it is properly sending visibility.
How to resolve this?
My Code is bolow
var myApp = angular.module('myApp', ['ngMessages']);
myApp.controller('profileInfo', function($scope, $http) {
$scope.authorized = false;
$scope.visibility = ["Private", "Friends", "Public"];
$scope.id = 0;
$atom.type = 'person';
$scope.addMailId = function(data) {
console.log(data);
$scope.mailidDetaillD = {
'mailidDetaillList[0].email': data.mailid,
'mailidDetaillList[0].visibility': data.visibility,
'pageId': $scope.id,
};
console.log($scope.mailidDetaillD);
}
});
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.9/angular-messages.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.9/angular.min.js"></script>
<dd class="col-sm-7 col-md-7 col-lg-7">
<div class="pull-right" ng-if="authorized">
<a ng-click="showAddMailIdDiv()" ng-model="addMailIdLink">add MailId Details</a>
<div class="add-school" ng-show="showAddMailId">
<form action="AddMailId" id="AddMailId" name="addmail" cssClass="form-horizontal">
<div class="form-group">
<div class="col-lg-2">
<label>Mail Id</label>
</div>
<div class="col-lg-6">
<input type="text" ng-model="mail.mailid" name="mailid" placeholder="Enter mail id" required class="form-control" />
<div ng-messages="addmail.mailid.$error" ng-if="addmail.mailid.$touched">
<p class="field-err" ng-message="required">MailId Required</p>
</div>
</div>
</div>
<div ng-if="atom.type === 'person'">
<div class="form-group">
<div class="col-lg-2">
<label>Visibility</label>
</div>
<div class="col-lg-6">
<select ng-model="mail.visibility"
ng-init=" mail.visibility = visibility[1]"
ng-options="x for x in visibility"
class="form-control"
name="mailvisibility" required>
</select>
<div ng-messages="addmail.mailvisibility.$error" ng-if="addmail.mailvisibility.$touched">
<p class="field-err" ng-message="required">Select Mail visibility</p>
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="col-lg-2">
<label class="sr-only">Submit</label>
</div>
<div class="col-lg-6 pull-right">
<input type="button" value="add" ng-click="addMailId(mail)" ng-disabled="addmail.$invalid" cssClass="btn btn-sm btn-primary" />
<input type="button" ng-click="hideAddMailIdDiv()" value="cancle" class="btn btn-sm btn-secondary" />
</div>
</div>
</form>
</div>
</div>
</dd>
last console.log is showing following result
mailidDetaillList[0].email: "W#w.com"
mailidDetaillList[0].visibility: undefined
pageId: 2337
after removing <div ng-if="atom.type === 'person'">
mailidDetaillList[0].email: "ss#s.com"
mailidDetaillList[0].visibility: "Public"
pageId: 2337
Delete the ng-init:
<select ng-model="mail.visibility"
̶n̶g̶-̶i̶n̶i̶t̶=̶"̶ ̶m̶a̶i̶l̶.̶v̶i̶s̶i̶b̶i̶l̶i̶t̶y̶ ̶=̶ ̶v̶i̶s̶i̶b̶i̶l̶i̶t̶y̶[̶1̶]̶"̶
ng-options="x for x in visibility"
class="form-control"
name="mailvisibility" required>
</select>
And set visibility from the controller:
$scope.mail = { visibility: $scope.visibility[1] };
AngularJS is an MVC - Model-View-Controller framework. The framework renders the View from the Model. The Controller creates the Model. Using ng-init to create the Model is going the wrong way. It makes an App that is difficult to understand, test, debug, and maintain.
The ng-init directive can be abused to add unnecessary amounts of logic into your templates. There are only a few appropriate uses of ngInit. See AngularJS ng-init Directive API Reference.
Hello I am building an angular application and I have a problem inside my stripe form. Basically I send data such as card number, expiry date and CVC code from the view to the controller's stripe callback, but I would like to add also the amount of money to pay. So I added this into my form:
<form stripe-form="handleStripe" name="myForm">
<!-- input added for the price -->
<div class="row" ng-if="!unregistered_user">
<div class="input-field col col-xs-12">
<label for="name">Amount </label>
<input name='price' type="number" id="amount" ng-model="price">
</div>
</div>
<!-- credit/debit card form -->
<div class="row">
<div class="input-field col col-xs-12">
<label for="cardn">Card number</label>
<input type="text" name="number" id="cardn" ng-model="number" payments-validate="card" payments-format="card" payments-type-model="type" ng-class="myForm.number.$card.type"/>
</div>
</div>
<div class="row">
<div class="input-field col-xs-6">
<label for="exp">Expiry</label>
<input type="text" id="exp" ng-model="expiry" payments-validate="expiry" payments-format="expiry" />
</div>
<div class="input-field col-xs-6">
<label for="cvc">CVC</label>
<input type="text" id="cvc" ng-model="cvc" payments-validate="cvc" payments-format="cvc" payments-type-model="type"/>
</div>
</div>
<div class="row">
<div class="input-field col-xs-12">
<button type="submit" class="btn btn-primary btn-large">Pay {{ price }}</button>
</div>
</div>
</form>
In the controller I have this variable:
▸ $scope.price = 0;
When I first load the page I can see that the price input has exactly the same amount that I put in the variable $scope.price. But when I changed it in the page and submit the form, $scope.price is always 0.
It's like the data is being passed from the controller to the view, but not the way back from the view to the controller.
How can I solve this?
I think your issue is with ng-if that wraps your input with price model. ng-if creates its own scope and in your case the price is connected with the scope inside ng-if and not with you controller.
You could use ng-show instead, or set the model like this: ng-model = "$parent.price" or use controllerAs syntax and you don't have to worry about this issue anymore.
To Edit/Update the displayed details of HTML form.
view.php
I have some output/display details as such-
FirstName: ABC
LastName: PQR
Position: Developer
Gender: Male
This is displayed in proper format in HTML bootstrap.
Now ,we want to edit/update this details ,that is onClick of button these fields should convert into textboxes with auto-fill of these same values as such-
------
Gender: Male <-in the textbox on edit/update click button. [For all fields]
------
We have tried this so far-
<div class="form-group">
<div class="row">
<div class="col-lg-2">
<label for="Telephone Number">Firstname :</label>
</div>
<div class="col-lg-2 f1">
<?php echo $FirstName; ?>
</div>
<div class="fnane">
<input type="text" class="form-control" value="<?php echo $row['FirstName'];?>">
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-lg-2 f1">
<label for="LastName">Lastname :</label>
</div>
<div class="col-lg-2">
<?php echo $LastName; ?>
</div>
<div class="lname">
<input type="text" class="form-control" value="<?php echo $row['LastName'];?>">
</div>
</div>
</div>
<div class="btn-group">
<input type="button" id="candi_v_btn" name="candi_v_btn" value="Edit" class="btn2 btn-primary show" style="margin-left:348px"> <!--onClick="document.location.href='addcandidate.php'"-->
</div>
And Jquery as:
(function() {
$( document ).ready(function() {
$('.fname').eq(0).hide();
$('.lname').eq(0).hide();
$('.pos').eq(0).hide();
$('.gen').eq(0).hide();
});
$(".show").click(function () {
$('.f1').eq(0).hide();
$('.fname').eq(0).show();
$('.lname').eq(0).show();
$('.pos').eq(0).show();
$('.gen').eq(0).show();
});
})();
What we are getting from above codes is - Infront of output values blank textboxes are being displayed.
What we are getting is
First, I noticed a few errors in the HTML, so those were cleaned up. That was part of the problem. One of those was the class="fnane" (should be class="fname"). Another was that the f1 class for the lastname text was in the wrong spot.
After those changes, I switched up a bit of the jquery function. I think it is functioning the way you are wanting, but let me know if not. Here is the cleaned up code:
EDIT: Adding JSFiddle link.
HTML
<div class="form-group">
<div class="row">
<div class="col-lg-2">
<label for="Firstname">Firstname :</label>
</div>
<div class="col-lg-2 f1">
Testing
</div>
<div class="fname">
<input type="text" name="Firstname" class="form-control" value="Testing" />
</div>
</div><!-- /.row -->
</div><!-- /.form-group -->
<div class="form-group">
<div class="row">
<div class="col-lg-2">
<label for="LastName">Lastname:</label>
</div>
<div class="col-lg-2 f1">
McTesterson
</div>
<div class="lname">
<input type="text" name="Lastname" class="form-control" value="McTesterson" />
</div>
</div>
</div><!-- /.row -->
<div class="btn-group">
<input type="button" id="candi_v_btn" name="candi_v_btn" value="Edit" class="btn btn-primary show" />
</div><!-- /.btn-group -->
</div><!-- /.form-group -->
JQUERY
(function() {
$( document ).ready(function() {
$('.fname').hide();
$('.lname').hide();
});
$(".show").click(function () {
$('.f1').hide();
$('.fname').show();
$('.lname').show();
});
})();
Hope this helps the cause.
EDIT 2: Adding another JSFiddle link that adjusts the JS a tad, and things still work.
#vinod...I was looking for this post from yesterday. I am too a learner of js.
You can try with this edits..use window.load() instead of document.ready() as-
(function () {
$(window).load(function(){
//Your code as written above.
});
})();
This works fine for me in fiddle.
It Worked, what the error was we were using document.ready() instead of window.load(). Thanks For all of your suggestions.
(function () {
$(window).load(function(){
$('.fname').hide();
$('.lname').hide();
$('.pos').hide();
$('.gen').hide();
});
})();
$(".show").click(function () {
$('.f1').hide();
$('.fname').show();
$('.lname').show();
$('.pos').show();
$('.gen').show();
});
)}();