I found a good example of using cookie alert based on bootstrap. I am trying to amend the code and use it as a form to ask user to rank a page/website.
<div id="cookie-alert" data-expire="30" class="alert alert-primary alert-position-bottom">
<div class="container">
<button type="button" class="close" data-dismiss="alert">
<span class="cookie-close-btn" aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
<p class="fs-13">
<i class="fa fa-warning"></i>
We use cookies to provide you with a better service.
Carry on browsing if you're happy with this, or find out how to
manage cookies.
</p>
</div>
</div>
Is there any way to show it after a delay 5-10 mins or after a number of visits of a specific page?
i found the code here:
https://theme.stepofweb.com/Smarty/v2.1.0/HTML_BS4/page-cookie-alert.html
This is just a simple example. Add the following to the file.
CSS:
#cookie-alert{
display:none;
}
JS:
(function(){
setTimeout(showAlert, 2000)
})();
function showAlert()
{
document.getElementById("cookie-alert").style.display = "block";
}
Change the time to whatever you'd like. Keep in mind that this is just a simple example.
To show that message with a delay you can use something simple like this:
// Vanilla JS to show it after period of time
var cookieDiv = document.getElementById('cookie-alert');
cookieDiv.style.display = 'none';
setTimeout(function(){
cookieDiv.style.display='block';
},5000) // Show it after 5000ms
Example here:
https://jsfiddle.net/cgn6qj98/2/
I'm not sure why but all the modal functions are not working with me.
I checked the version and the load they are fine.
I keep getting this error message:
Uncaught TypeError: $(...).modal is not a function
for the hide I already found an alternative.
instead of:
$('#myModal').modal('hide');
I used this :
$('#myModal .close').click();
And it works perfectly.
The problem now is with the show
$('#myModal').modal("show");
I also tried both
$('#myModal').modal("toggle");
And:
$('#myModal').modal();
but unfortunately none of them is working.
Here html code -when the button is clicked I will do some verification and handle a json data from the web service if it succeed then I want show my modal- everything is working except the show.
<button type="button" id="creatNewAcount" class="btn btn-default" data-toggle="modal">Sign up</button>
if there's any alternative I would like to know it.
Most common reason for such problems are
1.If you have defined the jquery library more than once.
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="modal fade" id="myModal" aria-hidden="true">
...
...
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
The bootstrap library gets applied to the first jquery library but when you reload the jquery library, the original bootstrap load is lost(Modal function is in bootstrap).
2.Please wrap your JavaScript code inside
$(document).ready(function(){});
3.Please check if the id of the modal is same
as the one you have defined for the component(Also check for duplication's of same id ).
<div class="modal fade" id="myModal" aria-hidden="true">
...
...
</div>
Note: Remove fade class from the div and enjoy it should be worked
This can happen for a few reasons:
You forgot to include Jquery library in the document
You included the Jquery library more than once in the document
You forgot to include bootstrap.js library in the document
The versions of your Javascript and Bootstrap does not match. Refer bootstrap documentation to make sure the versions are matching
The modal <div> is missing the modal class
The id of the modal <div> is incorrect. (eg: you wrongly prepended # in the id of the <div>)
# sign is missing in the Jquery selector
I got same issue while working with Modal Popup Bootstrap , I used Id and trigger click event for showing and hidding modal popup instead of $("#Id").modal('show') and $("#id").modal('hide'),
`
<button type="button" id="btnPurchaseClose" class="close" data dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span></button>
<a class="btn btn-default" id="btnOpenPurchasePopup" data-toggle="modal" data target="#newPurchasePopup">Select</a>
$('#btnPurchaseClose').trigger('click');// for close popup
$('#btnOpenPurchase').trigger('click');`// for open popup
My root cause was that I forgot to add the # before the id name. Lame but true.
From
$('scheduleModal').modal('show');
To
$('#scheduleModal').modal('show');
For your reference, the code sequence that works for me is
<script>
function scheduleRequest() {
$('#scheduleModal').modal('show');
}
</script>
<script src="<c:url value="/resources/bootstrap/js/bootstrap.min.js"/>">
</script>
<script
src="<c:url value="/resources/plugins/fastclick/fastclick.min.js"/>">
</script>
<script
src="<c:url value="/resources/plugins/slimScroll/jquery.slimscroll.min.js"/>">
</script>
<script
src="<c:url value="/resources/plugins/datatables/jquery.dataTables.min.js"/>">
</script>
<script
src="<c:url value="/resources/plugins/datatables/dataTables.bootstrap.min.js"/>">
</script>
<script src="<c:url value="/resources/dist/js/demo.js"/>">
</script>
Use .modal({show:true}) and .modal({show:false}) instead of ('show') and ('hide') ... it seems to be bootstrap / jquery version combination dependent. Hope it helps.
the solution of 'bootstrap modal is not opening' is, put your Jquery CDN first in the head tag (after starting head tag).
I wasted two days in finding this problem.
Please,
try and check if the triggering button has attribute type="button".
Working example:
<button type="button" id="trigger" style="visibility:visible;" onclick="modal_btn_click()">Trigger Modal Click</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>This is a small modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script >
function modal_btn_click() {
$('#myModal').modal({ show: true });
}
</script>
Try This without paramater
$('#myModal').modal();
it should be worked
are you sure that the id of the modal is "myModal"? if not then the call will not trigger it.
also - just from reading your post - you are triggering a function / validation with this button
<button type="button" id="creatNewAcount" class="btn btn-default" data-toggle="modal">Sign up</button>
and then if all is well - you want to trigger the modal. - if this is hte case - then you should remove the toggle from this button click. I presume you have an event handler tied to this click? you need the .modal("show") as a part of that function. not toggled from this button. also - is this id correct "creatNewAcount" as opposed to this spelling "createNewAccount"
<button type="button" id="creatNewAcount" class="btn btn-default" >Sign up</button>
use the object to call...
<a href="#" onclick='$("#myModal").modal("show");'>Try This</a>
or if you using ajax to show that modal after get result, this is work for me...
$.ajax({ url: "YourUrl",
type: "POST", data: "x=1&y=2&z=3",
cache: false, success: function(result){
// Your Function here
$("#myModal").modal("show");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script><script type="text/javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
the first googleapis script is not working now a days use this second scripe given by jquery
jQuery lib has to be loaded first. In my case, i was loading bootstrap lib first, also tried tag with target and firing a click trigger. But the main issue was - jquery has to be loaded first.
Please also make sure that the modal div is nested inside your <body> element.
After trying everything on the web for my issue, I needed to add in a small delay to the script before trying to load the box.
Even though I had put the line to load the box on the last possible line in the entire script. I just put a 500ms delay on it using
setTimeout(() => { $('#modalID').modal('show'); }, 500);
Hope that helps someone in the future. 100% agree it's prob because I don't understand the flow of my scripts and load order. But this is the way I got around it
In my case, bootstrap.css and bootstrap.js versions are mismatched.
It is working if I remove the fade class. But the background is disappeared.
I added the same version of bootstrap files. Now it is working perfectly.
Thank you #Mohammed Shareef C.
Another use case that may be the cuplrit
My problem was that I had a jquery selector that was using a variable that was not assigned immediately.
My modal had a dynamic ID
<div class="modal fade" id="{{scope.modalId}}"... >
This is in angularJS, so the valud of scope.modalID wasn't being bound until $scope.onInit
vm.$onInit = function () {
$( `#${vm.modalId}` ).on('shown.bs.modal', function(){
console.log('WORKS')
});
zzz
Make sure your script tag is closed with another script tag like below
before
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"/>
After
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
I am always leery of asking dumb questions here but I need to move on and create a few more active pages but this is a lingering issue in my way ...The chtml in razor contains a switch ,,, in one of the cases there's three if statements.. THIS IS JUST ONE OF THEM depending on the if statements a different string in viewdata is to be fed into a div and the div class "hidden" is removed and the supplied text displayed....
I have over the past few hours regained my briefly lost ability to remove that hidden class (I hate css) but I have never been able to update the content of the div.
PLEASE Advise Thank you !!
<div id="divUnUsableEvent" class="hidden">
<div class="row clearfix">
<div class="col-md-1"></div>
<div id="systemExceptionLbl" style="font-size: 2em; color: red;"
class="text-danger:focus">
Please contact IS support
</div>
</div>
</div>
//alphascores Not present AND BetaSCores Not Present Ready for xxxxx //alphascores Not present AND BetaSCores Not Present Ready for xxxxx Scoring
if (!Convert.ToBoolean(#ViewData["alphaPresent"])
&& !Convert.ToBoolean(#ViewData["betaPresent"]))
{
<script type="text/javascript">
$(function() {
$('#UnUseableEvent').addClass("hidden");
var txtMsg = #Html.Raw(Json.Encode(ViewData["beforeAlpha"]));
$('#divUnUsableEvent').removeClass("hidden");
$('#systemExceptionLbl').removeClass("hidden");
$('#systemExceptionLbl').innerText = txtMsg;
});
</script>
<a id="XXXReScoreEvent"
href="#Url.Action("Readyforxxxxxx", "Exception", new { Id = (int)#ViewData["Id"] })"
class="btn btn-primary btn-default btn-too-large pull-left margin"
aria-label="XXXReScoreEvent">
<span class="glyphicon glyphicon-edit" aria-hidden="true"></span> Ready for xxxxxx Scoring
</a>
}
break;
I know its hitting the javascript, as that html element (a button) named '#UnUseableEvent' is correctly being hidden in this case. I of course would want the javascript out of this html page and just have function calls in the razor but baby steps
Specifically regarding the ('#systemExceptionLbl').innerText = txtMsg; I have tried
.text
.value
.innerHTML
all to no avail. I can see the correctly formatted Json.Encoded text reach the variable txtMsg, but again I cant get it into the div ..
I am having success now with displaying the div (remove class hidden) I was attempting to affect the wrong div name and the line removing the hidden class from the element $('#systemExceptionLbl') is not needed.
I even tried to skip the JQuery reference and go old school document.getElementById('systemExceptionLbl').innerHTML = txtMsg;
Ever tried :
$('#systemExceptionLbl').text( txtMsg );
or
$('#systemExceptionLbl').html( txtMsg );
as innerText is not a jquery function. Instead use .html() or .text() to insert data into it
I know there exist several topics about this problem but I couldn't find a solution which works for me.
So here is my problem:
My website is responsive and shows an info-box when it's loaded from a mobile device. This info-box shows a link to a tutorial how to save the website as WebApp. When the user loads the website from a WebApp the info-box should be hidden.
Here's the code I'm using (not working):
<script type="text/javascript">
if (window.navigator.standalone == true) {
document.getElementById('alertbox')[0].style.display = 'none !important';
}
</script>
The info-box has the ID "alertbox":
<div id="alertbox" class="alert alert-info visible-phone">
<button type="button" class="close" data-dismiss="alert">×</button>
This website supports iOS-WebApps. Learn more how to save this website as WebApp.
</div>
the "!important" tag is neccessary because I'm using Twitter's BootStrap and they defined a sub-attribute (display) already as !important.
Thanks in advance.
Alright after searching the web and testing various combinations I've found the solution:
<script type="text/javascript">
if (navigator.userAgent.match(/(iPod touch|iPhone|iPad|CriOS)/i)) {
if (window.navigator.standalone == true) {
//iOS WebApp
$(".alert").alert('close');
}
else {
//iOS Safari/Chrome
}
}
else {
//other browser
$(".alert").alert('close');
};
</script>
The script above automatically dismisses the alertbox with this code:
<div id="alertbox" class="alert alert-info visible-phone">
<button type="button" class="close" data-dismiss="alert">×</button>
This website supports iOS-WebApps. Learn more how to save this website as WebApp.
</div>
I hope I could help the people who might have a similar problem.
maybe this is your answer?
Determine if user navigated from mobile Safari
I hope this solves your answer.
How to use to jquery hide api in my rails application with the following block of code .. especially for the close button...
<div class="loginwrapperinner">
<div class="widgettitle">
<button type="button" class="close" data-dismiss="alert">×</button>
<%= "<div class=\"flash_error\">#{h alert}</div>".html_safe unless alert.blank? %>
<%= "<div class=\"flash_notice\">#{h notice}</div>".html_safe unless notice.blank? %>
</div>
.....
</div>
Cleaner version:
HTML
<div class="loginwrapperinner">
<div class="widgettitle">
<button type="button" class="close" data-dismiss="alert">×</button>
<!-- empty container will not appear (try to not using html_safe!) -->
<div class="flash_error"><%= h(alert || '') %></div>
<div class="flash_notice"><%= h(notice || '') %></div>
</div>
.....
</div>
Javascript
$('.close').
siblings('.flash_error, .flash_notice').hide().
prevObject.parent().hide();
A brief explanation may change the way you've thought of this problem:
rails is generating html via the view. It is never (should never be) responsible for javascript.
Inside of your javascript file(s) is where you'll write functionality like this.
So, lets say your view has generated a message box and that box's close button had a class of box_close_button, you could simply go into your JS file and attach a listener to that class:
$('.box_close_button').doSomeJavascriptHere(function() { //whatever you want. })
So, now its not a matter what to do in rails, but rather, whats the proper jquery selectors to do what you want
I found the following solution for my problem.
$(function(){
$('.close').click(function(){
$(this).parent().hide();
});
});