Jquery dialog won't open

问题

what's wrong with my script. It should be open the dialog form, is it?

my html:

<section id="music_features">
            <header>
                <hgroup>
                    <h1>Your Playlist</h1>
                    <p>Up to only 3 files allowed for beta version</p>
                </hgroup>
            </header>
            <p id="song_upload_menu"><?php echo anchor('#', 'Upload Song');?></p>
            <article>
                <div id="song_upload_info">
                    <?php echo $this->session->flashdata('info'); ?>
                </div>
                <form id="song_upload_form" method="post" enctype="multipart/form-data" action="profile/do_upload_song">
                <input type="hidden" id="user_id" name="user_id" value="<?php echo $user->id_str;?>" />
                <label for="title">Song Title</label>
                <input type="text" name="title" id="title" size="30" value="<?php echo set_value('title'); ?>"/><br />
                <label for="album"> Album Title </label>
                <input type="text" name="album" id="album" size="30" value="<?php echo set_value('album'); ?>"/><br />
                <label for="artist">Artist</label>
                <input type="text" name="artist" id="artist" size="20" value="<?php echo set_value('artist'); ?>"/><br />
                <input type="file" name="userfile" size="20" /><br />
                <input type="radio" name="license" id="license" value="owner"/>I AM the artist/owner of this song and I have the right for distribution<br />
                <input type="radio" name="license" id="license" value="not owner"/>I AM NOT the artist/owner of this song BUT I have the right for distribution</br>
                <input type="checkbox" name="song_license_agreement"/>By selecting this option, I swear that all information entered is right<br />
                <!-- <input type="submit" id="song_upload_submit" value="Upload Your Song"/>-->
                <iframe id="upload_target" name="upload_target" src="" style="width:0;height:0;border:0px solid #fff;"></iframe>
                </form>
            </article>
            <ul id="playlist">

            </ul>
        </section>

My .js :

$(document).ready(function(){
refresh_song_list();

    //upload song dialog
    $('#music_features article').dialog({
            autoOpen: false,
            modal: true,
            buttons:{
                        'upload': function(){
                        $('#song_upload_form').attr('target', $('#upload_target').attr('id'));
                        $('#song_upload_form').submit();

                    }
            },
            close: function(){
                refresh_song_list();
            }
        });      


    $('#song_upload_menu').click(function(e){                             
        $('#music_features article').dialog('open'); // this one won't work.. so strange...   
        e.preventDefault();
    });
});

when someone click the #song_upload_menu link the .js should open up the dialog right? but it won't. I've tried to execute this code into my js console : $('#music_features article').dialog('open'); and it only return this []

Could anyone here tell me what's wrong with my code?

UPDATE: I issued this command into the console : $('#music_features'); to find out something. I found that THERE IS NO such <article> element in the music_features section. Then i removed the folowing line of code from my .js :

$('#music_features article').dialog({  ...  });

after that I issued the same $('#music_features'); command into the console and it returned that THERE IS an <article> element in my DOM and it is resides exactly inside the music_features. WHOAAAAAAA. how could it be???

回答1:

You are not able to select the article tag. Can you add the unique id to article and use the same for invoking the jquery dialog ?

$('#articleDialog').dialog({ ... to call the Article dialog'
$('#articleDialog').dialog('open'); to call the dialogbox
Update the article tag with id as <article id="articleDialog">

回答2:

There isn't an element with id "music_features article" in your DOM.

You have to update the id in the dom for the element you want to show in a dialog or fix the correct id in your js code.

来源：https://stackoverflow.com/questions/8971035/jquery-dialog-wont-open

标签

jquery