I have a list of lis, and on mousemove, the code checks if a certain div doesn't contain a certain class. If it is the case, the ajax query is launched. Unfortunately it's not working and I do not understand why as my code is working if I do not use ajax. Thank you in advance for your help.
My HTML:
<div id="wrapper">
<div id="contentWrapper">
<div id="contentOne" class="content">
<ul>
<li refSortie="mmm">mmm</li>
<li refSortie="sss">sss</li>
<li refSortie="mmm">mmm</li>
<li refSortie="mmm">mmm</li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div id="contentTwo" class="content"></div>
<div id="contentThree" class="content"></div>
<div id="contentFour" class="content"></div>
</div>
</div>
My JS:
$('#contentOne li').mousemove(function () {
var refSortie = $(this).attr('refSortie');
if(!$('#contentOne').hasClass('freezed')) {
$.ajax({
type: 'POST',
url: 'php/test2.php',
data: 'refSortie=' + refSortie,
success: function (data) {
$('#contentTwo').html(data);
}
});
}
}).mouseout(function () {
if(!$('#contentOne').hasClass('freezed')) {
$('#contentTwo').html('');
}
});
My PHP:
<?php
if(isset($_POST['refSortie'])) {
echo $refSortie=$_POST['refSortie'];
}
?>
Well, based on what you posted. Here's what I got and it's working fine for me.
HTML & JQUERY
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>
</head>
<body>
<div id="wrapper">
<div id="contentWrapper">
<div id="contentOne" class="content">
<ul>
<li refSortie="mmm">mmm</li>
<li refSortie="sss">sss</li>
<li refSortie="mmm">mmm</li>
<li refSortie="mmm">mmm</li>
</ul>
</div>
<div id="contentTwo" class="content"></div>
<div id="contentThree" class="content"></div>
<div id="contentFour" class="content"></div>
</div>
</div>
<script type="text/javascript">
$('#contentOne li').mousemove(function(){
var refSortie=$(this).attr('refSortie');
if(!$('#contentOne').hasClass('freezed')){
$.ajax({
type:'POST',
url:'test2.php',
data:'refSortie='+refSortie,
success:function(data){
$('#contentTwo').html(data);
}
});}
}).mouseout(function(){
if(!$('#contentOne').hasClass('freezed')){
$('#contentTwo').html('');}
});
</script>
</body>
</html>
PHP
<?php
if(isset($_POST['refSortie'])) {
echo $refSortie=$_POST['refSortie'];
}
?>
Did I do something different than you?
Firebug Console view:
Related
I am using angularjs for front end and php for backend.I have written some code in angular it is working fine before including the header.php function.But, after including the header.php it is not working.It is not giving any error also.I am not getting where I went wrong also.
showAllproject.php is,
<?php
include_once 'C:\wamp64\www\Performance\header\src\demo\header.php';
?>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<!--Angularjs-->
<script data-require="angular.js#*" data-semver="1.6.9" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.9/angular.js"></script>
<script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
$scope.names = [
{name:'PROJECT'},
{name:'| DESCRIPTION'},
{name:'| CREATED ON'},
{name:'| LAST UPDATED'},
{name:'| '}
];
});
</script>
</head>
<body style="height:100%">
<div class="row" >
<div class="container-fluid">
<div class="col-lg-14" style="background-color:#DCDCDC;height:50px;position:fixed">
</div>
<div ng-app="myApp" ng-controller ="namesCtrl" style="background-color:#DCDCDC;height:500px;margin-top:1cm;margin-left:1cm;margin-right:2cm;" class=" row vertical-center-row">
<div class="col-lg-12" style="background-color:green;height:1cm;">
<div class="row">
<div ng-repeat="x in names" style="margin-right:4cm;margin-left:1cm;" class="col-xs-6">
{{x.name}}
</div>
</div>
</div>
<div class="col-lg-12" style="background-color:blue;height:80%;max-height:80%;overflow: auto;">
<div class="row">
<div ng-repeat="x in names" style="margin-right:4cm;margin-left:1cm;" class="col-xs-6">
</div>
</div>
</div>
<div class="col-lg-12" style="background-color:green;height:1cm;">
</div>
</div>
</div>
</div>
</body>
</html>
header.php is,
<?php
//calling methods of methods.php file
include_once 'C:/wamp64/www/performance/header/src/demo/methods.php';
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="shortcut icon" type="image/png" href="http://localhost/performance/login/images/merahkee.png" />
<title> Merahkee Technology Soluctions</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<!-- SmartMenus jQuery Bootstrap 4 Addon CSS -->
<link href="../addons/bootstrap-4/jquery.smartmenus.bootstrap-4.css" rel="stylesheet">
<!--Angularjs-->
<script data-require="angular.js#*" data-semver="1.6.9" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular.js"></script>
<!--This version is for title attribute-->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.js"></script>
<!--Angularjs starts-->
<script>
var rootApp = angular.module('rootApp', ['firstApp','secondApp']);
var firstApp = angular.module('firstApp', []);
firstApp.controller('firstController', function($scope) {
$scope.pageTitle = "MerahkeeCloudMeter";
});
var secondApp = angular.module('secondApp', []);
secondApp.controller('SecondController', function($scope) {
$scope.Reports="Reports";
});
var fourApp = angular.module('fourApp', []);
secondApp.controller('fourController', function($scope) {
$scope.Test="Test";
});
var thirdApp = angular.module('thirdApp', []);
secondApp.controller('thirdController', function($scope) {
$scope.Project="Project";
});
var fifthApp = angular.module('fifthApp', []);
secondApp.controller('fifthController', function($scope) {
$scope.Report="Report";
});
var sixthApp = angular.module('sixthApp', []);
secondApp.controller('sixthController', function($scope) {
$scope.default="Default Workspace";
$scope.details = [
{name:'help',href:'#'},
{name:'settings',href:'#'},
{name:'logout',href:'http://localhost/performance/login/logout.php?logout'}
];
});
var seventhApp = angular.module('seventhApp', []);
secondApp.controller('seventhController', function($scope) {
$scope.sdc_pro = [
{name:'Show All Projects',href:'http://localhost/performance/showAll_project.php?user_id='},
{name:'Delete',href:'http://localhost/performance/delete_test.php?user_id='},
{name:'Create Projects',href:'http://localhost/performance/Create_test.php?user_id='}
];
});
var eighthApp = angular.module('eighthApp', []);
secondApp.controller('eigthController', function($scope) {
$scope.sdc_test = [
{name:'Show All Tests',href:'http://localhost/performance/showAll_test.php?user_id='},
{name:'Delete',href:'http://localhost/performance/delete_project.php?user_id='},
{name:'Create Tests',href:'http://localhost/performance/Project_form.php?user_id='}
];
});
</script>
</head>
<body style="padding-top:80px;">
<!-- Navbar -->
<nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark">
<div ng-app="rootApp" class="container">
<a ng-app = "firstApp" ng-controller = "firstController" class="navbar-brand" href="#">{{ pageTitle }}</a>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<!-- Left nav -->
<ul class="nav navbar-nav mr-auto">
<!--Display project dropdown-->
<li ng-app = "thirdApp" ng-controller = "thirdController" class="nav-item dropdown" style="padding-right:15px;" ><a class="nav-link dropdown-toggle" href="#">{{Project}}</a>
<ul class="dropdown-menu">
<?php
echo '<li><a class="dropdown-item">Recent Projects </a></li>';
for($i=0;$i<$projectcount;$i++){
//calling test_name() method and storing those values in a string
$test=project_name($count_uid,$user_id,$pro_sql);
$project_name=$test[$i];
if(strlen($project_name)>=25){
$projectName=substr($project_name,0,25);
$projectName=$projectName.'..';
}
else{
$projectName=$project_name;
}
echo'<li><a class="dropdown-item" href="http://localhost/performance/ShowTest_of_project.php?project_name='.$project_name.'&user_id='.$user_id.'" title="'.$project_name.'">'.$projectName.'</a></li>';
}//for loops ends
//show all projects
echo'<li ng-app = "seventhApp" ng-controller = "seventhController"><a ng-repeat="x in sdc_pro" class="dropdown-item" href="{{x.href}}'.$user_id.'">{{x.name}}</a></li>';
?>
</ul><!--dropdown-menu closes-->
</li><!--project dropdown ends-->
<li ng-app = "fourApp" ng-controller = "fourController" class="nav-item dropdown"><a style="padding-right:15px;" class="nav-link dropdown-toggle" href="#">{{Test}}</a>
<ul class="dropdown-menu">
<?php
echo '<li><a class="dropdown-item">Recent Tests </a></li>';
for($i=0;$i<$testcount;$i++){
//calling test_name() method and storing those values in a string
$test1=recent_test1($test_sql);
$test_name1=$test1[$i];
//project name
$project=recentTest_project($test_sql);
$project_name=$project[$i];
//platform file name
$platform=platform_file();
$platform_file=$platform[$i];
//project id
$project_id=pro_id($test_sql);
$pro_id=$project_id[$i];
//calling file_name() method and storing those values in a string
//$file=load_file_name();
//$file_name=$file[$i];
//echo' <a type="submit" name="testname" href='.$file_name.'>'.$test_name.'</a><br>';
if(strlen($test_name1)>=25){
$testName=substr($test_name1,0,25);
$testName=$testName.'..';
}
else{
$testName=$test_name1;
}
echo'<li><a class="dropdown-item" href="http://localhost/performance/RunTest_09.php?test_name='.$test_name1.'&project_name='.$project_name.'" title="'.$test_name1.'">'.$testName.'</a></li>';
}//for loops ends
//show all projects ,delete project and create project
echo'<li ng-app = "eighthApp" ng-controller = "eigthController"><a ng-repeat="x in sdc_test" class="dropdown-item" href="{{x.href}}'.$user_id.'">{{x.name}}</a></li>';
?>
</ul>
</li><!--test dropdown ends-->
<li ng-app = "fifthApp" ng-controller = "fifthController" class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#">{{Report}}</a>
<ul class="dropdown-menu">
<li></li>
</ul>
</li><!--report list ends-->
</ul>
<ul class="nav navbar-nav">
<li ng-app = "sixthApp" ng-controller = "sixthController" class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#">{{default}}</a>
<ul class="dropdown-menu">
<li><a ng-repeat="x in details" class="dropdown-item" href="{{x.href}}">{{x.name}}</a></li>
</ul>
</li>
</ul>
</div><!--collapse navbar-collapse-->
</div>
</nav>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<!-- SmartMenus jQuery plugin -->
<script type="text/javascript" src="../jquery.smartmenus.js"></script>
<!-- SmartMenus jQuery Bootstrap 4 Addon -->
<script type="text/javascript" src="../addons/bootstrap-4/jquery.smartmenus.bootstrap-4.js"></script>
<?php
session_destroy();
?>
</body>
</html>
This is my Menu items .
<html>
<body>
<div class="container">
<ul class="nav navbar-nav ct-navbar--fadeIn">
<li class="active">
HEM
</li>
<li>OM OSS</li>
<li>Vilkor</li>
<li>Nyheter</li>
<li>KONTAKTA OSS</li>
</ul>
<div class="clear"></div>
</div>
</body>
</html>
Curently it reamains active on home page even changing to other page. How could i able to make it active of that page on every page changing.
Thanks in advance.
try this
<?php
$myactiveli = $_GET['con'];
?>
<html>
<body>
<div class="container">
<ul class="nav navbar-nav ct-navbar--fadeIn">
<li <?php if($myactiveli==1) { echo 'class="active"'; } ?> >
HEM
</li>
<li <?php if($myactiveli==3) { echo 'class="active"'; } ?>>OM OSS</li>
</ul>
<div class="clear"></div>
</div>
</body>
</html>
u can change index of <li> in .eq() according to page (starts from 0) the active class will aply to that index <li>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".nav").children("li").eq(2).addClass("active");
});
</script>
</head>
<body>
<div class="container">
<ul class="nav navbar-nav ct-navbar--fadeIn">
<li>
HEM
</li>
<li>OM OSS</li>
<li>Vilkor</li>
<li>Nyheter</li>
<li>KONTAKTA OSS</li>
</ul>
<div class="clear"></div>
</div>
</body>
</html>
This jQuery work too for me.
<script>
var url = window.location;
// Will only work if string in href matches with location
$('ul.nav a[href="' + url + '"]').parent().addClass('active');
// Will also work for relative and absolute hrefs
$('ul.nav a').filter(function() {
return this.href == url;
}).parent().addClass('active');
</script>
<script src="http://tympanus.net/Development/TabStylesInspiration/js/modernizr.custom.js"></script>
<link href="http://tympanus.net/Development/TabStylesInspiration/css/tabs.css" rel="stylesheet"/>
<link href="http://tympanus.net/Development/TabStylesInspiration/css/tabstyles.css" rel="stylesheet"/>
<section>
<div class="tabs tabs-style-line">
<div class="content-wrap">
<a href="javascript(0);" class="prev">
<img src="http://demo.litextension.com/le_demo/skin/frontend/default/default/le_itemslider/images/icon-prev.png">
</a>
<a href="javascript(0);" class="next">
<img src="http://demo.litextension.com/le_demo/skin/frontend/default/default/le_itemslider/images/icon-next.png">
</a>
<section id="section-line-1"><p>1</p></section>
<section id="section-line-2"><p>2</p></section>
<section id="section-line-3"><p>3</p></section>
<section id="section-line-4"><p>4</p></section>
<section id="section-line-5"><p>5</p></section>
</div><!-- /content -->
<nav>
<ul>
<li><span>Our Controls</span></li>
<li><span>Sony Playstation 4</span></li>
<li><span>Microsoft Xbox One</span></li>
<li><span>Nintendo Wii U</span></li>
<li><span>Microconsoles</span></li>
</ul>
</nav>
</div><!-- /tabs -->
</section>
<script src="http://tympanus.net/Development/TabStylesInspiration/js/cbpFWTabs.js"></script>
<script>
(function() {
[].slice.call(document.querySelectorAll('.tabs')).forEach(function(el) {
new CBPFWTabs(el);
});
})();
</script>
Tab Styles Inspiration
Tab content work fine but how to add next previous option on this
inspiration.
check this solution:
http://jsfiddle.net/bpzat7r0/3/
Pay attention to add ID attribute for div (.tabs) and nav link (.prev and .next)
HTML:
<section>
<div class="tabs tabs-style-line" id="tab1">
<div class="content-wrap">
<a href="javascript:" class="prev" id="prev1">
<img src="http://demo.litextension.com/le_demo/skin/frontend/default/default/le_itemslider/images/icon-prev.png">
</a>
<a href="javascript:" class="next" id="next1">
<img src="http://demo.litextension.com/le_demo/skin/frontend/default/default/le_itemslider/images/icon-next.png">
</a>
<section id="section-line-1"><p>1</p></section>
<section id="section-line-2"><p>2</p></section>
<section id="section-line-3"><p>3</p></section>
<section id="section-line-4"><p>4</p></section>
<section id="section-line-5"><p>5</p></section>
</div><!-- /content -->
<nav>
<ul>
<li><span>Our Controls</span></li>
<li><span>Sony Playstation 4</span></li>
<li><span>Microsoft Xbox One</span></li>
<li><span>Nintendo Wii U</span></li>
<li><span>Microconsoles</span></li>
</ul>
</nav>
</div><!-- /tabs -->
</section>
JAVASCRIPT EDIT:
var $t=new CBPFWTabs(document.getElementById( 'tab1' ) )
document.getElementById('prev1').onclick=function(){
var current=$t.current;
var count=$t.items.length;
current--;
if(current<0) current=count-1;
$t._show(current);
};
document.getElementById('next1').onclick=function(){
var current=$t.current;
var count=$t.items.length;
current++;
if(current>=count) current=0;
$t._show(current);
};
I have a page with content that came from my database, but I want to be able to show that content like this http://www.htmldrive.net/items/show/244/Amazon-style-image-and-title-scroller-with-jQuery I've downloaded the script and I did (I think) like the tutorial, but it's not working at all. I'm sure I'm doing something stupid, but I don't know what.
<link href="css/amazon_scroller.css" rel="stylesheet" type="text/css"></link>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/amazon_scroller.js"></script>
<script language="javascript" type="text/javascript">
$(function() {
$("#amazon_scroller").amazon_scroller({
scroller_title_show: 'enable',
scroller_time_interval: '0',
scroller_window_background_color: "#CCC",
scroller_window_padding: '10',
scroller_border_size: '1',
scroller_border_color: '#000',
scroller_images_width: '150',
scroller_images_height: '100',
scroller_title_size: '12',
scroller_title_color: 'black',
scroller_show_count: '2',
directory: 'images'
});
});
</script>
<div id="amazon_scroller1" class="amazon_scroller">
<div class="amazon_scroller">
<div class="amazon_scroller_mask">
<ul>
<li>
<?php do { ?>
<div align="center" id="thumb"><img src="../legendofgames/documentos/games/<?php echo $row_GameData['strImage']; ?>" width="165" height="120"/>
<div align="center" id="gametext"><?php echo $row_GameData['strNome']; ?> </div>
</div>
<?php } while ($row_GameData = mysql_fetch_assoc($GameData)); ?>
</div>
</li>
</ul>
</div>
<ul class="amazon_scroller_nav">
<li></li>
<li></li>
</ul>
<div style="clear: both"></div>
</div>
The example code put each item (link + image) in a <li> while your code puts all item in the same <li>. Try:
<div id="amazon_scroller1" class="amazon_scroller">
<div class="amazon_scrolle r">
<div class="amazon_scroller_mask">
<ul>
<?php do { ?>
<li>
<div align="center" id="thumb"><img src="../legendofgames/documentos/games/<?php echo $row_GameData['strImage']; ?>" width="165" height="120"/>
<div align="center" id="gametext"><?php echo $row_GameData['strNome']; ?> </div>
</div>
</li>
<?php } while ($row_GameData = mysql_fetch_assoc($GameData)); ?>
</ul>
</div>
</div>
<ul class="amazon_scroller_nav">
<li></li>
<li></li>
</ul>
<div style="clear: both"></div>
</div>
I have 3 columns in my app. Each column has an unordered list. I am using Nestable to drag and drop list items between lists. The mark up is as follows:
<div class="row-fluid span12">
<div class="cf nestable-lists">
<div id="pjax-content">
<div class="span4">
<div class="dd" id="nestable1">
<ul class="dd-list">
<li class="dd-item dd3-item" data-id="123">
<div class="dd-handle dd3-handle">Drag</div>
<div class="dd3-content">
// list content
</div>
</li>
<li class="dd-item dd3-item" data-id="456">
<div class="dd-handle dd3-handle">Drag</div>
<div class="dd3-content">
// list content
</div>
</li>
</ul>
</div>
</div>
<div class="span4">
<div class="dd" id="nestable2">
<ul class="dd-list">
<li class="dd-item dd3-item" data-id="789">
<div class="dd-handle dd3-handle">Drag</div>
<div class="dd3-content">
// list content
</div>
</li>
<li class="dd-item dd3-item" data-id="1011">
<div class="dd-handle dd3-handle">Drag</div>
<div class="dd3-content">
// list content
</div>
</li>
</ul>
</div>
</div>
<div class="span4">
<div class="dd" id="nestable3">
<ul class="dd-list">
<li class="dd-item dd3-item" data-id="1213">
<div class="dd-handle dd3-handle">Drag</div>
<div class="dd3-content">
// list content
</div>
</li>
<li class="dd-item dd3-item" data-id="1415">
<div class="dd-handle dd3-handle">Drag</div>
<div class="dd3-content">
// list content
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
This works and I can drag and drop list items between each list. The problem is when I implement PJAX.
I have a few links that use PJAX to change the url i.e. each link will update the data or order of the data in each list based on the URL. The data updates within id="pjax-content" accordingly, so it works. This is a snippet of the server side code (using CI):
if (isset($_SERVER["HTTP_X_PJAX"])) {
echo $data['contents'];
} else {
// construct views when not PJAX
}
$data['contents'] contains the html as a string.
I have the following JS libraries too (I have tried removing some of these and the problem still exists):
<script type="text/javascript" src="jquery-1.9.0.js"></script>
<script type="text/javascript" src="bootstrap.js"></script>
<script type="text/javascript" src="nestable.js"></script>
<script type="text/javascript" src="nestable-settings.js"></script>
<script type="text/javascript" src="bootstrap-editable.js"></script>
<script type="text/javascript" src="jquery.cookie.js"></script>
<script type="text/javascript" src='jquery.pjax.js'></script>
<script type="text/javascript">
$(document).pjax('[data-pjax] a, a[data-pjax]', '#pjax-content');
$(document).on('pjax:send', function() {
console.log("before send");
});
$(document).on('pjax:complete', function() {
console.log("done!");
});
</script>
The Problem
When I click on one of the links PJAX works, the data is updated, the page doesn't reload and the console shows before send and done - so all is well. However, the nestable items are no longer selectable so a I can't drag and drop them. When I do a full page refresh it works and I can drag and drop.
I have compared the markup before and after (as that was a previous issue) and everything is the same.
Any suggestions on where I am going wrong? Or how to best debug this?
call nestable after your ajax complete function
$(document).on('pjax:complete', function() {
$('#nestable1,#nestable2,#nestable3').nestable();
});