1

I'm making a CRUD application for a school project, where there is a list of 'lesson groups', which you can add or remove.

I have a bootstrap modal that looks like this, where you can input a lesson group name and press a button to submit it:

<div class="modal fade" id="lessonGroupAddModal" tabindex="-1" role="dialog"
     aria-labelledby="lessonGroupAddModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="lessonGroupAddModalLabel">Les groep toevoegen</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form class="addLessonGroupForm" role="form">
                    <div class="form-group">
                        <label for="lessonGroupName-input" class="col-2 col-form-label">Naam</label>
                        <div class="col-10">
                            <input class="form-control" type="text" value="" id="lessonGroupName-input">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Sluiten</button>
                <button id="addLessonGroupButton" type="button" class="btn btn-primary">Toevoegen</button>
            </div>
        </div>
    </div>
</div>

The button works by a JavaScript AJAX post request, this looks like this:

$("#addLessonGroupButton").on("click", function() {
    if($("input[type=text]#lessonGroupName-input").val()) {
         $.ajax({
            type: 'POST',     
            url:'lessongroup/add.action',
            dataType: 'json',
            data : "lessonGroupName="+$("input[type=text]#lessonGroupName-input").val(),
        });
    }
    location.reload();
});

The action method i'm using for this looks like this:

public String addLessonGroup() {
    if (this.lessonGroupName == null || this.lessonGroupName.equals("")) {
        return ERROR;
    }
    LessonGroup previousLessonGroup = this.getLessonGroups().last();

    TestDAOLessonGroup.getInstance().create(new LessonGroup(previousLessonGroup.getId() + 1, lessonGroupName));
    System.out.println("added lesson group with name " + lessonGroupName);
    return SUCCESS;
}

The TestDAOLessonGroup is a singleton which saves that objects, i'm 100% sure the object is only getting made once.

The execute method of the controller looks like this:

public String execute() {
    if (lessonGroups == null) {
        lessonGroups = new TreeSet<>();
    }
    lessonGroups.clear();
    lessonGroups.addAll(TestDAOLessonGroup.getInstance().getLessongroups());
    return SUCCESS;
}

This puts the most recent lesson groups into the variable, which i am getting in the view.

My struts.xml action mapping looks like this:

<action name="lessongroup" class="employeemanagement.LessonGroupListingAction"
        method="execute">
    <result name="success">index.jsp</result>
</action>

I'm 100% sure this mapping works, and the lesson grouups are getting loaded in the view.

The problem is that when you add a new lesson group to the DAO via the post request, and it reloads the page by the location.reload(); statement, it doesn't call up the action the first time. When I add another lesson group, it works just fine.

How can I make it so that the Action would get called on the first page refresh? Am I using the right approach for this?

Roman C
  • 49,761
  • 33
  • 66
  • 176
Bas
  • 2,106
  • 5
  • 21
  • 59
  • First of all, if a post request is sent, the location.reload() should be called as callback on the post request as the Ajax call is asynchronous. – geo Mar 23 '17 at 13:25
  • @geo how would I do that? I don't really get it, I don't want to dynamicly replace html – Bas Mar 23 '17 at 13:27
  • If you check here http://api.jquery.com/jquery.ajax/ there is the complete, which is a function to be called when the request finishes (after success and error callbacks are executed). I dont know if this is the problem but your implementation when the post is request is present is wrong. Also, have a look here http://stackoverflow.com/questions/748175/asynchronous-vs-synchronous-execution-what-does-it-really-mean – geo Mar 23 '17 at 13:30

1 Answers1

0

The url is not mapped to the action. You should add

<action name="add" class="employeemanagement.LessonGroupListingAction"
        method="add">
  <result type="json"/>
</action> 

The json plugin is required to return json type result.

This action should be mapped to the url in ajax call

$("#addLessonGroupButton").on("click", function() {
    if($("input[type=text]#lessonGroupName-input").val()) {
         $.ajax({
            type: 'POST',     
            url:'add.action',
            dataType: 'json',
            data : "lessonGroupName="+$("input[type=text]#lessonGroupName-input").val(),
            success: function(data) {
              console.log(JSON.stringify(data));
            }
        });
    }        
});
Roman C
  • 49,761
  • 33
  • 66
  • 176
  • Is it needed to put the mapping in another package in the `struts.xml` file? – Bas Mar 29 '17 at 09:54
  • the url is relative to the current package/namespace, if you need another package you need to change the url. I recommend to use `s:url` tag, but you use hard-coded urls, so it's up to you. Also note if you accept the answer you should upvote it. – Roman C Mar 29 '17 at 20:27