I Am trying to open datepicker from textbox. Datepicker open but not showing properly. ( Check Ref Image ).
Can anyone help me ....
Script:-
<script>
$('#milksaledate').datepicker({
format: 'yyyy-mm-dd',
autoclose: true
});
</script>
Modal Text Box
<div class="col-md-3">
<div class="form-group">
<label>Date of Sale <span class="validate">*</span> :</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text"><i class="far fa-calendar-alt"></i></span>
</div>
<input type="text" class="form-control" name="milksaledate" id="milksaledate">
</div>
</div>
</div>
Script
<script src="plugins/datatables/jquery-3.5.1.js"></script>
<script src="plugins/jquery-ui/jquery-ui.min.js"></script>
[![enter image description here][1]][1]<script src="plugins/jquery-ui/jquery-ui.js"></script>
There could be multiple reasons for this:
Is it maybe possible you have multiple inputs where the id is milksaledate? I think in general it's better to use something like $('.datepicker').datepicker(..) and add class='datepicker' to each input which uses the datepicker.
When are you calling $('#milksaledate').datepicker(..)? Is it on page load, or after the modal has opened? Because if you call this code before a modal has initialized, the datepicker will not affect the modal.
Another reason could be due to z-index or other style issues concerned specifically to jquery-ui
Related
I was trying to create custom feature in User(sys_user) section to Save a photo and caption to a custom table. I want to save the photo and caption and show all the uploaded photo as thumbnail along with caption. But when I tried to call client-script it is not even trigger the function in client script. Following are the steps i followed
Created a UI macro with following code
<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
<div class="container">
<g:ui_form>
<h1>Choose an image file:</h1>
<p>Supported file types: .jpg, .png, .bmp, .gif, .jpeg, .ico, .svg</p>
<div class="row">
<input name="site_photo_upload" id="site_photo_upload" type="file" class="upld-file" style="padding:20px;"></input>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="fieldone" style="width:100px">Description</label>
<div class="col-sm-10">
<input type="text" name="site_photo_caption" id="site_photo_caption" class="form-control col-md-3" id="fieldone"
placeholder="Enter Description maximum 40 letters..." style="width:300px;height:75px;"></input>
</div>
</div>
<div class="form-group" style="padding:20px;">
<button id="btn_cancel">Cancel</button>
<g:dialog_button id="btn_submit_site_photo" name="btn_submit_site_photo" onclick="saveValues()" type="button" class="btn">Upload</g:dialog_button>
</div>
</g:ui_form>
</div>
<div class="container" style="padding:30px 0;border-top:1px solid #ccc;">
<div class="card-deck">
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-3 col-xl-3" style="padding:0;">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
<img class="card-img-top" style="width:100%;" src="https://picsum.photos/309/200?image=1050"
alt="Card image cap"></img>
<p class="card-text" style="padding:10px 0;">caption placeholder</p>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-3 col-xl-3" style="padding:0;">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
<img class="card-img-top" style="width:100%;" src="https://picsum.photos/309/200?image=1050"
alt="Card image cap"></img>
<p class="card-text" style="padding:10px 0;">caption placeholder</p>
</div>
</div>
</div>
</div>
</j:jelly>
Created a formatter and added the formatter in User form through 'Form Design'. It successfully displayed as below
Create a table 'u_sitephoto' with columns site_photo, site_photo_caption and a reference column userid to User table
Create a client script in 'OnLoad' type
function saveValues() {
var site_photo = document.getElementById("site_photo_upload").value;
var site_photo_caption = document.getElementById("site_photo_caption").value;
var sitephoto_record = new GlideRecord('u_sitephoto');
sitephoto_record.initialize();
sitephoto_record.setValue('site_photo', site_photo);
sitephoto_record.setValue('site_photo_caption', site_photo_caption);
sitephoto_record.insert();
}
But I am getting the following error when clicking the Upload button
Uncaught ReferenceError: saveValues is not defined at
HTMLButtonElement.onclick
I would like to get some help for resolving the following issues
To resolve above error, and trigger the client script on button click
Reload the image thumbnails(currently added some placeholder images as shown in the image) with all the uploaded photos for that user
On cancel button click remove the selected photo for uploading
Thanks in advance for your great suggestions & helps
Try following about how to resolve the 1st issue.
UI macro is rendered in server side, so it can't retrieve functions from a Client Script.
You can define the function directly in <script> tag of UI macro.
Within the function, use GlideAjax to call backend Script Include in which you can put your code of creating a new record of 'u_sitephoto' table.
BTW, I am using Paris version of ServiceNow.
Sample function in UI macro:
function saveValues() {
<!-- You could use $j to call JQuery in UI macro -->
var site_photo = $j("#site_photo_upload").get(0).files[0];
var site_photo_caption = $j("#site_photo_caption").val();
var ajax = new GlideAjax('SitePhoneUtils');
ajax.addParam('sysparm_name', 'savePhotos');
ajax.addParam('sysparm_site_photo', site_photo);
ajax.addParam('sysparm_photo_caption', site_photo_caption);
ajax.getXML();
}
Sample function in Script Include - SitePhoneUtils
savePhotos: function() {
var site_photo = this.getParameter('sysparm_site_photo');
var site_photo_caption = this.getParameter('sysparm_site_photo_caption');
var gr = new GlideRecord('u_sitephoto');
gr.initialize();
gr.site_photo = site_photo;
gr.site_photo_caption = site_photo_caption;
gr.insert();
}
Reading through the docs with tooltip form validation it appears below the input. When I read the docs regarding customization of tooltip placement with the data attribute it would appear this should work:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<div class="container">
<form class="row g-3 needs-validation" novalidate>
<div class="col-3">
<div class="input-group">
<select class="form-select" aria-label="Select Day" required>
<option selected disabled value="">Please select a day</option>
<option value="mon">Monday</option>
<option value="tues">Tuesday</option>
</select>
<div class="invalid-tooltip" data-bs-toggle="tooltip" data-bs-placement="top" title="Day tooltip">
Please select a day
</div>
</div>
</div>
<div class="col">
<button id="build" type="submit" class="btn btn-outline-success">Submit</button>
</div>
</form>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
when adding:
data-bs-toggle="tooltip" data-bs-placement="top"
Research:
How to put bootstrap tooltip on textbox if validation fails for that textbox?
showing validation error message like tooltip [closed]
How to put a tooltip on input when its not valid
Javascript validation with bootstrap tooltip
Bootstrap tooltip for form validation
How do I create a tooltip showing a validation error pointing to a field when the submit button is pressed using Javascript
In Bootstrap 5 how can I modify the location of the validation tooltip with a data attribute?
This is a complicated question to answer, but I'll try.
The Tooltips method for form validation described in the docs does not leverage the ToolTips API ... it just uses it's styling insofar as color and shape.
How it works is with a "~" (immediately preceding) CSS selector and is set at "display: none" initially. Once a form validates, it triggers the styling with a CSS :valid selector. So the "tooltip" must immediately precede the form element (input or any of the others).
The "valid-toolip"/"invalid-tooltip" classes have 3 very important attributes you need to be aware of:
position: absolute;
top: 100%;
z-index: 5;
Also, the form field is contained in a "position-relative" class, so the "tooltip" positions itself at the bottom of that div (or rather at 100% from the top).
If for example you wanted to position the "tooltip" at the top of the "field container div" you'd need to set "top: 0" in some custom CSS class or just inline with a style attribute, like so:
<div class="col-md-4 position-relative">
<label for="validationTooltip02" class="form-label">Last name</label>
<input type="text" class="form-control" id="validationTooltip02" value="Otto" required>
<div class="valid-tooltip" style="top: 0">
Looks good! (Top)
</div>
</div>
Have a look at this JSFiddle for some examples.
I'm trying to type invoice number as input type i.e. 123456789
After I click Print Record button, the value of invoice number disappears like this:
Aslo I have wrote
<div class="form-group row">
<label for="invoice_no" class="col-sm-2 col-form-label">Inovice Number</label>
<div class="col-sm-10">
<input type="text" class="form-control col-sm-4" name="InvNumber" id="InvNumber" value="{{request()->input('InvNumber')}}">
</div>
</div>
And the Print button looks like:
<div class="form-group row">
<div class="col-sm-12 dol-12" >
<button class="btn btn-secondary float-right" onclick="printDiv()">Print Record</button>
</div>
And printDiv() function is:
<script type="text/javascript" language="javascript">
function printDiv(divName) {
var printContents = document.getElementById('printableArea').innerHTML;
document.body.innerHTML = printContents;
window.print();
}
Clicking a submit button will submit the form it is in.
Presumably, your form's action is the current URL, so it reloads the page.
The new page doesn't have the data in the form fields that you had typed into the previous page.
If you don't want to submit the form, use the type attribute to change the <button> from its default of submit.
As per the documenation, if you don't specify type of button it assumes it as submit button that is why your form is being submitted by default.
Add type="button" in your button
<button type="button" class="btn btn-secondary float-right" onclick="printDiv()">Print Record</button>
submit: The button submits the form data to the server. This is the
default if the attribute is not specified for buttons associated with
a form, or if the attribute is an empty or invalid value.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button
I have an arraylist from which I need to get values where isActive = true, and to display the data in a <div> tag with the use of ng-repeat.
My problem is that I don't want to keep using ng-repeat every time, while fetching values in each <div> tag.
Is there any generic solution which will iterate only once, and I can see the value in <div>, side by side. Please see this attempt:
enter link description here
I want to see a result like this:
You can write your ng-repeat like below.
Whenever it get isActive true, it will create the div section for this.
<body ng-controller="MainCtrl">
<div ng-repeat="tempData in data">
<div ng-if="tempData.isActive == true" >
<div class="col-xs-12" >
<div class="col-xs-4">Plan Type:</div>
<div class="col-xs-8">{{tempData.plantype}}</div>
</div>
<div class="col-xs-12">
<div class="col-xs-4">Term:</div>
<div class="col-xs-8">{{tempData.term}}</div>
</div>
<div class="col-xs-12">
<div class="col-xs-4">Rate:</div>
<div class="col-xs-8">{{tempData.rate}}</div>
</div>
</div>
</div>
</body>
Here is my code. I build 20 questions dynamically. So I need to create a dialog for each of them. It's a mobile application, built using jquery mobile. So I prefer to use the jquery mobile dialog functionality.
I know for sure it can be done, just not sure how.
<div data-role="page" id="Survey">
<div class="quest">
#Html.DisplayFor(modelItem => item.Text)<div class="quest_com">
Comments</div>
</div>
<div data-role="page" id="dialog">
<div data-role="header">
<h1>
Dialog</h1>
</div>
<div data-role="content">
<div class="center-wrap">
<textarea style="width: 320px" title="Comments">
</textarea><a data-rel="dialog" data-role="button">Save</a>
</div>
</div>
</div>
</div>
You cannot have a page nested in another page for it to work. Your 20 questions should each be setup as their own jQuery Mobile page elements.
<div data-role="page" id="Survey">
...
<a data-rel="dialog" href="question-dialog-1">Question 1</da>
</div>
<div data-role="page" id="question-dialog-1">
...
</div>
Here is a live example of it in action: http://jsfiddle.net/shanabus/ZfBvB/
That should solve what you are looking to do.
Here is the documentation on jQuery Mobile dialogs.