<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<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">Buy Product</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<img src="https://thumbs.dreamstime.com/z/promotion-vector-stamp-isolated-white-37908603.jpg" style="height:400px; width:450px;">
</div>
</div>
</div>
</div>
<script>
$(document).ready(function () {
$('#exampleModal').modal('show');
setcookie("Logged");
});
</script>
Working Link Below
https://jsbin.com/vabujuboqo/
What i wanted:
When running through the site , the page will pop-up modal and add
cookies "Logged", Once customer refresh the page it won't show the
pop-up modal again . But when user restart browser , the pop-up modal
will triggered again. ( as when i setcookie didn't specific date so it
will delete "Logged" cookies when browser is closed/restarted
What is the problem right now
Whenever i restart the page , the pop-up modal will keep on "pop-up" ,
trying to make it pop-up once per browser session
You are trying to use setcookie, a PHP function, in JavaScript (you are calling the function in the browser). You can set and get the cookie via JavaScript using something like this:
<script>
// This function will set a cookie with expiration after days
function setCookie(name, value, days) {
const d = new Date;
d.setTime(d.getTime() + 24*60*60*1000*days)
document.cookie = `${name}=${value};path=/;expires=${d.toGMTString()}`;
}
// This function will retrieve an existing cookie so you can check its existence
function getCookie(name) {
const v = document.cookie.match('(^|;) ?' + name + '=([^;]*)(;|$)');
return v ? v[2] : null;
}
setCookie('Logged', '1')
console.log(getCookie('Logged')) // 1
</script>
So you could check if the cookie exists and then, if not exists, set it.
Related
I dont really know what is causing the error since I'm new to JavaScript. I've referenced the variable in the header with js:
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
selectable: true,
selectHelper: true,
select: function date(start, end, alldays){
$("#BookingModal").modal('toggle');
var tgl=moment(start).format('DD-MM-YYYY')
}
});
calendar.render();
});
And when I want to use the variable in the body of the html, it throws the error:
uncaught ReferenceError: tgl is not defined
<h1 class="modal-title fs-5" id="exampleModalLabel"> <script type="text/javascript">document.write(tgl)</script></h1>
The modal title you whish to have is dynamic based on the calendar cell that was clicked.
So you have to wait for the user to click on a calendar cell to know what is the startDate provided in this select callback.
The code below will be exectuted on page load while parsing the HTML...
Long before the rest of your code that will execute after DOMContentLoaded has fired.
<script type="text/javascript">document.write(tgl)</script>
The events are firing in this order and that is how tgl should be used in each of them:
DOMContentLoaded -- tgl is declared
FullCalendar's select -- tgl value is setted
show.bs.modal -- tgl value is used
document.addEventListener("DOMContentLoaded", function () {
// Have the tgl variable at global scope
let tgl;
// On modal open, set the modal title
$("#BookingModal").on("show.bs.modal", function (event) {
$("#BookingModal").find(".modal-title").text(tgl);
});
// FulCalendar
var calendarEl = document.getElementById("calendar");
var calendar = new FullCalendar.Calendar(calendarEl, {
selectable: true,
select: function date(start, end, alldays) {
// Set tgl here
tgl = moment(start.startStr).format("DD-MM-YYYY");
// Open modal
$("#BookingModal").modal("show");
}
});
calendar.render();
});
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.12.9/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/fullcalendar#6.0.2/index.global.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>
<div id="calendar"></div>
<div class="modal fade" id="BookingModal" 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">This title will be replaced</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Some modal body here...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" data-dismiss="modal">Ok</button>
</div>
</div>
</div>
</div>
CodePen
Also, notice I used start.startStr to pass to moment.js. You can console log that start object of FullCalendar to understand why.
I have an ASP.NET CORE MVC based app. I am having a strange behavior when trying to show a modal popup with JQuery.
I have following div:
<div class="modal fade" tabindex="-1" role="dialog" data-backdrop="static" data-keyboard="false" id="form-modal">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="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">
</div>
</div>
</div>
</div>
I have a button to show this div modal popup. When I click the button Javascript adds «in» to class so it becomes class="modal fade in", normally it should add «show». As a result the modal is not showing. So in the browser I enter dev mode and removed «in» and added «show» and it worked.
But I am wondering why my JQuery is adding «in» instead of «show».
Here is my JQuery:
jQueryModalGet = (url, title) => {
try {
$.ajax({
type: 'GET',
url: url,
contentType: false,
processData: false,
success: function (res) {
$('#form-modal .modal-body').html(res.html);
$('#form-modal .modal-title').html(title);
$('#form-modal').modal('show');
console.log(res);
},
error: function (err) {
console.log(err)
}
})
return false;
} catch (ex) {
console.log(ex)
}
}
Any idea ?
Finally, I solved the issue.
For some strange reason I included two different versions of Bootstrap and JQuery at the same time so the conflict was happening in the modal show process.
I had:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<script src="//ajax.aspnetcdn.com/ajax/mvc/4.0/jquery.validate.unobtrusive.min.js"></script>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
After removing:
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
And using only the local binded libs I resolved it!
Now it works like a charm.
I have a list of links that each open their own modal. Each of these modals contents display an html file. Here is a sample;
<div id="how-rtm-works" class="modal hide fade" 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">×</button>
<h1 id="myModalLabel">How Right to Manage works</h1>
</div>
<div class="modal-body" id="utility_body">
<p>One fine body…this is getting replaced with content that comes from passed-in href</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<li><a data-target="#how-rtm-works" href="modal-content/how-RTM-works.html" role="button" data-toggle="modal">How Right to Manage works</a></li>
Because there is more than one modal, each has its own ID which is referenced in the data-target.
Can anyone advise me on how I would target these modals from another page, or in my case all pages as these will be linked in the website footer nav.
First page you'll use:
Open Modal
At the second page you'll insert your modal and the follow script:
<script type='text/javascript'>
(function() {
'use strict';
function remoteModal(idModal){
var vm = this;
vm.modal = $(idModal);
if( vm.modal.length == 0 ) {
return false;
}
if( window.location.hash == idModal ){
openModal();
}
var services = {
open: openModal,
close: closeModal
};
return services;
///////////////
// method to open modal
function openModal(){
vm.modal.modal('show');
}
// method to close modal
function closeModal(){
vm.modal.modal('hide');
}
}
Window.prototype.remoteModal = remoteModal;
})();
$(function(){
window.remoteModal('#myModalLabel');
});
</script>
Well your modals had IDs, I think you can trigger them by adding #how-rtm-works to the end of the link
for example if you have a modal called
id="My_Modal"
you can make a link
Link me to the modal
If that is your question I guess this can help you out !
I am using bootstrap 3 modal dialogs with remote sources.
My Problem is that I use external JavaScript and script blocks in those remote sources. When I open and Close a modal Dialog and then reopen it, the JavaScript is loaded twice.
How can I suppress from loading the same JavaScript file again when reopening the modal Dialog? Or how can I destroy the loaded JavaScript when closing the Dialog?
JavaScript:
$(function() {
$('[data-load-remote]').on('click',function(e) {
e.preventDefault();
var $this = $(this);
var remote = $this.data('load-remote');
if(remote) {
$($this.data('remote-target')).load(remote);
}
});
});
HTML:
<a href="#myModal" role="button" class="btn" data-toggle="modal"
data-load-remote="http://localhost/dashboard/myprices"
data-remote-target="#myModal .modal-body">My Salon (Preview)</a>
<!-- Modal -->
<div class="modal fade" id="myModal" 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"
aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
You can use another data- attribute to check whether it's loaded or not:
Add isloaded="false" to your anchor tag like so:
<a data-isloaded="false" href="#myModal" role="button" class="btn" data-toggle="modal"
data-load-remote="http://localhost/dashboard/myprices"
data-remote-target="#myModal .modal-body">My Salon (Preview)</a>
Then you can check if it's been loaded using $this.data('isloaded'). If it has, get out of there, if not, load it and set the flag like so: $this.data('isloaded', true).
Here's some JavaScript
$(function() {
$('[data-load-remote]').on('click',function(e) {
e.preventDefault();
var $this = $(this);
var remote = $this.data('load-remote');
if (!$this.data('isloaded')) {
if(remote) {
$($this.data('remote-target')).load(remote);
$this.data('isloaded', true)
}
}
});
});
jsFiddle
UPDATE for clarification based on comment
From the HTML5 spec on custom data attributes:
Every HTML element may have any number of custom data attributes specified, with any value.
i.e. There is no predefined data-isloaded, the same as there is no predefined data-load-remote. You could just as easily call it data-kylePromisesTheValueIsLoaded. As long as
that's the string you pass to the .data() method, then it will read / write the value for that attribute.
i have this button B1 (say)
when i click on this B1 a modal popup appears with buttons / links
when i click the button / link a new popup should appear but i dont get the Modal window but i do get the values in firebug
Here is the code to the Button B1
<div class="thumbnail" ><img src="../Images/pix/B1.png" href="#B1Market" data-toggle="modal" /></div>
which then calls this modal popup which contains the content from the div divB1Market
<div class = "modal fade" id="B1Market" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>Heading</h3>
</div>
<div class="modal-body">
<div id='divB1Market' runat="server"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Done</button>
</div>
</div>
</div>
The code below is the link / content inside the divB1Market
<a href='#' data-dismiss='modal' onclick='JavaScript:" + (user.RoleID == 3 ? "PlayerMP." : "") + "showFunctionDetails(1," + drMTDFunction["PlayerID"] + "," + SessionID + "," + SessionNum + ");'>Link here</a>
which inturn calls the ajax call
PlayerMP.getFunctionDetails = function (type, UserID, SessionID, SessionNo) {
$.ajax({
type: "GET",
url: PlayerMP.URL,
data: "rt=4&type=" + type + "&UserID=" + UserID + "&SessionID=" + SessionID + "&SessionNo=" + SessionNo,
success: function (FinancialSplitsJS) {
if (FunctionalSplitsJS.indexOf("SessionExpired=1", 0) == -1) {
$("#divFunctionalDetails").html(FunctionalSplitsJS);
switch (type) {
case 1:
$("#divFunctionalsSplit");
break;
}
$("#divFunctionalsSplit").show(); /* calling the div with this id in the aspx page */
}
else
window.location.href = "../Login.aspx?SessionExpired=1";
}
});}
This is the modal-popup content in the aspx page
<div class="modal fade" id="divFunctionalsSplit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <%--this is the one not showing up--%>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3>Content</h3>
</div>
<div class="modal-body">
<div id="divFunctionalDetails" style="color:Black;"></div>
</div>
</div>
</div>
</div>
This is what i get when i openup firebug and hover around with my cursor
But when i try to debug the code with firebug i get the responses (in the console) perfectly. I'm not able to figure out where the error might be.
This is the order of my importing the packages (posted this because i got this error while using )
$("#divFunctionalsSplit").modal().show();
Uncaught TypeError: Object #<Object> has no method 'modal'
<script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
<!-- Start of BootStrap -->
<link href="../Scripts/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<script src="../Scripts/bootstrap.min.js" type="text/javascript"></script>
All I needed to add was jQuery.noConflict(); before $('#divID').modal('show')
it had to something to do with with other plugins conflicting.
This Helped Me
It would appear that the id of your modal is getting overwritten by ASP. It changes from #B1Market to #divFunctionalSplit. I assume your button still has an href of #B1Market. Simple solution would be to change the href to match the div id. Better solution would be to prevent ASP from replacing the id.