Sunday, August 30, 2009

[jQuery] Re: Newbie with jQuery

I am sure that you can design better way than 10 separate call, but
anyway with your case you can at least group all call event like
$('img[id^=img_]').click(function(){
// here you have all img with id starting with img_ click
// then you can get the id of caller
var id =$(this).attr('id');
// get the number
var number() = id.splist('_');
// number[1] will give 1, 2 etc of img_1 etc.
//now call your dialog
$('#dialog_' + number[1]).dialog('close');

});

On Aug 30, 8:20 am, Reynier Pérez Mira <rper...@uci.cu> wrote:
> Hi every:
> I'm starting with jQuery and I have a lot of doubts. I'm reading the
> following books:
>   - jQuery Reference Guide (Jonathan Chaffer, Karl Swedberg)
>   - Learning jQuery 1.3 (Jonathan Chaffer, Karl Swedberg)
>   - jQuery UI 1.6 (Dan Wellman)
> But as I said before I have a lot of doubts. Here goes the first.
>
> I'm trying to use the Dialog component from jQuery UI to show some modal
> dialogs in my web app. For just one dialog I haven't problems because I
> do this:
>
> In my HTML:
> <img id="img_1" class="help" title="Show info about: Dir name field"
> alt="Show info about: Dir name field" src="/images/information.png" />
>
> <div class="dialog" id="dialog_1" title="Show info about: Dir name
> field"><p>The director name used by the system administrator. This
> directive is required.</p></div>
>
> And the JS code:
> $('#dialog_1').dialog({
>      autoOpen: false,
>      width: 600,
>      modal: 'true',
>      resizable: false,
>      draggable: false,
>      buttons: {
>        "Aceptar": function() {
>          $(this).dialog("close");
>        }
>      }
>
> });
>
> $('#img_1').click(function(){
>      $('#dialog_1').dialog('open');
>      return false;
>
> });
>
> Now suppose that I have 10 different images: img_1, img_2, ..., img_10
> and for each of them I want associated a different dialog: dialog_1,
> dialog_2, ..., dialog_10. I generate the IDs dinamically with PHP this
> is not the problem, the problem is how to associated each image to the
> correspondent dialog. I mean for example img_1 => dialog_1 and so on and
> then when I click the ID=img_1 then the dialog_1 will be show and so on.
> ¿Could any body help me with the jQuery code?
>
> Cheers and thanks in advance
> --
> Ing. Reynier Pérez Mira

No comments: