I have tried the following code in single.php file in wordpress. I used these chunk of code displaying related posts of current post.
<ul class="step-nav clearfix">
<li class="prev button">
<?php echo previous_post_link('%link', 'Previous'); ?>
</li>
<li class="next button">
<?php echo next_post_link('%link', 'Next'); ?>
</li>
</ul>
It shows next and previous link. Now the problem is that I am not getting any idea of how to write jquery code which will slide all next or previous post wihout changing the url of browser. Please help.
You can use ajax loading to laod the content if you do not want the url to be changed and the new posts slideIn..
Here is a sample code for ajax navigation I am using, you can modify it accordingly.
// Ajaxed navigation On Page
jQuery(document).ready(function(){
jQuery('#latestvideo-wrapper').append('<div class="video-loader"></div>');
jQuery('.videosarticle a').live('click', function(e) {
jQuery('#latestvideo-wrapper .video-loader').fadeIn(500);
e.preventDefault();
var link = jQuery(this).attr('href');
jQuery('#latestvideo-wrapper #latestvideobox').fadeOut(100).load(link + ' #latestvideobox', function() {
jQuery('#latestvideo-wrapper .video-loader').fadeOut(400);
jQuery('#latestvideo-wrapper #latestvideobox').fadeIn(500);
});
});
});
According to this code the previous content is fading Out and the new content is fading In.
Related
I am kinda new in Ajax and jQuery the problem is that I have a folder pages and in it are php pages with content divs. I want to reload the container div with the content instead of the whole page i tried many things but nothing seems to help. this is a part of how my index.php looks like:
<?php include ('inc/nav.php'); ?>
<div id="container">
<?
$type = $_GET["type"];
switch ($type) {
case "about" :
include "pages/about-us.php";
break;
case "contact":
include "pages/contact.php";
break;
default :
include "pages/homepage.php";
}
?>
</div>
In the navigation the link looks like this:
<ul class="main-menu">
<li class="url">Homepage</li>
<li class="url">About us</li>
<li class="url">Contact</li>
</ul>
I tried to get the content that's in pages/about-us.php into the <div id="container"></div> but it's not working. this is how my ajax script looks like:
//run on page load
$(function(){
//bind a click event to the nav links
$(".url a").on("click", function(e){
//keep the links from going to another page by preventing their default behavior
e.preventDefault();
//this = link; grab the url
var pageLocation = this.href;
console.log(pageLocation);
//fire off an ajax request
$.ajax({
url: pageLocation,
//on success, set the html to the responsetext
success: function(data){
$("#container").html(data.responseText);
}
});
});
});
The .load() method, unlike $.get(), allows us to specify a portion of the remote document to be inserted. This is achieved with a special syntax for the url parameter. If one or more space characters are included in the string, the portion of the string following the first space is assumed to be a jQuery selector that determines the content to be loaded.
Consider the following example.
$(function() {
$(".url a").click(function(e) {
e.preventDefault();
var pageLocation = this.href + " #container";
console.log(pageLocation);
$("#container").load(pageLocation)
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="main-menu">
<li class="url">Homepage</li>
<li class="url">About us</li>
<li class="url">Contact</li>
</ul>
<div id="container">
</div>
This is untested. You will want to test this in your own code.
See More: https://api.jquery.com/load/
I am writing an admin dashboard in PHP at the moment.
To simplify things, as far as I think it simplifies, the page I structured has the typical areas Header, Aside with menu and MainContent page. The main content page should change when I click a different page in the aside menu.
So I created the page index.php which will hold the whole framework of the page.
<?php include('../includes/overall/overallHeader.php'); ?>
<section class="content-header">
<h1>Einsatzliste</h1>
</section>
<script type="text/javascript">
$('#pageIncidents').click(function(){
$('#mainContent').load('incidents.php');
});
</script>
<section class="content">
<div id="mainContent">
</div>
</section>
<?php include('../includes/overall/overallFooter.php'); ?>
Within this I created the section content, and gave the div inside the id mainContent. My idea was to load different subpages into this div, when I click a menu item in the aside menu:
aside menu
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
<ul class="nav in" id="side-menu">
<li><div id="pageIncidents">Einsatzliste</div></li>
<li>Testseite 1</li>
</ul>
</div>
</div>
There I put the link inside a div with a unique ID which I want to use in jQuery to load the specific contents.
jQuery script
<script type="text/javascript">
$('#pageIncidents').click(function(){
$('#mainContent').load('incidents.php');
});
</script>
The script is supposed to load the page incidents.php into the div mainContent in the index.php page.
It totally does not work... Do you have a hint where to look for? I think the logic seems right I guess. Could it be a problem, that the id "pageIncidents" is not directly visible in the code but included by the php include overallHeader at the top of the page?
You can try doing it with ajax and make up the ajax response in html (string), onclick start ajax request.
$(document).on("click", ".delete-asset", function() {
var link = $(this).attr('[data-page]');
$.ajax({
type:'GET',
url:'http://www.example.com/index.php',
dataType: "json",
data: {
action: 'incidents',
data: { 'incidents': 'incidents' }
},
success:function(data) {
$('#mainContent').html("[your data]");
}
});
});
In my webpage I am using jquery tabs.
<script type="text/javascript">
$(document).ready(function()
{
$('#horizontalTab').responsiveTabs({
rotate: false,
startCollapsed: 'accordion',
collapsible: 'accordion',
setHash: true,
disabled: [3,4],
activate: function(e, tab) {
$('.info').html('Tab <strong>' + tab.id + '</strong> activated!');
}
});
$('#start-rotation').on('click', function() {
$('#horizontalTab').responsiveTabs('active');
});
$('#stop-rotation').on('click', function() {
$('#horizontalTab').responsiveTabs('stopRotation');
});
$('#start-rotation').on('click', function() {
$('#horizontalTab').responsiveTabs('active');
});
$('.select-tab').on('click', function() {
$('#horizontalTab').responsiveTabs('activate', $(this).val());
});
});
</script>
<div id="horizontalTab" style="margin-top:10px;">
<ul class="tabul">
<li class="tabli">
<?php echo lang('purchasedtickets');?>
</li>
<li class="tabli"><?php echo lang('gifted').' '.lang('tickets');?></li>
<li class="tabli"><?php echo lang('received').' '.lang('tickets');?></li>
</ul>
<div id="purchased"></div>
<div id="gifted"></div>
<div id="received"></div>
</div>
When I click on tab2 ie, #gifted tab, the corresponding result will be fetched from an ajax call and will be set to div with id gifted. In this sections I am using Codeigniter pagination. If I click on pagination link 2 of gifted section, the URL will come like http://domain.org/project/video/tickets/2#gifted where 2 in the URL is the page number.
After this, when I click on any other tab say tab1 ie, purchased tab, then the link of page will come like http://domain.org/project/teshot/video/tickets/2#purchased (instead of http://domain.org/project/teshot/video/tickets#purchased) which is appending the url of previous section.
I want to avoid this problem. How can I solve this?
Can ayone help me?
Thanks in advance.
i have succeeded in listing my data from mysql database
in JQM.
i want to link the list item to its details.
Therefore when there is a click on a list, a new page with the data from the list is displayed.
I dont know how to do it
Heres what i have now : but the link i have isnt working, guess i am missing something.
heres the link on js fiddle http://jsfiddle.net/8WU39/16/
<script type= text/javascript>
$('#seyzListPage').live('pageshow', function(){
$.ajax({
url: "data.php",
dataType: 'json',
success: function(json_results){
listItems = $('#seyzList').find('ul');
$.each(json_results.rows, function(key) {
html = '<li <h3><a href="index1.html?id=' + [json_results.rows[key].airp_id] +'"rel="external">'+json_results.rows[key].airport_code+'</h3>';
html += '<p><br> Aiport name: '+json_results.rows[key].airport_name+'</p></a></li>';
listItems.append(html);
});
// Need to refresh list after AJAX call
$('#seyzList ul').listview('refresh');
$.mobile.pageLoading(true);
}
});
});
</script>
<div data-role="page" id="seyzListPage">
<div data-role="header" id="header">
<h1>Airports</h1>
</div>
<div data-role="content" id="seyzList">
<ul data-role="listview" data-inset="true" data-filter="true"></ul>
</div>
<div data-role="footer" data-postion="fixed">
<h3>Footer</h3>
</div>
</div>
What do i do to get the list linked to its data on another html page.
I had a very similar problem and found a fix with a simple plugin. It's called jqm.page.params.js and can be found here. Implementation was very easy. Added the plugin file to my root directory and then included it at the bottom of my index.html page.
In your js file, you then just want to place
if ($.mobile.pageData && $.mobile.pageData.color){
var color = $.mobile.pageData.color;
}
at the top of your beforepageshow event to capture the variables tacked on to the link. Replace 'color' with the variables you are looking for.
I'm loading content, forms mainly, dynamically using ajax in a Code Igniter app I'm working on. However I need get the URI segments for my DB insert and to autofill the date box on the form. Usually one would do something along the lines of:
$date = $this->uri->segment(3)."/".$this->uri->segment(4)."/".$this->uri->segment(5);
But obviously it just tries to read the address of the document being called through the ajax request, not the parent.
Any ideas how I get the parent details?
Thanks!
<meta charset="UTF-8" />
<script type="text/javascript">
$(function() {
$("#tabs").tabs({
ajaxOptions: {
error: function(xhr, status, index, anchor) {
$(anchor.hash).html("Unable to load this tab. We'll try to fix this as soon as possible.");
}
}
});
});
</script>
<div id="diary-input">
<div id="tabs">
<ul>
<li>Appointment</li>
<li>Event</li>
<li>New Client</li>
<li>New Contact</li>
<div id="input-cell-close" class="input-cell"><?php echo "<img src=\"".base_url()."images/cc_close.png\" id=\"input-cell-close\" border=\"0\" alt=\"close\" />" ?></div>
</ul>
</div>
</div>
With jquery and jquery ui included in my document header. I'm using the jquery ui ajax tabs if you need further info: http://jqueryui.com/demos/tabs/#ajax
When doing the Ajax request, you should send along the segments from the parent page. Like this:
In your controller:
$data['segments'] = $this->uri->segment(3)."/".$this->uri->segment(4)."/".$this->uri->segment(5);
In your view:
<li>Appointment</li>
<li>Event</li>
<li>New Client</li>
<li>New Contact</li>