Big task - problems with page refresh and ajax - php

I have a navigation which load dynamically content via ajax. But if I refresh the page or visit another url and go back the current content is away and I see the old content under the first menu tab.
Now I have to solve this problem.
The index.php include the elements header_registrated.inc.php, navigation.inc.php and main_container.inc.php
index.php:
<?php include("inc/incfiles/header_registrated.inc.php"); ?>
<?php
if (!isset($_SESSION["userLogin"])) {
echo "<meta http-equiv=\"refresh\" content=\"0; url=http://localhost/project\">";
}
else {
echo "";
}
?>
<?php include("inc/incfiles/navigation.inc.php"); ?>
<?php include("inc/incfiles/main_container.inc.php"); ?>
<?php include("inc/incfiles/footer.inc.php"); ?>
header_registrated.inc.php:
<?php
include ("inc/scripts/mysql_connect.inc.php");
session_start();
$user = $_SESSION["userLogin"];
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>title</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script language="JavaScript" src="js/framework/jquery.js"></script>
<script language="JavaScript" src="js/dropdown/window.js"></script>
<script language="JavaScript" src="js/navigation/navigation.js"></script>
</head>
<body>
</body>
navigation.inc.php:
<div class="navigation">
<ul>
<li id="1">
<div id="menuImage1" class="menuImage"></div>
<div class="menuText"><p>Punkt 1</p></div>
<div class="navigationDart"></div>
</li>
<li id="2">
<div id="menuImage2" class="menuImage"></div>
<div class="menuText"><p>Punkt 2</p></div>
</li>
<li id="3">
<div id="menuImage3" class="menuImage"></div>
<div class="menuText"><p>Punkt 3</p></div>
</li>
<li id="4">
<div id="menuImage4" class="menuImage"></div>
<div class="menuText"><p>Punkt 4</p></div>
</li>
<li id="5">
<div id="menuImage5" class="menuImage"></div>
<div class="menuText"><p>Punkt 5</p></div>
</li>
<li id="6">
<div id="menuImage6" class="menuImage"></div>
<div class="menuText"><p>Punkt 6</p></div>
</li>
</ul>
</div>
main_container.inc.php:
<div class="mainContainer">
<div class="containerHeader">
<div class="contentHeader">
</div>
</div>
<div class="contentContainer">
<div class="content">
</div>
<div class="advertisement">
</div>
</div>
</div>
Now the divs content, cnotentHeader and advertisement (in file main_content.inc.php) is filled via ajax. Also the navigation has some jquery effects which also have to be the same after page refresh.
navigation.js:
$(document).ready(function() {
$.get('inc/incfiles/content_container/header/1.php', function(data) {
$('.contentHeader').html(data);
});
$.get('inc/incfiles/content_container/content/1.php', function(data) {
$('.content').html(data);
});
$.get('inc/incfiles/content_container/advertisement/1.php', function(data) {
$('.advertisement').html(data);
});
var current = '1.php';
$(".navigation li").click(function() {
var quelle = $(this).attr('id') + ".php";
// the current content doesn't load again
if(current === quelle) {
return;
}
current = quelle;
// content
$(".content").fadeOut(function() {
$(this).load("inc/incfiles/content_container/content/" + quelle).fadeIn('normal');
})
// advertisement
$(".advertisement").fadeOut(function() {
$(this).load("inc/incfiles/content_container/advertisement/" + quelle).fadeIn('normal');
})
// header
$(".contentHeader").fadeOut(function() {
$(this).load("inc/incfiles/content_container/header/" + quelle).fadeIn('normal');
})
});
$(".navigation li").click(function() {
$(".menuImage").removeClass("menuImageActive1");
$(".menuImage").removeClass("menuImageActive2");
$(".menuImage").removeClass("menuImageActive3");
$(".menuImage").removeClass("menuImageActive4");
$(".menuImage").removeClass("menuImageActive5");
$(".menuImage").removeClass("menuImageActive6");
});
$("#1").mousedown(function() {
$("#menuImage1").addClass("menuImageClick1"); // new class on mouse button press
});
$("#1").mouseup(function() {
$("#menuImage1").removeClass("menuImageClick1"); //remove class after mouse button release
});
$("#1").click(function() {
$("#menuImage1").addClass("menuImageActive1");
});
$("#2").mousedown(function() {
$("#menuImage2").addClass("menuImageClick2"); // new class on mouse button press
});
$("#2").mouseup(function() {
$("#menuImage2").removeClass("menuImageClick2"); //remove class after mouse button release
});
$("#2").click(function() {
$("#menuImage2").addClass("menuImageActive2");
});
$("#3").mousedown(function() {
$("#menuImage3").addClass("menuImageClick3"); // new class on mouse button press
});
$("#3").mouseup(function() {
$("#menuImage3").removeClass("menuImageClick3"); //remove class after mouse button release
});
$("#3").click(function() {
$("#menuImage3").addClass("menuImageActive3");
});
$("#4").mousedown(function() {
$("#menuImage4").addClass("menuImageClick4"); // new class on mouse button press
});
$("#4").mouseup(function() {
$("#menuImage4").removeClass("menuImageClick4"); //remove class after mouse button release
});
$("#4").click(function() {
$("#menuImage4").addClass("menuImageActive4");
});
$("#5").mousedown(function() {
$("#menuImage5").addClass("menuImageClick5"); // new class on mouse button press
});
$("#5").mouseup(function() {
$("#menuImage5").removeClass("menuImageClick5"); //remove class after mouse button release
});
$("#5").click(function() {
$("#menuImage5").addClass("menuImageActive5");
});
$("#6").mousedown(function() {
$("#menuImage6").addClass("menuImageClick6"); // new class on mouse button press
});
$("#6").mouseup(function() {
$("#menuImage6").removeClass("menuImageClick6"); //remove class after mouse button release
});
$("#6").click(function() {
$("#menuImage6").addClass("menuImageActive6");
});
$("#1").click(function(){
$(".navigationDart").animate({
top: "16px"
}, 500 );
});
$("#2").click(function(){
$(".navigationDart").animate({
top: "88px"
}, 500 );
});
$("#3").click(function(){
$(".navigationDart").animate({
top: "160px"
}, 500 );
});
$("#4").click(function(){
$(".navigationDart").animate({
top: "232px"
}, 500 );
});
$("#5").click(function(){
$(".navigationDart").animate({
top: "304px"
}, 500 );
});
$("#6").click(function(){
$(".navigationDart").animate({
top: "376px"
}, 500 );
});
});
My idea was it to work with if(isset($_SESSION['ajaxresponse'])) but I don't no how to do this.
Please help me. I have the feeling that I've searched the whole web to find an answer.

I recomend using a library that ties PHP to jQuery through AJAX and can ease your problems a lot. the library is phery http://phery-php-ajax.net
just some optimization for your navigation.js file:
You'll need to centralize (or not) the AJAX in one file, to make it easier.
It can go on the top of your index.php
function load($data){
$r = new PheryResponse;
if (!isset($_SESSION["userLogin"])) {
return $r->redirect('http://localhost/project');
}
$path = 'inc/incfiles/content_container/';
if (isset($data['id'])){
$id = $data['id']. '.php';
} else {
if (!empty($_SESSION['id'])){
$id = $_SESSION['id'];
} else {
$id = '1.php';
}
}
$_SESSION['id'] = $id; // save the current ID and will load next time the person refreshes the page
ob_start();
include $path.'content/'.$id;
$content = ob_get_clean();
ob_start();
include $path.'advertisement/'.$id;
$ads = ob_get_clean();
ob_start();
include $path.'header/'.$id;
$header = ob_get_clean();
$r
->jquery('.advertisement')->html($ads)
->jquery('.contentHeader')->html($header)
->jquery('.content')->html($content)
;
// etc
return $r->this()->find('.menuImage')->addClass('menuImageActive'); // set the current menuImage of the LI element to menuImageActive
}
session_start();
Phery::instance()->set(array(
'load' => 'load'
))->process();
Since your JS it non-performant right now, I've redone it:
$(function() {
phery.remote('load');
var menu_image = $(".menuImage");
$(document)
.on('click', '.navigation li', function(event){
menu_image.removeClass("menuImageActive");
var top;
switch (event.currentTarget.id){
case '1':
top = "16px";
break;
case '2':
top = "88px";
break;
case '3':
top = "160px";
break;
case '4':
top = "232px";
break;
case '5':
top = "304px";
break;
case '6':
top = "376px";
break;
}
$(event.currentTarget)
.find(".navigationDart").animate({ top: top }, 500);
})
.on('mousedown', '.navigation li', function(event){
$(event.currentTarget).addClass('menuImageClick');
})
.on('mouseup', '.navigation li', function(event){
$(event.currentTarget).removeClass('menuImageClick');
});
});
and your navigation.inc.php will have to be:
<div class="navigation">
<ul>
<li id="1" data-remote="load" data-args="{'id':1}">
<div id="menuImage1" class="menuImage"></div>
<div class="menuText"><p>Punkt 1</p></div>
<div class="navigationDart"></div>
</li>
<li id="2" data-remote="load" data-args="{'id':2}">
<div id="menuImage2" class="menuImage"></div>
<div class="menuText"><p>Punkt 2</p></div>
</li>
<li id="3" data-remote="load" data-args="{'id':3}">
<div id="menuImage3" class="menuImage"></div>
<div class="menuText"><p>Punkt 3</p></div>
</li>
<li id="4" data-remote="load" data-args="{'id':4}">
<div id="menuImage4" class="menuImage"></div>
<div class="menuText"><p>Punkt 4</p></div>
</li>
<li id="5" data-remote="load" data-args="{'id':5}">
<div id="menuImage5" class="menuImage"></div>
<div class="menuText"><p>Punkt 5</p></div>
</li>
<li id="6" data-remote="load" data-args="{'id':6}">
<div id="menuImage6" class="menuImage"></div>
<div class="menuText"><p>Punkt 6</p></div>
</li>
</ul>
</div>
it seems your CSS is convoluted for the simplicity of your HTML. And you shouldn't be using a number for an ID, IDs needs to be You should be reusing css classes in this case, like
.menuImageActive {
/* common styles */
}
.menuImageClick {
/* common styles */
}
/* apply per ID */
#menuImage1.menuImageActive {
}
#menuImage1.menuImageClick {
}
#menuImage2.menuImageActive {
}
#menuImage2.menuImageClick {
}
#menuImage3.menuImageActive {
}
#menuImage3.menuImageClick {
}
#menuImage4.menuImageActive {
}
#menuImage4.menuImageClick {
}
#menuImage5.menuImageActive {
}
#menuImage5.menuImageClick {
}
#menuImage6.menuImageActive {
}
#menuImage6.menuImageClick {
}

Try out jQuery UI tabs if you need dynamically loaded tabs, it has built in AJAX support.
If you want back/forward support for AJAX events try out the jQuery address plugin.
There is a good answer on how to use jQuery UI tabs with back/forward history here:

Related

How to retain current tab after submit and jumpmenu - jQuery,PHP, html

How do you retain current tab after refresh,submit and jumpmenu using jquery. if its too troublesome, I don't mind using PHP and sessionstorage. but please don't use cookies. BTW, im not good in jquery. Below is example and extract. I also don't know why the jquery is greyed out below. I don't mind using PHP if jquery is causing too much trouble. tq. Please help.
(useracc-test.php)
<html>
<head>
<script src="jquery-1.11.3.min.js" type="text/javascript"></script>
jQuery(function($) {
$("<p>").html("Loaded at " + new Date()).appendTo(
document.body
);
showTab(location.hash || "Tab 1");
$("#nav a").click(function() {
var hash = this.getAttribute("href");
if (hash.substring(0, 1) === "#") {
hash = hash.substring(1);
}
location.hash = hash;
showTab(hash);
return false;
});
function showTab(hash) {
$("div.tab").hide();
$("#tab-" + hash).show();
}
});
<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css">
<script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<script type="text/javascript">
function MM_jumpMenu(targ,selObj,restore){ //v3.0
eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
if (restore) selObj.selectedIndex=0;
}
</script>
</head>
<body>
<div id="apDiv3">
<p> </p>
<p> </p>
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup" id="nav">
<li class="TabbedPanelsTab" tabindex="0">Tab 1</li>
<li class="TabbedPanelsTab" tabindex="0">Tab 2</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">
<p>
</p>
</p>
</div>
<div class="TabbedPanelsContent">
<form name="form2"
action="useracc-test.php" method="post" >
<p> </p>
<table width="500" border="0">
<tr>
<td>category</td>
<td><select name="jumpMenu" id="jumpMenu" onChange="MM_jumpMenu('parent',this,0)">
<option value="useracc-test.php">Category</option>
<option value="useracc-test.php">Type1</option>
<option value="useracc-test.php">Color</option>
<option value="useracc-test2-jumpmenu.php">Type2</option>
<option value="useracc-test2-jumpmenu.php">Hobby</option>
</select></td>
here below, i update another example from the internet. How do i change this and apply to my tab?
$('ul.tabs').each(function(){
// For each set of tabs, we want to keep track of
// which tab is active and its associated content
var $active, $content, $links = $(this).find('a');
// If the location.hash matches one of the links, use that as the active tab.
// If no match is found, use the first link as the initial active tab.
$active = $($links.filter('[href="'+location.hash+'"]')[0] || $links[0]);
$active.addClass('active');
$content = $($active[0].hash);
// Hide the remaining content
$links.not($active).each(function () {
$(this.hash).hide();
});
// Bind the click event handler
$(this).on('click', 'a', function(e){
// Make the old tab inactive.
$active.removeClass('active');
$content.hide();
// Update the variables with the new link and content
$active = $(this);
$content = $(this.hash);
// Make the tab active.
$active.addClass('active');
$content.show();
// Prevent the anchor's default click action
e.preventDefault();
});
});
try this
function showTab(hash) {
localStorage.setItem("hash", hash);//save hash value in localstorage
$("div.tab").hide();
$("#tab-" + hash).show();
}
$(document).ready(function () {
if (localStorage.getItem("hash")) {//check if value exist
showTab(localStorage.getItem("hash").toString());//set the saved tab
}
});

jQuery newsTicker pause on mousehover

I had already made a newsTicker in jQuery but need to pause on hover. What I have done so far follows:
a .php file newsticker.php
<html>
<head> <script src="include jquery files"> </script></head>
<div id="wrap">
<div id="head" class="block"></div>
<div id="content">
<div id="info" class="block">
<ul id="ticker">
<li>
<span>Title Lorem Ipsum 1</span>
<a href="#">some text that will be shown here.need to pause the
news on mouse hover and showing the news in different box</a>
</li>
<li>
<span>Title Lorem Ipsum 2</span>
<a href="#">some text that will be shown here.need to pause the
news on mouse hover and showing the news in different box</a>
</li>
</ul>
</div>
</div>
</div>
</body></html>
jQuery file common.js
$(document).ready(function() {
var ticker = function() {
setTimeout(function(){
$('#ticker li:first').animate({
marginTop: '-120px'},
800,
function() {
$(this).detach().appendTo('ul#ticker').removeAttr('style');
});
ticker();
}, 4000);
};
ticker();
});
How can I pause the news and show in different div box like found in here when mouse hovers?
run jsfiddle link here
First thing, there is a small bug inside. Then we use small trick.
var ticker = function()
{
setTimeout(function(){
$('#ticker li:first:not(.stop)').animate( {marginTop: '-120px'}, 800, function()
{
var me = $(this);
me
.clone(true)
.appendTo('ul#ticker')
.removeAttr('style')
me.remove();
});
ticker();
}, 4000);
};
ticker();
// simply toggle class on hover
// animation will not run with `li` having this class
$('#ticker li').hover(function() {
$(this).addClass('stop')
}, function() {
$(this).removeClass('stop')
});

Load new page in div part 2

I have managed to load the new page into the div (thanks to everyone for your help) but it looks pretty bad (got menu bar and logo, but I only wanted the content), so instead I need to load only a div from the new page. I tried a new script but got redirected to the new page. Please help.
<script>
jQuery(document).ready(function() {
jQuery('.stil_link_img a').click(function(){
var x = $(this).attr("href") + "#content_eco";
jQuery("#new_page").load(x);
return false;
});
});
</script>
<div id="pachete">
<?php
$result=mysql_query("SELECT* FROM imagini");
while($data=mysql_fetch_row($result)){
if( ($data[3]==1)&&($data[2]==2) ){ ?>
<div class="stil_link_img">
<img src="upload/<?php echo $data[1];?>">
</div>
<?php }
}?>
</div>
<div id="new_page">
//some content which should be replaced with my loaded page
</div>
jQuery(document).ready(function() {
jQuery('.stil_link_img a').click(function(){
var $pageContent = jQuery('<div/>').load($(this).attr("href"));
jQuery("#new_page").html(jQuery("#content_eco",$pageContent).html());
return false;
});
});
I assume #content_eco is the divisions ID in the new page(the url from href attribute).
or you can load just the content from the url and avoid the link postback as
<script>
jQuery(document).ready(function() {
jQuery('.stil_link_img a').click(function(){
var x = $(this).attr("rel") + " #content_eco";
jQuery("#new_page").load(x);
return false;
});
});
</script>
<div id="pachete">
<?php
$result=mysql_query("SELECT* FROM imagini");
while($data=mysql_fetch_row($result)){
if( ($data[3]==1)&&($data[2]==2) ){ ?>
<div class="stil_link_img">
<img src="upload/<?php echo $data[1];?>">
</div>
<?php }
}?>
</div>
<div id="new_page">
//some content which should be replaced with my loaded page
</div>
Hope this helps you.

Undefined constant php error message in laravel

I am new in MVC framework. I created an application in Laravel Framework & it was working fine. Now after some modification when I want to view the index page the following error is shown to me-
Message:
Use of undefined constant php - assumed 'php'
Location:
C:\wamp\www\alpha.team.com\laravel\view.php(354) : eval()'d code on
line 32
Here is my view code of index.blade.php
#layout('/layouts/layout')
<link href='http://fonts.googleapis.com/css?family=Neucha' rel='stylesheet' type='text/css'>
<div id="top">
#section('navigation')
<!-- <li class="active"><i class="icon-user"></i> My Profile</li> -->
<li><i class="icon-book"></i> Dashboard</li>
#parent
#endsection
</div>
#section('content')
<!-- For showing error message if any error occours-->
<?php if(Session::get('error')): ?>
<div class="alert alert-error">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>Warning!</strong> <?php echo Session::get('error'); ?>
</div>
<?php endif; ?>
<!-- For showing success message.-->
<?php if(Session::get('success')): ?>
<div class="alert alert-success">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>Well done!</strong> <?php echo Session::get('success'); ?>
</div>
<?php endif; ?>
<div class="field-section">
<div class="hero-unit">
<!-- <a id="logo" href="#"><img alt="TechIndyeah" src="/uploads/logo.png" style="vertical-align: top;"></a> -->
<h1 style="display:inline;">Team TechIndyeah</h1>
<ul class="teams" style="text-align:center;">
#foreach($departments as $dept)
<?php// print_r($dept); ?>
<li>
<?php echo $dept->name; ?>
</li>
#endforeach
</ul>
</div>
</div> <!-- field-section div ends here-->
<!-- <div class="container"> -->
<div class="wrapper">
<div class="hero-unit" id="bg-pattern">
<h1 class="home-tag"> Tech-ing India<span><p>The team of enthusiastic tech fanatics</p></span></h1>
<p class="home-ptag">We are a team of enthusiastic tech fanatics and yes we are Apple fanboys too. We have sailed out together on a small boat and we do live in what Seth Godin says, “Small is the next big”. We love technology and we love you. Our team is free, creative and always brimming with ideas.</p>
<div class="row" style="background:none;">
<div class="span8">
<h1 class="home-tag" >About Us</h1>
<p class="home-ptag">TechIndyeah has a team which is highly process oriented and has a sharp client-centric approach. Our mission is to help you to build your footprints in business. We are a team inspired by a vision and driven by technology. We are driven by an offbeat approach when it comes to client servicing and support. We have been serving our clients for a long time and have won accolades galore. We are a team and we believe in making our time resourceful so that our clients get the most out of us. We are a band of developers, designers and marketers who can take your business online and also combat the stiff competition from similar players in your domain. </p>
</div>
<div class="span3">
<object type="image/svg+xml" data="/img/logo.svg">
<img alt="TechIndyeah" src="/img/logo.png" style="vertical-align:top;">
</object>
</div>
</div>
<div class="row">
<div class="span4">
<!-- <a id="logo" href="#"><img alt="TechIndyeah" src="/uploads/logo.png"></a> -->
</div>
<!-- <div class="span6" id="caption">
<h3>Here We Are</h3>
</div> -->
</div>
<div class="row">
<?php $something = $errors->all();
if(!empty($something)): ?>
<div class = "alert alert-error">
<button type="button" class="close" data-dismiss="alert">×</button>
#foreach ($errors->all('<p>:message</p>') as $input_error)
{{ $input_error }}
#endforeach
</div>
<?php endif; ?>
</div>
<!-- For showing all employee name in the front page.. Showcasing them..-->
<div id="hero-unit">
<script type="text/javascript">
//The departments are randomly comming in the page when it is first loaded..
(function($) {
// Get the list items and hide them
var items = $(".teams > li").css({opacity:0});
// Shuffle them
shuffle(items);
// Start the fade-in queue
nextItemFade(items);
// Animation callback to start next fade-in
function nextItemFade(items) {
// Fade in the first element in the collection
items.eq(0).animate({opacity:1}, 400, function() {
// Recurse, but without the first element
nextItemFade(items.slice(1));
});
}
// Shuffles an array
// Based on http://jsfromhell.com/array/shuffle
function shuffle(a) {
var j, // Random position
x, // Last item
i = a.length; // Iterator
// Loop through the array
while(i) {
// Select a random position
j = (Math.random() * i) | 0;
// Get the last item in the array
x = a[--i];
// Swap the last item with the item at the selected position
a[i] = a[j];
a[j] = x;
}
return a;
}
/* Minified version
function shuffle(a) {
for(var j, x, i = a.length; i; j = (Math.random() * i) | 0, x = a[--i], a[i] = a[j], a[j] = x);
return a;
} */
})(jQuery);
$(".nav1 li").each(
function(intIndex) {
var l = Math.floor(Math.random() * $(".nav1").width());
var t = Math.floor(Math.random() * $(".nav1").height());
$(this).css("left", l);
$(this).css("top", t);
$(this).on(
"click",
function() {
alert("l=" + l + " t=" + t);
}
);
}
);
$(".nav1 li").each(
function(intIndex) {
var l = Math.floor(Math.random() * 940);
var t = Math.floor(Math.random() * 500);
$(this).css("left", l);
$(this).css("top", t);
$(this).on(
"click",
function() {
alert("l=" + l + " t=" + t);
}
);
}
);
</script>
<style type="text/css">
.nav1
{
position:relative;
}
.nav1 li
{
padding: 10px;
position:absolute;
}
</style>
</div> <!-- #hero-unit ends here-->
<!-- </div> mucarousel div ends here -->
<div class="member-list">
<!-- <object type="image/svg+xml" data="/img/vector-tree2.svg"> -->
<!-- <img alt="TechIndyeah" src="/img/vector-tree2.png" style="vertical-align:top;"> -->
<!-- </object> -->
#foreach($departments as $dept)
<div id="<?php echo implode('_',explode(' ',$dept->name));?>" class="demo">
<ul class="member">
<?php $users = User::where('department_id','=',$dept->id)->get();
// $users = User::where('department_code','=',$dept->code)->get();
?>
#foreach($users as $user)
<li class="new-element" style="display:inline-block;" rel="tooltip" data-placement="right" data-original-title="<?php echo $user->first_name." ".$user->last_name;?>">
<a href="/home/view/<?php echo $user->username;?>" rel="tooltip" data-placement="right" href="#" data-original-title="<?php echo $user->first_name." ".$user->last_name."</br> ".$user->designation;?>">
<img class="hover-img" src="http://graph.facebook.com/<?php echo $user->facebook_id;?>/picture?type=large">
</a>
</li>
#endforeach
</ul>
Back To Top
</div>
#endforeach
<script type="text/javascript">
$(window).scroll(function(){
if ($(this).scrollTop() > 50) {
$('.scrollup').fadeIn();
} else {
$('.scrollup').fadeOut();
}
});
</script>
<script type="text/javascript">
//all links which start with a # will have an animated scroll to the target.
$('a[href^="#"]').on('click.smoothscroll',function (e) {
e.preventDefault();
var target = this.hash,
$target = $(target);
// console.log($target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top - 10
}, 900, 'swing', function () {
window.location.hash = target;
});
});
$('.new-element').children('a').tooltip();
</script>
</div>
<h1 style="text-align:center;font-family: 'Lato light', sans-serif;text-shadow: 2px 1px #848686;">TechIndyeah Software Pvt. Ltd.</h1>
</div>
</div>
#endsection
</div>
I cannot understand. Please help.
I'm not familiar with Laravel, but it seems that an eval() in a file named view.php is rendering a template. So my guess is that someplace in your template (whatever template is being rendered) you have php where you really mean 'php'.
For example:
echo $data[php]; //you have this
echo $data['php']; //but it should be this
//or
if(php == $var){} //you have this
if('php' == $var){} //but it should be this
Can you share some of the code that is in your view.php file?
You're doing something wrong on line 32 of that file, so it would be very helpful if we can see what the code actually is :)

post in jquery do not update element

EDIT WITH NEW JAVASCRIPT
I am trying to make a "I like this" kinda function but I have a small problem.
I am using this small javascript
function coolIt(designid) {
$.post('cool.php', {designid:designid}, function(data) {
//alert(data);
$('#cool_'+designid).text(data);
});
}
And this HTML where the "Like" button is
<span class="like"><span id="cool_'.$row["id"].'">('. $row["cools"] .')</span></span>
The cool.php runs through this:
function UpdateCool($design_id) {
$fields_up = array("cools" => 'cools + 1');
$fields_down = array("cools" => 'cools - 1');
$sql = SQLHandling::updateSQL('tdic_designs', 'id = '. $design_id .'', $fields_up);
SQLHandling::SQLquery($sql);
}
and that works perfectly. It updates the cools field with one increasing value.
When I run alert(data) on the javascript it returns nothing and the #cool_1 span element disappears.
Any idea what I might do wrong?
HTML OUTPUT:
<script type="text/javascript">
function coolIt(designid) {
$.post('cool.php', {designid:designid}, function(data) {
alert(data);
$('#cool_'+designid).text(data);
});
}
</script>
</head>
<body>
<div id="allContainer">
<div id="topArea">
<div id="topNaviArea">
<ul id="navi">
<li class="home">Home</li>
<li class="categories">Categories</li>
<li class="about">About</li>
<li class="faq">FAQ</li>
<li class="submit">Submit</li>
<li class="contact">Contact</li>
</ul>
</div>
</div>
<div id="contentBox">
<div id="login">Login // Register</div> <div id="mainContent">
<h1>// Home // Categories // HTML / CSS</h1>
<div id="catMenu">
<ul>
<li>3D</li><li>Graphic</li><li>HTML / CSS</li><li>Paintings</li><li>Photography</li><li>Portals</li><li>Webshops</li>
</ul>
<h2>1 designs<br />in this category</h2>
</div>
<div id="rightContentBox">
<ul id="displays">
<li class="displayWindow"><div class="dpwImage"><figure><img src="/testen/designs/thatdesigniscool.jpg" width="280" height="175" alt="That Design Is Cool" target="_blank"></figure></div><div class="dpwBox"><div class="dpwLeft"><span class="title">That Design Is Cool</span><span class="comments">Comments (1)</span></div><div class="dpwRight"><span class="like"><span id="cool_1">(29)</span></span></div></div> </li>
</ul>
</div>
</div>
</div>
</div>
I guess you are replacing the whole contents of div with just the server response. Why don't you append?
$('.likeIt').livequery("click",function(e){
var designid = $(this).attr('id').replace('design_id-','');
$.post('cool.php?design_id='+designid, {}, function(response){
$('#cool_'+designid).html($('#cool_'+designid).html() + response); // See if this works!
});
});
See if this helps! :)
I got it solved by editing cool.php to the following:
<?php
session_start();
ini_set("display_errors", 1);
define("INCLUDE_DIR", "includes/classes");
/* Autoload classes when used */
function __autoload($class_name) { include(INCLUDE_DIR.'/class.'. strtolower($class_name) . '.php'); }
SQLHandling::SQLconnect();
if($_POST["designid"] != '') {
$alreadyExist = mysql_num_rows(mysql_query('SELECT id FROM tdic_voted WHERE designid="'.(int)$_POST['designid'].'" AND ip="'.$_SERVER['REMOTE_ADDR'].'"'));
if($alreadyExist == 0) {
mysql_query(' UPDATE tdic_designs SET cools = cools+1 WHERE id="'.(int)$_POST['designid'].'"');
$num = mysql_fetch_row(mysql_query(' SELECT cools FROM tdic_designs WHERE id="'.(int)$_POST['designid'].'" LIMIT 1'));
echo $num[0];
mysql_query(' INSERT INTO tdic_voted (designid, ip) VALUES ("'.(int)$_POST['designid'].'","'.$_SERVER['REMOTE_ADDR'].'")');
} else{
echo 'You already think this is a cool design!';
}
}
?>

Categories