How To Activate a jquery ui dialog

  • Resolved dorich

    (@dorich)


    14 years, 3 months 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', "https://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', 'https://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', "https://xxxxxxxxxx.com/value/_valueAssets/CSS/trontastic/jquery-ui-1.8.6.custom.css");
		wp_enqueue_style('jqueryUIcss');
		wp_register_style('valuecss', "https://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

Viewing 4 replies - 1 through 4 (of 4 total)

  • 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.

    Thread Starter dorich

    (@dorich)

    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.

    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.

    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.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘How To Activate a jquery ui dialog’ is closed to new replies.