WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] How To Activate a jquery ui dialog (5 posts)

  1. dorich
    Member
    Posted 3 years ago #

    I have a dialog script in jquery that works correctly if I hard code the script links into the header of the template.

    However, I'm trying to implement the addition of the scripts through a child template.

    I can get the scripts and css to appear in the header but the script no longer works, the failure mode is that the page does not complete loading. Chrome shows a repeating message saying that its waiting for...

    I assume that the source of the problem is in the function.php file, shown below:

    <?php
    function scripts () {
    	if ( !is_admin() ) {
    		wp_enqueue_script('jquery');
    		wp_register_script('jqueryUI', "http://xxxxx.com/value/_valueAssets/scripts/jquery-ui-1.8.6.custom.min.js", array('jquery')); //register custom UI library
    		wp_enqueue_script('jqueryUI');
    		wp_register_script('popUpText', 'http://xxxxxxxxxxxxxx.com/value/_valueAssets/scripts/popUpText1.js', array('jquery', 'jqueryUI'));
    		wp_enqueue_script('popUpText');
    	}
    }
    
    add_action('init', 'scripts');
    
    //INSERT CSS	files into the header
    function styles () {
    	if ( !is_admin() ) {
    		wp_register_style('jqueryUIcss', "http://xxxxxxxxxx.com/value/_valueAssets/CSS/trontastic/jquery-ui-1.8.6.custom.css");
    		wp_enqueue_style('jqueryUIcss');
    		wp_register_style('valuecss', "http://xxxxxxxxxxxxxxx.com/value/_valueAssets/CSS/value.css");
    		wp_enqueue_style('valuecss');
    	}
    }
    	add_action('init', 'styles');
    
    ?>

    I'd appreciate any pointers on what I'm doing wrong.

    Thanks

  2. Callum Macdonald
    Member
    Posted 3 years ago #

    Did you get it working in the end?

    Have you tried using the ui.dialog.js that ships with WordPress? You could probably drop your wp_register_script() and use wp_enqueue_scrtip('jquery-ui-dialog'); instead. That will cue up jquery and all the other dependencies also.

    I've got that part working, but for the life of me I can't get the CSS to load properly with wp_enqueue_style('wp-jquery-ui-dialog'). It just doesn't seem to work...

    Love & joy - Callum.

  3. dorich
    Member
    Posted 3 years ago #

    My apologies but I don't immediately recall the specifics of the solution. As best I can recall the problem was solved once I understood how to implement child templates correctly.
    I'll go back through my notes during Friday to see if I can find information on what I did.

  4. Callum Macdonald
    Member
    Posted 3 years ago #

    Hola dorich,

    Do you speak the Doric by the way? :-)

    No worries. I resolved my own issue. Turns out that the ui dialog css files are not included in 3.0.4, but they are in trunk. I was looking at trunk on my machine and 3.0.4 on the server, DOH! :-)

    Love & joy - Callum.

  5. ciantic
    Member
    Posted 2 years ago #

    Here is how to use it since it is now included:

    PHP:

    wp_enqueue_script('jquery-ui-dialog');
    wp_enqueue_style("wp-jquery-ui-dialog");

    JS:

    var dlg = $("<div id='myFancyDialog' />")
    .text('content')
    .appendTo("body");

    dlg.dialog({
    'dialogClass' : 'wp-dialog',
    'modal' : true,
    'autoOpen' : false,
    'closeOnEscape' : true,
    'buttons' : [
    {
    'text' : 'Close',
    'class' : 'button-primary',
    'click' : function() {
    $(this).dialog('close');
    }
    }
    ]
    }).dialog('open');

    It's one ugly monster, I hope WP peeps improve the look of it. X-closing thing looks like from outer-space, borders are outstandingly horrible too.

Topic Closed

This topic has been closed to new replies.

About this Topic