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.
How to add jQuery function in PHP function File?
Example :
<script type="text/javascript" src="assets/js/jquery.min.js"></script>
<script type="text/javascript" src="assets/js/jquery.livequery.js"></script>
<script type="text/javascript" src="assets/js/jquery.timeago.js"></script>
<?php
class db{
public $db;
function get_news()
{
bla bla
}
}
When run the code, the jQuery is not working. Please help.
Thank you
You can't run jQuery function in PHP. You can run them from HTML. First close php:
?>
<script>
function get_news() { blabla; }
</script>
<?php
If this is not what you're looking for then there is no way for you to do what you're looking for.
This is a sample code,
<script type="text/javascript" src="assets/js/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
alert("Test");
});
</script>
<?php
echo "PHP code here";
?>
You can Echo jQuery function call to run it
<?php
echo "<script type=\"text/javascript\">
$(document).ready(function() {
alert(\"Test\");
});
</script>";
?>
I want to pass jQuery variable to php file ,
this is my_js.js file
function updates() {
$.getJSON("php/fetch.php", function(data) {
$.each(data.result, function(){
var s_id = this['sender_id'];
});
});
}
and i want to display it here in php file,
<html>
<head><title>Pass jquery var to php file</title>
</head>
<body>
<div> <?php echo $s_id ; ?> </div>
<script type="text/javascript" src="my_js.js"></script>
<script type="text/javascript" src="jquery.js"></script>
</body>
</html>
You might consider using jQuery to set the s_id value in the page.
You can modify your HTML as follows (the important part being the added span element):
<html>
<head><title>Pass jquery var to php file</title>
</head>
<body>
<div><span id="s_id"></span></div>
<script type="text/javascript" src="my_js.js"></script>
<script type="text/javascript" src="jquery.js"></script>
</body>
</html>
And you can use jQuery in your getJSON callback to set the value as follows to find your added span element and modify its text:
function updates() {
$.getJSON("php/fetch.php", function(data) {
$.each(data.result, function(){
$("#s_id").text(this['sender_id']);
});
});
}
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 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') ;
?>