jQuery UI dialog content width doesn't change - javascript

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

Related

How to display jquery dialog on link click

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/

applying jQuery UI dialog to classes

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

Spectrum colorpicker not working on jQuery dialog

I'm trying to show the Spectrum colorpicker on a jQuery dialog but it's not showing up. This is the code I'm using for loading spectrum:
$(document).ready(function() { $("#colour").spectrum({color: "#f00" });});
Being 'colour' a div inside my jQuery dialog.
This is the code that initializes the dialog:
dialogObj = $("#_dialogPanel").dialog({
autoOpen: false,
resizeable: true,
position: { my: "center-100 bottom-40", at: "center center" },
stack: true,
height: 'auto',
width: 'auto',
modal: true
});
$("#_dialogPanel").submit( function(e) {
e.preventDefault();
});
dialogObj.dialog("open");
The content in the dialog is dynamically loaded using:
$("#_dialogPanel").empty().html(response);
$(document).ready(function() { $("#colour").spectrum({color: "#f00" });});
Being 'response':
<div name='colour' id='colour' />
The references to spectrum.js and spectrum.css are added in the master page
Spectrum color picker doesn't work on div, only on input elements
<input type='text' id="colour" />

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

jQuery UI Dialog not showing correctly

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

Categories

Resources