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 »
