applying jQuery UI dialog to classes - javascript

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

Related

Add buttons inside specific div in jquery ui dialog

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>

Something not allow me to show 2 things in one page

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

jQuery UI dialog content width doesn't change

I have a jQuery UI dialog and I have managed to change the width of the container (outer box) however the content within it seems to be fixed:
Here is the HTML:
<div id="dialog" width="500px" title="Animal" style="display:none">
<center>
<input type="text" class="input" />
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</center>
</div>
Here is the jQuery:
function check_domain_input()
{
$( "#dialog" ).dialog({
resizable: false,
modal: true,
width:'800',
height:'500'
});
$("#dialog").css("width", "260px");
var domain_val = document.getElementsByName('domain');
if (domain_val[0].value.length > 0)
{
return true;
}
$( "#dialog" ).dialog({modal: true});
return false;
}
Need help with getting the content to fit in the whole box
Notice the scrollbar, that is the size of the content... it does not go past this point
just remove width from here
function check_domain_input()
{
$( "#dialog" ).dialog({
resizable: false,
modal: true,
width:'800',//remove this
height:'500'
});
and here you can set width according to your requirement using !important do like this
<div id="dialog" width="300px !important" title="Animal" style="display:none">
Remove $("#dialog").css("width", "260px") from your script, as it will set the dialog div width fixed to 260px
Why?
because Your <div id="dialog"></div> will have width of 260px which is your body of a dialog and you're already setting your dialog height and width so no need to provide width and height property to $("#dialog")
$("#dialog").dialog({
resizable: false,
modal: true,
width: '800', // Width already defined of dialog
height: '500' // Height already defined of dialog
});
Fiddle Demo
try so:
function check_domain_input()
{
$( "#dialog" ).dialog({
resizable: false,
modal: true,
width:'800',
height:'500'
});
//$("#dialog").css("width", "260px"); <-- you can't just change the dialog width
$( "#dialog" ).dialog( "option", "width", 260 ); // you should use the proper function
var domain_val = document.getElementsByName('domain');
if (domain_val[0].value.length > 0){
return true;
}
$( "#dialog" ).dialog({modal: true});
return false;
}
You can't only resize the dialog element, because when you call the dialog function jQuery build it's dialog element based on your div, so you must call the provided method to properly resize the dialog

Open div when click a another div

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();
});

TypeError: 'undefined' is not a function (evaluating '$( "#wnd_Addparam" ).dialog')

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>

Categories

Resources