Trying to create a new category. I send it to the server for saving in the database, and if success, I want to add it to everyone else in the panel-group. There are no problems with sending to the server, but I don’t understand how to add it to the panel-group, like another panel, without reloading the page. Please tell me how it can be done.

panel-group:

<div class="panel-group" id="panelGroupId"> <c:forEach items="${categories}" var="category" varStatus="loop"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title row"> <a data-toggle="collapse" class="col-sm-5" data-target="#collapseIn-${category.id}">${category.name}</a> <div class="col-sm-6">${category.description}</div> <button class="btn btn-primary" data-toggle="modal" data-target="#editCategory" onclick="showId(${category.id})"> <span class="glyphicon glyphicon-edit"></span> </button> <button class="btn btn-danger" data-toggle="modal" data-target="#deleteCategory" onclick="showId(${category.id})"> <span class="glyphicon glyphicon-remove"></span> </button> </h4> </div> <div id="collapseIn-${category.id}" class="panel-collapse collapse"> <div class="panel-body row"> <c:forEach items="${category.criteria}" var="criteria" varStatus="loop"> <div class="col-sm-2">${criteria.title}</div> <button class="btn btn-danger btn-xs" onclick="showId(${criteria.id})"> <span class="glyphicon glyphicon-remove"></span> </button> <br> </c:forEach> </div> </div> </div> </c:forEach> </div>

jquery method:

 $("#saveCategory").click(function () { $.ajax({ url: "/addCategory", type: "POST", data: {name: $("#categoryName").val(), "description": $("#categoryDescription").val()}, success: function (data) { console.log(data); $("#panelGroupId").add // Здесь как-то добавить запись к panel-group }, error: function (textStatus) { console.log(textStatus); } }); });
  • the add request must render the partial socket template, and return it as part of the data . Then you add it to the panel a la $("#panelGroupId").append(data.result_html) . There may be other options, but this one will be the easiest. - teran
  • Are you saying that in response, the server should be something like <div class = "panel panel-default"> everything in between </ div>? - Aleksei
  • And another question that is not quite on the topic: Why, if you declare a function just in <script> </ script>, you can use it on the view via onclick = functionName (), and if you declare it in $ (document) .ready (function () {}); is it just not visible? - Aleksei
  • Yes, in the server's response you need to return the html code. In general, it can also be json data, in one of which fields there will be html. - teran
  • about the second question without code is not very clear, but when using jquery it is not clear why writing constructions like onclick=something() , handlers in this case should also be hooked through jquery - teran

0