2

The general idea is to make a site that looks like windows enviroment, so I have add two icons for example and when someone click on them, takes two different dialog boxes.

In to my site's index page I have add this inside head tags:

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"
/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<!-- JQUERY DIALOG SCRIPT -->
<script>
    var $JQ_ = jQuery.noConflict();
    $JQ_(function () {
        $JQ_("#rl_module_dialog").dialog({
            autoOpen: false,
            width: 'auto',
            resizable: false,
            show: {
                effect: "fade",
                duration: 250
            },
            hide: {
                effect: "fade",
                duration: 250
            }
        });
        $JQ_("#opener").click(function () {
            $JQ_("#rl_module_dialog").dialog("open");
        });
    });
</script>

I also have two separated php files that are icluded into my index page and they contain this...

First:

<div id="rl_module_dialog" class="rl_module_dialog" title=""><?php include '**/**/something.php'; ?></div>
<div class="nm_icon" id="opener"><div class="icon">&nbsp;</div></div>

Second

<div id="rl_module_dialog" class="rl_module_dialog" title=""><?php include '**/**/something_else.php'; ?></div>
<div class="vath_icon" id="opener"><div class="icon">&nbsp;</div></div>

If I don't include the second one, dialog works fine. If I place them both, none is working! There is any way to use my jquery dialog script for more than one dialog in same page?

Improve this question
0

5 Answers 5

Reset to default
1

Remember that IDs must be unique on the page.

So, you should simply give different IDs to your dialogs. Something like #rl_module_dialog_1 and #rl_module_dialog_2

Later you can initialize those dialogs like:

$JQ_("#rl_module_dialog_1,#rl_module_dialog_2").dialog({...});

And of course, to open dialogs, you will need to specify corresponding id:

$JQ_("#rl_module_dialog_1").dialog("open");

Edit:

In order to not place a lot of click handlers for each icon, you can do something like this:

<div class="rl_module_dialog" id="dialog1" title="">Dialog 1</div>
<div class="nm_icon opener" data-dialog="dialog1"><div class="icon">Open 1</div></div>
<div class="rl_module_dialog" id="dialog2" title="">Dialog 2</div>
<div class="nm_icon opener" data-dialog="dialog2"><div class="icon">Open 2</div></div>

See icon divs now have data-dialog="" - that is to specify ID of dialog which should be opened when icon is clicked.

And single click handler for all dialogs: 

$(".opener").click(function () {            
     $("#" + $(this).data("dialog")).dialog("open");
});

$(this).data("dialog") takes data-dialog value. Demo: http://jsfiddle.net/X6qhH/3/

Improve this answer
Sign up to request clarification or add additional context in comments.

8 Comments

It works but I need something more "compact"... My code will look like holy book if I have to add one by one all those dialogs!!! There isn't any way using while or something? PS: I am totally new in jQuery. Thank you for your time!!!
add one by one in which case? when you want to open? Or create dialog? You can always use common class instead of IDs. Something like $JQ_(".rl_module_dialog").dialog({...}); this will initialize all dialogs with class rl_module_dialog
I am talking about this part... $JQ_("#rl_module_dialog_1").dialog("open");.
Well, not sure why do you need to open ALL dialogs with one click, but you should be able to do that by using class: $JQ_(".rl_module_dialog").dialog("open");
I think I typed it wrong... I want every dialog open separately but into the code if I can make it more compact.
|
0

use different id for div then it may fixed

first :

<div id="rl_module_dialog" class="rl_module_dialog" title=""><?php include '**/**/something.php'; ?></div>
<div class="nm_icon" id="opener"><div class="icon">&nbsp;</div></div>

second:

<div id="rl_module_dialog_two" class="rl_module_dialog" title=""><?php include '**/**/something_else.php'; ?></div>
<div class="vath_icon" id="opener"><div class="icon">&nbsp;</div></div>



<script>
    var $JQ_ = jQuery.noConflict();
    $JQ_(function () {
        $JQ_("#rl_module_dialog").dialog({
            autoOpen: false,
            width: 'auto',
            resizable: false,
            show: {
                effect: "fade",
                duration: 250
            },
            hide: {
                effect: "fade",
                duration: 250
            }
        });
        $JQ_("#opener").click(function () {
            $JQ_("#rl_module_dialog_two").dialog("open");
        });
    });
</script>
Improve this answer

Comments

0

Both those dialogs have the same id. make the second dialog have id="rl_module_dialog2" and initialize it 

$JQ_("#rl_module_dialog2").dialog({
    autoOpen: false,
    width: 'auto',
    resizable: false,
    show: {
        effect: "fade",
        duration: 250
    },
    hide: {
        effect: "fade",
        duration: 250
    }
});

and just have your opener button open both like

$JQ_("#opener").click(function(){
    $JQ_("#rl_module_dialog").dialog("open");
    $JQ_("#rl_module_dialog2").dialog("open");
});
Improve this answer

Comments

0

dialog id's should like this

rl_module_dialog_1

rl_module_dialog_2

shortest code 

$JQ_('[id^="rl_module_dialog"]').dialog({...});

to open you can use

$JQ_("#rl_module_dialog_1").dialog("open");

attribute-equals-selector

^ attribute-starts-with-selector

Description: Selects elements that have the specified attribute with 
a value beginning exactly with a given string.
Improve this answer

1 Comment

It is working... But there is no way to do something similar $JQ_('[id^="rl_module_dialog"]') at open part and don't have to write one by one those dialogs?
0

First of all. Do not use multiple IDs on the same page.

That said, I've redone your code to work with multiple instances of jQuery UI's dialog.

FIDDLE DEMO

var $JQ_ = jQuery.noConflict();

$JQ_('.rl_module_dialog').hide();

$JQ_('.opener').each( function() {
    $JQ_.data(this, 'dialog',
           $JQ_(this).prev('.rl_module_dialog').dialog({
               autoOpen: false,
               width: 'auto',
               resizable: false,
               show: {
                   effect: 'fade',
                   duration: 250
               },
               hide: {
                   effect: 'fade',
                   duration: 250
               }
           })
     );
}).click( function() {
    $JQ_.data(this, 'dialog').dialog('open');
});

Hopefully, this works for you.

Improve this answer

9 Comments

I did as you said my friend and it works only the first icon. Plus when I click on it opens both dialogs at once!!! You are too close, any correction? Thank you for your time...
Check my edit. This solution is based solely on the html that you've give on your question.
I now it is working on jsfiddle but it isn't working on my case... I checked the code "character by character" and there is no errors!!! If it works I'll inform you...
Try posting your code as a fiddle. It might be your html that is causing the issue.
Again, try posting your code on jsfiddle, or show me your site. I'd be glad to help, but can't without seeing your code. :)
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.