I am changing the alert message dynamically:
<div id="alert" hidden="hidden">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
</div>
$('#alert').addClass("alert alert-danger alert-dismissable")
.text('Fail to get upload information from YouTube.')
.show();
but the dismiss button is not shown.
With the execution of the .text() method you are ending up changing the entire content of the div#alert. However, going by your question, it seems you just want to append the text to the div keeping the button inside the div intact.
That can be achieved with the .append() method instead.
This should work:
$('#alert').addClass("alert alert-danger alert-dismissable")
.append('Fail to get upload information from YouTube.')
.show();
As you've asked to replace an existing text, I would suggest this:
1) Place the previous text inside a span which you can reference later
2) Unhide the div#alert and at the same time change the text of the child span with a new message keeping everything else inside the div in place.
For eg:
If you have your html like this:
<div id="alert" hidden="hidden">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">Hello</button>
<span id="message">Text before script execution</span>
</div>
then the following script will work fine:
$('#alert').addClass("alert alert-danger alert-dismissable")
.show()
.children('#message').text("Text after script execution");
PS: Sometime later if you wish to add html content inside the span, then .html() will work for you, whereas .text() will just treat the contents as text and not render as html code.
use .append instead of .text: Working demo here
$('#alert').removeClass('alert alert-info alert-dismissable').addClass("alert alert-danger alert-dismissable").append('Fail to get upload information from YouTube.').show();
The simplest solution I can think of is just a minor modification to your code.
<div id="alert" hidden="hidden">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
</div>
$('#alert').addClass("alert alert-danger alert-dismissable")
.text('Fail to get upload information from YouTube.')
.append('<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>')
.show();
This should do what you want. The button vanishes because it's no longer a part of the div tag. Appending it using append() will add it after whatever text you want to put in the div.
Related
So I add this code dynamically when the user clicks a button (data is passed in as a parameter from an AJAX call, that all works fine):
$('#container').append('
<div class=" alert alert-danger alert-dismissable fade in" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4>Error</h4>
<p>'+data+'</p>
</div>');`
I was wondering if it was possible to add functionality to auto close this alert after a certain time. I know there are other ways to go about doing this where I could easy accomplish this, I'm just looking to do it this way because I want to have multiple alerts when the same button is clicked, so having each alert handle itself and disappear automatically would make it look a lot cleaner.
Sounds like you can use setTimeout Javascript function:
https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setTimeout
I'd like to start with saying I've searched and searched for the solution to my problem -- and after trying everything I read -- no success. I just want to make a simple modal to pop up when a user clicks on a link (that isn't ready yet).
---Already Tried---
Made sure there wasn't a second bootstrap javascript file (especially in header)
Tried variations in javascript syntax
Tried variations in the link html
When I made the link a "button" then the modal was fine -- but I don't want a simple link to be a button.
$("body").on("click","#empty",function(event){
$("#myModal").modal()
})
<li>Our Blog</li>
I also tried
$(document).ready(function(){
$("#empty").click(function(){
$("#myModal").modal();
});
});
I suspect there's something wrong in the way the html is set up (since the modal worked for a "button" but wont for a regular link)
Let me know if you need more clarification -- Thanks for your help!
This is working modal... It may be helpful for you...
<script type='text/javascript'>
('#myModal').modal('show');
</script>
<li>Click Here</li>
<div id="myModal" class="modal fade" role="dialog">
<!-- Modal content-->
<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>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>
otherwise try this code...
$(document).ready(function(){
$("#empty").click(function(){
$("#myModal").modal('show');
});
});
If your link "isn't ready yet" when you initiate the modal with Javascript it won't work.
Assuming that your link is created dynamically you have to make sure you initiate it once it is in the DOM, in a JS callback or however your link is created (instead of the Document.ready function).
Also worth noting that to initiate the default triggering (setup in the html with the 'data-' attributes) you simply use:
$("#myModal").modal();
But if you want to trigger it manually in a onClick function, you'll need to add 'show' or 'toggle:
$("body").on("click","#empty",function(){
$('#myModal').modal('toggle');
)};
Again, both of these codes needs wrapping up in a document.ready function or a callback when your link is in the DOM.
I am using BootStrap and have an alert for cookies that looks like this:
<div class="alert alert-info fade in">
<button class="close" data-dismiss="alert" aria-label="close" title="close">×</button>
<strong>Info!</strong> This site uses cookies, by using this site you consent to the use of cookies.
</div>
But I want to be able to have an onclick event that does the same as the close button, and after many Googles (and soul searching if it's worth it...) I have come up with nothing.
Can anyone aid me with this? (Either doing in JavaScript/jQuery or HTML is ideal, thanks in advance :))
I cant believe it was this simple in the end... I fixed it with this:
<div class="alert alert-info fade in" data-dismiss="alert" aria-label="close" title="close">
...
</div>
Just copy and paste the data-dismiss etc. into the div element...
You can do achieve it this way --
$('.alert').click(function(){
$('.alert').alert('close')
});
.alert is the class name of the alert box or you can give the alert box an id and use to close it programmatically
I have been attempting to get greasemonkey to close a modal by clicking the "x" button. Here is the code for the page.
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true" onClick="window.location.reload()">x</button>
I've tried using document.querySelector('.close').click() but to no avail. Where am I going wrong here?
The page in question is running javascript and ajax.
The code looks like bootstrap modal, so look for the main container ID or class name and use the following code.
$('#modalID').modal('hide');
Why don't you just add the hide class to the modal? That's all that clicking it is going to do.
I'm using the clean example code provided by zclip page:
$('a#copy-dynamic').zclip({
path:'js/ZeroClipboard.swf',
copy:function(){return $('input#dynamic').val();}
});
and this is the HTML:
Click here to copy the value of this input:
<input type="text" id="dynamic" value="Insert any text here." onfocus="if(this.value=='Insert any text here.'){this.value=''}" onblur="if(this.value==''){this.value='Insert any text here.'}">
It works fine if the HTML is inside the bootstrap main page, but it stops working if i move the html inside a bootstrap modal window (that is, inside the div element of the modal).
How can i get it work?
I had the same issue with zclip and bootstrap modals. The fix I applied was twofold:
Attach the zclip to the element inside the modal's 'show' function.
Add a 250ms delay before attaching the zclip to the element
This properly places the zclip within the modal. It also works if you have multiple tabs in the modal.
HTML
<div id="myModal" class="modal hide fade">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<a class="btn" href="#" id="modal_body_button">Copy Undo Config To Clipboard</a>
<p>One fine body…</p>
</div>
<div class="modal-footer">
Close
Save changes
</div>
</div>
JavaScript
$('#myModal').on('show', function () {
$("#modal_body_button").delay(250).queue(function(next){
$(this).zclip({
path: "/static/javascript/ZeroClipboard.swf",
copy: "copied text OK!"
});
next();
});
});
In example above can also use on('shown') instead of on('show') event which calls when modal completely showed. This helps to prevent using dirty hacks like delay(250)