LebGeeks

A community for technology geeks in Lebanon.

You are not logged in.

#1 January 4 2011

Kassem
Member

More Issues With jQuery UI

Hey guys,

I have two problems that need to be solved:

1. I added a click handler to a div, once clicked it should display a dialog box (using jQuery UI). That works fine, but it only works ONCE. If I click the same div after I've closed the dialog box, nothing happens.

2. The dialog box does not display the way it should... Here's how it looks:
iz55ki.jpg
But look at the CSS:

.ui-dialog { position: absolute; overflow: hidden; width:600px; height:450px; padding:10px; background-color:#2c3e56;  }
/*.ui-dialog .ui-dialog-titlebar { padding: .5em 1em .3em; position: relative;  }*/
.contact .ui-dialog-title { float: left; margin: .1em 16px .2em 0; } 
.contact .ui-dialog-titlebar-close { position: absolute; right: .3em; bottom: 3%; width: 19px; margin: 0; padding: 1px; height: 18px; }
.contact .ui-dialog-titlebar-close span { display: block; margin: 1px; }
.contact .ui-dialog-titlebar-close:hover, .ui-dialog .ui-dialog-titlebar-close:focus { padding: 0; }
.contact .ui-dialog-content { position: relative; border: 0; padding: .5em 1em; background: none; overflow: auto; zoom: 1; }
.contact .ui-dialog-buttonpane { text-align: left; border-width: 1px 0 0 0; background-image: none; margin: .5em 0 0 0; padding: .3em 1em .5em .4em; }
.contact .ui-dialog-buttonpane .ui-dialog-buttonset { float: right; }
.contact .ui-dialog-buttonpane button { margin: .5em .4em .5em 0; cursor: pointer; }
.contact .ui-resizable-se { width: 14px; height: 14px; right: 3px; bottom: 3px; }
.ui-draggable .ui-dialog-titlebar { cursor: move; }

.contact textarea {
	width:100%;
	height:400px;
	font-family:"Century Gothic", serif;
	font-size:14px;
	color:#2c3e56;
}

//HTML Code:
<div id="dialog1" class="contact" title=""> </div>

//Javascript Code:
$(function() {  
	scrollAds();
	
	$("#tabs").tabs();
	var contact = "<form action=\"includes/send.php\" method=\"post\"><textarea> </textarea><input type=\"submit\" class=\"formButton\" id=\"contactSend\" name=\"contactSend\" value=\"SEND\" /><input type=\"reset\" class=\"formButton\" id=\"contactReset\" name=\"contactReset\" value=\"RESET\" /></form>";
	$("#contactBtn").click(function(e) {
		$("#dialog1").html(contact);
		$("#dialog1").dialog({modal: false, width: 300, draggable: true, dialogClass: "contact"});
		e.preventDefault();
	})
});

So any suggestions?

Offline

#2 January 4 2011

Kassem
Member

Re: More Issues With jQuery UI

UPDATE: Second Problem has been sorted out. But still haven't found a solution to the first one. And it's not the first time I encounter a similar problem. Why does this happen? How can I solve it?

Thank you.

Last edited by Kassem (January 4 2011)

Offline

#3 January 4 2011

vic
Member

Re: More Issues With jQuery UI

How are you closing it?

From the jQueryUI documentation:

A call to
$(foo).dialog()
will initialize a dialog instance and will auto-open the dialog by default. If you want to reuse a dialog, the easiest way is to disable the "auto-open" option with:
$(foo).dialog({ autoOpen: false })
and open it with
$(foo).dialog('open')
. To close it, use
$(foo).dialog('close')

Sounds like thats what you need to be doing...

Last edited by vic (January 4 2011)

Offline

#4 January 4 2011

Kassem
Member

Re: More Issues With jQuery UI

@vic: Thanks a lot man. That is exactly what I needed to do :)

Offline

Board footer