CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-dialog
trysis
trysis

Reputation: 8416

Weird issue with jQueryUI modal

I'm having a weird issue with the jQueryUI modal (the dialog plugin that can include modal functionality). I have a dropdown list with a modal on one of the options. Now, the modal opens up just fine, however there are some strange errors. The link in the dropdown list to pop up the modal somehow gets inside the modal, with extra classes (I assume from the modal), and when the modal is closed, it disappears from the dropdown list. Finally, even though I put text in the modal, it doesn't show up. Here is the HTML portion:

<span class="dropdown" id="loggedInDropdown">
                        <i class="spriteIcons iconArrowUp"></i>
                        <ul class="zebraRows">
                            <li><a id="accountSettings" href="/stuff/settings" title="">Account Settings</a></li>
                            <li><a id="addFunds" class="no-close" href="" title="Add Funds to Your Account">Add Funds</a></li>
                            <li><a id="signOut" href="/users/logout" title="">Sign Out</a></li>
                        </ul> 
                    </span>

Here is the jQuery:

$('#loggedInDropdown').on('click', '#addFunds', function(e) {
        e.preventDefault();
        $('#addFunds').dialog({
            modal: true,
            text: 'Whatever'
        });
    });

Upvotes: 2

Views: 109

Answers (2)

MackieeE
MackieeE

Reputation: 11862

The reason why Shamoon had been asking about the modal html, is because normally you'd point it elsewhere. For instance: Fiddle: http://jsfiddle.net/NbBgW/5/

<span class="dropdown" id="loggedInDropdown">
    <i class="spriteIcons iconArrowUp"></i>
    <ul class="zebraRows">
         <li>
             <a id="accountSettings" href="/stuff/settings">
                 Account Settings
             </a>
         </li>
         <li>
            <a id="addFunds" class="no-close">
                Add Funds
            </a>
         </li>
         <li>
            <a id="signOut" href="/users/logout">
               Sign Out
            </a>
        </li>
    </ul>

    <!-- The Container hiding the actual modal content -->
    <div id="hidden-container" style="display:none;">
        <!-- The Modal content -->
        <div id="addfunds-modal">
            Whatever .. Dude!
        </div>
    </div>

</span>

Then for the JavaScript:

<script>
   /**
    *   I've also changed it to:
    *   $(document).on('click' .. 
    *
    *   because with a Javascript page that has
    *   lots of changing elements, it's better off
    *   listening to the DOM Document itself.
   **/
   $(document).on('click', '#loggedInDropdown #addFunds', function (e) {
      e.preventDefault();
      $('#addfunds-modal').dialog({
          modal: true
      });
   });
</script>

Your Modal was working - but halfway,

There is no text:"" option for content, thus defaulting to itself (Itself being the target html for the .dialog() also). There is however a text option for buttons:

   .dialog({ 
       buttons: [{ 
            text: "Ok", 
            click: function() {
               //Code..
            } 
          }] 
       });

Upvotes: 2

Shamoon
Shamoon

Reputation: 43491

Your modal probably also has an id of addFunds. Change one of them for it to do what you want. I suggest changing the <a> tag's ID to be something like addFundsLink.

You'll also have to change the JavaScript to:

$('#loggedInDropdown').on('click', '#addFundsLink', function(e) {

Upvotes: 1

Related Questions