I'm using bootstrap 4 Alerts to display error messages, etc. such as their demo:
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<strong>Holy guacamole!</strong> You should check in on some of those fields below.
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
I'm also using AJAX calls to do form POSTs.
Problem I'm having is that if a user posts, the error message will show up, but if user clicks on the close button and re-posts, if an error happens, because he previously closed the previous error, I cannot unhide the alert container with a d-block because it simply no longer exists in the DOM / Page. The DIV element was destroyed, or at least, I cannot see it in the Chrome's developer tools.
How could I fixe this so that my close button simply 'hides' the container, instead of destroying it or whatever it does? I need to be able to re-show it even after user closed.
Cheers! Pat
Ended up replacing data-dismiss="alert" with an onClick="$('#idOfDiv').addClass('d-none');" type of solution...
Cheers for your help! Pat
Did you try using a bit of jQuery or Javascript ?
Maybe adding some "arrow" icon on the top corner.
Then, dividing your alert into two sections : one is a thin strip that remains permanently and the other one which is "toggling" when clicked
Related
I am using this jquery plugin (Jquery Popup Overlay)
I have finally managed to have it working as expected, apart from the last step.
Once the pop up opens, there are 2 buttons. One is to close the window and one to progress with selected action(delete something in DB in this case).
I have this link to activate the window:
<a class="initialism basic_open btn btn-xs btn-danger" href="?page=suite-admin&action=delete-suite&id=5&site_id=1">delete suite</a></td>
This is the script to show the window:
$(document).ready(function () { $('#basic').popup({
escape: false,
blur: false, });});
What I need is , when pop up opens and i click on delete button this will progress with whatever is in .
I do not know much about Java, but i do really like this feature on my project.
Any help will be appreciated.
Thank you
Edit:
Forgot the actual pop up:
<div id="basic" class="well" style="display: none;">
<h4>Basic</h4>
<p>The dialog can be closed by pressing the <kbd>Esc</kbd> key, or by clicking on the background
<br> outside the content area, or by clicking on the Close button.</p>
<button class="basic_close btn btn-default">Close</button>
<button class="basic_close btn btn-danger">Delete Suite</button>
I think two possible answers (there are certainly more) to your problem can be found in this stackoverflow question: [How to create an HTML button that acts like a link?
To sum it up: One way would be to just use an <a> tag instead of <button>. That means you write:
<a class="basic_close btn btn-danger" href="?page=suite-admin&action=delete-suite&id=5&site_id=1">Delete Suite</a>
I am in the process of learning jQuery and JS, so I apologize if this is a stupid, easy question.
I am working with a tour plugin called intro.js that adds hints to a web page (bootstrap page). I got the intro.js hints working, however I need to be able to show and hide all of the hints by toggling one button. The way the plugin currently works, you show the hints by clicking a button, then you have to manually click on each hint icon to view the tooltip, then click a button on the tooltip to hide the hint icon. The web pages could have several hints displayed (anywhere from 10-15) and users may not want to see what all hints are, as they may want to just see what 1 or 2 are then close all the hints - so I want to be able to toggle all of them on/off with one button.
According to the plugin API (view it here: https://introjs.com/docs/hints/api/), the hints are added when the button is clicked using this function: introJs.addHints(). You are supposed to be able to hide all of the hints using this function: introJs.hideHints().
So, how can I toggle both of these functions with one button?
Also, another issue I am having is if a user does not close all of the hint icons and they open a new page, the hint icons are still visible. If I refresh the page, they disappear. Related to this, if someone opens the hints and closes them, but decides to reopen the hints again, they do not open unless the page is refreshed. The API documentation has a function called: introJs.refresh() that says it refreshes and rearranges the hints. I think this is what I need to clear the existing hints (but I could be wrong). How can I clear/refresh the hints when the hints are closed so users can reopen the hints if needed, without refreshing - and so the hints disappear if a new page is opened and some hints were not closed.
Please help me with these questions and make a newbie's Christmas/holiday even better!!!
Here is a jsfiddle with hints added to a bootstrap modal. The Show Hints link is what I need to toggle on/off: http://jsfiddle.net/beaver71/fc0rkakn/
Thank you to everyone reading - and Happy Holidays to all of you.
Sample HTML:
<!-- Button trigger modal -->
Open Notes Modal
<!-- Modal -->
<div class="modal fade" id="notesModal" tabindex="-1" role="dialog" aria-labelledby="notesModalLabel">
<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">Notes</h4>
</div>
<div class="modal-body">
<div id="note-input" data-hint="Input your notes here." data-hintposition="top-middle" data-position="bottom-right-aligned">
<input type="text" name="note" class="col-md-11" maxlength="300"/><button id="add-note" data-hint="Select Add button to save and add your notes." data-hintposition="top-middle" data-position="bottom-right-aligned">Add</button>
</div>
</div>
<div id="note-total" data-hint="Track your remaining characters here." data-hintposition="top-middle" data-position="middle-right" style="margin-left:15px;">0/300
</div>
<div><a class="btn btn-tour" href="javascript:void(0);" onclick="javascript:introJs().addHints();"><i class="fa fa-bus"></i> Show Hints</a></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 API allows introJs to be commanded and for callbacks to be attached to various internal events, however it doesn't provide for inspection of state (in particular whether or not a hint is currently showing).
To achieve the toggle function, you will need to manage a state variable of your own.
Something like this ...
jQuery(function($) {
var hintShowing = false; // a variable by which to track the state of introJs.
introJs("#targetElment");
$("#myToggleButton").on('click', function() {
if(hintShowing) {
introJs.hideHints();
hintShowing = false;
} else {
introJs.showHints();
hintShowing = true;
}
});
function setShowing() {
hintShowing = true;
}
function resetShowing() {
hintShowing = false;
}
introJs.onchange(setShowing).oncomplete(resetShowing).onexit(resetShowing);
// add hints and set options here
});
That should work, at least to a certain extent. It depends on whether onchange fires when the initial hint is shown. If not, setShowing() will also need to be called manually (from your own code when the hint sequence starts) or maybe just initialise var hintShowing = true;
I have a dismissible alert in my html file which is hidden in starting. code below.
<div class="alert alert-dismissible" role="alert" id="msgdiv" style="margin-bottom:5px;display: none;">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
<span id="emsg"></span>
</div>
Now I send an Ajax request to submit the form and based on response, First I show this div which was hidden till now and then add success or error class to this div.
console.log($("#msgdiv"));
$("#msgdiv").show();
if (result.is_success) {
$("#msgdiv").removeClass("alert-warning");
$("#msgdiv").addClass("alert-success");
} else {
$("#msgdiv").removeClass("alert-success");
$("#msgdiv").addClass("alert-warning");
}
$("#emsg").html(result.message);
Now when response is returned first time, this div is displayed. I cancel the div by click on cross button.
I submit the form with new values using Ajax second time without refreshing the page and this div is not displayed. Same result was returned in both cases.
I printed the div element in both scenario in JS code and below is the output.
First Time:
[div#msgdiv.alert.alert-dismissible, context: document, selector: "#msgdiv"]
Second Time:
n.fn.init {context: document, selector: "#msgdiv"}
more details in image below.
Why is this happening? why there is difference in console log? What is its meaning from HTML and JS perspective.
When an alert is closed, it is removed from the DOM.
If you want to an alert to reappear later, remove data-dismiss="alert" in the close button as follows:
<div class="alert alert-dismissible" role="alert" id="msgdiv" style="margin-bottom:5px;display: none;">
<button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button>
<span id="emsg"></span>
</div>
Then, bind the close button to simply hide the alert when it's pressed:
$('.alert .close').click(function(){
$(this).parent().hide();
});
My page is showing Exception message several times Like this:
So, what i want is on page load if this below div is showing more than once then discard other & show only one message at a time...
<div style="width: 70%;text-align: left;margin-left: 15%;" class="alert alert-warning text-center alert-dismissible server-side-msg text-capitalize" role="alert">
<span class="glyphicon glyphicon-warning-sign"></span>
<strong>We apologize for the inconvenience,An exception occured,We will solve this issue asap...
</strong>
<button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
</div>
so how to hide/remove all duplicates div for showing only one message at a time using jquery?
Try this : select all div with role="alert" and hide them all but first one. You can use class selector also like $('div[class="alert"]')
$(function(){
// hide all alert but the first one
$('div[role="alert"]').not(':first').hide();
});
please try this code :
$(document).ready(function()
{
$("divID").hide();
});
var duplicated = {}, classname;
$('div').each(function() {
classname = $(this).attr('class');
duplicated[classname] = (duplicated[classname] | 0) + 1
})
for (var key in duplicated) {
if (duplicated.hasOwnProperty(key) && duplicated[key] > 1) {
$('div.' + key).slice(1).hide()
}
}
Demo
PS: The above method removes duplicate div based on class, you can modify it to include id also.
It is pretty obvious that the all alerts are bootstrap's alert-dialogs, so the javascript( jQuery ) solution looks like this:
$(function() {
//find all !visible! alert dialogs except the !last!! one and hide them..
$('.alert:visible').not(':last').hide();
//..you can also completely remove them from page, to avoid unnecessary DOM polution
// please notice, that you will select ALL alerts, not only the visible ones...
// $('.alert').not(':last').remove();
});
but you also should find out, why the server renders more then one alert on the page.
more efficient solution would be one with the context, like this:
$('#some-elem-with-all-alerts').find('.alert:visible').not(':last').hide();
The Twitter Bootstrap library now has Javascript plugins available, and one of them is supposed to give your alerts an automatic close button.
The documentation is here
I can't figure out how to get it to work. See this code and fiddle:
<div class = "alert-message fade in" data-alert = "alert">
<p>This is an alert!</p>
</div>
http://jsfiddle.net/SBQcp/
I'm sure there's a syntax piece that I'm missing, but I don't get it.
Alerts are not supposed to be auto-closed because the intention is to the user to notice any message before closing.
Although you can add a link so the user can close it manually this way.
<div class = "alert-message fade in" data-alert = "alert">
<a class="close" href="#">×</a>
<p>This is an alert!</p>
</div>
Or can be closed programatically this way:
$(".alert-message").alert('close')