Hi Mike,
Yes its working now. Now that i understand that part and looked at the
api again i saw:
Get or set the buttons option, after init.
Glad I get that fixed. Thanks for your help!
I think if i play more with jquery things get easier for me to understand.
Carlo
On Fri, Jul 24, 2009 at 2:53 PM, Mean Mike<mcgra...@gmail.com> wrote:
>
> ok sorry for the delay, been kind of busy. Your problem is this ...
>
> the var somevar is defined in the click function and your are trying
> to use it in the constructor for the dialog therefore it is out of
> scope and not defined. This wouldn't work even if you made the var
> global because you must write the constructor before the click event
> occurs. So what you must do is define the buttons on click. like
> this
>
> [code]
> $(document).ready(function(){
> //construct dialog
> $("#dialog").dialog({
> autoOpen:false,
> modal:true,
> overlay: {backgroundColor: "#000",opacity: 0.5},
> resizable:false
> });
> //create click event function
> $(".button").click(function(){
> // on click do the following
> //change the title of the dialog
> $("#ui-dialog-title-dialog").text("Attention");
> // put a message in the dialog
> var message = "You are about to do something: ";
> $(".ui-dialog-content").text(message + $(this).attr("id"));
>
> //set the dialog buttons
> $("#dialog").dialog('option', 'buttons', {
> "Delete": function() {window.location = "/home/"+
> $(this).attr
> ("id") ;},
> "Cancel": function() {$(this).dialog("close");}
> });
>
> $("#dialog").dialog("open");
> });
>
> });
> [/code]
>
>
> Make sense ?
>
> Mike
> On Jul 22, 9:29 am, Carlo Landmeter <clandme...@gmail.com> wrote:
>> Sorry i forgot to add it.
>>
>> <img style="cursor:pointer" class="button" id="REF09624002"
>> src="images/delete.png" />
>>
>> The button is placed before the dialog div.
>>
>> Carlo
>>
>> On Tue, Jul 21, 2009 at 2:43 PM, Mean Mike<mcgra...@gmail.com> wrote:
>>
>> > Carlo buddy where is the button with the id that your looking for ?
>>
>> > On Jul 21, 5:06 am, Carlo Landmeter <clandme...@gmail.com> wrote:
>> >> I'm not able to send the whole html but i can show you the jquery stuff:
>> >> I am using this in a drupal CMS with jQuery 1.2.6 and jQuery UI 1.6.
>>
>> >> Drupal includes the following css/js
>>
>> >> <style type="text/css" media="all">@import
>> >> "/sites/default/modules/jquery_ui/jquery.ui/themes/default/ui.all.css";</style>
>> >> <script type="text/javascript" src="/misc/jquery.js"></script>
>> >> <script type="text/javascript"
>> >> src="/sites/default/modules/jquery_ui/jquery.ui/ui/minified/ui.core.min.js"></script>
>> >> <script type="text/javascript"
>> >> src="/sites/default/modules/jquery_ui/jquery.ui/ui/minified/ui.dialog.min.js"></script>
>> >> <script type="text/javascript"
>> >> src="/sites/default/modules/jquery_ui/jquery.ui/ui/minified/ui.draggable.min.js"></script>
>> >> <script type="text/javascript">
>> >> $(document).ready(function(){
>> >> $("#dialog").dialog({
>> >> autoOpen:false,
>> >> modal:true,
>> >> overlay: {backgroundColor: "#000",opacity: 0.5},
>> >> resizable:false,
>> >> buttons:{
>> >> "Delete": function() {window.location = "/home/"
>> >> + somevar ;},
>> >> "Cancel": function() {$(this).dialog("close");}
>> >> }
>> >> });
>> >> $(".button").click(function(){
>> >> $("#ui-dialog-title-dialog").text("Attention");
>> >> var message = "You are about to do something: ";
>> >> $(".ui-dialog-content").text(message +
>> >> $(this).attr("id"));
>> >> var somevar = $(this).attr("id");
>> >> $("#dialog").dialog("open");
>> >> });
>> >> });
>> >> </script>
>>
>> >> Then somewhere at the end of the page I have:
>>
>> >> <div id="dialog"></div>
>>
>> >> Hope this helps.
>>
>> >> Carlo
>>
>> >> On Mon, Jul 20, 2009 at 9:11 PM, Mean Mike<mcgra...@gmail.com> wrote:
>>
>> >> > can I see the html that goes with this code ?
>>
>> >> > On Jul 18, 4:48 am, Carlo Landmeter <clandme...@gmail.com> wrote:
>> >> >> Thanks for tip for my vars. I have tried the code you provided but
>> >> >> this does not work. When i click my delete button it will complain
>> >> >> that "somevar" is not set. So i guess it means the dialog function is
>> >> >> run before the somevar variable is set. Anyway arround this?
>>
>> >> >> carlo
>>
>> >> >> On Fri, Jul 17, 2009 at 5:37 PM, Mean Mike<mcgra...@gmail.com> wrote:
>>
>> >> >> > Carlo,
>>
>> >> >> > jQuery /javascript is procedural so you just need to move things
>> >> >> > around
>>
>> >> >> > like this
>> >> >> > [code]
>> >> >> > $(document).ready(function(){
>> >> >> > $("#dialog").dialog({
>> >> >> > autoOpen:false,
>> >> >> > modal:true,
>> >> >> > overlay: {backgroundColor: "#000",opacity: 0.5},
>> >> >> > resizable:false,
>> >> >> > buttons:{
>> >> >> > "Delete": function() {window.location = "/home/" +
>> >> >> > $somevar ;},
>> >> >> > "Cancel": function() {$(this).dialog("close");}
>> >> >> > }
>> >> >> > });
>> >> >> > $(".button").click(function(){
>> >> >> > $("#ui-dialog-title-dialog").text("Attention");
>> >> >> > var message = "You are about to do something: ";
>> >> >> > $(".ui-dialog-content").text($message +
>> >> >> > $(this).attr("id"));
>> >> >> > var somevar = $(this).attr("id");
>> >> >> > $("#dialog").dialog("open");
>> >> >> > });
>> >> >> > });
>> >> >> > [/code]
>>
>> >> >> > I also noticed that your mixing php variables with javascript
>> >> >> > variables i.e. javascript variables do not use "$" I'm not sure if
>> >> >> > this causes any problems but I removed them
>>
>> >> >> > Mike
>>
>> >> >> > On Jul 17, 9:54 am, Carlo Landmeter <clandme...@gmail.com> wrote:
>> >> >> >> I will try that ones I have tackled the following issue.
>>
>> >> >> >> I keep having issues with dialog because the dialog is created
>> >> >> >> before
>> >> >> >> i use the .click function. Because of this i cannot change some
>> >> >> >> options of the dialog. For instance:
>>
>> >> >> >> If i click the button i am able to retrieve the id of this button
>> >> >> >> and
>> >> >> >> use it. problem is that my dialog function has to be loaded before i
>> >> >> >> use the dialog(open) function. How am i able to insert the ID in the
>> >> >> >> $somevar variable in my below example?
>> >> >> >> The only way I can think of getting this done is putting the dialog
>> >> >> >> function inside the .click function but for this we already have a
>> >> >> >> dedicated function dialog(open). Any idea how to solve this?
>>
>> >> >> >> $(document).ready(function(){
>> >> >> >> $("#dialog").dialog({
>> >> >> >> autoOpen:false,
>> >> >> >> modal:true,
>> >> >> >> overlay: {backgroundColor: "#000",opacity: 0.5},
>> >> >> >> resizable:false,
>> >> >> >> buttons:{
>> >> >> >> "Delete": function() {window.location = "/home/" + $somevar
>> >> >> >> ;},
>> >> >> >> "Cancel": function() {$(this).dialog("close");}
>> >> >> >> }
>> >> >> >> });
>> >> >> >> $(".button").click(function(){
>> >> >> >> $("#dialog").dialog("open");
>> >> >> >> $("#ui-dialog-title-dialog").text("Attention");
>> >> >> >> var $message = "You are about to do something: ";
>> >> >> >> $(".ui-dialog-content").text($message + $(this).attr("id"));
>> >> >> >> var $somevar = $(this).attr("id");
>> >> >> >> });
>>
>> >> >> >> });
>> >> >> >> On Fri, Jul 17, 2009 at 1:14 AM, Charlie<charlie...@gmail.com>
>> >> >> >> wrote:
>> >> >> >> > sure, just add
>>
>> >> >> >> > $("#dialog").load("url") to click function you have
>>
>> >> >> >> > Carlo Landmeter wrote:
>>
>> >> >> >> > Thanks for your replies.
>>
>> >> >> >> > If I look at your first option I wouldn't know how i could know
>> >> >> >> > the
>> >> >> >> > correct ID before i click the button but i have to initiate the
>> >> >> >> > dialog
>> >> >> >> > open after the normal dialog function. You second option seems the
>> >> >> >> > best way for me, after the dialog is created i can modify its
>> >> >> >> > content
>> >> >> >> > with your suggested code. Now I still want to find if i can also
>> >> >> >> > load
>> >> >> >> > a page with ajax (load) instead of a local div.
>>
>> >> >> >> > Thx again,
>>
>> >> >> >> > Carlo
>>
>> >> >> >> > code:
>>
>> >> >> >> > $(document).ready(function(){
>> >> >> >> > $("#dialog").dialog({
>> >> >> >> > autoOpen:false,
>> >> >> >> > modal:true,
>> >> >> >> > overlay: {backgroundColor: "#000",opacity: 0.5},
>> >> >> >> > resizable:false,
>> >> >> >> > buttons:{
>> >> >> >> > "Delete": function() {},
>> >> >> >> > "Cancel": function() {$(this).dialog("close");}
>> >> >> >> > }
>> >> >> >> > });
>> >> >> >> > $(".button").click(function(event){
>> >> >> >> > $("#dialog").dialog("open");
>> >> >> >> > $("#ui-dialog-title-dialog").text($(this).attr("id"));
>> >> >> >> > });
>> >> >> >> > });';
>>
>> >> >> >> > <div id="dialog">this is a test</div>
>>
>> >> >> >> > On Thu, Jul 16, 2009 at 3:55 PM, Charlie<charlie...@gmail.com>
>> >> >> >> > wrote:
>>
>> >> >> >> > dialog has a setter option for title, it isn't really a title
>> >> >> >> > attiribute.
>> >> >> >> > The dialog "title is actually a span with class
>> >> >> >> > ui-dialog-title-dialog
>> >> >> >> >http://jqueryui.com/demos/dialog/#option-title
>>
>> >> >> >> > $('.selector').dialog('option', 'title', 'Dialog Title');
>>
>> >> >> >> > either pass the id into the option or you can use
>>
>> >> >> >> > $(".button").click(function(event){
>>
>> >> >> >> > $('#dialog').dialog('open');
>> >> >> >> > $('. ui-dialog-title-dialog ').text($(this).attr("id"));
>> >> >> >> > });
>>
>> >> >> >> > constructor must be separate as Mike pointed out
>>
>> >> >> >> > Mean Mike wrote:
>>
>> >> >> >> > Yes that is correct you need to separate the dialog from the open
>>
>> >> >> >> > like this note: I set the autoOpen to false.
>>
>> >> >> >> > [code]
>> >> >> >> > $(document).ready(function(){
>> >> >> >> > $(".button").click(function(event){
>> >> >> >> > $("#dialog").attr("title", event.target.id);
>> >> >> >> > $('#dialog').dialog('open');
>> >> >> >> > });
>>
>> >> >> >> > $("#dialog").dialog({
>> >> >> >> > autoOpen:false,
>> >> >> >> > modal:true,
>> >> >> >> > overlay: {backgroundColor: "#000",opacity: 0.5},
>> >> >> >> > resizable:false,
>> >> >> >> > buttons:{
>> >> >> >> > "Delete": function() {},
>> >> >> >> > "Cancel": function() {$(this).dialog("close");}
>> >> >> >> > }
>> >> >> >> > });
>> >> >> >> > });
>> >> >> >> > [/code]
>>
>> >> >> >> > let me know how that works out for you
>> >> >> >> > Mean Mike
>>
>> >> >> >> > On Jul 16, 8:31 am, Carlo Landmeter <clandme...@gmail.com> wrote:
>>
>> >> >> >> > Hi,
>>
>> >> >> >> > I have probably a simple question which i cannot seem to find the
>> >> >> >> > answer to.
>> >> >> >> > I have a series of images which i want to use as buttons to
>> >> >> >> > trigger a
>> >> >> >> > dialog. Inside this dialog i need the ID of the image button (or
>> >> >> >> > any
>> >> >> >> > other element). But it seems after I load the dialog i cannot
>> >> >> >> > alter
>> >> >> >> > the content of it anymore. As an example I have tried to change
>> >> >> >> > the
>> >> >> >> > title of the #dialog so it will show the updated title when i
>> >> >> >> > click
>> >> >> >> > the button. The only way i am able to do this is when i put all of
>> >> >> >> > this inside the .click function and start with .attr function
>> >> >> >> > followed
>>
>> ...
>>
>> read more »
