I'm trying to get the close button to appear on the right side. Right now the close button "x" is appearing above my "success message"
I've tried placing the span in multiple places and in multiple ways but can't figure this out.
var alertBox = '<div class="alert ' + messageAlert + ' alert-dismissable"><button type="button" class="close" data-dismiss="alert" <span aria-hidden="true">×</button>' + messageText + '</span></div>';
The close button continues to show above the message no matter what i try.
Your code generates this:
<div class="alert {messageAlert} alert-dismissable">
<button type="button" class="close" data-dismiss="alert" <span aria-hidden="true">×</button>{messageText}</span></div>'
Which is not valid markup because you have a span in the middle of the button tag. The browser will try to fix it, with varying results.
Try closing the button tag and moving the span closing tag inside the button close, as follows. I have spaced things out so you can see that the tags match up.
alertBox = '<div class="alert ' + messageAlert + ' alert-dismissable">
<button type="button" class="close" data-dismiss="alert">
<span aria-hidden="true">×</span>
</button>' + messageText
+ '</div>';
Related
I have my alert box that appears on every CRUD operation.
<section class="content container-fluid">
<div id="notif-box" style="display: none;" class="alert alert-dismissible">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
<h4 id="head-title"><i id="icon-box" class="icon fa"></i></h4>
<span id="alert-message"></span>
</div>
</section>
I have problem with #head-title where I write headText.
In my methods on success I call:
displayNotif('danger', 'check', 'User added successfully', 'Success!');
and this fucntion:
function displayNotif(type, icon, text, alertTitle) {
$("#notif-box").removeClass();
$("#icon-box").removeClass();
$("#head-title").removeClass(alertTitle);
$("#notif-box").show();
var notifBoxClass = "alert alert-"+type+" alert-dismissible";
var iconClass = "icon fa fa-"+icon;
$("#notif-box").addClass(notifBoxClass);
$("#icon-box").addClass(iconClass);
// this is the issue
$("#head-title").append(alertTitle);
$("#alert-message").html(text);
setTimeout(function () {
$("#notif-box").fadeOut();
}, 5000);
}
When I hit first time add button, head title is 'Success!'
When hit second time head title is 'Succsss!Success'!
Third is ''Success!Success!Success!'
Other elements work as expected! Can not figure where the problem is!
Instead of appending again and again, simply replacing the text should solve the issue.
Change
$("#head-title").append(alertTitle);
To
$("#head-title").html(alertTitle);
I have the following function on my JS file that has defined the HTML code for a Modal dialog that is defined in here
I've copied the HTML code and assigned into a variable on my JS function:
function loadModalDialog(p1) {
var modal = '<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">' +
' <div class="modal-header">' +
' <button type="button" class="close" data- dismiss="modal" aria- hidden="true" >×</button>' +
' <h3 id= "myModalLabel"> Modal header </h3>' +
' </div>' +
' <div class="modal-body">' +
' <p>One fine body…</p>' +
' </div>' +
' <div class="modal-footer">' +
' <button class="btn" data- dismiss="modal" aria- hidden="true"> Close </button>' +
' <button class="btn btn-primary"> Save changes </button>' +
' </div>' +
'</div>';
}
Also, I have another JS function that calls loadModalDialog but at this point I am not sure how to inject the html that I have on my modal var into the DOM once I am inside of above function so I can display the modal dialog.
BTW, I want to inject the html through the JS function because eventually I will change the body of the dialog and it will change dynamically according p1 value.
BTW, the line of code that is calling loadModalDialog looks like this:
PopUp
Any idea how it should work?
Might be an approach. The trick is to establish a proper selector to wich the dialog() function could be called:
$("<div>Sample of an injected dialog</div>").dialog();
Is't actually very easy if you watch the jquery sample in contrast
$( "#dialog" ).dialog();
You simply replace the selector with concrete text (no meta chars).
If you want to execute a js function right after the dialog has loaded, you inline that function and provide it's parameters via JSON stringification. Like this
$("<div id='difflv2d'></div><script>drawGraph("
+ JSON.stringify(sd.side) + "," + JSON.stringify(sd.id) + ","
+ JSON.stringify(sd.title) + "," + JSON.stringify(sd.num) + ","
+ JSON.stringify(sd.data) + ")</script>").dialog();
In the sample above, the drawing function selects the div given by id 'difflv2d' and puts its stuff onto it. Since the div already is part of the dialog (just loaded), the graphic appears on that dialog. Stuff to draw is read out of the variables provided properly.
Here is a reference: on the fly div
I'm new to JSP and ajax but trying both at the same time.
I'm making a dynamic tab that can be added or removed with these steps.
I wannna put parameter from controller in the newly added tab's content area.
1.When a 'Load Project' button from the list is clicked, add a new tab.
$('<li role="presentation">'
+'<a href="#'+tabId+'" aria-controls="'+tabId+'" role="tab" data-toggle="tab">'
+$projectName
+' <span class="closeTab glyphicon glyphicon-remove" aria-hidden="true"></span>'
+'<input class="hiddenProjectId" type="text" name="projectId" value="'+ pId +'" style="display: none;">'
+'</a></li>').insertBefore('#liProjectTabAdd');
$('<div role="tabpanel" class="tab-pane fade" id="'+ tabId + '">'
+ '<div class="projectContent">'
+ '<ul class="blockList list-unstyled draggableList"></ul>'
+ '<div class="table-hover addBlock">'
+ 'add block <span id="addBlockGlyp" class="glyphicon glyphicon-plus" aria-hidden="true"></span>'
+ '</div></div>'
+ '</div>').appendTo('.projectTab-content');
2.call the controller through ajax(post method)
$.post("loadProjectContent.do",
{
projectId: pId
}
);
3.The controller call DAO and get the project's content.
(The contents are correct. I checked it with printing)
Project project = new Project();
project.setProjectId(Integer.parseInt(request.getParameter("projectId")));
dao.doGetProjectContent(project);
request.setAttribute("projectContent", project.getProjectContent());
Then now, how to get this projectContent in JSP?
I've tried adding jsp tag when I append the tab, but it was a raw text.
(like ~~~${ projectContent }~~~)
$('<div role="tabpanel" class="tab-pane fade" id="'+ tabId + '">'
+ '<div class="projectContent">'
+ '<ul class="blockList list-unstyled draggableList">'
+ '${ projectContent }'
+ '</ul>'
+ '<div class="table-hover addBlock">'
+ 'add block <span id="addBlockGlyp" class="glyphicon glyphicon-plus" aria-hidden="true"></span>'
+ '</div></div>'
+ '</div>').appendTo('.projectTab-content');
Please save this newbie
Write the projectContent to the response instead of adding it as a request attribute.
On the client side, parse the response of your AJAX request and add it to the DOM.
I use smarty class and bootstrap, and have this html tag:
`<a class="close" href="#" data-confirm="Are you sure you want to delete {$item.name} item? " ></a`>
Where {$item.name} is item name,from database.
For modal window,using this Js code:
<script>
$(document).ready(function() {
$('a[data-confirm]').click(function(ev) {
var href = $(this).attr('href');
var cat = document.getElementById("catname").value;
if (!$('#dataConfirmModal').length) {
$('body').append('<div id="dataConfirmModal" class="modal fade" role="dialog" aria-labelledby="dataConfirmLabel" 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><h3 id="dataConfirmLabel">Please Confirm</h3></div><div class="modal-body"></div><b></b><div class="modal-footer"><button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button><a class="btn btn-danger" id="dataConfirmOK">Delete</a></div></div></div></div>');
}
$('#dataConfirmModal').find('.modal-body').text($(this).attr('data-confirm'));
$('#dataConfirmOK').attr('href', href);
$('#dataConfirmModal').modal({show:true});
return false;
});
});
</script>
All is fine,modal working ,text that I add in data-confirm in tag shows and I get message like this :
Are you sure you want to delete Car item?
and,I try to be like this:
Are you sure you want to delete Car item?
I try with tags in data-confirmation,don't work,also try to made vairable var and show directly in js code,no result..
Thanks,
P
Why don't you use a span and replace the content inside the tag by this span.
Something like this:
<span id="delConfirmLabel" href=# > Are you sure you want to delete
<b> {$item.name} </b> item?</span>
now, replace the attribute "data-confirm" with delConfirmLabel's content.
i have jQuery v1.8.3 and twitter-bootstrap v2.2.1
I want to create a function to dynamically display the message.
function showMsg(header, text, closeFunc) {
var randId = Math.round(Math.random()*1000000);
var dialog = '<div id="modal_' + randId + '" class="modal hide fade">';
dialog += '<div class="modal-header">';
dialog += '<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>';
dialog += '<h3>' + header + '</h3>';
dialog += '</div>';
dialog += '<div class="modal-body">';
dialog += text;
dialog += '</div>';
dialog += '<div class="modal-footer">';
dialog += '<button id="modalBtn_' + randId + '" class="btn btn-primary">Close</button>';
dialog += '</div>';
dialog += '</div>';
$('body').append(dialog);
var modal = $('#modal_' + randId);
modal.modal({backdrop : false, show : false, keyboard : false});
modal.modal('show');
var btn = $('#modalBtn_' + randId);
btn.click(function(){
closeFunc();
modal.modal('hide');
});
}
But after display more than 3 these messages at once I get an error in Jquery: too much recursion
How can I fix it or have another way?
I couldn't recreate your "too much recursion" error, but I did want to suggest a better way of doing dynamic messages than the code you currently have. Namely, you could just be using a single Modal and update the content in it before showing it. That would eliminate all the overhead you're presently incurring by
having jQuery parse the same string into html repeatedly;
instantiating a new Modal object for every message; and
generating random id's and then searching through the DOM for elements created with them.
As an alternative, have the following blank Modal in the markup from the start. Doesn't really matter where, but bottom of the <body> is a typical location. If you must generate it dynamically, do it outside the showMsg function and do it only once.
<div id="msgModal" class="modal hide fade">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3></h3>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button class="btn btn-primary callback-btn" data-dismiss="modal">Close</button>
</div>
</div>
Notice I did make some alterations from yours by adding the fixed id="msgModal" to the modal and added the class callback-btn and attribute data-dismiss="modal" to the button.
Then the code for showMsg could be:
var $msgModal = $('#msgModal').modal({
backdrop: false,
show: false,
keyboard: false
}),
showMsg = function (header, body, callback) {
$msgModal
.find('.modal-header > h3').text(header).end()
.find('.modal-body').text(body).end()
.find('.callback-btn').off('click.callback')
.on('click.callback', callback).end()
.modal('show');
};
Here's a demo which outputs to the console if the footer button is clicked:
Plnkr
Or just trigger this event :
jQuery('Click me !').trigger('click.modal.data-api');