I am a bit newbie in Jquery and java scripts and a bit confuse in this matter.
Here's my code of a simple modal message alert taken from JQuery UI.
The problem is that the function is being called in the div class in the HTML code:
<script>
$(function() {
$( "#dialog-message" ).dialog({
modal: true,
buttons: {
Ok: function() {
$( this ).dialog( "close" );
}
}
});
});
</script>
</head>
<body>
<div id="dialog-message" title="Download complete">
<p>
<span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span>
Your files have downloaded successfully into the My Downloads folder.
</p>
<p>
Currently using <b>36% of your storage space</b>.
</p>
</div>
But what i want to do is to create 2 parameters: 1 receives some text and the 2nd is when i press ok it goes to a link.
I am developing a website and i don't want to use the browsers alert, just want to use that JQuery script and do something like this:
<?php
function alerta($texto="",$redirect=""){
print("<Script language=javascript>");
if($texto!="")
print("alert(\"$texto\");");
if($redirect!="")
print("window.location=\"$redirect\";");
print("</script>");
}
?>
You can echo your text (Variable 1) inside the div modal, and then use the redirect function on 'OK' button click event:
$(function() {
$( "#dialog-message" ).dialog({
modal: true,
buttons: {
Ok: function() {
window.location = "$YOUR_VARIABLE_2";
}
}
});
});
Related
I would like to have a jquery pop up with confirmation info when clicking on a specific link in my navigation menu.I have the code below, but the popup does not appear, but the info on the popup display on the page among other page content.
HTML Link
<li>Order </li>
Dialog content
<div id="dialog-confirm">
<div class="message">UI Content goes here</div>
<div class="buttons">
</div>
jquery
<script>
$( function() {
$( "#dialog-confirm" ).dialog({
$( "#order").click({
resizable: true,
height: "auto",
width: 600,
modal: true,
buttons: {
"Yes": function() {
window.location.replace("https://link_here");
},
No: function() {
window.location.replace("https://link_here");
}
}
});
});
} );
When I remove the $( "#order").click({ part of the jquery, it works as a popup for every link clicked, so the issue must be there but I am unable to solve.
You have calling dialog function before click
Please check below code
$(function(){
$('#order').click(function(e){
e.preventDefault();
$( "#dialog-confirm" ).dialog({
resizable: true,
height: "auto",
width: 600,
modal: true,
buttons: {
"Yes": function() {
window.location.replace("https://link_here");
},
No: function() {
window.location.replace("https://link_here");
}
}
});
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" />
<li>Order </li>
<div id="dialog-confirm" style="display: none;">
<div class="message">UI Content goes here</div>
<div class="buttons">
</div>
1) add autoOpen: false to the dialog settings first, so popup won't be shown automatically on page load.
2) add click method on your link which will be showing the popup.
See this fiddle:
https://jsfiddle.net/4eo9w1cr/
I know that Alert and Confirm cannot be styled, so I looked around and found an example of how to customise your own. However the example I found works online, but I could not get it to work in my application. The function looks like below:
$(function () {
$("#dialog-message").showModalDialog({
modal: true,
buttons: {
Ok: function () {
$(this).dialog("close");
}
}
});
});
While the div that contain the message looks like below:
<div id="dialog-message" title="Download complete">
<p>
<span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span>
Your files have downloaded successfully into the My Downloads folder.
</p>
<p>
Currently using <b>36% of your storage space</b>.
</p>
</div>
The problem that the message printed out into my page and the div is not read as a dialog box.
What am I missing?
Here you go with a solution https://jsfiddle.net/jbzgvzxk/
$(function () {
$("#dialog-message").dialog({
modal: true,
buttons: {
Ok: function () {
$(this).dialog("close");
}
}
});
});
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="dialog-message" title="Download complete">
<p>
<span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span>
Your files have downloaded successfully into the My Downloads folder.
</p>
<p>
Currently using <b>36% of your storage space</b>.
</p>
</div>
My assumption is you are using jQueryUI.
Instead of showModalDialog, it should be dialog.
Reference Document: https://jqueryui.com/dialog/#modal-confirmation
Please check the library & it's order of linking in the solution as well.
Hope this will help you.
this one is working fine
you need this code in java script
$(document).ready(function(){
$( "#dialog-message" ).dialog({
dialogClass: "no-close",
buttons: [
{
text: "OK",
click: function() {
$( this ).dialog( "close" );
}
}
]
});
});
you must make sure to import this 3 files to the page
https://code.jquery.com/jquery-1.11.3.js //Jquery
https://code.jquery.com/ui/jquery-ui-git.js // Jquery UI
https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css
// jquery ui CSS
I have a html structure. With the following:
<div class="edit"><a class="formtri" href="#">CHANGE</a>
And:
<div id="user_adr" style="display:none">
I want, when i click CHANGE, get user_adr div on front. Ajax or other solution. I tried jQuery .load function but it's not work. How can i do this?
Demo
You can use toggle() function to show / hide html element.
Live Demo
$('.edit').click(function(){
$('#user_adr').toggle();
});
alternatively you can use toggle functionality.
$('.edit').on('click',function(){
$('#user_adr').toggle();
});
if not toggle. then alternative method of toggle is this.
$('.edit').on('click',function(){
if('#user_adr').is('visible'))
{
$('#user_adr').show();
}
else
{
$('#user_adr').hide();
}
});
//to change display to none
$('#yourDivId).attr('display','none');
you can use jquery ui. dialog() method to show a dialog box. like this. Jquery dialog
<script>
$(function() {
$( "#dialog" ).dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
}
});
$( "#opener" ).click(function() {
$( "#dialog" ).dialog( "open" );
});
});
</script>
</head>
<body>
<div id="dialog" title="Basic dialog">
<p>This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
<button id="opener">Open Dialog</button>
if in case there is any other div with same class name edit above solutions may not be helpful so better u keep a unique id as "change"
<div class="edit"><a class="formtri" id="change" href="#">CHANGE</a>
$("#change").on("click", function(){
$('#user_adr').show();
});
$("#change").on("click", function(){
$('#user_adr').toggle();
});
I'm using jQuery UI 1.8.19 and Twitter Bootstrap 2.0.3 in a site I'm developing. I want to show a modal dialog when click in a Delete and for this I do that:
<div id="dialog-confirm" title="<?php echo lang("event:delete_confirm_title") ?>">
<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span><?php echo lang('event:delete_confirm_content') ?></p>
</div>
And the JS to fire the event is this one:
$(function() {
$("#delete").click(function(){
$( "#dialog-confirm" ).dialog({
resizable: false,
height:140,
modal: true,
buttons: {
"<?php echo lang('event:delete') ?>": function() {
$( this ).dialog( "close" );
},
"<?php echo lang('global:cancel_label') ?>": function() {
$( this ).dialog( "close" );
}
}
});
});
});
For some reason the modal dialog is always showed at the end of the page when it shouldn't be I think and when I click the element the dialog appears but the page is redirected instantaneously to my home page and didn't know the cause because I don't have redirects in any place and also there are no forms there. Any advice or help on this?
Best regards
You should add style='display: none' to your dialog div so it won't be displayed at startup.
Then if the page is sent to home when you click the button, you may want to check what type of button #delete is and finish it's function with return falseif it's a Submit for example to avoid normal click event handler to be launched :
$(function() {
$("#delete").click(function(e){
$( "#dialog-confirm" ).dialog({
resizable: false,
height:140,
modal: true,
buttons: {
"<?php echo lang('event:delete') ?>": function() {
$( this ).dialog( "close" );
},
"<?php echo lang('global:cancel_label') ?>": function() {
$( this ).dialog( "close" );
}
}
});
e.preventDefault();
});
});
Edit : Modification done according to Scott suggestion
This happened to me as well. There is only one cause I know of. The dialog CSS file is not being loaded.
See my SO Question: position:fixed breaks in IE9
jquery modal working when code is in same page
index.jsp
<script>
function show()
{
$(function() {
$( "#dialog:ui-dialog" ).dialog( "destroy" );
$( "#dialog-modal" ).dialog({
height: 140,
modal: true
});
});
}
</script>
</head>
<body>
<input type="button" value="Demo" onClick="show()" >
<div id="dialog-modal" title="Demo" style="display:none">
<p>Adding the modal overlay screen makes the dialog look more prominent because it dims out the page content.</p>
</div>
but, when i'm trying to separate the above code in different file, then it is not showing
index.jsp
<script>
function show()
{
$(function() {
$( "#dialog:ui-dialog" ).dialog( "destroy" );
$( "/dialog.jsp#dialog-modal" ).dialog({
height: 140,
modal: true
});
});
}
</script>
</head>
<body>
<input type="button" value="Demo" onClick="show()" >
</body>
dialog.jsp
<div id="#dialog-modal" title="Demo">
<p>Adding the modal overlay screen makes the dialog look more prominent because it dims out the page content.</p>
</div>
thanks in advance !!
You cannot call an external resource in a jQuery selector like $("/dialog.jsp#..."). Instead you need to load the resource with an AJAX call.
First, add a node to your main HTML to receive it. I've added <div id='dialog-content'></div>. Then load the .dialog() on that node:
<script>
function show()
{
$(function() {
$( "#dialog:ui-dialog" ).dialog( "destroy" );
$( "#dialog-content" ).dialog({
height: 140,
modal: true,
// Use load function to populate the dialog:
load: function() {
$("#dialog-content").load("/dialog.jsp#dialog-modal")
}
});
});
}
</script>
</head>
<body>
<div id='dialog-content'></div>
<input type="button" value="Demo" onClick="show()" >
</body>
That's simply not going to work; jQuery is not going to load the other page fragment for you just because you reference it with that selector; it's not even valid selector syntax.
If you want to load the dialog from another file, you'll have to either do a <jsp:include> to include it server-side or else make an explicit ajax call (with jQuery .load() or .ajax() or whatever) when something happens that makes you want to show the dialog.
That's because there is not element in the dom with the id "dialog-modal'. Your selector is incorrect. Do a console log of your jquery selector result and you'll see it's empty. Make sure the element in loaded in the dom. You can also create it on the fly:
$('<div id="my-popup">').dialog({
height: 140,
modal: true
});
Adding a "path" to your jQuery selector does not put the javascript in a separate file, and I don't think I've seen a successful use of having your HMTL markup in a separate file.
Move the markup back to index.jsp and move the show() function into a seperate .js (not .jsp) file.
Link the new .js file to index.jsp:
<script type="text/javascript" src="/show.js"></script