CODEWITHSUNDEEP
javascriptphpjquery
Steve
Steve

Reputation: 1211

Pop up form is not working

So I have this image where I press on it should display a form. I have tried to do some alerts trough the code and the alert work but the form is still not showing.

Folders.php

<?php require_once('menu.php') ?>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
    <script type="text/javascript" src="hideShowForm.js"></script>

    <aside>
        <form method="post" class="basic-frm" id="newFolder">
            <label>
                <h1>New Folder</h1>
            </label>
            <label>
                <span>Title:</span>
                <input id="title" type="text" name="title"/>
            </label>
            <label>
                <span>Description</span>
                <input id="description" type="text" name="description"/>
            </label>
            <input id="submit" type="submit" name="submit" value="Submit" class="button"/>
        </form>
        <script type="javascript">

        </script>
        <h1>Welcome</h1>
        <img src="images/newFolder.svg" onmouseover="this.src='images/newFolderHover.svg'" onmouseout="this.src='images/newFolder.svg'" id="clicky">
        <p>New folder</p>
    </aside>
<?php require_once('footer.php') ?>

hideShowForm.js

$(document).ready(function(){
    $('#newFolder').dialog({
        autoOpen: false,
        buttons: [
            {
                text: "Cancel",
                click: function() {
                    $(this).dialog("close");
                }},
            {
                text: "Submit",
                click: function() {
                    $('#zFormer').submit();
                }}
        ]
    });
    $('#clicky').button().click(function() {
        $('#newFolder').dialog("Open")
        alert("test");
    });
});

So that I am doing here is the form will auto hide when the pages load (Which works fine) But when I click on the image which has an id of #clicky the form doesn't show but the alert does.

Also I have no errors in the console either I have tried that already.

Upvotes: 1

Views: 87

Answers (1)

PeterKA
PeterKA

Reputation: 24638

Please change Open to all lowercase open:

$('#newFolder').dialog("Open")

should be:

$('#newFolder').dialog("open")

And also include the jQuery UI CSS in the head section of your page.

Upvotes: 5

Related Questions