How to fire a script with input controls of jasper server - javascript

I have four input controls in jasper server like CCA, CCIT, CIT and TAN. Now those four fields has to get validated and proper alert message has to be displayed when TAN input control is entered other CCA, CCIT and CIT has to get disabled and when you enter anything in CCA, CCIT and CIT then TAN input has to get disabled. this validations i has generated in JSP code and trying to publish a report in jasperserver by script is as follows: This script is working fine when i use input fields in jsp and execute. But, when i use same script with same input control names and all no alert window nor any kind of messages are displayed nor report values get changed.. I need solution how to make input controls can speak with script and fire proper alert messages. Thank you in advance.

With help of Stack overflow am able to work with question which i asked. I tried it in different way like, Follow these steps
Step:1
Run your report in jasper server, Now
Observe in inspect window of your browser(if right click is not happening use ctrl+shift+j) inside elements tag expand body tag inside that div "frame"--> div class "content"--> div id "display"--> div id "reportViewFrame"--> div class "content"--> div class "body"--> div id "inputcontrolsform"-->div class "panel pane inputcontrols"--> div class "content hasFooter"--> div class "body"-->ul class "list input controls"
Now, select which input control id you would like to use code when your jasper report is displayed
Step 2:
Create Jsp file with same names
For eg: sampleText.jsp
Open notepad and paste following code
<%--Include templates--%>
<jsp:include page="InputControlTemplates.jsp"/>
<%-- input controls container --%>
<ul class="list inputControls" id="inputControlsContainer"></ul>
<script>
jQuery(document).ready(function(){
jQuery("#apply").click(function(){
var fromDate = document.querySelector('#start_date label.control input').value;
var toDate = document.querySelector('#end_date label.control input').value;
/*alert("Start Date: "+fromDate+"End Date: "+toDate);*/
/*Year conversion*/
var start1=fromDate.substring(0,4);
var end1=toDate.substring(0,4);
/*alert("Years: From: "+start1+" End: "+end1);*/
/*Months conversion*/
var m1=fromDate.substring(7,5);
var m2=toDate.substring(7,5);
/*alert("Months m1: "+m1+" m2 :"+m2);*/
/*condition checking*/
if(fromDate>toDate){
alert("End Date has to be higher than start date");
}
if((end1-1)>start1){
alert("1.End date has to be in the same financial year as start date.");
}
if((end1-1)==start1){
if(m2>3){
alert("End date has to be in the same financial year as start date.");
}
}
if(end1==start1)
{
if(m2<=3)
{
alert("End date has to be in the same financial year as start date.");
}
}
});
});
</script>
Save as in the location “\jasperreports-server-cp-5.1.0\apache-tomcat\webapps\jasperserver\WEB-INF\jsp\” with sampleText.jsp
Now login to jasper soft and execute that report. Screen should appear like this,
Select date from the date picker screen appears like this
Specify in start date todays date and in end date specify 1 of this month and click on “Apply “ button then screen will give u a pop up (alert) like this,
So you can check for different conditions like
a. Enter end date 2014-04-01 and check
b. Enter end date with 2014-03-31 and check
c. Enter end date with 2012-03-31 and check
In all the above situations it has to show alert.
Note: Above sample code of jsp is used to give validations for input controls of start date and end date.

Refer the link https://www.youtube.com/watch?v=1xP967Eb4f4&t=585s by using the concept of js into your code

Related

How to set datepicker using webdriverIO?

I have a task where I need to automate the booking.com page, and one of the tasks is to select check-in and check-out dates. How I can do this? I automated , that I can open calendar, but I don't know how to select dates.
Here is my code
Cucumber step
And user selects dates from "2020-06-16" to "2020-06-26"
BookingStep
When('user selects dates from {string} to {string}',()=>{
BookingPage.checkInOut.click();
browser.debug(); });
Booking page
class BookingPage{
get whereAreYouGoingTextBox(){return $('#ss')};
get checkInOut(){return $('div.xp__dates-inner')}; }export default new BookingPage();
Note: My answer is a solution for the ability to set a value in the date field, and only interact with the cancel link on the date picker object.
I battled this for a while and came up with a solution that works for me, I hope it works for you also.
First when I inspect the datepicker object, it generates a random XPATH/CSS Selector. As a result if you inspect & copy the selector and try to use it in your next test, it will fail since the xpath/selector is randomly generated. I got around this issue by identifying a unique css ID that lived above the datepicker element, and used that as my starting point. Then I looked at the html path from that point to the datepicker input tag, and I appended that path. This solved the first problem of not being able to set a value in the date picker text field. Here is an example using xpath:
//*[#id="filtersSideBar"] - This is the unique ID found above the datepicker
/div[2]/div/input - This is the path to the date picker from the unique ID
$('//*[#id="filtersSideBar"]/div[2]/div/input').waitForClickable(3000);
$('//*[#id="filtersSideBar"]/div[2]/div/input').setValue('2020-01-01');
Now that you have a date inside the date picker field, you have to close the datepicker object. I had to use Javascript to accomplish this. First open the datepicker object, then inspect the 'Cancel' link element. Copy the CSS Selector ID. Lets say it ends up being #cancelLink
Now you run this code:
browser.execute(() => document.querySelector('#cancelLink').click());
Which will then close the datepicker object so that you can proceed with your testing.
Here is my actual code:
class DataSearchSortAndDateRangePage {
get startDate() { return $('//
[#id="filtersSideBar"]/div[2]/div/div[2]/div[1]/div/input'); }
setStartDate(date) {
this.startDate.waitForClickable( { timeout: browser.config.timeOutValue } );
this.startDate.setValue(date);
browser.execute(() => document.querySelector('body > div.md-datepicker-dialog.md-theme-default > div.md-datepicker-body > div.md-dialog-actions.md-datepicker-body-footer > button > div > div').click());
}
}
export default new DataSearchSortAndDateRangePage();
I hope this helps out =)

Hold input=date value in HTML after submited button in table

I searched a lot but maybe because I am quite new here i couldn't fine a result that's works for my challenge.
Project view
What's is going on:
I have made page where users could click on a date-picker, after the user selected a date or a date range and they click on the submit button "Verzenden"the table that is positioned under the selection area shows all data from that specific date or date range that is available in the database.
In this table the user is able to adjust some data from a specific table row.
After clicking on the submit "Ok" button the changes the user made is pushed to the database.
Now my challenge:
After the user has changed some data from a row an they click on submit button "Ok" i want to achieve that the user is getting back to it's last date selection that he made before adjusting some data in a row table. What is the best way to handle this ?? I hope someone could help me, thanks already for participating and reading.
The term you're looking for is "pre-populating a form". You can pre-populate the form with PHP by generating HTML that has the value written directly in the HTML
<input type="text" value="<?php echo htmlspecialchars($someValue, UTF8, ENT_BOTH);?>">
Your homework probably wants you to save the input into the user's SESSION, and then check the SESSION every time you render the page. If a previous value is in the session, then pre-populate the form (i.e. render the HTML with the hard-coded values).
Try this:
<form autocomplete="on">...</form>
the "autocomplete" attribute allows you to save your selection that you've submit after reload the site.
If you don't want this feature take effect for some special tag,you should write your code like this:
<form autocomplete="on">
...
<input type="date" autocomplete="off" /> // this tag won't save the choice
</form>
check this fiddle : https://jsfiddle.net/9nfz311z/
html part:
<input type="date" name="test"/>
js part :
var dateInput = document.querySelector('input[name="test"]');
var DOMReady = function(a,b,c){b=document,c='addEventListener';b[c]?b[c]('DOMContentLoaded',a):window.attachEvent('onload',a)}
// on change save in localStorage the value
dateInput.addEventListener('change', function(e) {
localStorage.setItem(dateInput.name, dateInput.value);
});
// on dom ready if localStorage has date value apply it to the input
DOMReady(setDateValue);
function setDateValue() {
var date = localStorage.getItem(dateInput.name);
if (date) {
dateInput.value = date;
}
}

control a href link in wordpress to check the date and do one of two things

I am looking to control a link(href) using wordpress so that when it is pressed the site will do one of two things. 1- show a pop up window with a video embedded OR 2-check the date and if the link corresponds to a date in the future i.e. you click on the the 22nd and its the 21st (advent callender) the show a pop up image "you must wait until 22nd" else if the date has arrived then show the pop up video (option 1).
I program in java and have limited js
try this :
<div id="redemption">
Redeem
Redeem
Redeem
</div>
You can do like jfriend00 mentioned above:
$("#redemption a").click(function() {
var id = this.id;
// Assign the id to a custom attribute called data-id
$("#printing_div").attr("data-id", id);
return false;
});
And then of course you can retrieve the new attribute in any AJAX call you
send back to the server by:
var id = $("#printing_div").attr("data-id");
Hope that helps.

Rails javascript; alert to fire when leaving a field

My ultimate goal is to add some validation to a set of date fields. However, my javascript sucks, so I'm starting small.
I am starting out by trying to get an alert message when a user leaves a field.
(For simplicity I'm just doing it all in my view...) Heres what I go to work...
# html.erb-template
<div class="from_date">
From Date
<input type="text" id="from_date" name="from_date"></input>
</div>
<script>
$("#from_date").blur( function() {
alert("boom!");
});
</script>
Your code seems to be fine - problem is that class and id are named the same, but you want to watch the input field not the surrounding div.
I just made a fiddle from your script and changed
the listener to be attached to the input field's id - and it's working.
the alert into a console.log
see
$("#from_date").blur(function() {.....
// instead of
$(".from_date").blur(function() {.....

asp.net AjaxControlToolkit CalendarExtender: setting displayed month programmatically from client side

Is there a way to set the calendar extender, or a method I can call so it always displays the month containing the selected date when the target textbox is clicked? I have found the method to set the selected date, but this does not automatically bring the month of the selected date into view.
You can handle the onClientShown event:
<cc1:calendarextender ID="Calendarextender1"
OnClientShown="clientShown" ...
For example:
<script type="text/javascript">
function clientShown(sender, args) {
var extender= $find('Calendarextender1');
sender.set_visibleDate(extender._selectedDate);
// the following is just to show you some other interesting methods
//sender.set_todaysDate(extender._selectedDate);
//sender.set_selectedDate(extender._selectedDate);
}
</script>
I'm afraid there's no documentation, so try them out.

Categories