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>
Related
I have a function where you click on something and then a resizable div toggles with content loaded (.load function).
$("#menucontent").load("loader.php?c=menup");
$("#menucontent").draggable();
$("#menuc").click(function(){
$("#menucontent").toggle(); //
$("#menucontent").resizable();
});
Basically this loads the data from loader.php to the div with id menuc.
So far so good.. Data retrieved from loader.php :
echo '<a class="offertezoek" href="#">ZOEK OFFERTE<div style="display:none;" id="offertezoek"><input type="text" id="offertezoek" name="offertezoek">TEST</div></a><br /><br />';
Now the problem comes, I want to create a function for the data loaded.
The data gets loaded but the function does not work.
Is this because the page is already ready and Jquery executed all the javascript before the data was in the div offertezoek (got added afterwards with .load("loader.php") ??
NEW FUNCTION :
$(".offertezoek").click(function(){
$("#offertezoek").toggle(); //
});
Try this
$(document).on('click', '.offertezoek', function(){
$("#offertezoek").toggle(); //
});
im having small image gallery that uses fancybox. So on each image there is a hover and popup effect. Below is my code
<div class="one-third column hover">
<a href="large/28crowview_ld.jpg" class="image-box">
<div class="photo">
<span class="text"><span class="anchor"></span></span>
</div>
<img src="large/28crowview_ld.jpg" height="170px" width="260px"/>
</a>
</div>
the above code works perfectly.
but im using a ajax controller that returns the above code using an echo
echo '<div class="one-third column hover">
<a href="large/28crowview_ld.jpg" class="image-box">
<div class="photo">
<span class="text"><span class="anchor"></span></span>
</div>
<img src="large/28crowview_ld.jpg" height="170px" width="260px"/>
</a>
</div>';
but when i use the echo tag the images are displayed but non of the hover effects are visible. it was very odd. and i also noticed the same issue on my social bar.
It works perfectly when i use it in a html view. But when i echo, i see the code in the source but the icons are not visible
echo '<div class="supersocialshare" data-networks="facebook,google,twitter,linkedin,pinterest" data-url="'.$share.'" data-orientation="line"></div>';
all the images are placed correctly, no js conflicts.
Below is the java script im using
<script type="text/javascript">
$(document).ready(function() {
var track_click = 0; //track user click on "load more" button, righ now it is 0 click
var total_pages = <?php echo $total_pages; ?>;
$('#results').load("<?php echo base_url() ?>fetch_pages", {'page':track_click}, function() {track_click++;}); //initial data to load
$(".load_more").click(function (e) { //user clicks on button
$(this).hide(); //hide load more button on click
$('.animation_image').show(); //show loading image
if(track_click <= total_pages) //make sure user clicks are still less than total pages
{
//post page number and load returned data into result element
$.post('<?php echo base_url() ?>fetch_pages',{'page': track_click}, function(data) {
$(".load_more").show(); //bring back load more button
$("#results").append(data); //append data received from server
//scroll page to button element
$("html, body").animate({scrollTop: $("#load_more_button").offset().top}, 500);
//hide loading image
$('.animation_image').hide(); //hide loading image once data is received
track_click++; //user click increment on load button
}).fail(function(xhr, ajaxOptions, thrownError) {
alert(thrownError); //alert any HTTP error
$(".load_more").show(); //bring back load more button
$('.animation_image').hide(); //hide loading image once data is received
});
if(track_click >= total_pages-1)
{
//reached end of the page yet? disable load button
$(".load_more").attr("disabled", "disabled");
}
}
});
});
</script>
inside fetch_pages
$page_number = filter_var($this->input->post('page'), FILTER_SANITIZE_NUMBER_INT, FILTER_FLAG_STRIP_HIGH);
//throw HTTP error if page number is not valid
if(!is_numeric($page_number)){
header('HTTP/1.1 500 Invalid page number!');
exit();
}
$item_per_page = 5;
//get current starting point of records
$position = ($page_number * $item_per_page);
$cottages = $this->properties->getstuff($sub_location,$position, $item_per_page);
foreach ($props as $cots):
echo'<div class="container section" id="'.$cots["id"].'">
<div class="one-third column hover">
<a href="'.$cots["image_url"].'" class="image-box">
<div class="photo">
<span class="text"><span class="anchor"></span></span>
</div>
<img src="'.$cots["image_url"].'" height="170px" width="260px"/>
</a>
</div>';
endforeach;
Im building this project using codeigniter, php and jquery. Any help will be appreciated.
You seem to have some serious problems understanding the overall architecture of a web application, what is happening on the browser of your client and what is happening on the server, what php does, and so on. You should read up on that.
However, your problem is most likely related to the fact that your hover and popup effects are being accomplished by something equivalent to this:
$(".hover").on("hover",function () {
// BLAH
});
If this is the case, then any elements with class hover loaded after the event handler has been attached (that is, through ajax) will not have that event handler attached to them, a simple fix would be to attach the event handler to the container and use a delegated event handler, something like this:
$(document).on("hover",".hover",function () {
// This handler is attached to the document but applies to any .hover elements inside it
});
Another fix would be to run whatever function attaches your "fancybox" functionality to an element after the element has been loaded through ajax. Hard to get it right without some reference code but i assume it would be something like:
$.get(url, function (data) {
var elem = $(data);
$("#container").append(elem);
elem.fancybox();
});
please provide you JavaScript code, I would like to throw my cent. I bet you are using hover method instead of live hover or on hover functions
just like the following :
jQuery('#div').click(...); // this will work fine if you place your code in page not posted back from ajax request or dynamically created
jQuery('#div').live('click',...); // this will work even if the element was created dynamically or from ajax request.
jQuery "live" link
jQuery "On" link
one more thing, be careful the live function is deprecated and removed from jQuery 1.9
According to anpsmn comment i had to re initialize the complete fancybox plugin within
$(window).load(function() {
it worked perfectly..
I'm trying to load Javascript into a div that has been generated through AJAX and filled with an external PHP file.
Here is the navigation I am using to load the AJAX div, and my PHP content:
<div id="portfolioContent">
<div id="portfoliotabContainer">
<ul id="portfolioTabs">
<li><a id="dashboardTab" href="./portfolio/portfoliocontent/dashboard.php">Dashboard</a></li>
<li><a id="casedetailsTab" href="./portfolio/portfoliocontent/casedetails.php">Case Details</a></li>
<li><a id="correspondenceTab" href="./portfolio/portfoliocontent/correspondence.php">Correspondence</a></li>
<li><a id="pleadingTab" href="./portfolio/portfoliocontent/pleading.php">Pleading</a></li>
<li><a id="discoveryTab" href="./portfolio/portfoliocontent/discovery.php">Discovery</a></li>
<li><a id="expensesTab" href="./portfolio/portfoliocontent/expenses.php">Expenses</a></li>
<li><a id="indexTab" href="./portfolio/portfoliocontent/docindex.php">Document Index</a></li>
</ul>
</div>
I need the hyperlink to load and fill the generated div, but also call an external Javascript file so my scripts work within the generated div.
Here is my script:
$(function () {
$("#portfolioTabs li a").live("click", function () {
var pagecontent = $(document.createElement("div"));
pagecontent.load(
$(this).attr("href"));
$(".insideContent").html(pagecontent);
$(".portfolioContent").animate({
height: "110%"
});
$(".insideContent").animate({
bottom: "0px"
});
return false;
});
});
I've looked into this and I understand that I can load is dynamically, but I'm unsure of the simplest way to achieve that.
The problem seems to be that you are assigning the content to another element when it is not loaded yet.
You can use the callback function of load for that:
pagecontent.load($(this).attr("href"), function() {
// this gets executed when the `load` is complete
$(".insideContent").html(pagecontent);
$(".portfolioContent").animate({
height: "110%"
});
$(".insideContent").animate({
bottom: "0px"
});
});
You should use something like $.ajax. This allows you to asynchronously load content into your page without a page reload, which sounds like what you want.
Within your event handler, you would probably want something like
var url = $(this).attr("href");
$.ajax({
url: url,
success: function(data) {
$(".insideContent").html(data);
}
});
Note that everything that depends on the data loading must be placed within the anonymous function where I update the html.
I was wondering if someone would be able to help or point me in a direction. I am looking to make a web application like a quiz. What I need is to be able to load dynamic content off a dynamical created button or href in this case that will link to the other content. So far it doesnt seem to be functioning in that i get a page not found every time i click the button. doesnt seem to be passing the .php through the name. I have tested this outside of the dynmaic content div and it works fine but i really need it to work inside.
What I have so far:
index.php
<body>
<div class="container_12">
<div id="content">
<!--dynamic content loads here-->
</div>
</div>
</body>
Login.php
<h1> Login Page </h1>
<p> this is a test to c if works </p>
<a href='Suitable'>Hello</a> <!--button that doesnt work-->
general.js
$(document).ready(function() {
//initial
$('#content').load('Login.php');
//Handle widget Clicks
$('div#content a').click(function() {
var page = $(this).attr('href');
$('#content').load('pages/' + page +'.php');
return false;
});
});
Suitable.php
<h1> Working </h1>
<!-- content thats not loading off button-->
you should delegate the click event for dynamically loaded elements, try the following:
$('#content').on('click', 'a', function(e) {
e.preventDefault()
var page = $(this).attr('href');
$('#content').load('pages/' + page +'.php');
});
$(document).ready(function() {
//initial
$('#content').load('Login.php', function(){
//Handle widget Clicks
$('div#content a').click(function() {
var page = $(this).attr('href');
$('#content').load('pages/' + page +'.php');
return false;
});
});
});
Explanation:
load is asynchronous. JS engine does not wait for it to complete before it goes to the next line. The result is that when your click binding executes there is no a in div#content, so the selector returns an empty array and no binding happens.
Try Live instead of click
//Handle widget Clicks
$('div#content a').live('click',function() {
var page = $(this).attr('href');
$('#content').load('pages/' + page +'.php');
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();
});