Is there a way to add the buttons to a specific part of the jquery dialog modal? For example, I have styling that is currently conditional on buttons being inside a div with a specific classname, is there a way for me to target the buttons to go inside that div?
HTML:
<div id="dialog-confirm" title="Header">
<div class="modal-inner2">
<div class="modal-header2">
<h1>Header</h1>
</div>
<div class="modal-content">
<p>I'm text</p>
<div class="BtnGoHere"></div>
</div>
JS:
$(function() {
$( "#dialog-confirm" ).dialog({
resizable: false,
height: "auto",
width: 400,
modal: true,
buttons: [
{
text: "Cancel",
"class": "btn btn-cancel",
click: function() {
$( this ).dialog( "close" );
}
},
{
text: "Save",
"class": "btn",
click: function() {
$( this ).dialog( "close" );
}
}
]
});
});
i've been playing around your code and I think I found the solution:
HTML:
<div id="dialog-confirm" title="Header">
<div class="modal-inner2">
<div class="modal-header2">
<h1>Header</h1>
</div>
<div class="modal-content">
<p>I'm text</p>
<div class="BtnGoHere"></div>
</div>
Javascript:
$(function() {
$( "#dialog-confirm" ).dialog({
resizable: false,
height: "auto",
width: 400,
modal: true,
buttons: [
{
text: "Cancel",
"class": "btn btn-cancel",
click: function() {
$( this ).dialog( "close" );
}
},
{
text: "Save",
"class": "btn",
click: function() {
$( this ).dialog( "close" );
}
}
]
});
});
$( ".BtnGoHere" ).append( "<input type='button' value='NewButton' />" );
As you can see, you have only to use the append method from the element you want to insert the new one.
Also here you have the link of a jsfiddle to check the code working:
https://jsfiddle.net/1yfu4w8o/
Hope it helps!
Just put the buttons inside the modal in HTML.
<div class="BtnGoHere">
<button class="btn" type="button">Close</button>
<button class="btn" type="submit">Save</button>
</div>
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/
Having some trouble getting this example to work with classes. I would like to have classes each bring up a separate dialog box with different information in them when they are clicked...https://jqueryui.com/dialog/#animated
Here is my fiddle and code.
HTML...
<div class="foo">click me
<div class="bar">blahblahblah</div>
</div>
<div class="foo">or me
<div class="bar">blahblahblah</div>
</div>
jQuery...
$( function() {
$( ".bar" ).dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
}
});
$( ".foo" ).click(function() {
$(this).find(".bar").dialog( "open" );
});
});
You may not be able to use jquery UI Dialog using a class to open dialog as the way in your code because $(this).find(".bar") will return empty and does not exist.
Try using an id for inner div elements.
<div class="foo" data-id="x1" >click me
<div class="bar" id="x1" >blahblahblah X1</div>
</div>
<div class="foo" data-id="x2" >or me
<div class="bar" id="x2" >blahblahblah X2</div>
</div>
--
$( function() {
$( ".bar" ).dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
}
});
$( ".foo" ).click(function() {
var id = $(this).data("id");
$('#'+id).dialog( "open" );
});
});
JSFiddle
I have a form in HTML:
<form id="notes" method="post" onsubmit="return notes_validate()">
In this form I've included a JQuery Dialog box (I've connect the scripts and it's working):
<div id="dialog-confirm" title="Alert" style="display:none;">
<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>Continue and submit?</p>
</div>
I have a JavaScript script called "notes_validate()" that validates elements on the form and returns true if all elements pass the checks.
In this script, as one of the final validation steps, I prompt the user with this JQuery Dialog box; I'm trying to get the Dialog box to submit the form if "Yes" is selected and return false (don't submit the form) if "Cancel" is selected.
In "notes_validate()" is:
if(validated){
$(function() {
$( "#dialog-confirm" ).dialog({
resizable: false,
height:240,
width:300,
modal: true,
buttons: {
"Yes": function() {
$( this ).dialog( "close" );
return true;
},
Cancel: function() {
$( this ).dialog( "close" );
return false;
}
}
});
});
}
The issue is that the form is automatically submitting before any option is selected. I also have a submit button in the form in HTML:
<input class="submit" style="float:left" type="submit" value="submit" />
What's the issue(s)?
The problem is you're expecting onsubmit="return notes_validate()" to keep the form from submitting, but your threading is messed up. You're not returning anything directly from notes_validate().
Once you hit $( "#dialog-confirm" ).dialog({...}), that's a different "thread". Your notes_validate method is continuing on as if nothing happened.
What you need is
function notes_validate(event) {
if(validated){
$(function() {
$( "#dialog-confirm" ).dialog({
resizable: false,
height:240,
width:300,
modal: true,
buttons: {
"Yes": function() {
$( this ).dialog( "close" );
$( "#notes" ).submit();
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
});
}
event.preventDefault();
}
Update:
As pointed out, it would be better to remove the onsubmit portion of this altogether. Changing your button to the following after removing the onsubmit from your form should do the trick:
<input class="submit" style="float:left" type="button" onclick="notes_validate()" />
So I made them on JSFiddle alone...you can see them by clicking the links...But when I put them together in one page...its not opening when I'm changing a javascript its working the other one...can some help me please...I think jquery.min.js is the problem..but how can I fix it
1st Code:
$(function() {
$( "#dialog-form" ).dialog({
autoOpen: false,
resizable: false,
modal: true,
open: function() {
// On open, hide the original submit button
$( this ).find( "[type=submit]" ).hide();
},
buttons: [
{
text: "Save",
click: $.noop,
type: "submit",
form: "dialog-form" // <-- Make the association
},
{
text: "Close",
click: function() {
$( this ).dialog( "close" );
}
}
]
});
$( "#create-user" ).on( "click", function() {
$( "#dialog-form" ).dialog( "open" );
});
});
<form title="Show" id="dialog-form" action="GetRecent" method="GET">
<div class="squaredThree2">
<input type="checkbox" id="squaredThree2" name="Show" />
<label for="squaredThree2">
<div style="font-weight: 700;font-size: 1.1em;color: #5a5a5a;margin-left:25px">Show</div>
</div>
<div class="squaredThree3">
<input type="checkbox" id="squaredThree3" name="Show2" />
<label for="squaredThree3">
<div style="font-weight: 700;font-size: 1.1em;color: #5a5a5a;margin-left:25px;">Show2</div>
</div>
<button type="submit">Save</button>
</form>
<a id="create-user" href="javascript:;">Show</a>
2nd Code:
<a href="https://www.youtube.com/embed/HfszInbOhd8?rel=0&border=0&autoplay=1&iv_load_policy=3" class="movieTrailer cboxElement buttn torrent">Watch Something
$(document).ready(function(){
$("a[data-rel='movieSS']").colorbox();
$(".movieTrailer").colorbox({iframe:true, width:705, height:580});
$('.more-count span').html($('.comment').size());
});
Here is the links
1st JSFiddle
2nd JSFiddle
I have the following script:
<script type="text/javascript">
$( "#addLocation" ).dialog({
autoOpen: false,
modal: true,
height: 700,
width: 550,
buttons: {
"Add Location": function() {
document.forms["mapform"].submit();
},
Cancel: function() {
$( this ).dialog( "close" );
}
},
});
</script>
<script type="text/javascript">
function showLocationDialog() {
$("#addLocation").dialog("open");
}
</script>
<div id="addLocation" style="display:none;">
<form action="" method="post" name="mapform">
<input type="text" name="name" />
<input type="submit" />
</form>
</div>
<button onclick="javascript:showLocationDialog();">Add an address</button>
The button does not open the dialog and I cannot understand why.. can anyone assist?
Thanks,
Wait for the DOM to be ready.
Stick your .dialog() code in a $(document).ready() or $() block
1 - Put the .dialog() initialization into a $(document).ready() { ... });.
2 - Remove the extra comma from after the buttons value:
buttons: {
"Add Location": function() {
document.forms["mapform"].submit();
},
Cancel: function() {
$( this ).dialog( "close" );
}
}, <-- remove this, causes IE to spontaneously combust
another thing to try...
remove the display:none css from the addLocation div..the dialog will take care of hiding everything once its initialized on document.ready