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
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 a bootstrap modal dialog whose content is being dynamically set in button click based on what is selected by the user. I would like to display the selection as bold. However, when rendered it displays the bold tags (less than b greater than) and (less than forward slash b greater than) instead of text being bold.
JS
$("#SubmitBtn").click(function () {
var dropDownText = $("#DSLDropDownList option:selected").text();
$('#ConfirmationDialog').modal('show');
$('#ConfirmationMessage').text('You selected ' + '<b>' + dropDownText + '</b>'
)
-----------------------------------------------------------------------
HTML
<button type="button" id="SubmitBtn" class="btn btn-primary">Submit</button>
<div id="ConfirmationDialog" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div id="ConfirmationMessage"></div>
</div>
</div>
</div>
I would like it to display, You Selected followed by value of dropDownText in bold font. Instead it displays bold tags.
.text() renders given input as plaintext
Use .html() instead of .text():
$('#ConfirmationMessage').html('You selected ' + '<b>' + dropDownText + '</b>');
Example
var dropDownText = "foo";
$('#ConfirmationMessage').html('You selected ' + '<b>' + dropDownText + '</b>');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<span id="ConfirmationMessage"></span>
$("#ConfirmationMessage").html("<b>You selected " + dropDownText + " </b>");
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 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 " />';
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');