Oliver February 2016

How to load a specific DIV when clicked a link without refreshing the whole page?

I was trying to do this for days. Pleas help me to do this, I have no idea how to do this. If there are any errors please be kind to make them correct. Thank you.

This is the 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 is the AJAX CODE

  <script type="text/javascript">       
        function getProjectDetails() {

            $.show( "project?create", function ( data ) {

                $( "#mainContainer" ).html( data );
            });
        }   
    </script>

This is the 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 is the 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 is :  " + projectName);
    }
        

Answers


James Lloyd February 2016

As I mentioned in a comment, I would recommend using Bootstrap collapisbles as you only need HTML and CSS for this. Below is a quick example, but have a look through this for 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">
            Everything goes here...
        </div>
    </div>
</div>


Samsad Hasan February 2016

<html>
<head>
    <style type="text/css">
        .windowModal { 
        position: fixed; 
        font-family: Arial, Helvetica, sans-serif; 
        top: 0; 
        right: 0; 
        bottom: 0; 
        left: 0; 
        background: rgba(0,0,0,0.8); 
        z-index: 99999; 
        opacity:0; 
        -webkit-transition: opacity 400ms ease-in; 
        -moz-transition: opacity 400ms ease-in; 
        transition: opacity 400ms ease-in; pointer-events: none; 
        } 
        .windowModal:target { 
        opacity:1; pointer-events: auto; 
        } 
        .windowModal > div { 
        width: 200px; 
        position: relative; 
        margin: 10% auto; 
        padding: 5px 20px 13px 20px; 
        border-radius: 10px; 
        background: #fff; 
        background: -moz-linear-gradient(#fff, #999);
        background: -webkit-linear-gradient(#fff, #999); 
        background: -o-linear-gradient(#fff, #999); 
        height"30px;
        } 
        .close { 
        background: #606061; 
        color: #FFFFFF; 
        line-height: 25px; 
        position: absolute; 
        right: -12px; 
        text-align: center; 
        top: -10px; 
        width: 24px; 
        text-decoration: none; 
        font-weight: bold; 
        -webkit-border-radius: 12px; 
        -moz-border-radius: 12px; 
        border-radius: 12px; 
        -moz-box-shadow: 1px 1px 3px #000; 
        -webkit-box-shadow: 1px 1px 3px #000; 
        box-shadow: 1px 1px 3px #000; 
        } 
        .close:hover { 
        background: #00d9ff; 
        } 
    </style>
    <title>Hello</title>
    <script>
        $(document).ready(function() { $("#divModal").load("#divModal"); }); 
    </script>
</head>
<body onload="#divModal">
    <a href="#divModal">Open Modal Window</a>
    <div id="divModal" class="windowModal">
        <div>
            <a href="#close" title="Close" class="close"> 

Post Status

Asked in February 2016
Viewed 1,873 times
Voted 7
Answered 2 times

Search




Leave an answer