在Ajax中单击Form附加html页面中的按钮后

时间:2016-03-03 09:58:21

标签: javascript java jquery ajax jquery-mobile

我正在使用Jquery移动框架工作,也是jquery mobile的新功能。我想通过Ajax追加一个html页面。首先,我在表单中按一个按钮(检查),但每当点击此按钮,然后附加页面,但布局将是损坏。我不知道如何在jquery mobile中通过ajax附加HTML页面。

SCINEN SHOT for HINTS:

  1. 此页面在点击检查按钮之前:

    enter image description here

  2. 点击“检查”按钮后:

    enter image description here

  3. HTML CODE:

     <form id="checkPinCode1" method="get" data-uri="<c:url value="/pincode-available/${product.productId}/${product.productOfCityId}"/>" data-ajax="false"> 
            <div  style="margin-bottom: 20px; width: 80%;">
                <input name="pinCode" type="number"   class="form-control pinCode" placeholder=" Enter pincode here..">   
            </div>
            <div  style="margin-bottom: 20px; width:40%;">
                <button class="btn btn-primary" type="submit" value="Check">Check</button>
            </div>
    </form>
    
    
    <div id="showPincodeAvailablity"> 
    <%--APPEND PAGE HERE--%>
    </div>
    

    AJAX代码:

     $.ajax({
                        type: 'get',
                        url: url,
                        data: {pincode: pincode},
                        success: function (response) {
                            if (response.success === "true") {  
                                $("#showPincodeAvailablity").html(response.html);    
                            }                       
                        },
                        error: function (response) {                      
                        },
                        complete: function (response) {
                        }
                    });
    

    JAVA CODE:

       @RequestMapping(value = "/pincode-available/{productId}/{productOfCityId}", method = {RequestMethod.GET})
            @ResponseBody
        <%--- CODE LINE 1--%>
     <%--- CODE LINE 2--%>
     <%--- CODE LINE .....--%>
         resp.put("success", "true");
                    resp.put("html", html);
    
                }
    

    首先我输入密码并单击检查按钮然后检查按钮控制转到控制器并进入ajax然后通过id = showPincodeAvailablity追加页面。和页面附加但页面布局不正确。给我一些实现此解决方案的想法。

1 个答案:

答案 0 :(得分:0)

尝试更改此行

$("#showPincodeAvailablity").html(response.html); 

到这个

$("#showPincodeAvailablity").html(response.html).enhanceWithin();