This question already has answers here:
php $_GET and undefined index
(12 answers)
Closed 9 years ago.
I want to open a page with ajax, and ajax to show the link in the browser url. Of course, the page does not reload the whole page, only the content.
Here is my code., but I keep on having an error "Notice: Undefined index: rel in C:\xampp\htdocs\www\html5-history-api\menu1.php on line 2"
I'd like this error to go away...
header.php :
<br>Header Content from header.php</br></br>
<style>
#menu{font-size:20px;}
#content{font-size:30px;}
</style>
<script language="javascript" src="jquery-1.4.4.min.js"></script>
<script>
$(function(){
$("a[rel='tab']").click(function(e){
//e.preventDefault();
/*
if uncomment the above line, html5 nonsupported browers won't change the url but will display the ajax content;
if commented, html5 nonsupported browers will reload the page to the specified link.
*/
//get the link location that was clicked
pageurl = $(this).attr('href');
//to get the ajax content and display in div with id 'content'
$.ajax({url:pageurl+'?rel=tab',success: function(data){
$('#content').html(data);
}});
//to change the browser URL to 'pageurl'
if(pageurl!=window.location){
window.history.pushState({path:pageurl},'',pageurl);
}
return false;
});
});
/* the below code is to override back button to get the ajax content without reload*/
$(window).bind('popstate', function() {
$.ajax({url:location.pathname+'?rel=tab',success: function(data){
$('#content').html(data);
}});
});
</script>
<div id='menu'>
<a rel='tab' href='http://localhost/www/html5-history-api/menu1.php'>menu1</a> |
<a rel='tab' href='http://localhost/www/html5-history-api/menu2.php'>menu2</a> |
<a rel='tab' href='http://localhost/www/html5-history-api/menu3.php'>menu3</a>
</div>
And menu1.php (menu2 and 3 are the same as 1)
<?php
if($_GET['rel']!='tab'){
include 'header.php';
echo "<div id='content'>";
}
?>
menu1 content in menu1.php
<?php
if($_GET['rel']!='tab'){
echo "</div>";
include 'footer.php';
}?>
So yeah, the code works, but I don't like having an error in my code and I don't know what to do.
Thanks.
Trying updating it from:
if($_GET['rel']!='tab'){
To this:
if(isset($_GET['rel']) ? $_GET['rel']!='tab')){
See if that fixes it.
As the warning says, you don't have an array index defined. your code should be
if (isset($_GET['rel']) && ($_GET['rel'] != 'tab')) {
Related
Duplicate get_header() Problem!!!
I insert, using jQuery, single-{custom-post-type}.php into an ajax container in my front-page. My single-{custom-post-type}.php use the wp function get_header() and my front-page is using get_header() to, so everything is already loaded. So when I load my custom posts It crash.
If I remove get_header() from my single-{custom-post-type}.php It loads okay into my front-page. But when I open in a new page nothing is loaded because I don't have my header.php to load all the styles, scripts, etc.
I already try with the conditional tags but it doesn't work.
Any idea?
I'm doing this:
In my frontpage I send the url using data-href
<a class="more-info" href="#" data-href="<?php echo the_permalink()?>" ></a>
Then in my javascript:
$( ".more-info" ).click(function(e){
e.preventDefault();
var page = $(this).attr('data-href');
lateralAnimation.init(page);
});
init : function(page){
$('#ajax-inserted').load(page)
}
//#ajax-inserted is where I load the content in my frontpage.
For your single-{custom-post-type}.php you could check for a query variable that you add on when you use jquery e.g "http://example.com/single-{custom-post-type}.php?isAjax=1"
Then in the php just do the following:
if(!isset($_GET['isAjax']) && $_GET['isAjax'] != 1)
{
get_header();
}
Hope that answers your question.
EDIT: For the ajax call, if you are using .load(), then
$( "#divtoload" ).load( "single-{custom-post-type}.php?isAjax=1" );
Should do it
EDIT 2:
Try this then, this concatenates the variable to the url
$( ".more-info" ).click(function(e){
e.preventDefault();
var page = $(this).attr('data-href');
lateralAnimation.init(page);
});
init : function(page){
//changed this line
$('#ajax-inserted').load(page+"?isAjax=1)
}
//#ajax-inserted is where I load the content in my frontpage.
Alternatively
<a class="more-info" href="#" data-href="<?php echo the_permalink()?>?isAjax=1" ></a>
I'm looking for the easiest way to add a simple like button to my site. Basically, a button that, when clicked - changes to a new graphic (letting you know you clicked it), can't be clicked again, and sends to a php script so the server knows what you liked.
I thought a good technique might be putting a like button inside an iframe so you can click it and the php page could just echo 'thanks for liking this' - but the problem is the iframe has to have a source. I don't want a ton of external files loading into each page. Is there any way I could just have an iframe tag and put HTML inside it without it being external?
Hopefully this makes sense. I do not know your server structure, so its hard for me to build a complete example but this should get you off your feet!
File: Index.php
// query the database and check to see if there is a record for this content piece and ip address
// select count() from statistics where contentId='1' and ip='0.0.0.0' limit 1;
$contentLiked = false;
?>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script src="site.js"></script>
</head>
<body>
<? if(!$contentLiked): ?>
like
<? else: ?>
unlike
<? endif ?>
</body>
</html>
File: site.js
$(document).ready(function() {
$('.likeButton').click(function() {
var contentId = $(this).attr('rel');
var link = this;
if(!$(link).hasClass('liked')) {
$.post("like.php", { Id: contentId }).done(function(data) {
if(data) {
$(link).addClass('liked');
$(link).html('liked');
}
});
}
});
});
File: like.php
<?
$contentId = $_POST['Id'];
$timestamp = time();
$usersIP = $_SERVER['REMOTE_ADDR'];
// php code to update the database
// insert: contentId, timestamp, ip address
// if injected then echo / print true;
echo 'true';
?>
You should use jquery animate. It allows you to create an animation on a HTML element that you choose with jquery.
With Jquery, using the 'click' event, you can use the animate effect, and have something like this:
$("#my-button").click(function(){
$(this).animate({
height: 'toggle'
}, 500, function(){
$(this).animate({
height: 'toggle'
}, 500);
});
});
Please see the following example of doing that
Click Me
<script src="https://raw.github.com/cowboy/jquery-hashchange/v1.3/jquery.ba- hashchange.js"></script>
<script type="text/javascript">
$(window).hashchange(function () {
//
});
</script>
When Click Me is clicked the URL looks like this "www.mydomain.com/#create=1".
What I am trying to do is us the $_GET in PHP to bring down the parameter. Ex:
<?php echo $_GET['create'];?>
Using the
Click Me
works, but it reloads the page and that is what I am trying to avoid. Any help would be greatly appreciated.
PHP runs on the server. A request has to be sent to the server for PHP to know what is in the query string. You don't need to reload the whole page but you will need to send something to the server, e.g. in an AJAX request and do something with the result.
//java script code
$("#clickme").click(function(event) {
var arr = $(this).attr('href').split('#');
var arr=(arr[1]);
event.preventDefault();
$("#content").load("data.php?"+ arr);
});
//html code
<a id="clickme" href="#create=1">Click Me</a>
<div id="content"></div>
// php code
data.php
There is a new future for that:
window.history.pushState("Remember me!", "Changing the get Parameter...", "?create=1");
You can apply this to all links by using this:
$("a").click(function() {
if ($(this).attr("href").substr(0, 1) != "#") {
$("body").load($(this).attr("href"));
window.history.pushState("Remember me!", "Nothing special", $(this).attr("href"));
return false;
}
});
I have a main page with lots of content, one piece of content is a small calendar.
For the Calendar I have a Previous month and next month link. What I want to do is switch between months without having to refresh the page.
<div id='cal_wrapper'>
<a href='main.php?month=$m&year=$y' class='selector'>Previous month</a>
<a href='main.php?month=$m&year=$y' class='selector'>Next month</a>
<?PHP
echo $calendar;
?>
</div>
Javascript is as follows:
<script type="text/javascript">
$(document).ready(function() {
$('#cal_wrapper a.selector').click(function(e){
$('#cal_wrapper').load( $(this).attr('href') );
e.preventDefault();
});
});
</script>
What is happening is when I click on either prev/next link the entire page is reloaded into the cal_wrapper div..??? I'm stuck.
Maybe try putting e.preventDefault() first, i.e.:
$('#cal_wrapper a.selector').click(function(e){
e.preventDefault();
$('#cal_wrapper').load( $(this).attr('href') );
});
If I understand your question right, I think you want $(this).attr('href') to refer to the href attribute of $('#cal_wrapper a.selector'). Instead what is happening, is that $(this), at that point, actually is referring to the $('#cal_wrapper') element, not the $("#cal_wrapper a.selector') element.
If this is correct, what you may want to do is store $('#cal_wrapper') in a temporary variable, i.e,
$('#cal_wrapper a.selector').click(function(e) {
var o = $(this);
$('#cal_wrapper').load($(o).attr('href'));
e.preventDefault();
});
Why am I getting an error in Firebug "u is undefined"?
My page consists of a display of photos and photo gallery as a special separate section in the PHP code divided using the "break".
Photos and photo galleries are displayed using the "Fancybox.js".
The first time when I try to open a photo, everything works fine but when I do it again after I refresh the page the Firebug display error "u is undefined".
The Jquery for the menu that I'm using for display these separate part of the page:
$(document).ready(function(){
$(".menu_rfr").bind('click', function() {
$("#main").html('<img src="img/spin.gif" class="spin">');
location.replace($(this).attr('rel'));
});
$(".menu_clickable").bind('click', function() {
$("#main").html('<img src="img/spin.gif" class="spin">');
$("#main").load($(this).attr('rel'), function(event) {
});
$(".menu_clickable").unbind("click");
});
});
The simplified PHP code looks like:
<?
if (!isset($a)) $a = '';
switch($a)
{
case 1:
default:
?>
<div class="menu_clickable prof_link" id="prof_info" rel="?a=2">Photos</div>
<div class="menu_clickable prof_link" id="prof_info" rel="?a=3">Gallery</div>
<div id="main"></div>
<?
break;//photos
case 2:
?>
<script type="text/javascript">
$("a.group").fancybox({
'titlePosition' : 'over',
'overlayShow':false
});
</script>
<?
<img src="tmb/1.jpg" border="0">
<?
break;
case 3: // photo gallery
?>
<script type="text/javascript">
$("a.groupg").fancybox({
'titlePosition' : 'over',
'overlayShow':false
});
</script>
<?
<img src="tmb/2.jpg" border="0">
<?
break;
}
?>
As I said this is a simplified code, and probably there are some errors in it. I just wanted to show where and how I'm using Fancybox.
Is there a conflict between the jquery code for the menu at the top of the page and this for fancybox or there is some other reason why I keep getting an error in Firebug "u is undefined" after opening the other part of the PHP page and attempts to re-opening photos?
View your HTML source and make sure you don't have FancyBox declared twice. I just had the exact same error pop up in firebug and this is what I found in my source:
<script language="javascript" type="text/javascript" src="./ext_scripts/jquery.fancybox-1.3.1/fancybox/jquery.fancybox-1.3.1.pack.js"></script>
<link rel="stylesheet" href="./ext_scripts/jquery.fancybox-1.3.1/fancybox/jquery.fancybox-1.3.1.css" type="text/css" media="screen" />
<script language="javascript" type="text/javascript" src="./ext_scripts/jquery.fancybox-1.3.1/fancybox/jquery.fancybox-1.3.1.pack.js"></script>
Not sure exactly why it happened, but if you nest your include and require_onces in your PHP like I unfortunately did, you can wind up with some very funky Javascript references.
You probably have the fancybox.js script included twice which is causing the issue. Please check all your files and remove the the ones that are not required.
I have this same bug as well - I think it is due to the the 'loading' divs being reset by the cleanup code. I have a VERY nasty fix:
Change:
if ($("#fancybox-wrap").length) {
return;
To: (To skip the multiple-init check)
if (false && $("#fancybox-wrap").length) {
And add:
$.apzFancyboxInit = fancybox_init;
after 'fancybox_init = function() {'
What this does is allow us to call the initialisation routine multiple times; and saves the function pointer to this routine in a global variable. All we have to do now is make sure we call the $.apzFancyboxInit function every time a fancybox is closed. The best place to do this is in the onClosed function handler; so (in my case), my calls look like this:
$.fancybox(
{
'showCloseButton' : true,
'type' : 'ajax',
'onClosed' : function()
{
$.apzFancyboxInit();
},
If you are using a "ripped" template you may find that there are the fancybox generated div written in tho the html template right above the </body> tag.
check if your html output has a div with the id of fancybox-wrap if you have JavaScript disabled, and remove that.