WordPress.org

1. dorich
   Member
   Posted 1 year 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 1 year 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 1 year 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 1 year 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 8 months 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.