Menuka Ishan Menuka Ishan - 2 years ago 74
Javascript Question

$().click need to press twice. Jquery JSP

I'm trying to create a table on jsp with JSON Array from Servlet. My problem is I need to press twice the Button to get the output.

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<title>Search a User</title>
<link rel="stylesheet" href="">
<script src=""></script>
<script src=""></script>

<script type="text/javascript">
$(document).ready(function() {
$('#search1').click(function ()
var searchdata = $("#searchword").val();
type: "GET",
url: "Search", //this is my servlet
data: {searchword :searchdata },
success: function(data){
var out = "<table>";

for(i = 0; i < data.length; i++) {
out += "<tr><td>" + data[i].fname + "</td><td>" +data[i].lname +"</td><td>" + data[i].dob + "</td><td>" + data[i].country +"</td><td>" + data[i].email + "</td><td>" +data[i].mnumber +"</td></tr>";
out += "</table>";
document.getElementById("id01").innerHTML = out;

<form method="post" class="form-horizontal">

<div class="form-group">
<label class="col-md-4 control-label" for="searchword">Search a User</label>
<div class="col-md-5">
<input id="searchword" type="text" placeholder="Add User's name" class="form-control input-md" required="">


<div class="form-group">
<label class="col-md-4 control-label" for=""></label>
<div class="col-md-3">
<button id="search1" class="btn btn-block btn-success">Search</button>

<div id="id01"></div>

To create the expected output I need to click twice on the Search Button. The JSON array retrieve Correctly But Jquery function Does not response to the click.

Answer Source

Seems to run after first click, so maybe you have conflicting code somewhere on your page?

$('#search1').click(function() { }

Or, are you testing on a mobile device?

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download