java - How to load a specific DIV when clicked a link without refreshing the whole page? -
i trying days. pleas me this, have no idea how this. if there errors please kind make them correct. thank you.
this html code
<li><a href="#" onclick="getprojectdetails();"> <i class="fa fa-dashboard"></i> <span>new project</span> <i class="fa fa-angle-left pull-right"></i>
this ajax code
<script type="text/javascript"> function getprojectdetails() { $.show( "project?create", function ( data ) { $( "#maincontainer" ).html( data ); }); } </script>
this controller class
@controller public class projectcontroller { private static final logger logger = loggerfactory.getlogger(usercontroller.class); @requestmapping(value="project", params="create", method= requestmethod.get)//folder name, page name public string createproject(model model) { logger.info("create project methof called"); model.addattribute("dto", new projectdto()); return "project/create"; } }
this data transfer class
public class projectdto { @notnull @size(min=4 , max=30) private string projectname; public projectdto() { } public string getprojectname() { return projectname; } public void setprojectname(string projectname) { this.projectname = projectname; system.out.println("value : " + projectname); } }
here few images of interface. div i'm talking large empty space in images.
as mentioned in comment, recommend using bootstrap collapisbles need html , css this. below quick example, have through more information: http://www.w3schools.com/bootstrap/bootstrap_collapse.asp
<div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" href="#collapse">collapsible group</a> </h4> </div> <div id="collapse" class="panel-collapse collapse"> <div class="panel-body"> goes here... </div> </div> </div>
Comments
Post a Comment