Thread

I was hoping that the jQuery module would make it easy to add things like a dialog or date picker to my template.  But I can’t figure out how to use them.  Can anyone point me in the right direction?

Just to show you where I’m at, here is what I thought might work—but didn’t—for a test modal dialog:
1) put the necessary jQuery tags in the html header, like so:

{exp:jquery:script_tag}
{exp:jquery:script_tag ui='core'}
{exp:jquery:script_tag ui='widget'}
{exp:jquery:script_tag ui='position'}
{exp:jquery:script_tag ui='dialog'}

2) copy and paste the source code from the jQuery UI page (http://jqueryui.com/demos/dialog/)

<div class="demo">
<div id="dialog-form" title="Create new user">
    All form fields are required.
    <form>
    <fieldset>
        <label for="name">Name</label>
        <input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all" />
        <label for="email">Email</label>
        <input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" />
        <label for="password">Password</label>
        <input type="password" name="password" id="password" value="" class="text ui-widget-content ui-corner-all" />
    </fieldset>
    </form>
</div>
<div id="users-contain" class="ui-widget">
    <h1>Existing Users:</h1>
    <table id="users" class="ui-widget ui-widget-content">
        <thead>
            <tr class="ui-widget-header ">
                <th>Name</th>
                <th>Email</th>
                <th>Password</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>John Doe</td>
                <td>[email protected]</td>
                <td>johndoe1</td>
            </tr>
        </tbody>
    </table>
</div>
<button id="create-user">Create new user</button>
</div><!-- End demo -->
<div class="demo-description">
Use a modal dialog to require that the user enter data during a multi-step process.  Embed form markup in the content area, set the <code>modal

Like I said, this did not work.  Does this example reveal that I am beyond help?  Or is there some hope for me?

Hi Jules,

It looks like even though you’re calling the jQuery files, you still need to place something like this in your markup to tell jQuery where the dialogue box is in your page markup. I haven’t tested this, but something like this within script tags on your page should work:

$(function() {
    $( "#dialog-form" ).dialog();
});

Thanks Kevin.  I found that you are right.  May I ask an additional question?

I now have these three lines in my html head:

<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/themes/base/jquery-ui.css" />    
[removed][removed]
[removed][removed]

1. Can I also replace the stylesheet line with an EE tag, or only the jQuery line?
2. Is there a way to combine all the EE jQuery tags I list above? 

Thanks again.

Hey Jules,

Since the forum removed the last two lines from your code post, I’m not sure exactly what was there, but I suspect they were references to JS files.

You can definitely combine your CSS and JS files! There are several plugins that can do it listed on Devot:ee. I’ve personally used Minimee to great success. One of the things I like about Minimee is that it lets me keep my CSS in external files but still combines all those assets and spits out a single JS and a single CSS tag in the HTML. I’d recommend giving those a try.

Thanks Kevin. I’ll look at Minimee when I have some time. J.

Sounds good. I’ll close this one up, but feel free to join us again next time you need some help!