CODEWITHSUNDEEP
javascriptjqueryjquery-uijquery-ui-dialog
RedGiant
RedGiant

Reputation: 4748

Can't open jQueryUI dialogs

1.Failed Fiddle Example

2.Working Example

I've been trying to learn how to make dialogs that allow people to insert an url link or image link and append it to the text editor. But I can't even get the dialogs to open on click when using class .dialog. The dialog is working fine in the second example when it's id #dialog. Can someone show me what's wrong with my first example?

HTML:

<a id="bold" class="font-bold">B</a>
<a id="italic" class="italic">I</a>

<a id="image">Image</a>
<div class="dialog" title="Insert picture url">
    <p><input id="imageurl" type="text"></input>
</div>
<a id="link">Url</a>
<div class="dialog" title="Insert url">
    <p><input id="url" type="text"></input>
        <input id="urltext" type="text"></input>
</div>

<select id="fonts">
 <option value="Arial">Arial</option>
 <option value="Comic Sans MS">Comic Sans MS</option>
 <option value="Courier New">Courier New</option>
 <option value="Monotype Corsiva">Monotype</option>
 <option value="Tahoma">Tahoma</option>
 <option value="Times">Times</option>
</select>
<br/>
<iframe id="textEditor" style="width:500px; height:170px;">
</iframe>

jQuery

var input_value;

$(".dialog").dialog({
            resizable: false,
            height: 140,
            modal: true,
            autoOpen: false,      
            buttons: {
                "Confirm": function() {
                    input_value;
                    $(this).dialog("close");
                },
                "cancel": function() {
                     $(this).dialog("close");
                }
            }
});

$('#image').click(function() {
  $(this).next('.dialog').dialog("open"); 
   var imageurl =  $('#imageurl').val();
    input_value = function(){
        $('#textEditor').contents().find('body').append('<img src="'+imageurl+'"/>');
    }
});

$('#link').click(function() {
  $(this).next('.dialog').dialog("open"); 
   var urllink =  $('#url').val(),
       urltext = $('#urltext').val();
    input_value = function(){
        $('#textEditor').contents().find('body').append('<a href="'+urllink+'">"'+urltext+'"</a>')
    }
});

Upvotes: 0

Views: 102

Answers (1)

caspian
caspian

Reputation: 1804

Inspect the source after the page is rendered. When you create the dialog on your dialog divs it changes the dom so that the next element is no longer the div, but rather the next link. Because of that, jquery doesn't find any div and doesn't process your dialog open request.

rendered code:

<a id="bold" class="font-bold">B</a>
<a id="italic" class="italic">I</a>
<a id="image">Image</a>
<a id="link">Url</a>

Is there a reason not to use ids to refer to the different dialogs that you're using?

Upvotes: 4

Related Questions