I'm trying to show user a notification with TempData but my code can't reach the script part. Any idea how can I fix this ? In debug I can see that TempData is not null.
<body>
#if (TempData["error"] != null)
{
<div class="modal fade" tabindex="-1" id="modal3"
data-keyboard="false" data-backdrop="static">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
</div>
<div class="modal-body">
#TempData["error"]
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary button button4">Sign</button>
<button type="button" id="btnHideModal" class="btn btn-primary button button4">
Hide
</button>
</div>
</div>
</div>
</div>
}
#if (TempData["error"] != null)
{
//This is the problem. In temporary breakpoint , it skips this part.
#section Scripts{
<script type="text/javascript">
const modal = document.getElementById("modal3")
$(window).on('load', function () {
modal.style.display = "block";
});
function closeModal() {
modal.style.display = "none";
}
</script>
}
}
</body>
I'm trying to show user a notification with TempData but my code can't
reach the script part. Any idea how can I fix this ?
I have checked your shared code snippet and investigated that which seems alright and working as expected. I have set the console and alert both executed as expected. Finally, I tried to bind the '#TempData["error"]' within the modal and got the expected output as you can see below:
Output:
HTML:
I just kept your code as it is. Therefore, just you can replace your code.
Script:
<body>
#if (TempData["error"] != null)
{
<div class="modal fade" tabindex="-1" id="modal3"
data-keyboard="false" data-backdrop="static">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
</div>
<div class="modal-body">
#TempData["error"]
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary button button4">Sign</button>
<button type="button" id="btnHideModal" class="btn btn-primary button button4">
Hide
</button>
</div>
</div>
</div>
</div>
}
#if (TempData["error"] != null)
{
//This is the problem. In temporary breakpoint , it skips this part.
#section Scripts{
<script type="text/javascript">
const modal = document.getElementById("modal3")
$(window).on('load', function () {
console.log(modal);
alert("Debug");
modal.style.display = "block";
$("#modal3").find(".modal-header").html('#TempData["error"]');
$("#modal3").find(".modal-title").html(('#TempData["error"]'));
$("#modal3").modal('show');
});
function closeModal() {
modal.style.display = "none";
}
$("#btnHideModal").click(function () {
$("#modal3").modal('hide');
});
</script>
}
}
</body>
Note: I have directly bind the html('#TempData["error"]') as HTML to your modal-header class and its working. Please have a try, It should work as expected.
Related
I have a function that detects the users keyboard, and when the user writes the combination of 4 2 0 on his keyboard, I'm trying to have a popup-modal open up.
<script type="text/javascript" src="main.js"></script>
<script language="javascript">
easteregg();
</script>
<div id="myModal" class="modaljs">
<div class="modal-contentjs">
<span class="close">×</span>
<p>You made it!</p>
</div>
</div>
function easteregg() {
var modal = document.getElementById("myModal");
var span = document.getElementsByClassName("close")[0];
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
let sequence = '';
window.addEventListener('keyup', function(event) {
sequence = `${sequence}${event.key}`.substr(-3);
if (sequence === '420')
this.modal("show");
})
};
I understand that the
this.modal("show");
is wrong, but I dont know what to put in there.
You can use Bootstrap and Vanilla.js to do it.
Bootstrap 5 no longer needs jQuery as a dependency since JavaScript can provide the same functionality.
e. g.
const _tmp = [];
const _modal = document.getElementById('exampleModal');
const openModal = () => {
_modal.style.display = 'block';
_modal.classList.add('show');
}
window.addEventListener('keyup', (e) => {
const charCode = (e.which) ? e.which : e.keyCode;
_tmp.push(String.fromCharCode(charCode));
if (_tmp.length > 3) _tmp.shift();
if (_tmp.join('') === '420') openModal();
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" rel="nofollow" integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js" integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/" crossorigin="anonymous"></script>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
You made it!
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
With the following code I'm trying to validate an entry field in JavaScript. The validation requires only 10 characters. When you authenticate, it is supposed to display a modal with a confirmation message:
function myFunction() {
var con_code, text;
//getting the field
con_code = document.getElementById("con_code").value;
if ($.trim($('con_code').val()).length == 0) {
text = "Authentication code is not valid";
}
//trigger to the modal if it meets the condition
$(document).ready(function() {
$("#con_code").click(function() {
$("#myModal").modal();
});
});
document.getElementById("error_con_code").innerHTML = text;
}
<div class="container">
<h2>Activate Modal with JavaScript</h2>
<!-- Trigger the modal with a button -->
<div class="form-group">
<label>Confirmation Code.</label>
<input type="text" name="con_code" id="con_code" class="form-control" required="required" placeholder="Enter your Confirmation Code" />
<br> //the error code display
<span id="error_con_code" class="text-danger"></span>
<br> //the authenticate button
<button type="button" class="btn btn-success btn-sm" id="con_code" onclick="myFunction()">Authenticate</button>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button> //the modal
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
However, it is not authenticating the confirm code. How can I fix it?
You have an error at:
if($.trim($('con_code').val()).length ==0){...}.
It should be $('#con_code')
Also you have 2 elements with the same id="con_code".
Please check with the following codes.
I am assuming you want to show the modal when there is 10 chars in the input field. If the rule changes, then please edit at: 'if ($.trim(con_code.val()).length != 10) {}' in the below codes.
$(document).ready(function() {
myFunction();
});
function myFunction() {
$("#con_code_btn").click(function() {
var con_code = $('#con_code');
var error_con_code = $('#error_con_code');
error_con_code.html('');// Remove Previous Error Message(if any);
if ($.trim(con_code.val()).length != 10) {
error_con_code.html("entication code is not valid");
}
else {
$("#myModal").modal();
}
});
}
Also please change the id of the button to "con_code_btn" in the form:
<button type="button" class="btn btn-success btn-sm" id="con_code_btn" onclick="myFunction()">Authenticate</button>
On the page I have a button with several data attributes, title and audioURL. One click, I have some javascript that populates a modal window with the title, and simple html5 audio player with the data-audioURL in the src attribute. Once that is complete, I initialize MediaElement. On success, I play the audio.
When the user closes the modal window, I want to remove the MediaElement so that another button with a different title and audioURL can populate the audio player and then reinitialize MediaElement. Currently, the code I have succeeds to stop the audio playback, but it doesn't destroy the player.
HTML:
<button type="button" class="btn btn-info btn-lg btn-block" data-toggle="modal" data-target="#closerLook" data-title="Song Title" data-audio="audio.mp3"><i class="fa fa-headphones" aria-hidden="true"></i> Hear a Sample</button>
<div class="modal fade" id="closerLook" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title text-center">Audio Modal</h4>
</div>
<div class="modal-body">
<h3 id="cl-title" class="text-center"></h3>
<audio id="audioSample" preload="meta" tabindex="0" controls><source src=""/></audio>
</div>
</div>
</div>
JS:
$(document).ready(function(){
var me;
$('#closerLook').on('shown.bs.modal', function (event) {
$('#audioSample').attr("src", "");
var button = $(event.relatedTarget);
var theTitle = button.data('title');
var theAudio = button.data('audio');
var modal = $(this);
modal.find('#cl-title').text(theTitle);
$('#audioSample').attr("src", theAudio);
loadPlayer();
});
$('#closerLook').on('hide.bs.modal', function (event) {
console.log(me);
me.remove();
});
});
function loadPlayer() {
$('#audioSample').mediaelementplayer({
audioWidth: '100%',
success: function(mediaElement, originalNode, instance) {
mediaElement.play();
me = mediaElement;
}
});
}
I know I'm missing something in the hide.bs.modal function to properly remove the player, I just don't know what. Thanks in advance.
move var me out of document.ready and initialize the variable inside the success function with instance see the working example below
var me;
$(document).ready(function() {
$('#closerLook').on('shown.bs.modal', function(event) {
let button = $(event.relatedTarget);
let theTitle = button.data('title');
let theAudio = button.data('audio');
let modal = $(this);
modal.find('#cl-title').text(theTitle);
//setSrc (src)
$('#audioSample').attr("src", theAudio);
loadPlayer();
});
$('#closerLook').on('hide.bs.modal', function(event) {
console.log('removing');
//me.pause();
me.remove()
});
});
function loadPlayer() {
$('#audioSample').mediaelementplayer({
audioWidth: '100%',
error:function(mediaElement, originalNode, instance) {
console.log('error');
},
success: function(mediaElement, originalNode, instance) {
console.log('success');
console.log(mediaElement)
instance.play();
me = instance;
}
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/mediaelement/4.2.7/mediaelementplayer.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/mediaelement/4.2.7/mediaelement-and-player.min.js"></script>
<button type="button" class="btn btn-info btn-lg btn-block" data-toggle="modal" data-target="#closerLook" data-title="SoundHelix" data-audio="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3"><i class="fa fa-headphones" aria-hidden="true"></i> Hear a Sample</button>
<div class="modal fade" id="closerLook" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title text-center">Audio Modal</h4>
</div>
<div class="modal-body">
<h3 id="cl-title" class="text-center"></h3>
<audio id="audioSample" preload="meta" tabindex="0" controls><source src=""/></audio>
</div>
</div>
</div>
I'm creating a ASP.NET Webpage using Bootstrap and jQuery.
I have recently implemented a modal to show a log. The modal is shown when clicking a link:
<a data-toggle="modal" data-target="#logData">Open</a>
<div class="modal fade" id="logData" tabindex="-1" role="dialog" aria-labelledby="logDataLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Log for #Html.DisplayFor(model => model.Alias)</h4>
</div>
<div class="modal-body">
<textarea class="form-control log" rows="5" placeholder="Log is empty.">#Html.DisplayFor(model => model.Log)</textarea>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
The modal contains a textarea that doesn't autoresize.
I have found the following code:
$('textarea').each(function () {
this.setAttribute('style', 'height:' + (this.scrollHeight) + 'px;overflow-y:hidden;');
}).on('input', function () {
this.style.height = 'auto';
this.style.height = (this.scrollHeight) + 'px';
});
which should enable my textareas to autoresize and it works other places in my code, but not in this modal above. At least not when typing in the textarea, but upon opening the modal it does seem to autoresize.
Does anyone have an idea of why? And eventually on how to fix it?
Thanks!
You can use this code which will work if the textarea is not hidden (e.g in a modal that is not shown yet)
let setHeight = (input) => {
input.style.overflow = 'hidden';
input.style.height = 0;
input.style.height = `${ input.scrollHeight + 2 }px`;
};
$('textarea').on('input, keyup', function () {
setHeight(this);
})
for bootstrap modal, u can do something like this:
$('.modal').on('shown.bs.modal', function () {
$(this).find('textarea').each(function () {
setHeight(this);
});
})
I am using bootstrap to invoke a simple modal form which contains only a textarea field and couple of buttons. I am setting some custom text (variable length) in the textarea while invoking the modal form. What I want is to focus on the textarea field after the custom text so the user can start typing after that. I have mentioned my implemenation of this below. Can anyone tell how to achieve this?
Here is the Fiddle: http://jsfiddle.net/jLymtdg8/
A bit explanation here as well -
Here is my modal (all bootstrap stuff)-
<div class="modal fade" id="msg" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Type a message</h4>
</div>
<div class="modal-body">
<textarea id="Message" class="form-control"></textarea>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default btn-sm" data-dismiss="modal">Cancel</button>
<button id="PostModalButton" class="btn btn-primary btn-sm">Post</button>
</div>
</div>
</div>
And here is how it gets invoked -
<div class="pull-right">
<button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#msg" data-screenname="Type after this">
Post A Message
</button>
</div>
This is how I am prefilling the textarea and setting focus, but this is only setting cursor on first line rather than after screen_name -
$(this).on('shown.bs.modal', '#msg', setFieldAndFocus)
var setFieldAndFocus = function () {
var screen_name = $("button[data-target='#msg']").data("screenname");
$("#Message").val(screen_name + " ");
$("#Message").focus();
};
Sam you can try the following javascript code:-
var screen_name = '',
old_message = '',
new_message = '';
$("#msg").on('shown', function() {
screen_name = $("button[data-target='#msg']").data("screenname"),
old_message = $.trim($('#Message').val()),
new_message = ( old_message.length == 0 ) ? screen_name : old_message;
$("#Message").focus().val(new_message + " ");
});
Let me explain why i have used this code. From the js fiddle link that you have provided what i understand is you are using the bootstrap 2 version, but the code that you are using
$("#msg").on('shown.bs.modal', function(){
...
}
was introduced only in bootstrap 3. so I have changed it to
$("#msg").on('shown', function(){
...
}
and the line
$("#Message").focus().val(new_message + " ");
is used so that you can set the focus after the custom text.I hope this will resolve your issue.
You can take reference of this link : http://jsfiddle.net/3kgbG/433/
It is working for me.
$('.launchConfirm').on('click', function (e) {
$('#confirm')
.modal({ backdrop: 'static', keyboard: false })
.on('')
.one('click', '[data-value]', function (e) {
if($(this).data('value')) {
//alert('confirmed');
} else {
//alert('canceled');
}
});
});
$('#confirm').on('shown', function () {
$('#txtDemo').val($('#txtDemo').val());
$('#txtDemo').focus();
// do something…
})
body,
.modal-open .page-container,
.modal-open .page-container .navbar-fixed-top,
.modal-open .modal-container {
overflow-y: scroll;
}
#media (max-width: 979px) {
.modal-open .page-container .navbar-fixed-top{
overflow-y: visible;
}
}
<div class="page-container">
<div class="container">
<br />
<button class="btn launchConfirm">Launch Confirm</button>
</div>
</div>
<div id="confirm" class="modal hide fade">
<div class="modal-body">
Do you want to continue?
<input id="txtDemo" type="text" value="Jayesh" class="form-control"/>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-primary" data-value="1">Continue</button>
<button type="button" data-dismiss="modal" class="btn" data-value="0">Cancel</button>
</div>
</div>