Merging two queries together using jquery WordPress
- SOLVED
Hello all,
I'm running a multisite and querying posts from one site to another. What I'm trying to do, for layout purposes, is use html data-attributes and jquery to order posts by a data-attributes value/ date to merge a query from another site with a query from the current site.
It seems I'm some what successful, the queries are kind of blending together, but it's also not ordering some posts.
[[LINK href="http://pastebin.com/q1m0G0DU"]]Here is the test queries I'm using with the script[[/LINK]]
[[LINK href="http://pastebin.com/Hp0GRR51"]]Here is the output[[/LINK]]
I need to sort posts by date and data-attribute value. I've tried sorting by date as well and basically got the same result as above. The queries were still merged, but the order was still slightly off.
Thank you kindly for your help
Answers (2)
Navjot Singh answers:
Use data-percentage attribute and use the following code.
jQuery(document).ready(function() {
jQuery("h3.order").sort(function(b,a){
return +a.dataset.percentage - +b.dataset.percentage;
}).each(function(){
jQuery("#gallery").prepend(this);
})
});
<strong>Update</strong> Check the [[LINK href="http://jsfiddle.net/bu6uq4Lh/3/"]]working code[[/LINK]].
Navjot Singh comments:
[[LINK href="http://jsfiddle.net/bu6uq4Lh/1/"]]Tested[[/LINK]].
Chris comments:
Thanks Najjot,
That worked. I'm also having a bit of trouble figuring out how to sort by date.
Here's the code:
// Loop
<h3 data-date="<?php echo get_the_time(' F j, Y h:i:s'); ?>" class="Videos order"><?php the_title(); ?></h3>
//Script
jQuery(document).ready(function() {
jQuery("h3.order").sort(function(a,b){
return new Date(jQuery(a).attr("data-date")) > new Date(jQuery(b).attr("data-date"));
}).each(function(){
jQuery("#gallery").prepend(this);
})
});
[[LINK href="http://pastebin.com/KB4CzF6k"]]Here's the output[[/LINK]], as you can see it's kind of working, but the order is still somewhat off.
Navjot Singh comments:
Try this
jQuery(document).ready(function() {
jQuery("h3.order").sort(function(a,b){
return new Date(jQuery(a).attr("data-date")) < new Date(jQuery(b).attr("data-date"));
}).each(function(){
jQuery("#gallery").prepend(this);
})
});
[[LINK href="http://jsfiddle.net/navjotjsingh/CQ3gg/408/"]]Working Code[[/LINK]].
Chris comments:
Thanks for the help!
Bob answers:
You can specify multiple post type, so you can loop through only once.
$args = array(
'post_type' => array('images','videos'),
'posts_per_page'=> -1,
'orderby'=> 'date'
);
Bob comments:
tinysort plugin can be helpful to you.
[[LINK href="http://tinysort.sjeiti.com/"]]http://tinysort.sjeiti.com/[[/LINK]]
You need to add multiple values in data attributes like date and the random value you are generating.
On above link find a section "multiple sort criteria" and see the example.
Chris comments:
Thanks Bob,
The query above won't work because I'm trying to merge a query with another site to a query on the current site in my multisite setup.
This jquery library seems pretty good. I'm not to sure about using time in seconds, just because I would want to be able to read the time when I inspect element. If you could check out how the code I wrote looks before just so I will be on the write path before downloading and installing the plugin, that would be very awesome! (something kind of confused me while reading about this function)
//Loop
<h3 data-timestamp="<?php echo get_the_time('U'); ?>" class="1 order"><?php the_title(); ?></h3>
//Script
jQuery("div#gallery").tsort( h3.order,{useVal:true, data:'timestamp', order:'desc'});
Any ideas on how I would output an easier read date as well? ie August 27, 1998 11:22: 05 pm
Bob comments:
You can create multiple attributes like data-timestamp for timestamp(which will be used to short) and data-data to test it via inspect element.
You you can even create hidden span with timestamp.
Bob comments:
save below code as html file and see how they are sorted using date.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="jquery.tinysort.min.js"></script>
</head>
<body>
<div id="gallery">
<ul id="gal">
<li><h3 class="Videos order" data-date="December 1, 2014 03:07:17" data-timestamp="1417432037">Disclosure ? You & Me ft. Eliza Doolittle (Flume Remix)</h3></li>
<li><h3 class="Videos order" data-date=" November 30, 2014 10:05:30" data-timestamp="1417370730" >Wake Owl ? Gold (Noah Hyde / Magic Sword Remix)Dummy Image 3</h3></li>
<li><h3 class="Images order" data-date=" November 13, 2014 08:23:16" data-timestamp="1415895796">Zakk is Crush from finding Nemo</h3></li>
<li><h3 class="Videos order" data-date=" August 1, 2014 05:09:24" data-timestamp="1406894964">Lost But Won Motivational Video</h3></li>
<li><h3 class="Videos order" data-date=" August 1, 2014 05:09:57" data-timestamp="1406894997">FEAR Motivational Video</h3></li>
<li><h3 class="Videos order" data-date=" August 1, 2014 05:10:37" data-timestamp="1406895037">Why Do We Fall ? Motivational Video</h3></li>
<li><h3 class="Videos order" data-date=" August 1, 2014 05:14:46" data-timestamp="1406895286">Through The Wormhole ? S05E01 ? Is God an Alien Concept?</h3></li>
<li><h3 class="Images order" data-date=" November 13, 2014 08:23:13" data-timestamp="1415895793">Dummy Image 2</h3></li>
<li><h3 class="Videos order" data-date=" August 1, 2014 05:08:50" data-timestamp="1406894930">What is a Warrior?</h3></li>
<li><h3 class="Videos order" data-date=" October 25, 2014 01:00:17" data-timestamp="1414224017">Bill Burr ? Muffins</h3></li>
<li><h3 class="Videos order" data-date=" November 2, 2014 04:07:01" data-timestamp="1414930021">I?m an Albatraoz ? AronChupa (Bass Boosted)</h3></li>
<li><h3 class="Videos order" data-date=" August 1, 2014 05:08:12" data-timestamp="1406894892">Jason Silva on Singularity and Omega Point (Kinetic Typography)</h3></li>
<li><h3 class="Videos order" data-date=" August 1, 2014 05:03:05" data-timestamp="1406894585">The Greatness Within Motivational Video</h3></li>
<li><h3 class="Images order" data-date=" November 13, 2014 08:22:52" data-timestamp="1415895772">Dummy Image 10</h3></li>
<li><h3 class="Images order" data-date=" November 13, 2014 08:22:54" data-timestamp="1415895774">Dummy Image 8</h3></li>
<li><h3 class="Videos order" data-date=" October 6, 2014 09:25:48" data-timestamp="1412612748">Capsize ? Big Black Delta</h3></li>
<li><h3 class="Videos order" data-date=" August 1, 2014 03:43:37" data-timestamp="1406889817">Last Week Tonight with John Oliver: Pepe Julian Onziema Interview Pt. II (Web Exclusive)</h3></li>
<li><h3 class="Videos order" data-date=" October 25, 2014 12:27:55" data-timestamp="1414265275">Ben Goldacre: What doctors don?t know about the drugs they prescribe</h3></li>
</ul>
</div>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('div#gallery ul li').tsort('h3.order',{data:'timestamp'});
});
</script>
</body>
</html>
Bob comments:
You can specify <strong>order:'desc' </strong> of you want to change the order to descending.
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('div#gallery ul li').tsort('h3.order',{data:'timestamp',order:'desc'});
});
</script>
Bob comments:
If you wish to short with "weight" and "date" attribute then
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('div#gallery ul li').tsort('h3.order',{data:'weight'},'h3.order',{data:'timestamp',order:'desc'});
});
</script>
Note you have to add <em>weight</em> data element like
<li><h3 class="Images order" data-date=" November 13, 2014 08:23:16" data-timestamp="1415895796" data-weight="10">Zakk is Crush from finding Nemo</h3></li>
<li><h3 class="Videos order" data-date=" August 1, 2014 05:09:24" data-timestamp="1406894964" data-weight="10">Lost But Won Motivational Video</h3></li>
<li><h3 class="Videos order" data-date=" August 1, 2014 05:09:57" data-timestamp="1406894997" data-weight="20">FEAR Motivational Video</h3></li>
Chris comments:
Thank you for the help!
Chris comments:
This worked!