Jquery dialog not working on mouseover

Question

I have a div that, when hovered is supposed to transform another div into a jquery ui dialog.

 <a href="#"><div class="btn button" id="btn button" value="">Click here for a dialog!</></a><br><span class="tooltip">rgba(66, 222, 57, .8);</span>

    <div id="are-you-sure" title="Dialog">Here it is!<br><br></div>


    <script>
    $('#btn').mouseover(function(){
       $('#are-you-sure').dialog();
    });
    </script>

I have all of the necessary stylesheets and scripts linked to my page, but the dialog still doesn't work. Any ideas?

LOL your html dom id is "btn button", how many ids are there ? — CME64, Apr 01 '15 at 14:59
ID by definition and standards is unique so you don't really need more than one even if it was possible.. it would be a waste of resources — CME64, Apr 01 '15 at 15:00
Yes it is wrong to have multiple IDs here http://stackoverflow.com/questions/192048/can-an-html-element-have-multiple-ids — Jaypal, Apr 01 '15 at 15:00
I have 2 ids for the `div`. One is `btn` and the other is `button`. I'm using only **one** for the dialog. You _can_ have multiple ids. The button id is for an external stylesheet that I can't change without wrecking my site. — yainspan, Apr 01 '15 at 15:00
Okay, thanks. It works now. Would it work if I put the `button` id before the `btn` one, though? I kinda need that id. — yainspan, Apr 01 '15 at 15:06

score 2 · Accepted Answer · answered Apr 01 '15 at 15:01

From MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id

This attribute's value must not contain white spaces. Browsers treat non-conforming IDs that contains white spaces as if the white space is part of the ID. In contrast to the class attribute, which allows space-separated values, elements can only have one single ID defined through the id attribute. Note that an element may have several IDs, but the others should be set by another means, such as via a script interfacing with the DOM interface of the element.

You can't set multiple IDs via the attribute.

score 0 · Answer 2 · answered Apr 01 '15 at 15:03

You should always have unique ids, adding the classes as id is not very good programming practice. If you want this to happen for all button with these classes then your selector should be:

$('.btn.button').mouseover(function(){

If you want it to be specific to this one then give it a meaningful id such as 'openDialog' and then the selector should be:

$('#openDialog').mouseover(function(){

Thats what I can see straight off, not necessarily the only errors.

score -2 · Answer 3 · edited Apr 01 '15 at 17:45

-2

Please find the below link for the answer needed.

enter link description here

var opt = {
    autoOpen: false,
    modal: true,
    width: 550,
    height:650,
    title: 'Details'
};    

$('#btnbutton').mouseover(function () {
   $('#are-you-sure').dialog(opt).dialog('open');
});

edited Apr 01 '15 at 17:45

Jace Rhea

4,944
4
35
55

answered Apr 01 '15 at 15:27

chetank

394
3
16

what happened, why did u put the negative comment? – chetank Apr 01 '15 at 16:05

Jquery dialog not working on mouseover

3 Answers3