How to display modal instead of alert - javascript

This is the modal pop-up I want to show when a user selects on a button and he is not logged in.
<!--You must be logged in-->
<div class="modal fade" id="must-be-logged-in" tabindex="-1" role="dialog" aria-labelledby="Log-In" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="Login">Delete Account</h4>
</div>
<div class="modal-body">
<form action="#Url.Action("Register","Home")" method="post">
<label for="confirm">Tour could not be added to Wishlist. Please make sure that you are logged in.</label>
<p class="text-center">
<button class="btn btn-template-main"><i class="fa fa-user-times"></i>Log-In</button>
</p>
</form>
</div>
</div>
</div>
</div>
<!--You must be logged in-->
From my javascript function I am calling it as follows:
function addToWishlistFun(tourid) {
if (document.getElementById("wishlist" + tourid).value == "added")
{
$.post('#Url.Action("RemoveFromWishlist", "Home")', { id: tourid }, function (data) {
if (data) {
var elementid = "wishlist" + tourid;
document.getElementById(elementid).innerHTML = "Add to wishlist" + "<i class=\"fa fa-heart-o\"></i>";
document.getElementById(elementid).value = "notadded";
}
else {
//$("#testPopup").toggle();
document.getElementById("#must-be-logged-in")
// alert("Tour could not be removed from wishlist. Please make sure that you are logged in.");
}
});
}
However, when the button is clicked nothing is shown.

Replace:
else {
//$("#testPopup").toggle();
document.getElementById("#must-be-logged-in")
// alert("Tour could not be removed from wishlist. Please make sure that you are logged in.");
}
For:
else {
$("#must-be-logged-in").toggle();
// alert("Tour could not be removed from wishlist. Please make sure that you are logged in.");
}

Related

JS function not getting hit when button clicked

I have a button and im trying to fire the function below on click of "Duplicate". Could you guide me through the right way?
Currently, when i click nothing happens! There is no response. I need to fire the function on click.
Thanks in advance
JS
$(document).on('click', '.js-duplicateRoom', function (e) {
var hiddenInput = $(this).parent().find('input[name="roomId"]');
var roomId = hiddenInput.data('id');
var type = 'duplicate';
$.ajax({
type: "GET",
url: "/management/hostaccommodation/AddRoom?roomId=" + roomId + '&type=' + type,
}).done(function (result) {
$('#addRoomResult').html(result);
// Hide Add Room Button
$('#addNewRoom').hide();
$('#backToDetails').hide();
$('#nextPropertyExtras').hide(); // Next button
});
});
HTML
<div class="modal fade" id="duplicateModal" tabindex="-1" role="dialog" aria-labelledby="duplicateModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="duplicateModalLabel">Confirm Duplicate</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Are you sure you would like to duplicate this Room?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-success" id="js-duplicateRoom" >Duplicate</button>
</div>
</div>
</div>
</div>
The button is identified by an ID, not a class.
So try this instead:
$(document).on('click', '#js-duplicateRoom', function(e) {
var hiddenInput = $(this).parent().find('input[name="roomId"]');
var roomId = hiddenInput.data('id');
var type = 'duplicate';
$.ajax({
type: "GET",
url: "/management/hostaccommodation/AddRoom?roomId=" + roomId + '&type=' + type,
}).done(function(result) {
$('#addRoomResult').html(result); // Hide Add Room Button
$('#addNewRoom').hide();
$('#backToDetails').hide();
$('#nextPropertyExtras').hide(); // Next button
});
});

Linking a modal to an entry field and validating using JavaScript

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>

Alert Box to show when error occur

I am looking to implement the bootstrap alert boxes, for when I have a concurrency error on a page. Currently this is how the Controller is setup:
I would do something like this with sweetalert2:
https://jsfiddle.net/x07g89h9/
or with bootstrap
https://jsfiddle.net/mmq27s86/2/
HTML
declare bootstrap modal
<div id="myModal" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Errors</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<ul id="errors">
</ul>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-primary">Close</button>
</div>
</div>
</div>
</div>
JS
function showModal(errors){
var $msg = $("#errors");
$msg.empty();
for(var i=0; i<result.errors.length; i++){
$msg.append("<li>" + errors[i] + "</li>");
}
$('#myModal').modal();
}
$.ajax({
url: 'any...',
data: JSON.stringify(model),
type: 'POST',
cache: false,
contentType: 'application/json',
success: function (result) {
// in case of error
if(result.ChangeStatus !== "Success"){
showModal(result.errors);
}
},
error: function () {
$('#errorContainer').show();
$('#errorMessage').html('There was a server error, please contact the support desk on (+44) 0207 099 5991.');
}
});
});
Check this or this.
Articles are too long to report whole code here.

Using a button to open a page containing details of a stock item

My intention is to show products on the index page with links. When the link is clicked a 'modal' page opend showing the details of that product.
I have a button that links to a product page, but not the other items on the index page.
How do I use this link to open each product page?
The code for button:
<button type="button" class="btn btn-success" data-toggle="modal" data-target="#details-1">Details</button>
The modal:
<?php
include 'details-modal-item01.php';
include 'details-modal-item02.php';
?>
The page details-modal-item01.php is more or less a template for the other items:
<div id="item01" class="modal fade item01" tableindex="-1" role="dialog" aria-labelledby="details-1" aria-hidden="true"> -- rest of code goes here --</div>
Any help will be appreciated.
Instead of all the include jazz, which will become unmanageable once you got many products you should use ajax to load the content/partial or build from json into the modal-content section.
Ok easy said then done, so here is an example.
This is genrally how I do it, by using ajax and partials.
The Link(s), you would need to change the data-url="" attribute to point to your partial.
<i class="fa fa-plus fa-fw"></i> Open Modal
The modal wrapper. This would be placed at the bottom of your template, before </body>.
<div id="ajax-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Loading...</h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true" aria-label="Close">×</button>
</div>
<div class="modal-body slow-warning"><p>Please wait...</p></div>
</div>
</div>
</div>
The partial, would be served from the links endpoint, you could check the request is ajax and show the partial and if its not show a full page instead.
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Foo Bar</h4>
</div>
<div class="modal-body"></div>
</div>
Then the jquery, which handles loading the content into the modal.
<script>
var ajax_modal = function(e) {
e.preventDefault();
$('#ajax-modal').modal('show');
var modal = '.modal-content';
var default_content = '' +
'<div class="modal-header">' +
' <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="fa fa-times"></i></button>' +
' <h4 class="modal-title">' +
' Loading...' +
' </h4>' +
'</div>' +
'<div class="modal-body">' +
' <p class="slow-warning">Please wait...</p>' +
'</div>';
$(modal).html(default_content);
setTimeout(function() {
if ($(document).find('.slow-warning').length > 0) {
$(document).find('.slow-warning').html('Content failed to load, please refresh your browser and try again.');
}
}, 5000);
//
var dialog_size = $(this).data('size');
if (dialog_size == 'modal-lg') {
$(modal).parent().removeClass('modal-sm modal-md modal-lg').addClass('modal-lg');
}
else if (dialog_size == 'modal-sm') {
$(modal).parent().removeClass('modal-sm modal-md modal-lg').addClass('modal-sm');
}
else {
$(modal).parent().removeClass('modal-sm modal-md modal-lg').addClass('modal-md');
}
//
var request = $.ajax({
url: $(this).data('url'),
method: "GET",
dataType: "html",
cache: false
});
request.done(function(data) {
$(modal).replaceWith($('<div />').html(data).find(modal)[0]);
});
request.fail(function(jqXHR, textStatus) {
console.log('modal failed to load', textStatus);
});
};
$(document).find('.ajax-modal').off('click').on('click', ajax_modal);
</script>

Bootstrap Modal and Badges

I have the following lines of code in my webpage - example/demo.
HTML:
<p data-toggle="modal" data-target="#messagesModal">Messages <span class="badge">2</span>
</p>
<!-- Modal -->
<div class="modal fade" id="messagesModal" 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>
<h4 class="modal-title">Messages</h4>
</div>
<div class="modal-body">
<div class="alert fade in">
×
<strong>Message 01</strong>:
<p>Lipsum Ipsum
</p>
</div>
<div class="alert fade in">
×
<strong>Message 02</strong>:
<p>Ipsum Lipsum</p>
</div>
</div>
<div class="modal-footer">
<div class="col-md-8 pull-left">
</div>
<div class="col-md-4">
<button type="button" class="btn btn-default pull-right" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
How can I update the badge to represent the correct amount of messages in the modal?
For example, when the user closes or removes a message in the modal, the badge will go from displaying the number 2 to 1?
Also, is it possible to display the text "There are no more messages." when all of the messages have been removed?
Try this:
//Find message number initially, before editing
$(".badge").text($(".alert").length);
//when the modal is closed
$('#messagesModal').on('hidden.bs.modal', function () {
//Set .badge text equal to the length of the .alert array, i.e the number of messages
$(".badge").text($(".alert").length);
//If there are no '.alert' divs, i.e. no messages
if ($(".alert").length == 0) {
$(".badge").text("No messages");
}
});
This takes all the .alert elements (messages) into an array, and sees how long that array is (i.e. how many messages there are).
Then, it updates .badge to reflect that number.
Working JSFiddle: http://jsfiddle.net/joe_young/62hbqmtp/
Well... I've spend some time, but all that you should do for now:
populate message array with your actual data;
add some actual AJAX for removing messages.
So...
$(function() {
var informer = $("#messageInformer a");
var refreshBadge = function(messageCount) {
var badge = informer.find(".badge");
if (messageCount > 0) {
if (!badge.length) {
informer.text("Messages ");
informer.append("<span class=\"badge\">" + messageCount + "</span>");
} else {
badge.text(messageCount);
}
} else {
informer.text("No messages");
}
};
var buildMessage = function(message) {
var htmlMessage = "<div class=\"alert fade in\">";
htmlMessage += "×";
htmlMessage += "<strong>" + message.title + "</strong>:";
htmlMessage += "<p>" + message.text + "</p>";
return htmlMessage;
}
// There should be real data
var messages = [
{ id: "1", title: "Message 01", text: "Lipsum Ipsum" },
{ id: "2", title: "Message 02", text: "Ipsum Lipsum" }];
refreshBadge(messages.length);
informer.on("click", function(e) {
e.preventDefault();
var modalBody = $(".modal-body");
modalBody.empty();
for (var i = 0; i < messages.length; i++) {
modalBody.append(buildMessage(messages[i]));
}
});
$("body").delegate(".alert .close", "click", function() {
var messageId = $(this).data("id");
// There should be some AJAX possibly
messages = messages.filter(function(el) {
return el.id != messageId;
});
if (messages.length == 0) {
$("#messagesModal").modal("hide");
}
refreshBadge(messages.length);
});
});
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<p data-toggle="modal" data-target="#messagesModal" id="messageInformer">Messages <span class="badge"></span>
</p>
<!-- Modal -->
<div class="modal fade" id="messagesModal" 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>
<h4 class="modal-title">Messages</h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<div class="col-md-8 pull-left">
</div>
<div class="col-md-4">
<button type="button" class="btn btn-default pull-right" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>

Categories