I have tried to get jquery-ui working with wordpress with no luck. Can someone point me in the right direction? I've dug up a ton of SO resources and blogs explaining it, but so far can't get this working. However when I include the scripts directly in the page itself I can get the datepicker to function properly. I'm trying to make the table rows draggable (and eventually droppable).
Here is what I currently have-
In /themes/twentysixteen/functions.php
I followed the steps here and enqueued jquery-ui functions Correctly enqueue jquery-ui. I then added a couple of my own scripts based on the information here Add jquery scripts
/* Used to include jquery-ui scripts
* Taken from http://xl-websites.com/how-to-enqueue-jquery-or-jquery-ui-correctly-in-wordpress/
*
*/
function add_jquery_ui() {
wp_enqueue_script('jquery-ui-core');
wp_enqueue_script('jquery-ui-widget');
wp_enqueue_script('jquery-ui-mouse');
wp_enqueue_script('jquery-ui-accordion');
wp_enqueue_script('jquery-ui-autocomplete');
wp_enqueue_script('jquery-ui-slider');
wp_enqueue_script('jquery-ui-tabs');
wp_enqueue_script('jquery-ui-sortable');
wp_enqueue_script('jquery-ui-draggable');
wp_enqueue_script('jquery-ui-droppable');
wp_enqueue_script('jquery-ui-datepicker');
wp_enqueue_script('jquery-ui-resize');
wp_enqueue_script('jquery-ui-dialog');
wp_enqueue_script('jquery-ui-button');
}
add_action( 'wp_enqueue_scripts', 'add_jquery_ui' );
function custom_js() {
wp_enqueue_script('date', get_template_directory_uri() . '/js/date.js', array('jquery'), false, true);
wp_enqueue_script('drag', get_template_directory_uri() . '/js/drag.js', array('jquery'), false, true);
}
add_action('wp_enqueue_scripts', 'custom_js');
With those addded, I created the scripts in my js folder-
/js/drag.js
(function() {
$(".drag").draggable({
helper: function(event) {
return $('<div class="drag-row"><table></table></div>').find('table').append($(event.target).closest('tr').clone()).end();
},
});
});
And /js/date.js
( function() {
$( "#datepicker" ).datepicker();
});
In my php page I added the date id to a calendar, and a class id to the table row as targets for the jquery scripts.
<p>Date: <input type="text" id="datepicker"></p>
echo "<div id='table'>";
echo "<table class='listing'>";
echo "<thead>";
echo "<tr>";
echo "<th><b>Course Name</b></th>";
echo "<th><b>Fiscal Year</b></th>";
echo "<th><b>Course Number</b></th>";
echo "<th><b>Start Date</b></th>";
echo "<th><b>End Date</b></th>";
echo "</tr>";
echo "</thead>";
echo "<tbody>";
foreach($courses as $course){
echo "<tr class='drag'>";
echo "<td>".$course->course_name."</td>";
echo "<td>".$course->fy."</td>";
echo "<td>".$course->course_number."</td>";
$date = $course->course_date_start;
$date = strtotime($date);
if ($date){
echo "<td>".date("m/d/Y", $date)."</td>";
} else {
echo "<td></td>";
}
$date = $course->course_date_end;
$date = strtotime($date);
if ($date){
echo "<td>".date("m/d/Y", $date)."</td>";
} else {
echo "<td></td>"; }
echo "</tr>";
}
echo "</tbody>";
echo "</table>";
When my page loads, the scripts are all there (including jquery, I put spaces since the jquery lines are at line 350, and the jquery-ui lines are at line 500), but the ui isn't functional. Anyone have any insights?
<script type='text/javascript' src='##/wp-includes/js/jquery/jquery.js?ver=1.12.4'></script>
<script type='text/javascript' src='##/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.4.1'></script>
<script type='text/javascript' src='##/wp-content/themes/twentysixteen/js/functions.js?ver=20160816'></script>
<script type='text/javascript' src='##/wp-includes/js/jquery/ui/core.min.js?ver=1.11.4'></script>
<script type='text/javascript' src='##/wp-includes/js/jquery/ui/widget.min.js?ver=1.11.4'></script>
<script type='text/javascript' src='##/wp-includes/js/jquery/ui/mouse.min.js?ver=1.11.4'></script>
<script type='text/javascript' src='##/wp-includes/js/jquery/ui/accordion.min.js?ver=1.11.4'></script>
<script type='text/javascript' src='##/wp-includes/js/jquery/ui/position.min.js?ver=1.11.4'></script>
<script type='text/javascript' src='##/wp-includes/js/jquery/ui/menu.min.js?ver=1.11.4'></script>
<script type='text/javascript' src='##/wp-includes/js/wp-a11y.min.js?ver=4.6.1'></script>
<script type='text/javascript'>
/* <![CDATA[ */
var uiAutocompleteL10n = {"noResults":"No search results.","oneResult":"1 result found. Use up and down arrow keys to navigate.","manyResults":"%d results found. Use up and down arrow keys to navigate."};
/* ]]> */
</script>
<script type='text/javascript' src='##/wp-includes/js/jquery/ui/autocomplete.min.js?ver=1.11.4'></script>
<script type='text/javascript' src='##/wp-includes/js/jquery/ui/slider.min.js?ver=1.11.4'></script>
<script type='text/javascript' src='##/wp-includes/js/jquery/ui/tabs.min.js?ver=1.11.4'></script>
<script type='text/javascript' src='##/wp-includes/js/jquery/ui/sortable.min.js?ver=1.11.4'></script>
<script type='text/javascript' src='##/wp-includes/js/jquery/ui/draggable.min.js?ver=1.11.4'></script>
<script type='text/javascript' src='##/wp-includes/js/jquery/ui/droppable.min.js?ver=1.11.4'></script>
<script type='text/javascript' src='##/wp-includes/js/jquery/ui/datepicker.min.js?ver=1.11.4'></script>
<script type='text/javascript'>
jQuery(document).ready(function(jQuery){jQuery.datepicker.setDefaults({"closeText":"Close","currentText":"Today","monthNames":["January","February","March","April","May","June","July","August","September","October","November","December"],"monthNamesShort":["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],"nextText":"Next","prevText":"Previous","dayNames":["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],"dayNamesShort":["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],"dayNamesMin":["S","M","T","W","T","F","S"],"dateFormat":"MM d, yy","firstDay":1,"isRTL":false});});
</script>
<script type='text/javascript' src='##/wp-includes/js/jquery/ui/resizable.min.js?ver=1.11.4'></script>
<script type='text/javascript' src='##/wp-includes/js/jquery/ui/button.min.js?ver=1.11.4'></script>
<script type='text/javascript' src='##/wp-includes/js/jquery/ui/dialog.min.js?ver=1.11.4'></script>
<script type='text/javascript' src='##/wp-content/themes/twentysixteen/js/date.js?ver=4.6.1'></script>
<script type='text/javascript' src='##/wp-content/themes/twentysixteen/js/drag.js?ver=4.6.1'></script>
<script type='text/javascript' src='##/wp-includes/js/wp-embed.min.js?ver=4.6.1'></script>
You can tell the wp_enqueue_script() function that your scripts depend on jQuery, so they will be inserted in correct way and order, notice the third parameter, for example:
wp_enqueue_script( 'jquery-ui-core', false, array('jquery'));
Read more here.
Also note that jQuery UI Effects is not included with the jquery-ui-core handle.
Related
I have tried to integrate jQuery star rating plugin called jQuery master in to my PHP application, but its not working. Can anyone help me? Below is my code:
{literal}
<!-- include CSS & JS files -->
<!-- CSS file -->
<link rel="stylesheet" type="text/css" href="jRatingmaster/jquery/jRating.jquery.css" media="screen" />
<!-- jQuery files -->
<script type="text/javascript" src="<?php echo CONST_SITE_ADDRESS;?>jRatingmaster/jquery/jquery.js"></script>
<script type="text/javascript" src="<?php echo CONST_SITE_ADDRESS;?>jRatingmaster/jquery/jRating.jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// alert('hi');
// get the clicked rate !
$(".basic").jRating({
onClick : function(element,rate) {
alert(rate);
}
});
});
</script>
{/literal}
<div class="exemple">
<div class="basic" data-average="8" data-id="2"></div>
</div>
Firstly, run your page in Mozilla FireFox, and check if any javascript/CSS file is not getting included.
In the Net tab, it shows a 404 with red color.
In the code, <?php echo CONST_SITE_ADDRESS;?> will not work in Smarty as it is being seen from your code.
From your PHP file, assign this to some variable display it in template.
<script type="text/javascript" src="<?php echo CONST_SITE_ADDRESS;?>jRatingmaster/jquery/jquery.js"></script>
<script type="text/javascript" src="<?php echo CONST_SITE_ADDRESS;?>jRatingmaster/jquery/jRating.jquery.js"></script>
So, the corrected code:
<script type="text/javascript" src="{$YOUR_PATH}jRatingmaster/jquery/jquery.js"></script>
<script type="text/javascript" src="{$YOUR_PATH}jRatingmaster/jquery/jRating.jquery.js"></script>
As per the documentation specified, there is no onclick handler in jrating plugin.
Your code should be like,
<script type="text/javascript">
$(document).ready(function(){
$(".basic").jRating();
});
</script>
This seems like a fairly simple question, but I've been searching through google and can't find a solution.
function showJQueryAlert() {
echo '<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="functions.js"></script>
<script type="text/javascript"> $(document).ready(function() { JQueryAlert("INSERT MESSAGE HERE!", 120, false); }); </script>';
outputs the popup with the message "INSERT MESSAGE HERE!". But
function showJQueryAlert($message) {
echo '<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="functions.js"></script>
<script type="text/javascript"> $(document).ready(function() { JQueryAlert('.$message.', 120, false); }); </script>';
where $message is "INSERT MESSAGE HERE!", fails to output the popup. I've tried all sorts of combinations. So what am I missing?
Looks like you forgot some quotes:
JQueryAlert("'.$message.'", 120, false);
I would like to get my whole site's header into a variable.
So, for example, I would like to put these three lines into a single variable:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
And I'm writing a function for it:
function set_header(){
//This is where i would like to set the variable for the 3 lines I mentioned earlier
}
function set_header(){
echo '<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>';
}
set_header();
OR
function set_header(){
return '<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>';
}
echo set_header();
function set_header(){
$header = '<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>';
return $header;
}
echo set_header();
I have a partial which loads all common links and styles in head and I use setScript in other pages for local scripts. I want to add the following script which is located in my view/scripts after other scripts but zf appends it at first:
<? $this->headScript()->setScript('$(document).ready(function() {
$("#birthdate").datepicker();
});',
$type = 'text/javascript') ?>
which leads to following code:
<script type="text/javascript">
$(document).ready(function() {
$("#birthdate").datepicker();
});
</script>
<script type="text/javascript" src="/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="/js/jquery.dcmegamenu.1.3.3.min.js"></script>
<script type="text/javascript" src="/js/jquery.hoverIntent.minified.js"></script>
<script type="text/javascript" src="/js/jquery-ui-1.8.16.custom.min.js"></script>
but I want:
<script type="text/javascript" src="/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="/js/jquery.dcmegamenu.1.3.3.min.js"></script>
<script type="text/javascript" src="/js/jquery.hoverIntent.minified.js"></script>
<script type="text/javascript" src="/js/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#birthdate").datepicker();
});
</script>
Try calling:
<? $this->headScript()->appendScript('$(document).ready(function() {
$("#birthdate").datepicker();
});',
$type = 'text/javascript') ?>
Try adding your other files using:
<? $this->setScript()
->prependFile('/js/jquery-ui-1.8.16.custom.min.js')
->prependFile('/js/jquery.hoverIntent.minified.js')
->prependFile('/js/jquery.dcmegamenu.1.3.3.min.js')
->prependFile('/js/jquery-1.7.1.min.js') ;
?>
ok Here is my issue: I am using Joomla 1.6,
I have a Ajax JS to display the slide how on my site located: www.dhwnj.com The Jquery script i am using when enabled stops my slide show from working so I tried using the No conflict script but I do not know if I am using it correctly :
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="<?php echo $this‐>baseurl ?>/templates/<?php echo $this->template ?>/js/jquery.metadata.min.js"></script>
<script type="text/javascript" src="<?php echo $this‐>baseurl ?>/templates/<?php echo $this->template ?>/js/jquery.maphilight.js"></script>
<script type="text/javascript" src="<?php echo $this‐>baseurl ?>/templates/<?php echo $this->template?>/js/fancybox/jquery.fancybox.js"></script>
<script>
jQuery.noConflict();
// Use jQuery via jQuery(...)
jQuery(document).ready(function(){
jQuery("jquery.maphilight.js").hide();
});
// Use Prototype with $(...), etc.
$('_class.noobSlide.packed.js').hide();
</script>
<script type="text/javascript" src="<?php echo this->baseurl; ?>/templates/
<?php echo $this->template ?>/js/_class.noobSlide.packed.js" >
</script>
Any Ideas?
Prototype can't work together with Mootools and Mootools is loaded on your page (probably directly by Joomla)
Maybe here's the reason behind your problem...
You should use jQuery after mootools. You can ensure mootools is looaded first by this code (use it in the module or in the view of a component)
JHTML::_('behavior.mootools');
$doc = &JFactory::getDocument();
....
$doc->addScript( "https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" );
$doc->addScriptDeclaration('jQuery.noConflict();');
$doc->addScriptDeclaration("
jQuery(document).ready(function(){
alert('jo');
});"
);
This is code for joomla 1.5, don't know if the functions are the same in 1.6.