[jQuery] Modal dialog?
I have a problem where i might have more then one modal dialog in the same page.. I want to use a class for this, and select it on the position in the DOM... But after I open it one time JQuery UI seems to move the dialog windows to the bottom... so I cannot search for it in the same location again to reopen it. Is there anyway to avoid this?
[jQuery] Modal dialog validation problem
I have a form in a modal dialog which I submit with $.post().
Validation is set so that the name field has a min length of 2.
* enter 'a' in name and submit
* validation works, form not submitted, error displayed
* submit again (still with 'a' for name)
* validation fails, form gets submitted and record is created with
invalid name ('a' - too short)
Any ideas why validation is not being called the second time?
function addNewPlace(parentID, heading, placeType, fade, remove,
backup){
$(#addPlace).remove(); // remove any previous forms
$.get(http://localhost:8000/places/add-place;,
{parent:parentID},function(data){
$(data).dialog({modal:true, resizable:false, draggable:false,
title:heading, width: 400});
$(#id_type).val(placeType);
$(form#addPlace).submit(function(){
placeName = $(form#addPlace #id_name).val();
$.post(/places/add-place, $(#addPlace).serialize(),
function(){
$(#addPlace).dialog('close');
updateSelect(parentID, fade, remove, backup, placeName)
});
return false;
});
$(#addPlace).validate({
rules: {
name: {
required: true,
minlength: 2
},
},
errorElement: p,
errorClass: errorField,
errorPlacement: function(error, element) {
error.appendTo( element.parent() );
},
highlight: function(element, errorClass) {
$(element).parent().addClass('error');
},
unhighlight: function(element, errorClass) {
$(element).parent().removeClass('error');
},
});
});
}
[jQuery] Modal Dialog with a datepicker inside, works one time, then never...
Hi everybody.
Let me introduce myself.
I'm a developer located in Venezuela (latin america), and i have like
2 years using Jquery in every project that came to my hands. Its a
pleasure to meet you all.
For begin, i have a little problem that i hope you can giveme some
light here:
I have created a modal dialog inside a tab with a simple form that has
a datepicker:
div id=tabs-3 style=font-size:11px;
div style=padding-left:75%;
a href=javascript:void(0)
onClick=javascript:{modalForm
('idValuation','destiny.php',$(this).text());}
Add Valuation
/a
/div
div id=idValuation style=display:none;padding:2px
table
tr
td valign=topComments: /td
tdtextarea type=text name=comment_omit
style=width:200px;/textarea/td
/tr
tr
tdDate: /td
td
script type=text/javascript
dateSelector('idFIV');
/script
input type=text name=date id=idFIV
readonly=true
size=10 class=calendario
style=border:none
/td
/tr
/table
/div
/div
So, as you can see i call a function dateSelector and this function
calls the datePicker like this:
function dateSelector(id) {
$(document).ready(function() {
$(#+id).css({'border':'none','background-
color':'#E5E5E5','float':'left'});
$(#+id).datepicker(
{ showOn: 'button',
buttonImage: 'images/iconos/calendar.png',
dateFormat:'dd-mm-yy',
buttonImageOnly: true
},
$.datepicker.regional['es']);
});
}
The dialog its created like this:
function modalForm(id, url, tittle) {
if ( !$(#+id).dialog( 'isOpen' ) ){
$(#+id).dialog({
bgiframe : true,
closeOnEscape : true,
resizable : false,
width : 500,
modal : true,
title : tittle,
beforeclose: function(event, ui) {
$(this).dialog('destroy');
},
buttons : {
'Cancel' : function() {
$(this).dialog('close');
},
'Add Record' : function() {
updateView(''+url+'',''+id+'');
$(this).dialog('close');
}
}
});
$(#+id).dialog('open');
}
}
This works just perfect, the dialog appear, i can select the date, add
a record to the database, and then just call again the dialog using
the link.
The thing is that when i use this the first time, works perfect, when
i try to add a second record, the date picker doesnt refresh the
field. It shows the calendar, but when i select a value, this doesnt
appear in the input, and even more strange, if i close de dialog and
then reopen, it appears the value that i tried to select, selected,
but the same problem again.
What i am doing wrong with this ? Why works only the first time and
then breaks?
Thanks in advance for all your help! :-D
[jQuery] Re: Jquery Modal Dialog
Hi,
Thanks, but I have already tried this way and the issue that I am
facing in this is that the whole dialog in which that div is contained
is not being able to be dragged and the only portion that i making it
draggable is dragged...
Footer div is dialog1.
Please let me know if I am doing something wrong and how can i make
the whole dialog draggable or from footer just like currently it is
from title...
I am putting sample HTML of what I am using it...
!doctype html
html lang=en
head
titlejQuery UI Dialog - Basic modal/title
link type=text/css href=../../themes/base/ui.all.css
rel=stylesheet /
script type=text/javascript src=../../jquery-1.3.2.js/script
script type=text/javascript src=../../ui/ui.core.js/script
script type=text/javascript src=../../ui/ui.draggable.js/
script
script type=text/javascript src=../../ui/ui.dialog.js/script
script type=text/javascript src=../../external/bgiframe/
jquery.bgiframe.js/script
link type=text/css href=../demos.css rel=stylesheet /
style
#draggable, #draggable2 { width: 100px; height: 100px; padding:
0.5em; float: left; margin: 0 10px 10px 0; }
#draggable p { cursor: move; }
/style
script type=text/javascript
$(function() {
$(#dialog).dialog({
bgiframe: true,
modal: true,
height:'auto'
});
$(#dialog1).draggable(handle:'div');
});
/script
/head
body
div class=demo
div id=dialog title=title
p
sdfsdfdsf
sdfdsf
sdfsdfsdf
dsfsdfsd
sdfsdfsd
dsfsdfds
fdsfsdffgdfgfdgdfgdf
dsfsdf
sdfsdffsdf
sdfsdfsdf
dsfsd
dfg
dfgdf
gdf
gdf
gfd
g
dfg
df
gdfnnkkk/p
div id=dialog1 class=ui-widget-content
p class=ui-widget-headerI can be dragged only by this handle/p
/div
/div
!-- Sample page content to illustrate the layering of the dialog --
div class=hiddenInViewSource style=padding:20px;
pSed vel diam id libero a href=http://example.com;rutrum
convallis/a. Donec aliquet leo vel magna. Phasellus rhoncus faucibus
ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis
ultricies neque, sit amet auctor elit eros a lectus./p
form
input value=text input /br /
input type=checkbox /checkboxbr /
input type=radio /radiobr /
select
optionselect/option
/selectbr /br /
textareatextarea/textareabr /
/form
/div!-- End sample page content --
/div!-- End demo --
div class=demo-description
pA modal dialog prevents the user from interacting with the rest of
the page until it is closed. To add a semi-transparent layer that
dims out the page content behind the dialog, set the background color
and opacity of the codeoverlay/code option./p
/div!-- End demo-description --
/body
/html
On Sep 12, 9:12 pm, samma89 samma89frien...@gmail.com wrote:
yeah..there is a way..add a div to footer or anywhere you want to use
as the handle.after that write this in the draggable code handle:
'div's id or class'.thats it.
[jQuery] Re: Jquery Modal Dialog
Hi anyone, Any update on this.. On Sep 10, 8:35 pm, NM nehamalhotra262...@gmail.com wrote: Hi, Iusedthejquerymodaldialogfrom thejqueryui.com, that is currently draggable from the title only. is there any way i can make that draggable by inserting a div at the footer of thedialogor make it draggable from everywhere in thedialog.
[jQuery] Re: Jquery Modal Dialog
yeah..there is a way..add a div to footer or anywhere you want to use as the handle.after that write this in the draggable code handle: 'div's id or class'.thats it.
[jQuery] Jquery Modal Dialog
Hi, I used the jquery modal dialog from the jqueryui.com, that is currently draggable from the title only. is there any way i can make that draggable by inserting a div at the footer of the dialog or make it draggable from everywhere in the dialog.
[jQuery] Modal Dialog Window (same as Prototype Window Class - PWC)
I am been developing and CMS So far the app was build with mysql, jpa, java, jsf, richfaces using netbeans IDE (running over tomcat) The front end have some OS look using Prototype Window Class (PWC) http://prototype-window.xilinus.com/ and dock using interface fisheye http://interface.eyecon.ro/docs/fisheye See image here http://www.sysmotion.com/image/paneldesk.jpg I tried some modal windows using jQuery also the UI but can not get this window approach, any fo you know if there are anything on jQuery I can use to have same results (this is the only reason for using prototype and my app also genetared web sites use only jQuery no prototype) Some CMS features Let you add new jQuery plugins to display content (pages, galleries, products, forms) Generates RSS 2.0 and pure plain HTML It will be more than just a CMS some CRM and DMS, webmail and calendar capabilities are part of the app, hope next January will be the release date for the beta suite Best Regards and sorry for my english is not my first language, I am from Mexico
[jQuery] Modal Dialog and scrolling
Hi everyone. I want to display a long list of elements inside a modal
Dialog(). I want that list to scroll when it reaches the edge of the
Dialog box. For some reason, the bars appear but they wont scroll down
nor up. (For information purposes, elements (divs) are dynamically
added to #feedback-list in the javascript.) Thanks for your time.
Heres the html
div id=feedback
form id=feedback-form method=post action=.
div class=title{{ form.title }}/div
input type=submit value=Submit or a href=#
class=cancelCancel/a
/form
div id=feedback-list/div
/div
and my javascript snipet:
$(#feedback-list).css({overflow: scroll});
$(#feedback).dialog({
modal: true,
height:650,
width:550,
overlay: {
opacity: 0.5,
background: black
},
buttons: {
Ok: function() {
$(this).dialog(close);
},
Cancel: function() {
$(this).dialog(close);
}
}
});
[jQuery] Modal Dialog in blockUI
Is it possible to show an external webpage inside of a blockUI modal dialog? I'd like to call another page via ajax and populate the dialog instead of using a reference to a hidden div, etc.
