As always i did lot of searching around google and here but did not find what i want.
This is wordpress and ajax loading (pagination)
My page with jobs cat. It does have several div with other sub cats and each having its own wp loop for getting posts with that specific sub category
like this
<div id="container">
<div id="alljobs">
<div id="posts">
//wp loop #1
//all jobs will be here from all cats; post title etc.
</div><!--Posts -->
<div id="alljobspagi">
//the pagination for all jobs
</div><!--alljobspagi -->
</div><!--alljobs -->
<div id="alljobspg">
<div id="posts">
//wp loop #2
//all jobs will be here from pg cats; post title etc.
</div><!--Posts -->
<div id="alljobspgpagi">
//the pagination for all jobs
</div><!--alljobspgpagi -->
</div><!--alljobspg -->
</div><!-- The container -->
Now all I want is when user clicks "a" of pagination (labeled numbered 1,2,3 and so on) it goes through preventdefault() and loads that divs posts with the next pages posts.
I have succeeded in making one but that is somehow working and somehow not.
The js code i am using is ( in header.php btwn )
$('div#alljobspgpagi a[href]').click(function(e) {
e.preventDefault();
var link = jQuery(this).attr('href');
jQuery('div#alljobspgpagi').html('<center><b>Working on it Please Wait .......</b><br /><img src="http://localhost/preloader.gif"/></center>');
jQuery('#alljobspg').load(link+' #alljobspg');
});
Well the above code is working partially. For example if i have two pages for pagination like for now i am on first page "1" which is in active class (non clickable) and when i click on number "2" (clickable having a) to go to the second page the ajax works and everything works with no error. Now i am on second page of the result and i want to go back to first page 1 or page 3 (next). But when i click it ajax failed to work and the whole page refreshed (or loaded with first page or next page).
Can someone give me any idea for this. My code is working but only for one time. I don't know what is wrong with it but the preventDefault() is not making any sense when going back to page page or next page. The js code is working only one time after page loading whether it is going back to page 1 (previous) or going forward to page 3 (next). Sorry i am new to this jQuery thing but not to wp.
Thank you and sorry if i have bad english.
Got it fixed. I was updating content of and by doing so event got cleared. So what i have done is by adding one extra div for all events.
<div id="container">
<div id="alljobs">
<div id="posts">
//wp loop #1
//all jobs will be here from all cats; post title etc.
</div><!--Posts -->
<div id="alljobevents">
<div id="alljobspagi">
//the pagination for all jobs
</div><!--alljobspagi -->
</div><!-- Update : This is Extra-->
</div><!--alljobs -->
<div id="alljobspg">
<div id="pglist">
<div id="posts">
//wp loop #2
//all jobs will be here from pg cats; post title etc.
</div><!--Posts -->
<div id="alljobspgevent">
<div id="alljobspgpagi">
//the pagination for all jobs
</div><!--alljobspgpagi -->
</div>
</div><!--pglist -->
</div><!--alljobspg -->
</div><!-- The container -->
And updated Js becomes
$('#alljobspgevent').click(function(e) {
e.preventDefault();
var link = jQuery(this).attr('href');
jQuery('#pglist').html('<center><b>Working on it Please Wait .......</b><br /><img src="http://localhost/preloader.gif"/></center>');
jQuery('#pglist').load(link+' #pglist');
// Same can be done for updating pagination
});
Related
I've tried to use jQuery's load() function to change/load content without reloading. That works, but the problem is: the URL keeps the same!
Even if i use history.pushState() to change URL, that does not solve the problem. Example:
with the famous window.history.pushState("object or string", "Title", "/new-url");
With that, I am creating a "fake URL" for each page - If I try to enter the website with this changed URL again, i get an error, basically the link does not exist;
If I refresh the page, i lost all Ajax loaded content - I need to keep the content when refresh;
When I click to change Ajax loaded page, keeps putting new links next to the previous one, as in the image sent;
I want to get this result: https://reactjs.org/ - transiting the pages, they do not reload and the link changes, it is updatable and the link works separately - how do i do it?
3) printscreen of my page and its url
Important: index.html, about.html and contact.html are existing files that will load with the jquery function below.
HTML:
<div class="navbar">
<div class="content">
<div class="logo">My logo</div>
<ul class="pages">
<li id="index">Index</li>
<li id="about">About us</li>
<li id="contact">Contact</li>
</ul>
</div>
</div>
<section id="page">
<div class="content">
<!-- PAGES LOAD HERE -->
</div>
</section>
<div class="footer">
<div class="content">
--Footer-- All rights reserved.
</div>
</div>
JS:
$(document).ready(function () {
$('li').on("click", function () {
$pageName = $(this).attr('id');
$('#page .content').load(`pages/${$pageName}.html`);
$('li').removeClass('active'); //only to remove the selection of actual page in CSS
$(this).addClass('active'); //only to add the selection of actual page in CSS
window.history.pushState("object or string", "Title", `pages/${$pageName}.html`);
})
})
you're describing "routing" which is the idea of URLs matching the content that is being display.
In jquery i'd recommend googling: jquery router or javascript router
IF you're writing other languages you can google [language] router.
most recently google is bringing up https://www.npmjs.com/package/jqueryrouter which is now forwarding to https://github.com/scssyworks/silkrouter
Once you choose a router, read the docs and come back with more questions.
I have an application that has a page where all id's are selected from the table and specific bits of information are shown in html.
What i would like to do next is to make each of these elements as a whole a link to essentially, a 2nd level down.
This level down page will reveal all information bound to that row's id, is it possible to build this in a way that is dynamic?
I am using jQuery mobile to build pages, and i'd like to use 1 template and append the relevant html elements into it, and populate each with the id bound information.
I hope this makes some sense, and any guidance or suggestions would be greatly appreciated.
The above mockups represent what i would like to achieve, the left image displays a list of all rows in the table, upon clicking one of them, you are taken to another page, with only information for that particular id.
Can i achieve this for each item within the list?
It's a good navigation example and it's not difficult to implement.
Since the information is coherent (every DB row has the same columns), create just one empty template (edit: it's now based on your PasteBin):
<div data-role="page" id="route_details">
<div data-role="header">
<a data-rel="back"><i class="fa fa-arrow-left"></i></a>
<h1 id="walkTitle"></h1>
</div>
<div data-role="main" class="ui-content">
<div class="finishedRouteInfo">
<div class="mapDetails" style="width: 100%; height: 150px;"></div>
<div class="ui-grid-a">
<div class="ui-block-a home_btns no_border">
<div class="ui-block-a finishedDistance"><i class="fa fa-map-marker"></i></div>
<div class="ui-block-b"><p>Distance <br/><span id="finalDistance" class="value"></span></p></div>
</div>
<div class="ui-block-b home_btns">
<div class="ui-block-a finishedDistance"><i class="fa fa-clock-o"></i></div>
<div class="ui-block-b finishedDuration"><p>Duration <br/><span class="value" id="finalDuration"></span></p></div>
</div>
<span class="horizontalSplitter"></span>
<div class="walkDescription"></div>
</div>
</div>
</div>
The code in your PasteBin cannot work because you are creating multiple pages with elements having the same IDs (i.e.: finalDistance, finalDuration). Also, you are creating many pages which probably the user will never see.
So, simplify your loading function:
var last_results = [];
$(document).on("pageinit", "#my-routes", function() {
db.transaction(function(t){
t.executeSql('SELECT * FROM WALKS', [], querySuccess, errorCB);
});
function querySuccess(t, results, Element) {
last_results = results;
}
});
and delay the content/map creation just before showing the page with route details:
$("#route_details").on("pagecontainerbeforeshow", function()
{
// use your DB data
var data = last_results.rows.item(clicked_route);
$("#walkTitle).html(data.WalkTitle);
$(".walkDescription").html(data.WalkDescription);
// ...create the map and fill the rest...
});
You just have to link each route to this page, setting clicked_route when the link is clicked using something like this:
<a class="walkPage" href="#route_details" data-route="0">Route 0</a>
<a class="walkPage" href="#route_details" data-route="1">Route 1</a>
<a class="walkPage" href="#route_details" data-route="2">Route 2</a>
JavaScript:
$(document).on("click", ".walkPage") {
clicked_route = parseInt($(this).attr("data-route"));
});
...Since you have to show the route map in two different pages, refactor your code so that you can easily create a map and add it to any page.
Hope it's sufficiently clear to fully implement it.
Am creating a web application having 4 tabs... Each tab contains a sidemenu (jQuery) and the remaining part is divided into 2, topdiv and bottom div (table with 2 colums.. col1=sidemenu, col2=topdiv+bottomdiv) ... I use
$("#topdiv").load("contents/abc.html #xyz")
To load contents of div xyz to topdiv, which(xyz) is in another page abc.html when I click a particular link in the sidemenu... But sometimes when #xyz will again have 4 or 5 tabs ,those tabs are not available as tabs in #topdiv... instead they appear as just list.. am using $("#___").tabs() for creating tabs...can anyone help me? I cannot add images here since am not having enough reputations in stack overflow. if some one provides ur email address I can attach images of my current status of page and those of which I need to design... here is part of ma code.
============================================================================
home.jsp
======================================================================
<div id="mainmenu" class="tabs">
<ul>
<li >tab1</li>
<li>tab2</li>
<li>tab3</li>
</ul>
<div id="tab1">
</div>
<div id="tab2">
<div id="topdiv">
</div>
<div id="bottomdiv">
</div>
</div>
<div id="tab3">
</div>
</div>
===========================================================================
abc.html
============================================================================
<div id="xyz">
<div id="innertabs" class="tabs">
<ul>
<li >inner tab1</li>
<li>inner tab2</li>
<li>inner tab3</li>
</ul>
<div id="innertab1">inner tab 1 contents</div>
<div id="innertab2">inner tab 2 contents</div>
<div id="innertab3">inner tab 3 contents</div>
</div>
</div>
===========================================================================================
main.js//javascript---jquery-ajax connected
===========================================================================================
$(".tabs").tabs();
$("#topdiv").load("contents/abc.html #xyz");
enter code here
========================================================================================
pls note that div '#mainmenu' is appearing in tab format... but "#innertabs" also having class "tabs" is not appearing in tab format.. instead they appear in #topdiv as lists and contents below it
===========================================================================================
I assume you using jquery ui tabs.
If so after loading other page content, apply again tabs function on main div
$( "#tabs" ).tabs();
Actually you should apply .tabs() after ajax content is loaded. Not before that. I am not sure if applying .tabs() twice may damage it.
Update:
Here is fiddle for you Example . then your code will be
$("#mainmenu").tabs();
$("#topdiv").load("contents/abc.html #xyz");
$("#innertabs").tabs();
atlast after a lot of researchs and experiments, i hav found a solution to this... actually i hav to use unique div ids for tabs instead of class = "tabs"... then the tab statement will change to $("#innertabs").tabs(); but to make sure that $().tabs() is invoked only after loading the contents, put that statement in a callback function of $().load()... so my actual problem was $("#innertabs").tabs() is invoked even before it is loaded into #topdiv from the page abc.html..hence they can be displayed only as lists as there is no div with id=innertabs at the time of $().tabs() is invoked. . now it is avoided and the working code is
$("topdiv").load("contents/abc.html #xyz",function(){$("#innertabs").tabs();});
so only after loading the div into topdiv, corresponding tabs are generated and thus it will be displayed as tabs itself
so i think its good to use a callback function all the time when u need this stuff to be done without any errors...
also if anyone came to know about the disadvantages of this method pls do post here.. it wll be helpfull for me as a fresher
looking forward to a career in software development...
guys!
I use jquerymobile 1.3.0 and jquery 1.9.1
I have 2(more) jquerymobile pages.
For example:
<div data-role="page" id="firstPage">
<!-- Header -->
<div data-role="header">
<h3>First page</h3>
</div>
<!-- Body -->
<div data-role="content">
some content ...
</div>
</div>
<div data-role="page" id="secondPage">
<!-- Header -->
<div data-role="header">
<h3>Second page</h3>
</div>
<!-- Body -->
<div data-role="content">
some content ...
</div>
</div>
I'm need to change from first page to second page, and send some params usually URL
I tried to use this method:
$.mobile.changePage('#secondPage',
{
data: {id: 123, module: 111}
}
);
After this method, the elements on first page is hide and url is change to www.mydomain.com/main.html?id=123&module=111
but page is not change. I think in order to change the page to a URL to a hash of this page.
and the URL must be of the form
www.mydomain.com/main.html?id=123&module=111#secondPage
then i tried to use:
location.href += '?id=1234&module=111#secondPage';
This method is work )))
But when i tried go back to firstPage, page is changed, but in URL remain the data
www.mydomain.com/main.html?id=123&module=111
Then i tried delete this data using next method
location.href = location.href.replace(location.origin, "").replace(location.pathname, "");
But after this method my firstPage is looped to change.
Please help guys. How to send data to secondPage and delete this data when i going back to firstPage?
My back button used native jquerymobile method for go back.
<a data-theme="a" data-role="button" data-transition="fade" href="#firstPage" data-iconpos="notext" class="ui-btn-left backButton"></a>
P/S. I'm sorry for my english, my english level is elementary
If you define two pages in one html, you don't have to send arguments to other page with URL. Just use javascript variables and page events to use them.
If you use URL arguments to run server side code, just use different .html files. One html file, one page style.
But for smooth transition effects on mobile devices and best user experiment, i prefer using AJAX and create/change pages live,
Best regards
I am using turn js , a js that create flip book function.
From the online source the statement to get current page is :
alert($('selector').turn('page'));
However, it only get a null value that means the $('selector').turn('page') is not working. How to get the page no of the user reading page. Since a book have 2 page at the same time, I would like to get the page either left hand side or right hand side, How to do this ? Thanks
you should change 'selector' to the id of the div containing the 'pages'
eg:
<div id='flipbook'>
<div class="hard"> Turn.js </div>
<div class="hard"></div>
<div> Page 1 </div>
<div> Page 2 </div>
<div> Page 3 </div>
<div> Page 4 </div>
<div class="hard"></div>
<div class="hard"></div>
</div>
and in js
alert($('#flipbook').turn('page')); //do not forget the #
if you post a little more code, we can help you more :)
if you click here you can see a working example with code
edit: added some event handling in the fiddle