Wordpress Conditional Javascript Include - javascript

I am trying to conditionally include javascript files on specific pages in wordpress. I finally found a snippet of code that does exactly what I want but it doesn't seem to be working. Any thoughts? I didn't include the real page names but I am using the page slug.
<?php if (is_page(array('page-slug','page-slug','page-slug'))) { ?>
<script src="<?php echo get_template_directory_uri(); ?>/js/script.js"></script>
<? } else { ?>
<script src="<?php echo get_template_directory_uri(); ?>/js/script.js"></script>
<script src="<?php echo get_template_directory_uri(); ?>/js/conditional-script.js"> </script>
<? } ?>
I Put this code where I call the rest of my scripts in my custom template files.

On third last line and last line, it looks like you are using <? to open the line. Try using <?php instead. So, it should be:
<?php
if (is_page(array('page-slug','page-slug','page-slug')))
{ ?>
<script src="<?php echo get_template_directory_uri(); ?>/js/script.js"></script>
<?php
}
else
{ ?>
<script src="<?php echo get_template_directory_uri(); ?>/js/script.js"></script>
<script src="<?php echo get_template_directory_uri(); ?>/js/conditional-script.js"></script>
<?php
}
?>
And as I mentioned, I would recommend enqueuing scripts in the future ;)

Related

Why my DataTable jQuery cant load on my table view?

This is the code for the script,
but it's not working please help me.
<script>
function loading(){
$("#loading").removeAttr("hidden");
}
$(function () {
//Initialize Select2 Elements
$(".select2").select2();
$("#example1").DataTable();
});
</script>
This is the code for the script, but its not working please help me.
<script src="<?php echo base_url()?>public/jquery-1.12.3.min.js"></script>
<script src="<?php echo base_url()?>public/bootstrap/js/bootstrap.min.js"></script>
<script src="<?php echo base_url()?>public/app.min.js"></script>
<!-- DataTables -->
<script src="<?php echo base_url()?>public/datatables/jquery.dataTables.min.js"></sc‌ript>
<script src="<?php echo base_url()?>public/datatables/dataTables.bootstrap.min.js"><‌​/script>
<!-- Select2 -->
<script src="<?php echo base_url()?>public/plugins/select2/select2.full.min.js"></sc‌​ript>
this image is the console error please click here
I Fix it on my Own..
I have a "colspan= 2" in the view table and i have a extra "td" in my code thanks to all your comment.

bootstrap.min.js:6 Uncaught Error: Bootstrap's JavaScript requires jQuery at bootstrap.min.js:6

i make control panel and there is a problem with jquery (data-toggle) not working and this message appear in console" bootstrap.min.js:6 Uncaught Error: Bootstrap's JavaScript requires jQuery at bootstrap.min.js:6 "
this is footer file
<div calss="footer">
</div>
<script src="<?php echo $js; ?>jquery-3.2.1.min.js"></script>
<script src="<?php echo $js; ?>jquery-ui.min.js"></script>
<script src=" <?php echo $js; ?>bootstrap.min.js"></script>
<script src="<?php echo $js; ?>jquery.selectBoxIt.min.js"></script>
<script src="<?php echo $js; ?>backend.js"></script>
</body>
</html>
and i include footer
include $tpl.'footer.php';
and thats working in main site with the same folders and pathes and names
i dont know whats wrong
Try this
Change the order of files it should be like below..
<script src="<?php echo $js; ?>jquery-3.2.1.min.js"></script>
<script src="<?php echo $js; ?>bootstrap.min.js"></script>
<script src="<?php echo $js; ?>jquery-ui.min.js"></script>
<script src="<?php echo $js; ?>jquery.selectBoxIt.min.js"></></script>
<script src="<?php echo $js; ?>backend.js"></script>

Installing bxSlider Jquery plugin in wordpress

I am making my first steps learning to code. I made some courses on Internet an now I decided to build a Wordpress theme so like this I can continue learning from the practice.
I decided to make an image slider, so for this I decided to install a Jquery plugin. I know that I can install a wordpress plugin but I think that it's convenient to learn how to install a Jquery plugin too for many reasons.
I followed these steps to install the bxSlider plugin, but unfortunately there is something that it's not ok and it makes my plugin doesn't work:
1) Functions.php: I loaded all the files that I need
function loadbxslider() {
wp_enqueue_style('bxstyle', '/jquery.bxslider/jquery.bxslider.css');
wp_enqueue_script('bxscript', '/jquery.bxslider/jquery.bxslider.min.js', array('jquery'));
}
add_action('init', 'loadbxslider');
2) Header.php: I wrote this before <?php wp_head(); ?>:
<!--?php wp_enqueue_script('jquery'); ?-->
<!--?php wp_head(); ?-->
And this inmediately after <?php wp_head(); ?>:
<script type="text/javascript">// <![CDATA[
jQuery(document).ready(function(){
jQuery('#slidebx').bxSlider({
mode: 'horizontal',
infiniteLoop: true,
speed: 2000,
pause: 8000,
auto: true,
pager: false,
controls: true
});
});
// ]]></script>
So the first part of my header.php is like this:
?><!DOCTYPE html>
<html <?php language_attributes(); ?> class="no-js">
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11">
<?php if ( is_singular() && pings_open( get_queried_object() ) ) : ?>
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<?php endif; ?>
<!--?php wp_enqueue_script('jquery'); ?-->
<!--?php wp_head(); ?-->
<?php wp_head(); ?>
<script type="text/javascript">// <![CDATA[
jQuery(document).ready(function(){
jQuery('#slidebx').bxSlider({
mode: 'horizontal',
infiniteLoop: true,
speed: 2000,
pause: 8000,
auto: true,
pager: false,
controls: true
});
});
// ]]></script>
</script>
</head>
3) bxSlider inside my content: using the id slidebx
<div id="slidebx">
<div><?php the_field('image1'); ?></div>
<div><?php the_field('image2'); ?></div>
<div><?php the_field('image3'); ?></div>
<div><?php the_field('image4'); ?></div>
<div><?php the_field('image5'); ?></div>
<div><?php the_field('image6'); ?></div>
<div><?php the_field('image7'); ?></div>
<div><?php the_field('image8'); ?></div>
<div><?php the_field('image9'); ?></div>
<div><?php the_field('image10'); ?></div>
</div>
I have a week trying to discover why this plugin doesn't work. If you have some suggestion would be good for my learning process.

How automatically refresh only one module in joomla?

How automatically refresh only one module in joomla?
<?php if ($this->countModules('parite')) : ?>
<section id="parite" >
<jdoc:include type="modules" name="parite" style="xhtml" />
</section>
<?php endif; ?>
That was the answer I was looking for.
<script type="text/javascript" src="https://code.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
var refreshId = setInterval(function()
{
jQuery('#parite').load('<?php echo $this->baseurl ?>/modules/mod_parite/mod_parite.php');
}, 1000);
</script>
<div id="parite"></div>

difficulties on locating javascript and css codeigniter

Hi how can i aces in view model
i saved my css and javascript inside the js folder and css folder inside the application in codeigniter how can i aces it i'm having difficulties to link them
www
application
-jsfolder
-jsfiles
-cssfolder
-cssFiles
<?php
//birds.php
class Birds extends CI_Controller{
function index(){
$this->load->view('birds_view');
}
function get_birds(){
$this->load->model('birds_model');
if (isset($_GET['term'])){
$q = strtolower($_GET['term']);
$this->birds_model->get_bird($q);
}
}
}
<?php
//birds_model.php
class Birds_model extends CI_Model{
function get_bird($q){
$this->db->select('bird');
$this->db->like('bird', $q);
$query = $this->db->get('birds');
if($query->num_rows > 0){
foreach ($query->result_array() as $row){
$row_set[] = htmlentities(stripslashes($row['bird'])); //build an array
}
echo json_encode($row_set); //format the array into json data
}
}
}
}
bird_view.php
<style>
.ui-autocomplete-loading {
background: #fff url('../link/to/ajax-loading-image') right center no-repeat !important;
}
</style>
<link href="<?php echo base_url().'css/' ?>./css/jquery.ui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="<?php echo base_url().'js/'?>/js/jquery.js"></script>
<script type="text/javascript" src="<?php echo base_url().'js/'?>/js/jquery.ui.js"></script>
<input type="text" id="birds" />
<script>
$(function(){
$("#birds").autocomplete({
source: "birds/get_birds" // path to the get_birds method
});
});
</script
it only display white screen tnx in advance guys
You should link your css and js file as:-
<link href="<?php echo base_url().'css/jquery.ui.css'; ?>" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="<?php echo base_url().'js/query.js'; ?>"></script>
<script type="text/javascript" src="<?php echo base_url().'js/jquery.ui.js'; ?>"></script>
do your really need that 'dot' after your closing php tag?
<?php echo base_url(); ?>./
also remove extra leading slashes:
<link href="<?php echo base_url(); ?>css/jquery.ui.css" />
<script type="text/javascript" src="<?php echo base_url(); ?>js/jquery.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>js/jquery.ui.js"></script>
p.s make sure that base_url is set properly in your config file: $config['base_url']='localhost/websitename/'
with a trailing slash

Categories