I've got a problem trying to display datepickers in a new JSP, after called it with Jquery.load function. No datapcikers are showing up unless I use this command:
$("#ui-datepicker-div").remove();
But if I do, the others datepickers that I have in the main jsp stop working.
The new JSP is called from the main like this:
$('#divNewJSP').load("myServlet?OP=1, function() {
$('#divNewJSP').slideDown();
The servlet executes correctly and I have the following code running in the new JSP, at the beggining fo the document:
$(document).ready(function() {
$('#dateField').datepicker($.datepicker.regional["pt"]);
$('#dateField').datepicker("show")
...
I've been trying several options but no one seems to work...Any ideas please?
Thx in advance.
EDIT
<link type="text/css" rel="stylesheet" href="/css/monitor.css"/>
<link type="text/css" rel="stylesheet" href="/css/jquery.dataTables.css" />
<script type="text/JavaScript" src="/js/jquery-1.11.1.js"></script>
<script type="text/JavaScript" src="/js/jquery.form.js"></script>
<script type="text/JavaScript" src="/js/jquery-ui.js"></script>
<script type="text/JavaScript" src="/js/jquery.ui.datepicker-es.js"> </script>
<script type="text/javascript" src="/js/jquery.dataTables.js?ver=a0.8185263484592263"></script>
<script>
$(document).ready(function() {
createDatatable();
// Datepickers
/*$("#ui-datepicker-div").remove();*/ <------ IT WORKS WITH THIS
//*** ORIGINAL DATEPICKERS INIT ***//
/* $('#dateField1').datepicker($.datepicker.regional["es"]);
$('#dateField2').datepicker($.datepicker.regional["es"]);
$('#dateField3').datepicker($.datepicker.regional["es"]);
$('#dateField4').datepicker($.datepicker.regional["es"]);*/
});
<body>
<div id="blockResult">
<div id="formCriteraRC"><br/>
<fieldset style="float:left;border:1px solid #007E3A;padding:0.5em;margin-bottom:0.5em;width:98%;">
<legend class="caption">Search Criteria</legend>
<table>
<tr>
<tr>
<div class="intrnot_small">
<span class="labelDateField">Date 1:</span>
<input type="text" class="bloquesinmargen campo" id="dateField1" value="" />
<span class="labelDateField">Date 2:</span>
<input type="text" class="bloquesinmargen campo" id="dateField2" value="" />
</div>
</tr>
<tr>
<div class="intrnot_small>
<span class="labelDateField">Date 3:</span>
<input type="text" class="bloquesinmargen campo" id="dateField3" value="" />
<span class="labelDateField">Date 4:</span>
<input type="text" class="bloquesinmargen campo" id="dateField4" value="" />
</div>
</tr><br/>
<tr>
<div class="intrnot_small">
<input type="button" id="search value="Search" disabled>
<input type="button" id="clean" value="Clean">
</div>
</tr>
</table>
</fieldset>
</div> <!-- end form -->
<div id="listData">
<table id="datatableReg" class="display nowrap" cellpadding="0" cellspacing="0" width="100%" style="table-layout:fixed;">
<thead>
<tr>
<th width="15px">Sel.</th>
<th width="120px">Id</th>
<th width="90px">Origin</th>
<th width="80px">Códe</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div> <!-- end -->
</div>
<div id="divDetailResult" class="bloquesinmargen" style='overflow-x: hidden; height: 99%; width: 99%; max-width:99%; display: none; top:0px;'> </div>
</body>
</html>
EDIT 2: MAIN JSP CALLING (from its .js)
function openNewJSP(){
$('#divNewJSP').load("myServlet?OP=1", function() {
$('#divNewJSP').slideDown();
$('#dateField1').datepicker($.datepicker.regional["pt"]);
$('#dateField2').datepicker($.datepicker.regional["pt"]);
$('#dateField3').datepicker($.datepicker.regional["pt"]);
$('#dateField4').datepicker($.datepicker.regional["pt"]);
});
}
You have to execute the datepicker function inside of your callback:
$('#divNewJSP').load("myServlet?OP=1", function() {
$('#divNewJSP').slideDown();
$('#dateField').datepicker($.datepicker.regional["pt"]);
$('#dateField').datepicker("show");
});
Remove the following code from your JSP (servlet response):
$(document).ready(function() {
$('#dateField').datepicker($.datepicker.regional["pt"]);
$('#dateField').datepicker("show");
});
Related
So, in template allRates i have a button "show by Ask" and upon clicking it I want to trigger showRates() method in managementh.js which to my understanding will swap the body of wathever is within <div class="Allrate-container"> with body found under given url ("http://localhost:8090/AllRatesFiltered,) but it does not work, nothing happens when I click the button, no bugs or errors are shown in my IDE, no action in Network in devtool on front end is triggerd when the button is clicked, clicking the button does not trigger showRates() method.
How to swap portions of 2 html templates using .js but only when a specific button is clicked?
Bassicaly I want to upon clicking 'show' button swap the part of body (the one within <div AllRates-container>)template that is displayed under /RatesOfPeriod with part of template displayed under /AllRatesFiltered adres, what am I doing wrong, I'm new to .js and don't know what is wrong here, can someone help? Again, no errors are shown anywhere, not in my IDE not on the site in devtools (no action is shown in Network when clicking "show by Ask button", simply nothing happens )
managementh.js
function showRates(element){
$.get( "http://localhost:8090/AllRatesFiltered, function( result )
{
var resultBodyHtml = /<body.*?>([\s\S]*)<\/body>/.exec(result);
$(document).find(".Allrate-container").html(resultBodyHtml);
});
}
template AllRates
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>All Rates</title>
<link th:href="#{/static/css/bootstrap.min.css}" rel="stylesheet"/>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"/>
</head>
<body>
<div class="container">
<a>Rates from a given period of time: (not required, if you submit empty fields you will get actual rates) </a>
<form action="#" th:action="#{RatesOfPeriod}" th:object="${ratesOf}" method="POST">
<div th:if="${#fields.hasErrors('datesFrom')}" th:errors="*{datesFrom}">Invalid starting date</div>
<input type="text" th:field="*{datesFrom}" placeholder="YYY-MM-DD"
class="form-control mb-4 col-4">
<div th:if="${#fields.hasErrors('datesTo')}" th:errors="*{datesTo}">Invalid end date</div>
<input type="text" th:field="*{datesTo}" placeholder="YYY-MM-DD"
class="form-control mb-4 col-4">
<button type="submit" class="btn btn-info col-2">Submit</button>
</form>
</div>
<br>
<thead>
<tr>
<td>
<a th:onclick="showRates()" class="btn btn-info">show by Ask</a>
</td>
</tr>
</thead>
<br>
<br>
<div class="Allrate-container">
<table class="table table-bordered">
<tr class="table-striped">
<th>Currency</th>
<th>Code</th>
<th>Bid</th>
<th>Ask</th>
</tr>
<th:block th:each="singleRate: ${allRates}">
<tr>
<td th:text="${singleRate.currency}"></td>
<td th:text="${singleRate.code}"></td>
<td th:text="${singleRate.bid}"></td>
<td th:text="${singleRate.ask}"></td>
</tr>
</th:block>
</table>
<a th:href="#{/}" class="btn btn-primary">Back to main site</a>
</div>
</body>
<script type="application/javascript" th:src="#{/jquery-3.5.1.min.js}"></script>
<script type="text/javascript" th:src="#{/managementh.js}"></script>
</html>
template allRatesFiltered
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>All Rates</title>
<link th:href="#{/static/css/bootstrap.min.css}" rel="stylesheet"/>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"/>
</head>
<body>
<div class="container">
<a>Rates from a given period of time: (not required, if you submit empty fields you will get actual rates) </a>
<form action="#" th:action="#{RatesOfPeriod}" th:object="${ratesOf}" method="POST">
<div th:if="${#fields.hasErrors('datesFrom')}" th:errors="*{datesFrom}">Invalid starting date</div>
<input type="text" th:field="*{datesFrom}" placeholder="YYY-MM-DD"
class="form-control mb-4 col-4">
<div th:if="${#fields.hasErrors('datesTo')}" th:errors="*{datesTo}">Invalid end date</div>
<input type="text" th:field="*{datesTo}" placeholder="YYY-MM-DD"
class="form-control mb-4 col-4">
<button type="submit" class="btn btn-info col-2">Submit</button>
</form>
</div>
<br>
<thead>
<td>
<a th:onclick="showRates()" class="btn btn-info">show by Ask</a>
</td>
</thead>
<br>
<br>
<div class="rate-container">
<table class="table table-bordered">
<tr class="table-striped">
<th>Code</th>
<th>Ask</th>
</tr>
<th:block th:each="singleRate: ${allRates}">
<tr>
<td th:text="${singleRate.code}"></td>
<td th:text="${singleRate.ask}"></td>
</tr>
</th:block>
</table>
<a th:href="#{/}" class="btn btn-primary">Back to main site</a>
</div>
</body>
<script type="text/javascript" th:src="#{/RateManagement.js}"></script>
<script type="text/javascript" th:src="#{/managementh.js}"></script>
</html>
controller
#PostMapping("RatesOfPeriod")
public String RatesOfPeriod(#ModelAttribute("ratesOf") #Valid DatesViewModel datesViewModel,
BindingResult bindingResult, Model model) {
if (!bindingResult.hasErrors()) {
String start = Objects.toString(datesViewModel.getDatesFrom(), "");
String end = Objects.toString(datesViewModel.getDatesTo(), "");
try {
currencyExchange_logic.getRatesOfDates(start, end);
model.addAttribute("allRates", Oldrates_interface.findAll());
Oldrates_interface.deleteAll();
} catch (IOException e) {
System.out.println(e.getMessage());
}
}
return "allRates";
}
#GetMapping("AllRatesFiltered")
public String allRatesFiltered(Model model) {
model.addAttribute("ratesOf", new DatesViewModel());
rates_interface.deleteAll();
model.addAttribute("allRates", rates_interface.findAll());
return "allRatesFiltered";
}
I want to "Hide" the table during the starting of page, which is working using $(document).ready(function(){$("#result").hide();});
But I also want to "show" the table once the submit button is clicked, which is not working.
This is the PHP file, as I have to add more PHP code afterwards. Same result if I change this to HTML thou.
<!DOCTYPE html>
<html lang ="en">
<head>
<title> Show Specific </title>
<meta charset = "utf-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous">
</script>
<script>
$(document).ready(function(){
$("#result").hide();
});
$(document).ready(function(){
$("#button").click(function(){
$("#result").show();//result
});
});
</script>
</head>
<body>
<hr>
<div id="appointment">
<form>
Test ID: <input type="text" name="testID" /> <br><br>
First Name : <input type="text" name="First_Name" /> <br><br>
Last Name : <input type="text" name="Last_Name" /> <br><br>
<input id="submit" type="button" value="Submit" ><br><br>
</form>
</div>
<div id="result">
<table>
<tr>
<th>Test ID</th>
</tr>
<tr>
<th>First Name </th>
</tr>
<tr>
<th>Last Name</th>
</tr>
</table>
</div>
<hr>
<div id="footer">
<footer> Copyright © ALL RIGHTS ARE RESERVED. </footer>
</div>
</body>
</html>
If you look carefully, the id of your input button is submit not button as you have written on your jQuery event handler.
Change your script to this one:
<script>
$(document).ready(function(){
$("#result").hide();
$("#submit").click(function(){
$("#result").show();//result
});
});
</script>
Also: it is not necessary for you to have two $(document).ready() methods. Just implement one, and then add your function inside.
I am using ASP.NET MVC 4.0 to build my web application and jQuery Dialog plugin for the popup. I intend to put my HTML elements in the div element with id 'addDialog' onto a popup. The popup should be shown on a button click with id 'add' but it's not working. Whenever I click the button nothing happens.
This is my View:
#{
ViewBag.Title = "TimeSlotDetails";
}
<head>
<title>TimeSlot</title>
<link href="~/Scripts/DataTables/datatables.min.css" rel="stylesheet" />
<link href="#Url.Content("~/Content/Common.css")" rel="stylesheet" type="text/css" />
<link href="~/Scripts/jquery-ui-1.12.1.custom/jquery-ui-1.12.1.custom/jquery-ui.min.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.7.2.min.js"></script>
<script src="~/Scripts/jquery-ui-1.12.1.custom/jquery-ui-1.12.1.custom/jquery-ui.min.js"></script>
<script src="~/Scripts/jquery.unobstrusive-ajax.min.js"></script>
<script src="~/Scripts/DataTables/datatables.min.js"></script>
<script src="~/Scripts/TimeSlotDetails.js"></script>
</head>
<body>
<form>
<div id="addDialog" style="display:none">
Name<input type="text"/><br/><br/>
Duration<input type="text"/><br/><br/>
Type<input type="text"/><br/><br/>
Frequency<input type="text"/><br/><br/>
</div>
<div class="title">Automatic Timetable Generator</div>
<div class="title-down"></div>
<table class="option_list">
<tr>
<td class="title-down" rowspan="16" colspan="3"></td>
<td rowspan="16" colspan="5">
<div></div>
<div></div>
<div>#Html.ActionLink("Home", "Home")</div>
<div>#Html.ActionLink("Preferred Time Slot", "PreferredTimeslot")</div>
<div>Time Slot Details</div>
<div>Department Details</div>
<div>Subject Details</div>
<div>ClassRoom Details</div>
<div>Lab Details</div>
<div>Allot the Slots for each classRoom as per your need</div>
<div>Teacher Details</div>
<div>Allot Subjects to Teachers</div>
<div>Allot Subjects to Labs</div>
<div>Check ot the Final Result</div>
<div></div>
<div></div>
</td>
<td rowspan="16" colspan="12">
<div>Enter the Time slot Details</div>
<div>
<span><input id="add" type="button" value="Add" /></span> <span><input id="edit" type="button" value="Edit" /></span> <span><input id="delete" type="button" value="Delete" /></span>
</div>
<table id="timeslotdetails">
<thead>
<tr>
<td colspan="3">Name</td>
<td colspan="3">Duration</td>
<td colspan="3">Type</td>
<td colspan="3">Frequency</td>
</tr>
</thead>
<tbody>
</tbody>
</table>
<div> <button id="slotAllottmentSubmit" type="Submit" value="Submit the Data">Submit the Data</button></div>
</td>
<td rowspan="16" colspan="3"></td>
</tr>
</table>
</form>
</body>
This is my JavaScript code:
$(document).ready(function () {
$('#timeslotdetails').DataTable();
$('.option-list #add').click(function () {
$('#addDialog').css('display:inline');
$('#addDialog').dialog();
});
});
I have included all the dependent files in the right order.
I think the jQuery selector $('.option-list #add') is wrong.
I checked and I did not see any element having the .option-list class in the HTML.
You can try $('#add').
I am having table with 6 fields and there is update button in the last field, onclick of that one popup appears but popup is taking only first entry of the in the table every time even if pressing the second or third entry's update button.
Here is my JSP Code `
<%#taglib prefix="s" uri="/struts-tags"%>
<html>
<head>
<title>Report</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="col-sm-2"></div>
<div class="col-sm-8">
<div class="panel panel-primary">
<div class="panel-heading">Details of Students</div>
<div class="panel-body">
<button id="newbtn" type="button"
class="form-control btn btn-success">Add New Student</button>
<button id="shwbtn" type="button"
class="form-control btn btn-success">show</button>
<div style="margin-top: 40px;">
<table class="table table-bordered" id="updatedetailsFrm">
<thead>
<tr style="background-color: #E0E0E1;">
<th>Sr.No.</th>
<th>Name</th>
<th>Surname</th>
<th>Contact No</th>
<th>Email</th>
<th>Action</th>
</tr>
</thead>
<s:if test="noData==true">
<s:iterator value="beanList">
<tr>
<td><s:property value="srNo" /></td>
<td><s:property value="name" /></td>
<td><s:property value="surname" /></td>
<td><s:property value="contactno" /></td>
<td><s:property value="email" /></td>
<td>
<a href="#popupLogin" data-rel="popup"
data-position-to="window" id="updateBtnfirst"
class="ui-btn ui-corner-all ui-shadow" data-transition="pop">Update</a>
<div data-role="popup" id="popupLogin" data-theme="a"
class="ui-corner-all">
<form id="updatedetailsFrm" method="post">
<div style="padding: 10px 20px;">
<h3>Update Your Data</h3>
<input id="name" placeholder="Name" type="text" name="name"
value='<s:property value="name"/>'>
<input id="surname" placeholder="Surname" type="text"
name="surname" value='<s:property value="surname"/>'>
<input id="contactno" placeholder="Contact No" type="text"
name="contactno" value='<s:property value="contactno"/>'>
<input id="email" class="disabled" placeholder="Email" type="text"
name="email" value='<s:property value="email"/>'>
<button value="update" type="button" id="updateBtn">Update</button>
</div>
</form>
</div>
<button class="btn btn-danger" id="deleteBtn">Delete</button>
</td>
</tr>
</s:iterator>
</s:if>
</table>
<s:else>
<div style="color: red;">No Data Found.</div>
</s:else>
</div>
</div>
</div>
</div>
<div class="col-sm-2"></div>
<script>
$("#updateBtn").click(function() {
var id = document.forms["updatedetailsFrm"]["email"].value;
var userName = document.forms["updatedetailsFrm"]["name"].value;
var surName = document.forms["updatedetailsFrm"]["surname"].value;
var contactNo = document.forms["updatedetailsFrm"]["contactno"].value;
window.location = "updatedetails.action?email="+id+"&name="+userName+"&surname="+surName+"&contactno="+contactNo;
})
// $('#updateBtnfirst').click(function() {
// document.getElementById("email").disabled = true;
// })
$('#newbtn').click(function() {
window.location.href = "insert.jsp";
})
$('#shwbtn').click(function() {
window.location = "report";
})
$("#deleteBtn").click(function() {
var id = $(this).closest("tr").find('td:eq(4)').text();
window.location.href = "deleterecord.action?&email=" + id;
})
</script>
</body>
</html>
`
So, my question is, popup should bring the row wise details in popup, in particular row.
Your iterator generates all of your rows with the same ID's over and over again. Update your iterator to generate unique ID's for each form in each row. I would then remove the ID from the update button and use a class instead so it's easy to bind your click event and use an HTML "data" attribute to hold the form ID value. Then when an update button is clicked, your JavaScript will be able to grab the data attribute value and then target the correct form via unique ID.
Example update button:
<button value="update" type="button" class="updateBtn" data-form-id="updatedetailsFrm-1">Update</button>
Example form ID:
<form id="updatedetailsFrm-1" method="post">
With duplicate ID's, you'll only ever retrieve the first instance of what you're trying to target in the DOM. There are other ID's in your iterator you'll want to look at too. ID's should be unique.
when i am clicking on first textbox auto autocomplete function is working.but after inserting another textbox in script autocomplete function is not working.So please suggest me how to append autocomplete class in script.
html:
<form id="smart-form-register" class="smart-form client-form" method="post" enctype="multipart/form-data">
<fieldset>
<section>
<label class="input"> <i class="icon-append fa fa-user"></i>
<input type="text" name="product_name" placeholder="product Name">
<b class="tooltip tooltip-bottom-right">Needed to enter product Name</b> </label>
</section>
<section>
<table style="width:100%;">
<tr>
<th style="padding-bottom:10px;">Material Name</th>
<th style="padding-bottom:10px;">Material Quantity</th>
</tr>
<tr>
<td><input name="last[]" class="auto" id="last[0]" size="40"></td>
<td><input name="first[]" id="first[0]" size="40"></td>
</tr>
</table>
</section>
<section>
<span class="glyphicon glyphicon-plus" style="margin-left:580px;" value="Add" onclick="insert()"></span>
</section>
</fieldset>
<input type="submit" name="submit" value="Register" class="btn btn-primary">
</form>
script:
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/minified/jquery-ui.min.css" type="text/css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.1/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function() {
//autocomplete
$(".auto").autocomplete({
source: "search1.php",
minLength: 1
});
});
</script>
<script>
var i=0
var j=0
function insert()
{
last=document.getElementById("last["+i+"]")
i++
first=document.getElementById("first["+j+"]")
j++
last.insertAdjacentHTML("AfterEnd", '<br><input class="auto" name="last[]" id="last['+i+']" size="40">')
first.insertAdjacentHTML("AfterEnd", '<br><input name="first[]" id="first['+j+']" size="40"<br>')
}
</script>
just you call autocomplete script function after insert new row.
Add this function "autocomplete()" to end of "insertAdjacentHTML()"
<script>
var i=0
var j=0
function insert()
{
last=document.getElementById("last["+i+"]")
i++
first=document.getElementById("first["+j+"]")
j++
last.insertAdjacentHTML("AfterEnd", '<br><input class="auto" name="last[]" id="last['+i+']" size="40">').autocomplete();
first.insertAdjacentHTML("AfterEnd", '<br><input name="first[]" id="first['+j+']" size="40"<br>').autocomplete();
}
</script>