jQuery dialog not opening, and there seems to be no error

Question

I think I got the jQuery imports sorted like this:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" />

then I have the entire jQuery code like this:

<script type="text/javascript" >
$(function()
{
    $("input[type=submit]").click(function()
    {
        var name = $("#problem_name").val();
        var problem_blurb = $("#problem_blurb").val();

        var dataString = 'problem_name='+ name + '&problem_blurb=' + problem_blurb;

        if(name=='' || problem_blurb == '')
        {
            $('.success').fadeOut(200).hide();
            $('.error').fadeOut(200).show();
        }
        else
        {
            $.ajax({
                type: "POST",
                url: "/problems/add_problem.php",
                dataType: "json",
                data: dataString,
                success: function(json)
                {
                    $('.success').fadeIn(200).show();
                    $('.error').fadeOut(200).hide();

                    // Here can update the right side of the screen with the newly entered information
                    //alert (json);

                    new_string = "<h2>Most Recently Added Problems</h2>";

                    // Have to figure out how to make this work with the DOM.
                    for (var i = 0, l = json.length; i < l; ++i) 
                    {  
                        title = json[i]['problem_title'];
                        member_id = json[i]['creator_member_id'];
                        description = json[i]['problem_description'];
                        problem_date = json[i]['problem_date'];
                        upvotes = json[i]['upvotes'];
                        downvotes = json[i]['downvotes'];   
                        problem_id = json[i]['problem_id']; 

                        new_string = new_string + "<p>Problem name: <a href='http://www.problemio.com/problems/problem.php?problem_id=" + problem_id + "'>" + title + "</a></p>";

                        new_string = new_string + "<p>Problem description: " + description + "</p>";
                        new_string = new_string + "<p>Entered date " + problem_date + "</p>";

                        new_string = new_string + "<a href='/problems/edit_problem.php?problem_id=" + problem_id + "'>Edit</a>";

                        new_string = new_string + "<hr />";                                             

                    }   

                     $("#recent_problems").replaceWith( new_string ) ;                                  
                }
            });
        }

        return false;
    });
});
</script>

<script type="text/javascript">
$(document).ready(function() 
{
    var $dialog = $('<div></div>')
        .html('This dialog will show every time!')
        .dialog({
            autoOpen: false,
            title: 'Basic Dialog'
        });           


    $('.vote_up').click(function() 
    {        
        problem_id = $(this).attr("data-problem_id");

        var dataString = 'problem_id='+ problem_id + '&vote=+';

        $.ajax({
                type: "POST",
                url: "/problems/vote.php",
                dataType: "json",
                data: dataString,
                success: function(data)
                {           
                    // ? :)
                    alert (data);   
                },
                error : function(data) 
                {
                    //alert("ajax error, json: " + data.responseText);
                    errorMessage = data.responseText;

                    if ( errorMessage == "not_logged_in" )
                    {
                        alert ("errr");

                        // Try to create the popup that asks user to log in.

                        //$(".dialog").dialog();
                        $dialog.dialog('open');
                        // prevent the default action, e.g., following a link
                        return false;
                    }
                    else
                    {
                        alert ("not");
                    }

                    //alert(JSON.stringify(data));
                }
            });


        //Return false to prevent page navigation
        return false;
    });

    $('.vote_down').click(function() 
    {
        alert("down");

        problem_id = $(this).attr("data-problem_id");

        var dataString = 'problem_id='+ problem_id + '&vote=-';        

        //Return false to prevent page navigation
        return false;
    });    
});
</script>

And when on this page: http://www.problemio.com I press the "upvote" link, I do not get the jQuery dialog to pop up. And there is no error. But the line that has $dialog.dialog('open'); should open my dialog box, right?

Or is it a problem that I have two places that check if document is ready? I pasted my whole jQuery code in case I am making some newbie errors.

Thanks!

are you sure that your ajax call is responding with an error? Perhaps it's returning successfully in which case your dialog("open") will not be fired. — malificent, Oct 06 '11 at 14:51

Muhammad Usman · Accepted Answer · 2011-12-26T17:56:04.140

3

You are not including jQuery UI CSS, as I see in your link the dialog appears but its not formatted.

Include the line in head section (better to use before JS file inclusion):

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/black-tie/jquery-ui.css" rel="stylesheet" type="text/css" />

Also please close you script tags properly

Replace:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" />

With:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" ></script>

edited Dec 26 '11 at 17:56

answered Oct 06 '11 at 14:48

Muhammad Usman

12,439
6
36
59

what do you mean? What snippet do I need to include? – GeekedOut Oct 06 '11 at 14:50
thank you, I added that snippet and I do get some strange stuff appearing after pressing the upvote. But not sure the css is actually working. What are the steps I need to take to make the stuff that pops up look like actual dialog box lol :) – GeekedOut Oct 06 '11 at 15:01
I have seen your site, the CSS is not properly included, use it before JS. Also please see the edited answer to know why. – Muhammad Usman Oct 06 '11 at 15:03
btw what was wrong with closing the script tag with /> -- didn't know there was a difference. – GeekedOut Oct 06 '11 at 15:08
Thank you, that got it rendering much nicer!! – GeekedOut Oct 06 '11 at 15:10

score 2 · Answer 2 · answered Oct 06 '11 at 14:52

2

You create a DIV in the DOM but you never add it to the existing structure. Try this:

var $dialog = $('<div>');
$('body').append($dialog);

answered Oct 06 '11 at 14:52

Gregg

34,973
19
109
214

you are right. Just added that second line and started getting something to pop up. Do I also need to import the css for this somehow? – GeekedOut Oct 06 '11 at 14:54

jQuery dialog not opening, and there seems to be no error

2 Answers2