I'm a real noob at AJAX and so I was wondering how I could make my comment numbers auto update using jquery and AJAX in Wordpress. Thanks for your help. Heres my jquery:
<script>
jQuery(document).ready(function($){
setInterval( "countnumbers();", 2000);
countnumbers = function(){
$('cite.commentcount').each(function(){
$(this).load('<?php get_permalink(); ?>, <?php echo get_comments_number(); ?>');
});
} // End countnumbers function
});
</script>
Heres my PHP:
<?php if(!is_single()) : ?>
<cite class="commentcount"><?php comments_number('0', '1', '%'); ?></cite>
<?php endif; ?>
Related
On my main page I assign four different $_SESSION variables as follows:-
<p class="p-wht space left">Working: <? echo $_SESSION['Working'] ?></p>
<p class="p-wht green space left">Clear: <? echo $_SESSION['Clear'] ?></p>
<p class="p-wht red space left">Busy: <? echo $_SESSION['Busy'] ?></p>
<p class="p-wht cyan space left">STC: <? echo $_SESSION['STC'] ?></p>
These are set when the page loads:-
include('status.controller.php');
and they are set as:
$_SESSION['Working'] = $status['Working'];
$_SESSION['Clear'] = $status['Clear'];
$_SESSION['Busy'] = $status['Busy'];
$_SESSION['STC'] = $status['STC'];
They update when the page is refreshed or first loaded, but when I am trying to update them using AJAX the values don't seem to be changing.
I have tried:-
$(function(){
setInterval(function(){
$.ajax({
url:'scripts/php/status.controller.php',
success:function(data){
if(data == "scripts/php/status.controller.php"){
}else{
alert(data);
//location.reload();
}
}
});
},4000);
});
but this doesn't seem to update the values. It only updates the values when the page is completely reloaded, including location.reload(); which I don't want to use.
Any ideas?
ADDED; contents of status.controller.php file; here is the contents of this file; nathandasilva.co.uk/status.controller.txt
Can you tell me, what is the output of scripts/php/status.controller.php page. If the page will send html as output, then you should just replace the content, example:
<div id="content">
<p class="p-wht space left">Working: <? echo $_SESSION['Working'] ?></p>
</div>
<script>
$(function() {
setInterval(function(){
$.ajax({
url:'scripts/php/status.controller.php',
success:function(data) {
$("#content").html(data);
}
});
},4000);
});
</script>
Hi I ‘d like some help please, as my skills in jQuery are not so good. What I want to achieve is to change the order of the images like this example.
My database looks like this:
table: Gallery
img_id (pk)
image
caption
order
I have also created these 2 views:
index.php
<!-- will display the ajax result -->
<div id="orderResult"></div>
<hr/>
<input type="button" id="save" value="Save Order" class="btn btn-primary">
<script type="text/javascript">
$(function () {
$.post('<?php echo site_url('admin/galleries/order_ajax'); ?>', {}, function(data) {
$('#orderResult').html(data);
});
// save order
$('#save').click();
});
</script>
order_ajax.php
<?php if(count($images)>0): ?>
<div class="sortable-list">
<ol id="sortable">
<?php foreach($images as $image): ?>
<li <?php echo 'id="li_'.html_escape($image->img_id).'"'; ?>><?php echo img(array('src' => 'uploads/thumbs/'.html_escape($image->image)); ?></li>
<?php endforeach; ?>
</ol>
</div>
<?php endif; ?>
<script type="text/javascript">
$(function() {
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
});
</script>
I have also created and the order_ajax controller
public function order_ajax(){
// save order from pages
var_dump($_POST);
// if (isset($_POST['sortable'])) {
// $this->gallery->save_order($_POST['sortable']);
// }
// fetch all images (fetch all data)
$this->data['images'] = $this->gallery->get();
// load the view
$this->load->view('admin/gallery/order_ajax', $this->data, false);
}
So what I basically want to do is to drag the images around in order to change their order, and when I click the save button pass the (new) data/order to the controller and to store them in the database. How can I make this work?
Well, the solution was more simple than I thought.
On the index.php view I've put this
<script type="text/javascript">
$(function () {
$.post("<?php echo site_url('admin/galleries/order_ajax'); ?>", {}, function(data) {
$('#orderResult').html(data);
});
// save order
$('#save').click(function(){
var new_order = $("#sortable").sortable( "toArray" );
$.post("<?php echo site_url('admin/galleries/order_ajax'); ?>", { order_array: new_order }, function(data) {
$('#orderResult').html(data);
});
});
});
</script>
and this is the controller function
public function order_ajax(){
// save order from pages
if (isset($_POST['order_array'])) {
$this->gallery_model->save_order($_POST['order_array']);
}
// fetch all images
$this->data['images'] = $this->gallery->get();
// load the view
$this->load->view('admin/gallery/order_ajax', $this->data, false);
}
I'm working on drag and drop and store id number in database, i just finished that and is works great in all browser but the problem is that is NOT WORKING IN IE 8 or 9.
The problem is that in IE is not allow me to drag or move around that the problem that i can't figure out how to solve this, and rest of browser are works fine.
here is jquery code
<script type="text/javascript">
$(document).ready(function(){
function slideout(){
setTimeout(function(){
$("#response").slideUp("slow", function () {
});
}, 2000);}
$("#response").hide();
$(function() {
$("#list ul").sortable({ opacity: 0.8, cursor: 'move', update: function() {
var order = $(this).sortable("serialize") + '&update=update';
$.post("updateList.php", order, function(theResponse){
$("#response").html(theResponse);
$("#response").slideDown('slow');
slideout();
});
}
});
});
});
</script>
and the body code is
<div id="response"> </div>
<ul>
<?php
include("connect.php");
$query = "SELECT id, text FROM dragdrop ORDER BY listorder ASC";
$result = mysql_query($query);
while($row = mysql_fetch_array($result, MYSQL_ASSOC))
{
$id = stripslashes($row['id']);
$text = stripslashes($row['text']);
?>
<li id="arrayorder_<?php echo $id ?>"><?php echo $id?> <?php echo $text; ?>
<div class="clear"></div>
</li>
<?php } ?>
</ul>
</div>
</div>
can any one help me how to solve to make works drag and drop for IE, if is there is other sample that might support all browser!
AM
According to #jheilgeist here, adding a position:relative on the div, will sort it out, even if it acts a little weird.
It looks like a jQuery UI bug in those browsers.
Check more info here: http://bugs.jqueryui.com/ticket/7546
I'm working on a project that uses jQuery modals that dynamically load their content on a button click.
I am having an issue using this loaded content like I would normally.
Here is an example of my problem
<script type="text/javascript>
click function{
load modal{
open: $('#modalID').load('phpfile.php?id=<?php echo $id ?>');
}
</script>
That all works fine, but when trying to use jQuery within the "phpfile.php" is where the problem lies
<?php
$id = $_GET['id'];
$db = USE ID TO GET DATABASE INFO; //works fine here
?>
//ECHO SOME HTML HERE
<script type="text/javascript">
$('#buttonID').on('click', function(){
alert('test <?php echo $id ?>');
});
</script>
When I click the button, I get the alert but it just says test and I don't get the ID like I should.
Thanks in advance for your help and suggestions on this one!
You have pasted pseudo code so it is difficult to say what is wrong in your code.
The following should work, give it a try:
File 1.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<?
$id = "10";
?>
<script>
$(document).ready(
function(){
$('#modalID').load('phpfile.php?id=<?php echo $id ?>');
});
</script>
<div id = 'modalID'></div>
And phpfile.php:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<?php
$id = $_GET['id'];
?>
<script>
$('#buttonID').on('click', function(){
alert('test <?php echo $id ?>');
});
</script>
<input type="button" id = "buttonID" value="click me">
Please check on the do you have any errors in your browser's console. The above code should work. The possibilities are like if you don't get your $_GET['id'] or any script errors will prevent execution of your code.
I have created a sample php file which is working fine.
<?php
$id = rand();
?>
<button id="buttonID"> Click </button>
//ECHO SOME HTML HERE
<script type="text/javascript">
$('#buttonID').on('click', function(){
alert('test <?php echo $id ?>');
});
</script>
i have a link that needs to be triggered from a success post:
<?php
if ($_POST["action"] == "1") {
?>
<script type='text/javascript'>
$(window).load(function() {
$(".likepic").click();
});
</script>
<?php } ?>
<script type='text/javascript'>
$(window).load(function() {
$(".likepic").click(function(){
$(".likepic").colorbox({width:"620px", height:"570px", inline:true, href:"#likepic_lightbox"});
});
});
</script>
<div class="blackk" style="display:none;">
<div id="likepic_lightbox">test
</div>
</div>
so if that post action is 1 then run the jquery script and click on the link for something else to happen :)
this is what i tried but without success.
any ideas?
Thanks
Try using $(document).ready() instead of $(window).load()
Also, you'll need to switch the order of your JavaScript blocks. The click handler needs to be defined first.
Play with a test version here: http://jsfiddle.net/irama/bcMp7/
Or see updated code below:
<script type='text/javascript'>
$(document).ready(function() {
$(".likepic").click(function(){
$(".likepic").colorbox({width:"620px", height:"570px", inline:true, href:"#likepic_lightbox"});
});
});
</script>
<?php if ($_POST["action"] == "1") { ?>
<script type='text/javascript'>
$(document).ready(function() {
$(".likepic").click();
});
</script>
<?php } ?>
<div class="blackk" style="display:none;">
<div id="likepic_lightbox">test</div>
</div>
Let us know how you go!