My .load() doesn't execute JavaScript in loaded HTML file.
I already try the answers in anothers same thread but I can't solve my issue.
Here is my code :
index.php
<?php
session_start();
if(empty($_SESSION['username']))
{
$_SESSION = array();
//setcookie('auth', 'nop^^' , time() - 3600, '/', $_SERVER["HTTP_HOST"], false, true);
session_destroy();
header('Location: ../../frontsite/index.php');
exit();
}
function menu_mode($requestUri)
{
$user_type = $_SESSION['admin'];
if ($user_type == $requestUri)
echo 'class="menu_section show"';
else {
echo 'class="menu_section hidden"';
}
}
switch ($_SESSION['admin']) {
case "admin":
$pages = array(
'admin_tableau_bord' => 'admin_tableau_bord',
'admin_conseilleres_liste' => 'admin_conseilleres_liste',
'admin_conseilleres_gestion'=> 'admin_conseilleres_gestion',
'admin_liste_clients' => 'admin_liste_clients'
);
$page = isset($_GET['page']) ? $_GET['page'] : 'admin_tableau_bord';
if(!array_key_exists($page, $pages)) {
$page = 'admin_tableau_bord';
}
break;
case "user":
$pages = array(
'cons_tableau_bord' => 'cons_tableau_bord',
'cons_planning' => 'cons_planning',
'cons_liste_clients' => 'cons_liste_clients',
'cons_gestion_clients' => 'cons_gestion_clients'
);
$page = isset($_GET['page']) ? $_GET['page'] : 'cons_tableau_bord';
if(!array_key_exists($page, $pages)) {
$page = 'cons_tableau_bord';
}
break;
}
require_once('../../frontsite/pages/db_connect.php');
?>
<!DOCTYPE html>
<html lang="en">
<head>
ALL META & LINKS
</head>
<body class="nav-md">
<div class="container body">
... blablabla ...
<?php
// affichage des liens du menu
$i="0";
foreach($pages as $key => $value) {
$en_cours = ($key == $page) ? ' id="en_cours"' : ''; // test page en cours
$href[$i] = ' href="#" data-target="'.$key.'"'.$en_cours;
$i += 1;
}
?>
<h3>Administrateur</h3>
<ul class="nav side-menu">
<li><a class="dyn_link" <?php echo $href[0]; ?>><i class="fa fa-home"></i> Tableau de bord </a></li>
<li><a><i class="fa fa-female"></i> Conseillères <span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu">
<li><a class="dyn_link" <?php echo $href[1]; ?>>Liste</a></li>
<li><a class="dyn_link" <?php echo $href[2]; ?>>Gestion</a></li>
</ul>
</li>
<li><a class="dyn_link" <?php echo $href[3]; ?>><i class="fa fa-list"></i> Liste clients </a></li>
... blablabla ...
<!-- page content -->
<div class="right_col" id="content_include" role="main">
<?php
include("../production/pages/$page.inc.php");
?>
</div>
... blablabla ...
<!-- Include jQuery + ALL OTHER SCRIPT -->
<script src="../production/lib/jquery.js"></script>
<!-- Load content Scripts -->
<script>
$(document).ready(function(){
// Set trigger and container variables
var trigger = $('.dyn_link'),
container = $('#content_include');
// Fire on click
$(document.body).on('click','.dyn_link', function(event){
event.preventDefault();
// Set $this for re-use. Set target from data attribute
target = $(this).data('target');
// Load target page into container
container.load('./' + target + '.inc.php');
// Stop normal link behavior
return false;
});
});
</script>
</body>
</html>
My incuded files just contain html code.
I am sure i make mistake in my way to load the content included.
Sorry for the heavy block but you have all the infos to help me if possible.
Thanks a lot.
Related
I got a a custom loop into my Wordpress custom blog page, and Im displaying all my posts into it, like that :
<section class="container blog-article-actu">
<div class="row">
<?php
$the_query = new WP_Query('showposts=-1');
while ($the_query->have_posts()) :
$the_query->the_post();
$catObj = get_the_category();
?>
<article class="blog-article-actu-article" style="background:url('<?php $url = wp_get_attachment_url( get_post_thumbnail_id($post->ID), 'thumbnail' ); ?><?php echo $url ?>');">
<div class="blog-article-actu-article-top">
<h2><?php the_title(); ?></h2>
<div class="details-blog-article-actu">
<div class="blog-article-actu-date">
<span class="day"><?php the_time( 'd' ) ?></span><br>
<span class="month"><?php the_time( 'F' ) ?></span>
</div>
<a href="#" target="_blank"><p>
<?php
if (($catObj[0]->name == 'Actualités et évènements') OR ($catObj[1]->name == 'Actualités et évènements')) {
echo "<img src=\"XXX/actu-icon.png\" alt=\"Actualités et évènements\">";
} elseif (($catObj[0]->name == 'Témoignages') OR ($catObj[1]->name == 'Témoignages')) {
echo "<img src=\"XXX/chat-icon.png\" alt=\"Témoignages\">";
} elseif (($catObj[0]->name == 'Vidéos') OR ($catObj[1]->name == 'Vidéos')) {
echo "<img src=\"XXX/video-icon.png\" alt=\"Vidéos\">";
} else {
echo "";
}
?>
</p></a>
</div>
</div>
<div class="blog-article-actu-article-bottom-wrap">
<span class="blog-article-actu-article-excerpt"><?php the_excerpt();?></span>
<span class="blog-article-actu-article-bottom">En savoir <span>+</span></span>
<div class="social-blog-article-actu">
<i class="fa fa-twitter" aria-hidden="true"></i>
<i class="fa fa-facebook" aria-hidden="true"></i>
</div>
</div>
</article>
<?php // End of the loop.
endwhile;
?>
</div>
</section>
Then I was asked to build something to sort them, by tags, dynamically, with a tag system like this one : https://codepen.io/Chaaampy/pen/gWOrvp
But Im a bit lost about that ... I thought about get the tags for each posts in my loop, and then add them as a CSS class, like that maybe I could show or hide some articles in JS ... Meh, I don't know, has someone got any ideas for me ?
Thanks ! :)
If anyone is interested, found a solution by building something like that : https://codepen.io/Chaaampy/pen/gWOrvp
$(function filter() {
var selectedClass = "";
$(".link").click(function(){
selectedClass = $(this).attr("data-rel");
$(".wrap").fadeTo(100, 0.1);
$(".wrap section").not("."+selectedClass).fadeOut().removeClass('scale_anm');
setTimeout(function() {
$("."+selectedClass).fadeIn().addClass('scale_anm');
$(".wrap").fadeTo(300, 1);
}, 300);
});
});
Note that I get the tags into Wordpress with get_the_tags, and then I add them as a class to the elements I want to show / hide
I created a new WordPress theme. When I moved it into an IIS webserver it fails.
Here's my code:
<?php get_header(); ?>
<h2><?php the_title();?></h2>
<div class="infoBox" id="infoTxt">
<?php
if(get_the_title() == 'Home'){
$page = get_page_by_title( get_the_title());
$Pagecontent = apply_filters('the_content', $page->post_content);
$ContentArray = explode(";",$Pagecontent);
echo $ContentArray[count($ContentArray) -1];
<script type="text/javascript">
var info = <?php echo json_encode($ContentArray) ?>;
document.getElementById('infoTxt').innerHTML = info[1];
setInterval(function()
{
var i = Math.round((Math.random()) * info.length);
if (i == info.length) --i;
document.getElementById('infoTxt').innerHTML = info[i];
}, 5 * 1000);
</script>
<?php
}
else{
$page = get_page_by_title( get_the_title());
$content = apply_filters('the_content', $page->post_content);
$InfoboxStr = substr($content, 0, strpos($content, '#:'));
echo $InfoboxStr;
}
?>
</div><!--End InfoTxt-->
<div id="Flagbox">
<ul style="list-style-type:none;">
<li><img class="flagContainer" alt="English" src="<?php bloginfo('stylesheet_directory'); ?>/img/GbFlag.png""/></li>
<li><img class="flagContainer" alt="Deutsch" src="<?php bloginfo('stylesheet_directory'); ?>/img/GmFlag.png""/></li>
<li><img class="flagContainer" alt="French" src="<?php bloginfo('stylesheet_directory'); ?>/img/FrFlag.png""/></li>
</ul>
</div> <!-- end Flag Box-->
<div style="margin-bottom:25%;">
</div>
<?php get_footer(); ?>
It is because of the JavaScript but I have some problem fixing this, I have first of all tried to echo the JavaScript, but I then got a problem with the first line of the script which is: var info = <?php echo json_encode($ContentArray) ?>;
When I ex. tried to
Echo 'var info = ' + echo json_encode($ContentArray) ?> + ";"
I just gets an http 500-error. Do any of you have an idea of what I can try to fix my problem
If you want to use the <Script> tag, you need to close the php tag, in here:
echo $ContentArray[count($ContentArray) -1];
<script type="text/javascript">
So it should look like that:
?>
<script>
[..]
</script>
<?php
The best practice it that you should place the JS either in at the top or bottom of your file or in another file.
The Problem is that you did not close the PHP Tags before entering the <Script> Block... In other words; you were still in PHP Mode when you wrote your Javascript as if you were writing it on a normal HTML Document. Sure you can output Javascript via PHP but then, you may have to build that up.
Here you go with something that might assist:::
<?php get_header(); ?>
<h2><?php the_title();?></h2>
<div class="infoBox" id="infoTxt">
<?php
if(get_the_title() == 'Home'){
$page = get_page_by_title( get_the_title());
$Pagecontent = apply_filters('the_content', $page->post_content);
$ContentArray = explode(";",$Pagecontent);
echo $ContentArray[count($ContentArray) -1];
?>
<script type="text/javascript">
var info = <?php echo json_encode($ContentArray) ?>;
document.getElementById('infoTxt').innerHTML = info[1];
setInterval(function() {
var i = Math.round((Math.random()) * info.length);
if (i == info.length){ --i; }
document.getElementById('infoTxt').innerHTML = info[i];
}, 5 * 1000);
</script>
<?php
}else{
$page = get_page_by_title( get_the_title());
$content = apply_filters('the_content', $page->post_content);
$InfoboxStr = substr($content, 0, strpos($content, '#:'));
echo $InfoboxStr;
}
?>
</div><!--End InfoTxt-->
<div id="Flagbox">
<ul style="list-style-type:none;">
<li><img class="flagContainer" alt="English" src="<?php bloginfo('stylesheet_directory'); ?>/img/GbFlag.png""/></li>
<li><img class="flagContainer" alt="Deutsch" src="<?php bloginfo('stylesheet_directory'); ?>/img/GmFlag.png""/></li>
<li><img class="flagContainer" alt="French" src="<?php bloginfo('stylesheet_directory'); ?>/img/FrFlag.png""/></li>
</ul>
</div> <!-- end Flag Box-->
<div style="margin-bottom:25%;">
</div>
<?php get_footer(); ?>
I have 3 progress bar on webpage from database data . When user click on load more 3 more progress bar get added from database data.
<div id="progressBar<?php echo $rec['cid'];?>" class="tiny-green"><div></div></div>
<!-- Some codes are here --->
...
....
.....
<?php
$prj= mysql_query("select * from campaign where uid=$uid");
$record = array();
while($row = mysql_fetch_assoc($prj)){
$record[] = $row;
}
?>
<script type="text/javascript">
<?php foreach($record as $rec){?>
progressBar(<?php $perc= $rec['value']*100/$rec['value1']; echo $perc;?>, $('#progressBar<?php echo $rec['cid'];?>'));
<?php } ?>
</script>
Below is javascript plugin
<script type="text/javascript" src="js/jquery.countdown.min.js"></script>
Now problem is when i add progress bar from load_more button(Which get data by load_more.php file and it insert it on index.php file). i can see the value but progress bar is not creating because code given above not loading after clicking on load_more.
So, i want to know is there any way i can reload that code only. So, wherever there is a progress bar control placed it get the display the bar.
update with some modifications, hope it will help you
$prj= mysql_query("select * from campaign where uid=$uid order by Closing_Date DESC Limit 0,1");
$result = array('data' => '', 'progress_bar' => array());
while($row = mysql_fetch_assoc($prj)) {
$result['data'] .= '<div class="col-sm-1 col-md-4 unique" id="'.$rec['cid'].'">
<div class="well">
<div class="media services-wrap55 wow fadeInDown">
<img class="img-responsive" src="'.$rec['poster'].'"><br>
<h4 class="media-heading">'.$rec['project_Name'].'</h4>
<p> by <i>'.$rec['user_name'].'</i></p>
<p> '.$rec['short_dis'].'</p>
<a class="" href="view_project/'.$rec['cid'].'/'.$rec['slug'].'">More ... </a>
<p>
<div id="progressBar'.$rec['cid'].'" class="tiny-green"><div></div></div>
<h6>'.($rec['view']*100/$rec['view2']).'% ( <i class="fa fa-user"></i>'.$rec['view']. ') '.$rec['view2'].' views.</h6>
</p>
<div class="counter-inner"> <div id="example1" data-countdown="'.date("m/d/Y h:i:s", strtotime($rec['Closing_Date'])).'"></div></div><p> <!-- Work on this -->
<div class="col-sm-11">
<div class="entry-meta">
<span><font color="#339933"><i class="fa fa-comment"></i> </font> '.$rec['comment'].' Comments </a></span><!-- Work on this -->
<span><font color="#339933"><i class="fa fa-thumbs-up"></i></font> '.$rec['up_count'].' </a></span>
<span><font color="#339933"><i class="fa fa-thumbs-down"></i></font> '.$rec['down_count'].' </a></span>
<span><font color="#339933"><i class="fa fa-star"></i> </font> '.$rec['fav_count'].' Fav </a></span>
</div>
</div>
</div>
</div>
</div>';
$result['progress_bar'][] = array('cid' => $rec['cid'], 'perc' => $rec['value'] * 100 / $rec['value1']);
}
$(document).ready(function() {
$('#more').click(function() {
var get_last_post_display = $('.unique-class:last').attr('id'); //get ip last <li>
$('#more').html('<img src="ajax-loader.gif"');
$.post('more_prj.php', 'last_id_post='+get_last_post_display, function(html) {
if(html.data) {
$('div').append(html.data);//$('.main-div') ?
$('#more').text('Load More Project'); //add text "Load More Post" to button again
for(i = 0; i < html.progress_bar.length; i++) {
progressBar(html.progress_bar[i]['perc'], $('#progressBar' + html.progress_bar[i]['cid']));
}
} else {
$('#more').text('No more Project to load'); // when last record add text "No more posts to load" to button.
}
}, 'json');
});
});
I have a theme with two toggle menu options (standard and mobile with hover effect).I'm trying to replace the hover with an off-canvas menu solution taking in consideraion this described procedure.
After I've updated the css style code using the custom css field option, I've uploaded to the server and registered in script-calls.php(instead of calling in footer.php) classie.js and sidebarEffects.js files :
...
// Main Scripts
function register_js() {
if (!is_admin()) {
$url_prefix = is_ssl() ? 'https:' : 'http:';
// Register
wp_register_script('classie', THB_THEME_ROOT . '/assets/js/plugins/classie.js', 'jquery', null, TRUE);
wp_register_script('sidebarEffects', THB_THEME_ROOT . '/assets/js/plugins/sidebarEffects.js', 'jquery', null, TRUE);
// Enqueue
wp_enqueue_script('classie');
wp_enqueue_script('sidebarEffects');
wp_localize_script( 'app', 'themeajax', array( 'url' => admin_url( 'admin-ajax.php' ) ) );
}
}
...
The original theme mobile menu section in header.php looks like this:
...
<body <?php body_class($class); ?> data-url="<?php echo esc_url(home_url()); ?>" data-cart-count="<?php if($woocommerce) { echo $woocommerce->cart->cart_contents_count; } ?>" data-sharrreurl="<?php echo THB_THEME_ROOT; ?>/inc/sharrre.php">
<div id="wrapper" class="open">
<!-- Start Mobile Menu -->
<nav id="mobile-menu">
<div class="menu-container custom_scroll">
<div class="menu-holder">
<?php if ($page_menu) { ?>
<?php wp_nav_menu( array( 'menu' => $page_menu, 'depth' => 2, 'container' => false, 'menu_class' => 'mobile-menu sf-menu', 'walker' => new thb_mobileDropdown ) ); ?>
<?php } else if(has_nav_menu('nav-menu')) { ?>
<?php wp_nav_menu( array( 'theme_location' => 'nav-menu', 'depth' => 2, 'container' => false, 'menu_class' => 'mobile-menu sf-menu', 'walker' => new thb_mobileDropdown ) ); ?>
<?php } else { ?>
<ul class="mobile-menu">
<li>Please assign a menu from Appearance -> Menus</li>
</ul>
<?php } ?>
</div>
<div class="menu-footer">
<?php echo do_shortcode($menu_footer); ?>
<?php if (ot_get_option('menu_ls') == 'on') { do_action( 'thb_language_switcher' ); } ?>
</div>
</div>
<div class="spacer"></div>
</nav>
<!-- End Mobile Menu -->
<!-- Start Quick Cart -->
<?php do_action( 'thb_side_cart' ); ?>
<!-- End Quick Cart -->
<!-- Start Loader -->
<div class="preloader"></div>
<!-- End Loader -->
<!-- Start Header -->
<header class="header row no-padding <?php echo $header_style; ?>" data-equal=">.columns" role="banner">
<div class="small-7 medium-4 columns logo<?php if ($header_style == 'style1') { ?> show-for-large-up<?php } ?>">
<?php if ($header_style == 'style2') { ?>
<a class="logotext" href="<?php echo esc_url( home_url( '/' ) ); ?>"
title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>"
rel="home"><?php bloginfo( 'name' ); ?>
</a>
<?php } ?>
</div>
<?php if ($header_style != 'style2') { ?>
<div class="small-7 medium-4 columns logo">
<?php if ($header_style == 'style1') { ?>
<a class="logotext" href="<?php echo esc_url( home_url( '/' ) ); ?>"
title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>"
rel="home"><?php bloginfo( 'name' ); ?>
</a>
<?php } ?>
</div>
<?php } ?>
<div class="small-5 <?php if ($header_style == 'style2') { echo 'medium-8'; } else { echo 'medium-4';} ?> columns menu-holder">
<?php $full_menu_true = ($menu_mobile_toggle_view == 'style2' && $header_style == 'style2');?>
<?php if ($full_menu_true) { ?>
<nav id="full-menu" role="navigation">
<?php if ($page_menu) { ?>
<?php wp_nav_menu( array( 'menu' => $page_menu, 'depth' => 2, 'container' => false, 'menu_class' => 'full-menu', 'walker' => new thb_mobileDropdown ) ); ?>
<?php } else if(has_nav_menu('nav-menu')) { ?>
<?php wp_nav_menu( array( 'theme_location' => 'nav-menu', 'depth' => 2, 'container' => false, 'menu_class' => 'full-menu', 'walker' => new thb_mobileDropdown ) ); ?>
<?php } else { ?>
<ul class="full-menu">
<li>Please assign a menu from Appearance -> Menus</li>
</ul>
<?php } ?>
</nav>
<?php } ?>
<?php if ($header_search != 'off') { do_action( 'thb_quick_search' ); } ?>
<?php if ($header_cart != 'off') { do_action( 'thb_quick_cart' ); } ?>
<a href="#" data-target="open-menu" class="mobile-toggle<?php if (!$full_menu_true) { ?> always<?php } ?>">
<div>
<span></span><span></span><span></span>
</div>
</a>
</div>
</header>
<!-- End Header -->
...
(not so sure if it's ok), I've modified/replaced the above section with:
...
<body <?php body_class($class); ?> data-url="<?php echo esc_url(home_url()); ?>" data-cart-count="<?php if($woocommerce) { echo $woocommerce->cart->cart_contents_count; } ?>" data-sharrreurl="<?php echo THB_THEME_ROOT; ?>/inc/sharrre.php">
<div id="st-container" class="st-container">
<!-- content push wrapper -->
<div class="st-pusher">
<nav class="st-menu st-effect-1" id="menu-1">
<!-- sidebar content -->
</nav>
<div id="st-trigger-effects"><button data-effect="st-effect-3">Menu</button></div>
<div class="st-content"><!-- this is the wrapper for the content -->
<div class="st-content-inner"><!-- extra div for emulating position:fixed of the menu -->
<!-- Start Mobile Menu -->
<nav id="primary-navigation" class="st-menu st-effect-3" id="menu-3" role="navigation">
<h1 class="menu-toggle"><?php _e( 'Primary Menu', 'notio-wp' ); ?></h1>
<a class="screen-reader-text skip-link" href="#content"><?php _e( 'Skip to content', 'notio-wp' ); ?></a>
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
</nav>
<!-- End Mobile Menu -->
...
Also in footer.php I've closed these divs:
...
</div><!-- /st-content-inner -->
</div><!-- /st-content -->
</div><!-- /st-pusher -->
</div><!-- /st-container -->
</body>
</html>
Unfortunately, my result is not functional.The final goal is to obtain the off-canvas menu effect on the right side as alternative to the hover menu, using the existing toggle menu option (between off-side and standard menu), also using the existing burger menu button (when off-canvas is activated). Any thoughts or any other solution with the same effect will be much appreciated.Thanks
I want to apply a js I found here on stackoverflow to my navigation bar. This is aimed to autohide it after a moment of inactivity. But I dont know how to include and apply the code to my navigation bar.
This is how my html goes
<div class="basic-wrapper">
<a class="btn responsive-menu pull-right" data-toggle="collapse" data-target=".navbar-collapse">
<i class='icon-menu-1'></i>
</a>
<a class="navbar-brand" href="<?php echo home_url(); ?>">
<?php
if( get_option('custom_logo') ){
echo '<img src="'. get_option('custom_logo') .'" alt="" data-src="'. get_option('custom_logo') .'" data-ret="'. get_option('custom_logo_retina') .'" class="retina" />';
} else {
echo bloginfo('title');
echo '<br /><small>';
echo bloginfo('description');
echo '</small>';
}
?>
</a>
</div>
<div class="collapse navbar-collapse pull-right">
<?php
if ( has_nav_menu( 'primary' ) ){
wp_nav_menu(
array(
'theme_location' => 'primary',
'depth' => 3,
'container' => false,
'container_class' => false,
'menu_class' => 'nav navbar-nav',
'fallback_cb' => 'wp_bootstrap_navwalker::fallback',
'menu_id' => 'ebor-main-menu',
'walker' => new ebor_bootstrap_navwalker()
)
);
} else {
echo 'Set up a navigation menu now';
}
if( get_option("header_social_link_1") )
get_template_part('loop/loop','socialheader');
?>
</div>
</div><!--/.container-->
</div><!--/.nav-collapse -->
This is the code I found-
$("div").hide();
$("html").mousemove(function( event ) {
$("div").show();
myStopFunction();
myFunction();
});
function myFunction() {
myVar = setTimeout(function(){
$("div").hide();
}, 1000);
}
function myStopFunction() {
if(typeof myVar != 'undefined'){
clearTimeout(myVar);
}
}
If you are asign how to include an external javascript file, you need to do the following:
<script src="//path/to/external/js/file.js"></script>
As for the actual JS code, i dont think that will give you what you are looking for, as it will hide ALL DIVs on the page.
You'd want to replace that with something like. $("div#IDofMenuContatiner")...