My code works correctly for showing database data .but i want to use infinite scroll for large data show response time.But I have no Idea how to use infinite scroll with my this code also which plugin use.
<script>
function getfilter(str){
if (str==""){
document.getElementById("result").innerHTML="";
return;
}
$.ajax({
url: "Views/pfolioresult.php?q="+str,
type: "GET",
// data: serializedData,
success: function ( responseText ) {
$("#result").html(responseText);
}
});
}
</script>
<div class="sprocket-mosaic-header">
<div class="sprocket-mosaic-filter">
<ul>
<li class="all active" data-mosaic-filterby="all" onclick="getfilter(this.id)" id="all" >All</li>
<li class="android" data-mosaic-filterby="android" onclick="getfilter(this.id)" id="android" >Android</li>
<li class="iOS" data-mosaic-filterby="iOS" onclick="getfilter(this.id)" id="ios" >IOS</li>
</ul>
</div>
<div class="clear"></div>
</div>
<div id="result">
ok
</div>
you can use http://infiniteajaxscroll.com/ or http://jscroll.com/. this will help you.
Related
I have a custom PHP page in WordPress and need to display buttons connected to a map plugin's shortcode. Each button needs to change the map displayed on the page. The Ajax action is working, but only displays the map's ID, not the full shortcode.
I found a similar post here on StackOverflow doing something similar with Contact Form 7 shortcodes.
Javascript used:
<script type="text/javascript">
$(function () {
var ajaxurl = "<?php echo admin_url('admin-ajax.php'); ?>";
$('.button-map').click(function () {
$.ajax({
url: ajaxurl, //global variable provided by WP
type: 'GET',
data: {
'action': 'get_map_frame',
'map_id': $(this).data('id')
},
success: function (data) {
$('#map_area').html(data);
}
});
});
});
</script>
Ajax Call in functions.php:
add_action('wp_ajax_get_map_frame', 'get_map_frame');
add_action('wp_ajax_nopriv_get_map_frame', 'get_map_frame' );
function get_map_frame() {
if (isset($_GET['map_id'])) {
$map_id = (int) $_GET['map_id'];
echo do_shortcode('[cspm_main_map id="' . $map_id . '"]');
}
exit();
}
On-page code HTML:
<div class="w-col w-col-12">
<div class="column-29 w-col w-col-3">
<div><a duplicate="fp-link-1" href="#" class="button-map stu w-button" data-id="5425">Dining and Drinks</a>
</div>
</div>
<div class="column-30 w-col w-col-3">
<div>
<a duplicate="fp-link-1" href="#" class="button-map stu w-button" data-id="5695">Entertainment and Transportation</a>
</div>
</div>
<div class="column-30 w-col w-col-3">
<div>
<a duplicate="fp-link-1" href="#" class="button-map stu w-button" data-id="5697">Shopping</a>
</div>
</div>
<div class="column-30 w-col w-col-3">
<div>
<a duplicate="fp-link-1" href="#" class="button-map stu w-button" data-id="5698">Pets and Parks</a>
</div>
</div>
<div id="map_area"></div>
</div>
What I'm trying to achieve is each button pulls up its individual map associated with the map ID. Currently when the button is clicked it only returns the actual map ID on the page, but not the rest of the shortcode to display the map intended.
http://aopmap.villagegreenmarketingservices.com/test123/
I don't know what I am doing wrong, but the PHP does run (I can notice it with the POST data on Firebug), but isn't echoed.
Here's my JS file :
$('.table_item').click(function() {
var ticket_nbr = $(this).children('td').attr("class");
var dataString = 'ticket_nbr='+ ticket_nbr;
$.ajax({
url: 'display.php',
type: 'POST',
data: dataString,
success: function(data) {
console.log(data);
$("#DisplayTicket").modal('setting', 'transition', 'vertical flip').modal('show');
},
error: function(e) {
console.log(e)
}
});
});
and the called PHP file :
if($_POST)
{
$ticket_nbr=$_POST['ticket_nbr'];
?>
<div id="DisplayTicket" class="ui large modal transition active visible" style="margin-top: -110px;">
<i class="close icon"></i>
<div class="header">
<?php echo $ticket_nbr; ?>
</div>
</div>
<?php
}
And here's the output I get on Firebug :
<div id="DisplayTicket" class="ui large modal transition hidden" style="margin-top: -110px;">
<i class="close icon"></i>
<div class="header">
ticket_3 // The post data sent
</div>
<div class="content">
<p>Merci, <span class="test_display"></span>.
</div>
</div>
Any help or hint would be great !
Thanks.
You're returning HTML but never adding it to body
success: function(data) {
console.log(data);
$(data).appendTo('body'); // <----------------------
$("#DisplayTicket").modal('setting', 'transition', 'vertical flip').modal('show');
},
Also, ideally dataString = 'ticket_nbr='+ ticket_nbr should be dataString = {'ticket_nbr': ticket_nbr}
You have to show/append the below div in the body or div.
<div id="DisplayTicket" class="ui large modal transition active visible" style="margin-top: -110px;">
<i class="close icon"></i>
<div class="header">
<?php echo $ticket_nbr; ?>
</div>
</div>
then use the below code on success.
$('#DisplayTicket').addClass('active');
$('#DisplayTicket').css('visibility','visible');
I am trying to build a menu for my website and using Smarty to display the pages. When user click on the Logout option the JQuery send an Ajax call to index.php script which contain the code for Smarty to display the page but it is not displaying it. It was working fine before I added the menu. There is no error in the firebug too. Can someone put me in the right direction.
Here is PHP code
if (isset($_POST['menu_index']))
{
if ($_POST['menu_index'] == 'Logout')
{
$smarty->display("login.tpl");
exit;
}
}
Here is JQuery code
$('ul li a').on('click', function() {
var menuItemIndex = $(this).data('val');
console.log(menuItemIndex);
$.ajax({
url: 'index.php',
type: 'POST',
data: {
'menu_index': menuItemIndex
},
dataType: 'json',
success: function(response) {
alert('success');
},
error: function(errorMsg) {
alert('failed');
}
});
});
Here is HTML Code
<form name="mainmenu" id="mainmenu">
<div id='content'>
<div id='jqxMenu'>
<ul>
<li>Maintanence
<ul style='width: 180px;'>
<li>Add Category</li>
<li>Add Sub-category</li>
</ul>
</li>
<li>Process Order
<ul style='width: 180px;'>
<li>Ship Order</li>
<li>Change Order Status</li>
</ul>
</li>
<li>Reports
<ul style='width: 180x;'>
<li>Orders by station</li>
<li>Orders by date</li>
<li>Pending Orders</li>
</ul>
</li>
<li>Logout</li>
</ul>
</div>
</div>
</form>
Hi I think you don't understand how Smarty works, but I can tell you that you don't have any template in html code which is very important for this kind of programming.
You need to make template for menu and call it menu.tpl -> then include it on index.tpl ...
For more informations take a look www.smarty.net
I'm creating a mobile app with jQuery Mobile and i've a little problem. I want to create a list with some content from the database wich I get from an ajax post.
The markup looks like this:
<div data-role="page">
<div data-role="header">
<h1>Facturen</h1>
</div><!-- /header -->
<div data-role="content">
<ul data-role="listview" data-inset="true" id="Invoices">
<div id="invoiceList"></div>
</ul>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
This is the jQuery:
$.ajax({
type: "POST",
url: "invoices/index.php",
data: '',
complete: function(data)
{
$('#invoiceList').html(data.responseText);
}
});
Well, I put the results of the query between but in some way the css doesnt work of the list doesnt work.
if I trie this it worked fine:
<ul data-role="listview" data-inset="true" id="Invoices">
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
Somebody knows how to fix this?
Thanks in advance!
In jQuery Mobile, whenever you update elements there is usually a follow-up step where you trigger an action upon it. For example, when you add new things into an unsorted list, you need to call
$('#invoiceList').listview('refresh');
This would go immediately after adding these elements into your UL inside the complete: callback.
There are various other things you could try as well if this doesn't generate the behavior you're looking for. For example, you might need to execute the .append() operation instead of using .html(). I've seen that sort of usage more frequently in these sorts of circumstances.
Try adding to the ul element you id as class invoiceList, because you are appending the li elements in the div element and formatting will not work:
<ul data-role="listview" data-inset="true" id="Invoices" class="invoiceList">
</ul>
<script>
$.ajax({
type: "POST",
url: "invoices/index.php",
data: '',
complete: function(data)
{
$('.invoiceList').html(data.responseText);
}
});
</script>
i have a problem with this jquery, in the success function call, its mean to remove the `support' button, and fade in the msg, this is my jquery code:
$('.stats').delegate('.against', 'click', function(e) {
//stop event
e.preventDefault();
// cache a reference to the previous <li> element
// since it is used more than once
var $prevLi = $(this).closest('li').prev('li');
//get the id
var the_id = $prevLi.attr('id').split('_').pop();
//the main ajax request
$.ajax({
context:this,
type: "POST",
data: "action=against&id=" + the_id,
url: "ajax/sa.php",
success: function (msg) {
$prevLi.find("h2.score_down").html(msg).fadeIn();
$(this).closest('li').next().next().find('button').remove(); $(this).remove();
}
});
});
the html:
<ul class="stats">
<li id="topic_20" class="score">
<h2 class="score_up" style="color:green;">10</h2>
<span style="text-align:center;">Supporters</span>
</li>
<li>
<button type="submit" value="Actions" class="support" title="support">
<i></i>
<span>Support</span>
</button>
</li>
<li id="down_20"class="score"><h2 class="score_down">20</h2><span style="text-align:center;">Against</span>
</li>
<li>
<button type="submit" value="Actions" class="against" title="against">
<i></i><span>Against</span></button>
</li>
</ul>
<h3 class="success"></h3>
this jquery is meant to remove the support button, when clicked and the new score is meant to fade in! :)) thanks
The button is in the <li> 2 previous to the .against containing one, so your .next() calls should be .prev(), like this:
$(this).closest('li').prev().prev().find('button').remove();
Why not use $("button[type=submit]")? Or just $("button")? If you use the double prev() you're going to have to adjust your code when your markup changes. If you do that often enough, that makes making changes a nightmare later.