时间戳

首页 > 解决方案 > 有什么方法可以使用 jquery 在同一页面上显示 div？div 类有参数。所以正常的 Div.show() 不起作用，因为我们无法在其中传递参数对象

javascript - 有什么方法可以使用 jquery 在同一页面上显示 div？div 类有参数。所以正常的 Div.show() 不起作用，因为我们无法在其中传递参数对象

问题描述

 <!-- Search results tab -->
        <div id="testingClass" style="display:none;">
            <h3 class="theme-background">Course Results (${courseResponseList.getCourses().size()})</h3>
            <br>
            <c:forEach items="${courseResponseList.getCourses()}" var="course"
                varStatus="loop">
                <form action="/search/course/edit" method="post">
                    <div class="panel panel-default panel-shadow">
                        <div id="${course.getCourseID()}-panel-heading" class="panel-heading" data-toggle="collapse"
                            data-target="#${course.getCourseID() }" aria-expanded="false">
                            <c:set var="showAssignButton" value="false" />
                            <c:forEach items="${enrolledCourseList}" var="courseEnrolled"
                                varStatus="loop">
                                <c:if
                                    test="${courseEnrolled.getCourseID() eq course.getCourseID()}">
                                    <c:set var="showAssignButton" value="true" />
                                </c:if>
                            </c:forEach>
                            <tags:courseNameAndDescription courseResponse="${course}"
                                showAssignButtonValue="${showAssignButton}" />
                        </div>
                        <div id="${course.getCourseID() }" class="panel-body collapse">
                            <tags:courseMetaData courseResponse="${course}" />
                        </div>
                    </div>
                </form>

            </c:forEach>
        </div>

Want to show above div.


jquery script.

<script>
jQuery.noConflict();
$("#searchButton").click(function (e) {
e.preventDefault();
var data = [];

                    $.ajax({
                        type: "GET",
                        contentType : "application/json",

                        url : "/search/getCourseList",

                        data : $("#courseSearchForm").serialize(),


contentType:"application/json; charset=utf-8",
  dataType:"json",
                        success : function (data) {



                         var jsobj = JSON.parse(JSON.stringify(data));
                         console.log(jsobj);


//WHAT SHOULD I DO HERE ?

                         alert("reached");

                        },
                        error : function(e) {

                            alert("Failed to search....");
                        }
                        });


 });
</script>

我从 ajax 调用中获取课程列表，但我无法在同一页面上显示它。Jquery.load(url) 也将不起作用，因为 jsp 文件位于 WEB-INF 中。所以我们不能通过url访问它。div id="testingClass" 存在于同一个文件中。（courseSearchPage.jsp）。我想在单击搜索按钮时显示此 div。

标签： javascriptjquery

解决方案

我试图最好地理解你的问题，这个代码片段对我有用。

$("#searchButton").click(function(e) {
  e.preventDefault();
  var data = [];
  $.ajax({
    type: "GET",
    contentType: "application/json",
    url: "http://httpbin.org/get?test=chakram",
    data: $("#courseSearchForm").serialize(),
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function(data) {
      $('#testingClass').show(); //ADD THIS LINE HERE
    },
    error: function(e) {
      alert("Failed to search....");
    }
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" id="searchButton">click me</button>
<div id="testingClass" style="display:none;">
  <h3>your div has now been shown!</h3>
</div>

推荐阅读