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');
Related
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>';
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 want to create a Twitter Bootstrap modal, but keep it hidden until I'm ready to show it.
Here is the smallest amount of code to demonstrate. It successfully creates the modal, but it applies display: block to it inline, overriding my style.
modalHtml = '<div class="modal fade" style="display: none" tabindex="-1" role="dialog" id="myModal">'
+ '<div class="modal-dialog modal-lg" role="document">'
+ '<div class="modal-content">Hello World</div></div></div>'
modal = jQuery(modalHtml);
modal.modal('show');
https://jsfiddle.net/Lx23xqbq/2/
I could add this
modal.modal('hide');
But this allows the modal to be visible for a split second.
How can I create a Twitter Bootstrap modal without displaying it to the user?
Modals are hidden via the CSS class .modal by default.
Remove modal.modal( 'show' );.
You have modal.modal( 'show' ); in your JS which causes the modal to be visible for a split second before you call modal.modal( 'hide' ).
Personally I would place the modal markup into the page before hand.
var $button = $('button');
var $modal = $('#myModal');
$modal.on('show.bs.modal', function(e) {
// Optional. We update the modal with content stored in the data-content
// attribute of the <button>.
// You could also grab another hidden element to inject or perform
// AJAX here.
var content = $(e.relatedTarget).data('content');
$modal
.find('.modal-content')
.text(content);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<button type="button" data-toggle="modal" data-target="#myModal" data-content="Hi Guy!">Show Modal</button>
<div class="modal fade" style="display: none" tabindex="-1" role="dialog" id="myModal">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">Hello World</div>
</div>
</div>
Injecting into the page wouldn't be much different.
var html =
'<div class="modal fade" style="display: none" tabindex="-1" role="dialog" id="myModal">' +
'<div class="modal-dialog modal-lg" role="document">' +
'<div class="modal-content">Hello World</div>' +
'</div>' +
'</div>';
// Append modal markup to page.
$('body').append(html);
var $button = $('button');
var $modal = $('#myModal');
$modal.on('show.bs.modal', function(e) {
// Optional. We update the modal with content stored in the data-content
// attribute of the <button>.
// You could also grab another hidden element to inject or perform
// AJAX here.
var content = $(e.relatedTarget).data('content');
$modal
.find('.modal-content')
.text(content);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<button type="button" data-toggle="modal" data-target="#myModal" data-content="Hi Guy!">Show Modal</button>
How can I create a Twitter Bootstrap modal without displaying it to
the user?
Technically you are already creating the modal with your first 2 lines of code. It just isn't displayed until the 3rd line (modal.modal('show');).
What I think you might be trying to accomplish is separating the code that creates the modal from the code that shows/hides it. The problem (I'm assuming) is that elsewhere in your code you no longer have a reference to the variable modal (that you created in modal = jQuery(modalHtml);), because it is out of scope.
Add this to your HTML page:
<div id="hidden-modal" style="display:none"></div>
Update your Javascript as described below:
modalHtml = '<div class="modal fade" style="display: none" tabindex="-1" role="dialog" id="myModal">'
+ '<div class="modal-dialog modal-lg" role="document">'
+ '<div class="modal-content">Hello World</div></div></div>'
// inject the modal markup into the hidden element on the page
jQuery('#hidden-modal').html(modalHtml);
// whenever ready, retrieve the hidden modal html and display it
jQuery(jQuery('#hidden-modal').html()).modal('show');
https://jsfiddle.net/Lx23xqbq/3/
If I understand your question this have to work:
$(document).ready(function () {
draw();
});
function draw() {
var html = ""
html += '<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>';
html += '<hr />';
html += '<div id="myModal" class="modal fade" role="dialog">';
html += '<div class="modal-dialog">';
html += '<div class="modal-content">';
html += '<div class="modal-header">';
html += '<button type="button" class="close" data-dismiss="modal">×</button>';
html += '<h4 class="modal-title">Modal Header</h4>';
html += '</div>';
html += '<div class="modal-body">';
html += '<p>Some text in the modal.</p>';
html += '</div>';
html += '<div class="modal-footer">';
html += '<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>';
html += '</div>';
html += '</div>';
html += '</div>';
html += '</div>';
$('#modal').html(html);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div id="modal">
</div>
When page is loaded the function draw() draws the modal and keep it hidden until you click the button, hyperlink, label or whatever you want.
I am trying to figure out why this particular Bootstrap confirmation modal is not working with my desired function. It does appear to work with a basic function bringing up an alert window but when I put the function I want it, it executes the function (in this case deletes an image from File-stack and my db) but it hangs up the modal window to where the modal window closes but there is that grey overlay stuck and it makes the page no longer functional. The function that seems to be holding this up is in the first button in the modal-footerdiv towards the bottom. The close button works fine and again it works fine when I put a simple function in place of the removeMoreImage() function Here is the code for the Bootstrap modal:
<button type="button" class="btn btn-danger" data-toggle="modal" data-target="#confirm-modal-more"> <span class= "glyphicon glyphicon-remove-circle"></span> REMOVE IMAGE</button>
<div id="confirm-modal-more" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Remove Image Confirmation</h4>
</div>
<div class="modal-body">
<p>Are you sure you want to delete this image?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-ng-click="removeMoreImage(picture.url, car)" data-dismiss="modal" >REMOVE</button>
<button type="button" class="btn btn-default" data-dismiss="modal">CANCEL</button>
</div>
</div>
</div>
</div>
Here is the function that is is executing causing the hangup:
var getIndexIfObjWithOwnAttr = function(array, attr, value) {
for (var i = 0; i < array.length; i++) {
if (array[i].hasOwnProperty(attr) && array[i][attr] === value) {
return i;
}
}
return -1;
}
$scope.removeMoreImage = function(image, data) {
var index = getIndexIfObjWithOwnAttr(data.morePictures, 'url', image);
data.morePictures.splice(index, 1);
filepickerService.remove(image);
console.log(image + " has been removed!");
}
Any insights or advice would be great. It seems like sync issue but I am not sure.
I ended up using some query to force the modal close and it seems to work nicely though it is not as elegant of a solution as I was hoping for but it seems to work. This is the code I added to the function that was hanging up the modal.
$('#confirm-modal-more').modal('hide');
$('body').removeClass('modal-open');
$('.modal-backdrop').remove();
You can close the modal in the function and return a result to the parent controller:
$uibModalInstance.close('some result of modal');
$uibModalInstance.dismiss('some reason for discarding and closing');
$scope.removeMoreImage = function(image, data) {
var index = getIndexIfObjWithOwnAttr(data.morePictures, 'url', image);
data.morePictures.splice(index, 1);
filepickerService.remove(image);
console.log(image + " has been removed!");
// close modal
$uibModalInstance.close();
}
https://angular-ui.github.io/bootstrap/#/modal
I am trying to make an instruction page about proxy settings for the users.
I have listed procedures step by step for each browser and put a link to picture that shows how it is done.
I want to show the picture in an PHP file which getting required image file and showing on the page according to its parameters s and b which are stand for s: step and b: browser.
My jQuery is
$(function() {
$("a[id^='proxy_']").click(
function() {
var b = $(this).data("b");
var s = $(this).data("s");
$("#proxy_modal_title").html("Proxy Settings");
$("#proxy_modal_body").load("images/proxy_settings/proxy.php?b=" + b + "&s=" + s);
});
});
It should load ./images/proxy_settings/proxy.php?b=ie&s=1 but nothing happens.
And HTML is ( a part only)
<ol>
<li>Click on Settings <a id="proxy_ie_step_01" data-s="1" data-b="ie" href="#proxyModal" data-toggle="modal" title="Show picture"> <span class="glyphicon glyphicon-picture"></span></a>
</li>
<li>Select Internet Options <a id="proxy_ie_step_02" data-s="2" data-b="ie" href="#proxyModal" data-toggle="modal" title="Show picture"> <span class="glyphicon glyphicon-picture"></span> </a>
</li>
<!-- goes on -->
</ol>
And the modal is here:
<div class="modal fade" id="proxyModal" tabindex="-1" role="dialog" aria-labelledby="zkanoca" 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="proxy_modal_title"></h4>
</div>
<div class="modal-body" id="proxy_modal_body">
</div>
</div>
</div>
</div>
Proxy.php file content is here:
if (isset($_GET['b']) && isset($_GET['s']))
{
echo '<img src="proxy_setting_' . $_GET['b'] . '_' . $_GET['s'] . '.png " />';
}
else
{
exit;
}
Modal opens up but either modal title or modal content are empty. I have checked it with Firebug but cannot see any error.
I have tried to put an alert("HEY"); into $("a[id^='proxy_']").click(); event. It also did not work.
If it was a path issue, Firebug would have given me a 404 error.
The file structure tree is like the following:
|.
|-js
|-script.js
|-images
|-proxy_settings
|-proxy.php
|-proxy_setting_ie_1.png
|-proxy_setting_ie_2.png
|-proxy_setting_ie_1.png
|-proxy_setting_ie_3.png
|-proxy_setting_ie_4.png
|-proxy_setting_ie_5.png
|-proxy_setting_ie_6.png
|-proxy_setting_ie_7.png
|-instructionpage.html
|-messageform.php
|-index.php
The script does not listen click events although it responds another same event:
This works which resides at the same file (script.js):
jQuery("#sendMessage").click(
function() {
jQuery("#sendmessage_modal_title").html("Send A Message");
jQuery("#sendmessage_modal_body").load("messageform.php");
});
If the li elements are generated dynamically, you should try this:
$(document).on("click", "a[id^='proxy_']", function () {
//
});
First of all I apologize you all wasting your valuable time.
I was trying to retrieve the instructions.html into index.php using jQuery's load() function. I moved
$(function() {
$("a[id^='proxy_']").click(
function() {
var b = $(this).data("b");
var s = $(this).data("s");
$("#proxy_modal_title").html("Proxy Settings");
$("#proxy_modal_body").load("images/proxy_settings/proxy.php?b=" + b + "&s=" + s);
});
});
to instructions.html's itself then the problem is gone.
your .php files is in the folder images/proxy_settings/
maybe in your proxy.php file change the img src to: echo '<img src="../proxy_setting_' . $_GET['b'] . '_' . $_GET['s'] . '.png " />';
Update:
I dont know why but my Firebug tell me the 404 Not Found Error!
Replace this code into the proxy.php and it should work.
echo '<img src="images/proxy_setting_' . $_GET['b'] . '_' . $_GET['s'] . '.png " />';