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
Related
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>
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()" />
I had this example from 2 months and I changed the PC. Now this doesn't seem to work anymore. This is an example that should load a small window's dialog by (before) pushing a button.
However, it does not work...
This is my code:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
// <---- VENTAÑAS DE PARAMETERES---->
var regex,v,l,c,b;
$( "#wnd_Addparam" ).dialog({
autoOpen: false,
height: 'auto',
width: 350,
modal: true,
resizable:false,
buttons: {
"Add": function() {
$( this ).dialog( "close" );
},
Cancel: function() {
$( this ).dialog( "close" );
}
},
close: function() {
$( this ).dialog( "close" );
}
});
$( "#btn_Addpar" ).click(function() {
$( "#wnd_Addparam" ).dialog( "open" );
});
$( "#wnd_Paramedit" ).dialog({
autoOpen: false,
height: 'auto',
width: 350,
modal: true,
resizable:false,
buttons: {
"Accept": function() {
$( this ).dialog( "close" );
},
Cancel: function() {
$( this ).dialog( "close" );
}
},
close: function() {
$( this ).dialog( "close" );
}
});
$( "#btn_Pedit" ).click(function() {
$( "#wnd_Paramedit" ).dialog( "open" );
});
$( "#wnd_Borpara" ).dialog({
autoOpen: false,
height: 'auto',
width: 300,
resizable:false,
modal: true,
buttons: {
"Accept": function() {
$(this).dialog("close");
},
Cancel: function() {
$( this ).dialog( "close" );
}
},
close: function() {
$( this ).dialog( "close" );
}
});
$( "#btn_Deletepara" ).click(function() {
$( "#wnd_Borpara" ).dialog( "open" );
});
</script></head>
<!--<form method="POST" id="iformp" name="nformp">-->
<body>
<h3>List of parameters</h3>
<div id="sortparam" >
</div>
<input type="button" id="btn_Addpar" value="Add"/>
<input type="button" id="btn_Deletepara" value="Delete"/>
<input type="button" id="btn_Pedit" value="Edit"/>
<!--<form>-->
</body>
</html>
Please.. Why I do have an error for the dialog???
You are referencing the jQuery core, but not jQuery UI itself.
I believe the dialog function only exists in jQuery UI, so you would need to add the following to your page too:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<script type="text/javascript">
// <---- VENTAÑAS DE PARAMETERES---->
$(document).ready( function () {
var regex,v,l,c,b;
$( "#wnd_Addparam" ).dialog({
// Your code...
}
I had the same problem. I included jQuery twice on the same webpage (jQuery then jQuery UI then jQuery, and it causes me troubles (exactly the same problem on the .dialog )
Now use this code simple....
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<script type="text/javascript">
// <---- VENTAÑAS DE PARAMETERES---->
$(document).ready(function() {
var regex,v,l,c,b;
$( "#wnd_Addparam" ).dialog({
autoOpen: false,
height: 'auto',
width: 350,
modal: true,
resizable:false,
buttons: {
"Add": function() {
$( this ).dialog( "close" );
},
Cancel: function() {
$( this ).dialog( "close" );
}
},
close: function() {
$( this ).dialog( "close" );
}
});
$( "#btn_Addpar" ).click(function() {
$( "#wnd_Addparam" ).dialog( "open" );
});
});
</script>
</head>
<!--<form method="POST" id="iformp" name="nformp">-->
<body>
<h3>List of parameters</h3>
<div id="sortparam" >
</div>
<input type="button" id="btn_Addpar" value="Add"/>
<!--<form>-->
</body>
</html>
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