Show 'Close' Button in jQuery UI - Dialog Box with WP

Question

I am making a dialog box using jquery ui dialog in wordpress. The problem that I am having is when the dialog box appear, the close button 'X' is not shown. example as below.

I have make some reading regarding this issue and it is due to conflict on bootstrap. Reference on Stackoverflow. How do I want to implement it on wordpress? Below are my codes on functions.php that I made

function add_my_script() {     
   if(is_page('my_custom_page')){
     //Tried to deregister bootsrap and it work fine but I need the boostrap as well. 
     //wp_deregister_script('zerif_bootstrap_script');
     //Tried to degregister and enqueue back the script to follow the rules base on reference  
     //wp_enqueue_script('zerif_bootstrap_script', get_template_directory_uri() . '/js/bootstrap.min.js', array(), '20120206', true);
     wp_enqueue_script('jquery-ui-dialog');
   }

}

add_action('wp_enqueue_scripts', 'add_my_script');

Update Solutions:

Currently I am using Zerif Lite on my theme and it is on function.php.

wp_enqueue_script('zerif_bootstrap_script', get_template_directory_uri() . '/js/bootstrap.min.js', array(), '20120206', false);

The default value is true that will be place in footer. I change the value to false so that it will be place in the header as same as my jquery-ui scripts.

Hello Amran, `jQuery` uses icons image, it should be missing. — BlueSuiter, May 09 '17 at 04:49

score 1 · Accepted Answer · answered May 09 '17 at 04:56

1

The reason this is happening, is because you are calling bootstrap in, after you are calling jquery-ui in.

swap the two so that instead of:

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="js/bootstrap.min.js"></script>

it becomes

<script src="js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

after that it works fine.

answered May 09 '17 at 04:56

Mayank Pandeyz

25,704
4
40
59

Thanks for the help. Do I need to `deregister` my bootstrap script first? How to implement it with wordpress? Sorry, I am still learning on wordpress :) – Amran May 09 '17 at 05:02
Just change the order and hard reload the page. – Mayank Pandeyz May 09 '17 at 05:03
On my `functions.php`, I am unable to find the script for `jquery-ui.js` to replace it. Do I need to add it on my `header.php` or I can add the script on `functions.php` – Amran May 09 '17 at 06:36
Search it in page by inspecting the page. And if it is present in header then open the header.php and if it is last the open the footer.php – Mayank Pandeyz May 09 '17 at 06:38
Found it! Thanks @MayankPandeyz for the details – Amran May 09 '17 at 07:32
Sounds great !! – Mayank Pandeyz May 09 '17 at 07:51
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/143750/discussion-between-mayank-pandeyz-and-amran). – Mayank Pandeyz May 09 '17 at 07:52

Show 'Close' Button in jQuery UI - Dialog Box with WP

1 Answers1