I use the DateTimePicker plugin made by Trent Richardson in a modal popup, to select the date from which to archive items. All works fine when the modal pops up. In this modal I have two buttons: Archive and Cancel.
If I select a date and press Archive, all works well and at the next pop up, the datetimepicker works fine.
However, if I press Cancel, the next time I use the popup, the datetimepicker doesn't work. Weirdest yet, I have another popup to show archived items that also has a datetimepicker. If I cancel the action in either popup, the datetimpicker will not show in neither popup.
Here's the code javascript to initialize the popup:
var modalBackground = $("#modalBackground");
var Notifications_ArchiveHolder = $("#Notifications_ArchiveHolder");
var Notifications_ShowArchivePopupHolder = $("#Notifications_ShowArchivePopupHolder");
var ArchiveURL = "#Url.Action("Archive")";
var ShowArchiveUrl = "#Url.Action("ShowArchive", "Notifications")";
function ArchivePopup() {
$.get(ArchiveURL, function (content) {
if (Notifications_ArchiveHolder.html().length <= 10) {
Notifications_ArchiveHolder.html(content);
}
})
InitArchivePopup();
}
function InitArchivePopup() {
modalBackground.show();
//set up positon
var h = $(window).height();
var w = $(window).width();
var hh = Notifications_ArchiveHolder.height();
var hw = Notifications_ArchiveHolder.width();
var posx = (h / 2) - 100;
var posy = (w / 2) - 200;
Notifications_ArchiveHolder.css("position", "fixed");
Notifications_ArchiveHolder.css("top", posx);
Notifications_ArchiveHolder.css("left", posy);
Notifications_ArchiveHolder.show();
$("body").css("overflow", "hidden");
}
function Cancel_Archive() {
Notifications_ArchiveHolder.hide();
Notifications_ArchiveHolder.html("");
modalBackground.hide();
}
A div is used for the background and another to host the popup:
<div id="modalBackground" class="graphicScreen" style="display: none; position: fixed; top: 0px; left: 0px;"></div>
<div id="Notifications_ArchiveHolder" style="background-color: white; display: none; z-index: 9999;"></div>
And the code for the partial view rendered in the popup:
<link rel="stylesheet" href="#Url.Content("~/Resources/styles/Notifications/NotificationsPage.css")" />
#using (#Html.BeginForm("Archive", "Notifications", FormMethod.Post))
{
<div class="popupTitle">
Archive notifications
</div>
<div class="popupNotifications">
<span>Archive to date (inclusive)</span>
<input type="text" name="olderThan" id="chooseDate" />
</div>
<div style="margin: 15px">
<input class="goVariant" type="submit" value="Archive" />
<input id="cancelBtn" class="goVariant" type="button" value="Cancel" onclick="Cancel_Archive()" />
#*<div class="tooltip_Holder" keyword="notif_admin_archive" onclick="showToolTip();"></div>*#
</div>
}
<link href="#Url.Content("~/Resources/styles/jquery-ui-timepicker-addon.css")" rel="stylesheet" />
<script src="#Url.Content("~/Resources/JQuery/DateTimePicker/jquery-1.9.1.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Resources/JQuery/DateTimePicker/jquery-ui.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Resources/JQuery/DateTimePicker/jquery-ui-timepicker-addon.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Resources/JQuery/DateTimePicker/jquery-migrate-1.2.1.js")"></script>
<script>
$(document).ready(function () {
$('#chooseDate').datetimepicker();
})
</script>
Any idea would be appreciated.
Please try to use the following code. As you loading content on you modal so you need to use the live function which can be achieved using the following code.
$('body').on('click','#chooseDate',function(){
$(this).datetimepicker();
});
After thorough clean-up of script files (no longer passing them from the partial view), it sorted out.
Related
I'm importing Jquery Modal from these two links (js and css)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />
I've added the following html code inside the body
<button onclick="load();" class="btn btn-primary">
<span class="fa fa-icon fa-filter"></span>
Filtrar
</button>
<div id="loadingModal" class="" style="display:none">
Cargando
</div>
and the following is in a js file
function load() {
openLoadingModal();
doSomething();
closeModal();
}
function openLoadingModal(e) {
$("#loadingModal").modal("show");
var count = 0;
var points = "";
var intervalId = window.setInterval(function(){
count++;
$("#loadingModal").text("Cargando" + ".".repeat(count % 3 + 1));
}, 1000);
return intervalId;
}
With this, the modal opens as I expect. The thing is that I want to close the modal when this ends. But the solutions I've found didn't work. I tried the following:
$("#loadingModal").modal("close");
$("#loadingModal").modal().close();
$("#loadingModal").modal().close;
$("#loadingModal").modal("toggle");
$("#loadingModal").modal().toggle();
None of this closes the modal as it should (maybe hides the modal, but not all of it, since there is a black screen)
I think this shouldn't be this hard, but every link I get in tells me to do one of this
Thanks
If there is only one modal on the page, use this:
$.modal.close();
I'm using tippy.js for tooltips on a website, but it comes to a point when I have to hide them manually with a function (on mobile). However I'm unable to hide it using the built in function hide()
Am I doing something wrong or is the library bugged?
Here's the documentation showing the hide() function.
And here's a snippet of my problem.
var instance = new Tippy('button')
var i = 0;
$(document).on('keyup', function() {
$('.clickcount').html(i);
i++;
var popper = instance.getPopperElement(document.querySelector('.tippy-popper'));
instance.hide(popper)
})
button {
margin: 20px;
}
<link href="https://atomiks.github.io/tippyjs/tippy/tippy.css" rel="stylesheet" />
<script src="https://atomiks.github.io/tippyjs/tippy/tippy.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button title="text">Button with Tippy</button>
<div class="clickcount">Focus the document, then hover the button and press any key to hide it.</div>
Any and all help appreciated!
From the documentation:
Find the element's popper reference by calling the method getPopperElement and passing in the element directly:
You need to pass your element to getPopperElement, not the popup.
var instance = new Tippy('button')
var i = 0;
$(document).on('keyup', function() {
$('.clickcount').html(i);
i++;
var popper = instance.getPopperElement(document.querySelector('button'));
instance.hide(popper)
})
button {
margin: 20px;
}
<link href="https://atomiks.github.io/tippyjs/tippy/tippy.css" rel="stylesheet" />
<script src="https://atomiks.github.io/tippyjs/tippy/tippy.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button title="text">Button with Tippy</button>
<div class="clickcount">Focus the document, then hover the button and press any key to hide it.</div>
I created a window using html and javascript to display display log messages generated by my website. I want to set it up so that when the user opens the log window it auto scrolls to the bottom of the log messages. I've gotten it so that the log messages display correctly, but I am having trouble getting the auto scroll to work.
My html/javascript looks like this:
<body>
<div class="container-fluid">
<div class="panel panel-default">
<div class="panel-heading text-center">
<h4 class="text-center">Log Messages</h4>
</div>
<div class="panel-body">
<div class="content" id="logtext">
<font face="courier">
<span id="show" class='value'></span>
</font>
</div>
</div>
</div>
<script language="javascript" type="text/javascript">
function saveLogs(data){
sessionStorage.setItem("logs",data.message);
}
$(document).ready(
function() {
setInterval(function() {
Dajaxice.InterfaceApp.getLogs(saveLogs);
var logs = sessionStorage.getItem("logs");
document.querySelector('.content .value').innerText = logs;
//I tried doing this and nothing happened.
var objDiv = document.getElementById("logtext");
objDiv.scrollTop = objDiv.scrollHeight;
}, 1000);
});
</script>
</div>
</body>
The call to dajaxice is just basically grabbing the last n lines of a log file that I have and then sending them to the js function I defined as saveLogs().
I've tried using some of the solutions given in similar questions but haven't had any luck getting them to work.
EDIT
I tried setting it up like this:
<div class="panel-body">
<div class="content" id="logtext">
<script language="javascript" type="text/javascript">
document.getElementById('bottomspan').scrollIntoView();
</script>
<font face="courier">
<span id="show" class='value'>
</span>
<div id='bottomspan'></div>
</font>
</div>
</div>
</div>
<script language="javascript" type="text/javascript">
function saveLogs(data){
sessionStorage.setItem("logs",data.message);
}
$(document).ready(
// document.getElementById('bottomspan').scrollIntoView();
function() {
setInterval(function() {
Dajaxice.InterfaceApp.getLogs(saveLogs);
var logs = sessionStorage.getItem("logs");
document.querySelector('.content .value').innerText = logs;
var el = document.getElementById('bottomspan')
el.scrollIntoView();
var height = el.style.clientHeight
window.scrollBy(0, height);
},700);
});
</script>
This worked except every time the page refreshes with new messages it goes back to the bottom; this makes it hard to view older messages at the top. Is there a way to have it start at the bottom of the div but not force the user back down if they are looking at messages near the top?
Here Try:
document.getElementById('logtext').scrollIntoView();
EDIT
document.getElementById('bottomspan').scrollIntoView();
<font face="courier">
<span id="show" class='value'> content....
<span id='bottomspan'></span>
</span>
</font>
EDIT
var el = document.getElementById('logtext')
el.scrollIntoView();
var height = el.style.clientHeight
window.scrollBy(0, height - window.innerHeight);
Edit to answer Edit
<script language="javascript" type="text/javascript">
function saveLogs(data){
sessionStorage.setItem("logs",data.message);
}
$(document).ready(
function() {
setInterval(function() {
Dajaxice.InterfaceApp.getLogs(saveLogs);
var logs = sessionStorage.getItem("logs");
document.querySelector('.content .value').innerText =
},700);
var el = document.getElementById('bottomspan')
el.scrollIntoView();
var height = el.style.clientHeight
window.scrollBy(0, height);
});
Try using
var $objDiv = $("#logtext");
$objDiv.scrollTop( $objDiv.height() );
Your script works fine:
http://jsfiddle.net/b1tf63yd/1/
Just focus on the element to make the element visible.
<span id="feed_item" />
document.getElementById("feed_item").focus();
I am using a code snippet that I found to display a multipage form using visibility hidden.
There is a very good possibility that all of my problem stems from this method. That resource was from here:
http://www.devx.com/webdev/Article/10483/0/page/2
It is a fairly straightforward way to display multiple pages of a form...it probably was never intended to be able to allow printing.
<html>
<head>
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script language="JavaScript">
$.getScript("printThis.js", function(){
});
var currentLayer = 'page1';
function showLayer(lyr){
hideLayer(currentLayer);
document.getElementById(lyr).style.visibility = 'visible';
currentLayer = lyr;
}
function hideLayer(lyr){
document.getElementById(lyr).style.visibility = 'hidden';
}
function showValues(form){
var values = '';
var len = form.length - 1; //Leave off Submit Button
for(i=0; i<len; i++){
if(form[i].id.indexOf("C")!=-1||form[i].id.indexOf("B")!=-1)
continue;
values += form[i].id;
values += ': ';
values += form[i].value;
values += '\n';
}
alert(values);
}
</script>
<style>
body{
font: 10pt sans-serif;
}
.page{
position: absolute;
top: 10;
left: 100;
visibility: hidden;
}
</style>
</head>
<body>
<form id="multiForm" action="App1.php" method="POST" action="javascript:void(0)" onSubmit="showValues(this)" id="app">
<div id="page1" class="page" style="visibility:visible;">
Applicant Name: <input type="text" size="50" name="name1" >
</form>
<p><input type="button" id="C1" value="Continue" onClick="showLayer('page2')"></p>
</div>
<div id="page2" class="page">
This is Page 2
<br>
<input type="button" id="B1" value="Go Back" onClick="showLayer('page1')">
<input type="button" id="B2" value="Print App" onClick="$('#page1').printThis({})">
<br><br>
</div>
</form>
</body>
</html>
The "Print App" button is properly calling the printThis plugin. However, I get no content from the page1 DIV section. All that is printed is the normal header portion (Page 1 of 1) in the upper right and about:blank in lower left and date in lower right of page…no content, which with my sample file should be Applicant Name input box.
I assume that this is because the DIV for page1 is set to "hidden" while the content of page2 is being displayed. If I substitute "page2" in the button call then I get the content from page2 as expected.
So...I guess what I am after is a way to temporarily change the DIV being referenced in the printThis button call to be visible just long enough to perform the page print.
Any ideas?
I'm the plugin author - you need to incorporate the print media query into your css.
This would also help users that select file > print or control + P, as it will show all form elements.
The print media query allows you to make styling changes specifically for the printed page.
Example:
#media print {
#page1, #page2 {
display: block;
visibility: visible;
position: relative;
}
}
You include this in your css.
Additionally, based on your above code - you have css and javascript inline in your page. You should consider moving both to an external files, for maintenance and improved code standards.
printThis won't work with your current setup, because the plugin looks for the container (selector) you have specified and any linked css in the head of the document.
So for the above, you can do the following:
<!-- move all of this to the bottom of the page for performance -->
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="printThis.js"></script>
<script type="text/javascript" src="myJavascript.js"></script>
<!-- the above file is your javascript externalized, remove $.getScript, wrap in $(document).ready() -->
Then put this in your head:
<link type='text/css' rel='stylesheet' href='style.css'>
<!-- contains your css from the page, including the print media query -->
Ok, I'm having a major headache with simplemodal - I know I'm almost there, but can't get this to quite work right. I have a simplemodal dialog that has several dynamically created divs inside it, such as
<html>
<head>
<!-- Confirm CSS files -->
<link type='text/css' href='css/confirm.css' rel='stylesheet' media='screen' />
</head>
<body>
<div id='container'>
<h1>Test Page</h1>
<div id='content'>
<div id='confirm-dialog'>
Page Content Goes Here
</div>
<!-- modal content -->
<div id='confirm'>
<div class='header'><span>Header Text</span></div>
<div class='message'>
<div id='optionDiv0'><input type='radio' id='options' name='options' value='0' />Option0</div>
<div id='optionDiv1'><input type='radio' id='options' name='options' value='1' />Option1</div>
<div id='optionDiv2'><input type='radio' id='options' name='options' value='2' />Option2</div>
</div>
<div class='buttons'>
<div class='yes'>OK</div>
</div>
</div>
</div>
<!-- Load JavaScript files -->
<script type='text/javascript' src='scripts/jquery.js'></script>
<script type='text/javascript' src='scripts/jquery.simplemodal.js'></script>
<script type="text/javascript">
jQuery(function ($) {
$('#confirm-dialog input.confirm, #confirm-dialog a.confirm').click(function (e) {
e.preventDefault();
confirm("", function () {
for(var k = 0; k <= 3; k++) {
if(options[k].checked) {
var ele = document.getElementById("optionDiv" + k);
ele.style.display = "none;";
//alert("Stop Here");
}
}
});
});
});
function confirm(message, callback) {
$('#confirm').modal({
closeHTML: "<a href='#' title='Close' class='modal-close'>x</a>",
position: ["20%",],
overlayId: 'confirm-overlay',
containerId: 'confirm-container',
containerCss: {
height: 300,
width: 450,
backgroundColor: '#fff',
border: '3px solid #ccc'
},
onShow: function (dialog) {
var modal = this;
$('.message', dialog.data[0]).append(message);
// if the user clicks "yes"
$('.yes', dialog.data[0]).click(function () {
// call the callback
if ($.isFunction(callback)) {
callback.apply();
}
// close the dialog
modal.close(); // or $.modal.close();
});
}
});
}
</script>
</body>
</html>
In the click code, I'm trying to make it so when the user clicks on one of the radio buttons, then clicks 'OK', that item is no longer visible in the popup. If I follow that code with an alert("Stop here");(shown in the code above, commented out), then I can see the div disappear from the popup. But once I clear the alert box, (or if I comment it out so it never runs), the next time I activate the dialog, the div that I hid is re-appearing. How can I keep it hidden, so that it remains hidden the next time the dialog is activated, or is that possible? Thanks in advance.
FINAL EDIT: Found the solution for the dialog box reverting to its original state every time it opens. I pasted this in just above the jquery code, and it works like a charm:
<script> $.modal.defaults.persist = true; </script>
Found on this site in another thread, as part of a different question. Thanks for all who helped.
Your code still doesn't look complete to me, but as for your confirm function callback
confirm("", function(){
$('#confirm input[type=radio]').each(function(){
if($(this).is(':checked'))
$(this).parent().empty();
});
});
Like that?