I have the posts inside a while and post replays inside another while
I want to add a load more link or button for replays.
I have this codes but just first load more works:
<style> #myList li{ display:none;list-style: none;}</style>
<?php $conn=mysqli_connect("localhost","root","","dbace");
$psql="SELECT * FROM tbl_users_posts limit 20";
$qry=mysqli_query($conn,$psql);?>
<ul id="myList">
<?php while($fql=mysqli_fetch_assoc($qry)){
$pst=$fql['post'];
$pid=$fql['id'];
echo $pid." ".$pst;?><br>
<?php $rpql="SELECT * FROM re_pst WHERE subid='$pid'";
$qrep=mysqli_query($conn,$rpql);
while($qrw=mysqli_fetch_assoc($qrep)){
$remsg=$qrw['remsg'];?>
<li>
<?php echo $remsg;?><br>
<?php }?><br><br>
</li>
<div id="loadMore">load more</div>
<?php }?>
</ul>
and the jquery:
<script type="text/javascript" src="_js/jqmin.js"></script>
<script type="text/javascript">
$(document).ready(function () {
size_li = $("#myList li").size();
x=3;
$('#myList li:lt('+x+')').show();
$('#loadMore').click(function () {
x= (x+2 <= size_li) ? x+2 : size_li;
$('#myList li:lt('+x+')').show();
});
});
</script>
How can I fix that?
Thanks
Can I do it somehow by give number to posts and jquery command? some thing like this:
for ($i = 0; $i < X; $i++) {
Your problem is to you using id attribute for event. The value of id attribute must be unique. Instead of you can use class attribute.
The following code may be solution:
$('.loadMore').on('click', function(){
$(this).parent('li').show();
})
Can you try using "loadMore" button by class attribute with above code?
Related
I'm using the animated collapse JS library here:
http://www.dynamicdrive.com/dynamicindex17/animatedcollapse.htm
and i'm trying to use it for dynamic div's however it's not toggling. Any ideas?
<head>
<script type="text/javascript" src="includes/js/animatedcollapse.js"></script>
</head>
<body>
<?PHP
for ($i = 1; $i <= 5; $i++) { ?>
<script type="text/javascript">
animatedcollapse.addDiv('location-<?PHP echo $i; ?>', 'fade=1')
</script>
<div id="location-<?PHP echo $i; ?>">
CLOSE
TEST
</div>
TOGGLE
<?PHP } ?>
<script type="text/javascript">
animatedcollapse.ontoggle=function($, divobj, state){}
animatedcollapse.init()
</script>
I may be wrong, but it doesn't seem necessary to use PHP just to create an incrementing variable.
You could just write that same for loop in javascript, inside your script tags: I also think using jQuery's slideToggle might make this easier for you... Maybe something along these lines:
for (var i = 1, i <= 5, i++ ){
$(document).ready(function(){
$('divToBeToggled' + i).click(function(){
$('divToBeRevealed' + i).slideToggle('slow');
});
});
}
Just looking quickly at the link you supplied, doesn't this script depend on jQuery also being present? You don't seem to have that script tag in your head tag.
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 am very new with Ajax.
i am using the following javascript function to get the value from the list those user select the li.
but using this function each time the page is reloading. i am trying to use ajax using this function.how can i use ajax with this need syntax.
My function:
<script type="text/javascript" language="javascript">
function pagelim(index)
{
var page_lim=$('#page_num li').get(index).id;
self.location="<?php echo get_option('head'); ?>"+'?details&limit=' + page_lim ;
}
</script>
<script type="text/javascript" language="javascript">
function dateby(index)
{
var date_by=$('#sort-by-date a').get(index).id;
var cls=document.getElementById(date_by).className;
if(date_by=="ASC")
{
date_by="DESC";
}
else
{
date_by="ASC";
}
self.location="<?php echo get_option('head'); ?>"+'?details&sort=' + date_by ;
}
</script>
Value get from list:
<div class="sort-links">
<span class="by-date" id="sort-by-date">Sort by: <a href="#" id='<?php _e($sort_by)?>' class='<?php _e($class)?>' onclick="dateby($(this).index())" >Date</a>
</span>
//list to select value
<span id="view-on-page">View on Page: <?php if($lim=="") { _e($limit); } else { _e($lim); } ?>
<ul id="page_num">
<li id="5" onclick="pagelim($(this).index())">5</li>
<li id="10" onclick="pagelim($(this).index())">10</li>
<li id="15" onclick="pagelim($(this).index())">15</li>
</ul>
</span>
</div>
Welcome to the wonderful world of functional programming.
I'm assuming you are doing a "get" request based on "index" which is a url? If that's the case, then you need to provide a callback.
$('#page_num li').get(index. function(id) {
var page_lim = id; // assuming that's what you sent back.
self.location="<?php echo get_option('head'); ?>"+'?details&limit=' + page_lim ;
});
Notice that you have to put everything in a function that is called after the ajax request is finished. I'm assuming that all you are sending back from the request is the id you need.
jQuery AJAX calls are asynchronous, meaning that the the function $(...).get(url, callback); returns a value BEFORE the AJAX call has finished. That callback function only happens after the AJAX call is completed. I'd advise some time spent with the jQuery API documentation.
You might also Google "javascript functional programming" and see if you can get an explanation of how JavaScript (and thus jQuery) does not always return the value you expect from functions. It's very different from other languages like PHP or ASP.NET in that regard.
Hi hope this will help you... Create a div (say "MyDiv") and put all the elements which you want to change dynamically(without page refresh)... Then try jQuery.load() method...Like
<div id = "MyDiv">
<div class="sort-links">
<span class="by-date" id="sort-by-date">Sort by: <a href="#" id='<?php _e($sort_by)?>' class='<?php _e($class)?>' onclick="dateby($(this).index())" >Date</a>
</span>
//list to select value
<span id="view-on-page">View on Page: <?php if($lim=="") { _e($limit); } else { _e($lim); } ?>
<ul id="page_num">
<li id="5" onclick="pagelim($(this).index())">5</li>
<li id="10" onclick="pagelim($(this).index())">10</li>
<li id="15" onclick="pagelim($(this).index())">15</li>
</ul>
</span>
</div>
</div> //end of MyDiv
Then change your script like
<script type="text/javascript" language="javascript">
function pagelim(index)
{
var page_lim=$('#page_num li').get(index).id;
$("#MyDiv").load("<?php echo get_option('head'); ?>"+'?details&limit=' + page_lim);
}
</script>
<script type="text/javascript" language="javascript">
function dateby(index)
{
var date_by=$('#sort-by-date a').get(index).id;
var cls=document.getElementById(date_by).className;
if(date_by=="ASC")
{
date_by="DESC";
}
else
{
date_by="ASC";
}
$("#MyDiv").load("<?php echo get_option('head'); ?>"+'?details&sort=' + date_by);
}
</script>
Please note that I havnt tested this...
Its very simple to use jQuery to perform AJAX requests... So pls refer this page
Try binding to the click event of your links. This way you can remove any inline javascript and its all neatly contained in your function.
$("li a").click(function() {
//should alert the id of the parent li element
alert($(this).parent.attr('id'));
// your ajax call
$.ajax({
type: "POST",
// post data to send to the server
data: { id: $(this).parent.attr('id') }
url: "your_url.php",
// the function that is fired once data is returned from your url
success: function(data){
// div with id="my_div" used to display data
$('#my_div').html(data);
}
});
});
This method means your list elements would look something like,
<li id="5">5</li>
This doesn't look ideal though as id="5" is ambiguous.
Try something like,
<li class="select_me">5</li>
then your click event binding can look like this,
// bind to all li elements with class select_me
$("li.select_me").click(function() {
// alert the text inside the li element
alert($(this).text());
});
hi i am building a php mysql database pagination page, so i have a list of records 2 rows long at the bottom of the record i want a div which opens up when the span above it is clicked, how do i set up the jquery to make it so that it takes the id of the <p> and expands it in jquery
<span id="button1">Toggle</span>
<p id="p1">
hello<br/>hello
</p>
<script>
$("#button1").click(function () {
$("#p1").slideToggle("slow");
});
</script>
when i output it in php mysql the button will all have a different id and the p will have different ids as well
//Jquery Code which calls toggle_visibility function
$(".pOne").click(function(){
toggle_visibility('partsIdThree');
})
.toggle( function() {
$(this).children("span").text("[-]");
}, function() {
$(this).children("span").text("[+]");
});
//HTML Code
<div id="parts_toogle_one">
<p class="pOne">Add Records <span>[+]</span></p>
<div id="msg_body_one">
<tr><td></td></tr>
</div>
</div>
// Javascript code
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == "inline") {
e.style.display = 'none';
}
else if(e.style.display == "none") {
e.style.display = "inline";
}
}
Something like this..
You can use a dynamic id retrieving, so you don't have to worry about the number of results..
For example:
<?php $i = 0;?>
<?php foreach($resultset as $result) : ;?>
<span class="activator" id="result<?php echo $i;?>">CLICK HERE</span>
<div id="panel_result<?php echo $i;?>">SLIDER DIV</div>
<!-- Do the rest of you processing of $result here; it just doesn't matter, for here you only need some identification, I used a number for convenience. -->
<?php ++$i;?>
<?php endforeach;?>
Your jquery:
$('.activator').click(function(){
var the_id = $(this).attr('id');
var the_panel = $('#panel_' + the_id);
$(the_panel).slideToggle('slow');
});
So you don't have to write a jQuery command for each line you print in php, use just this snippet and it will work out by itself which panel to slide, according to which span is clicked.
I have a page in php and all over the page I am using the <a tag to link.
For example:
<?php for($i=1;$i<=5;$++) {?>
<a href="abc.php?ref=<?php echo $i ?>"CLick me No. <?php echo $i ?> </a>
<?php } ?>
What I want to do is once we click on the link, jquery load function should called, like
$('#div1').load('abc.php?ref=1'null, function() {
});
but I can't change the php loop and <a tag ...
Thanks
Give each anchor a common class and an attribute that identifies the value of $i:
...
Then attach an on-click function to them:
$('a.numbered-anchors').click(function(e) {
var i = $(this).attr('anchor-id');
$('#div' + i).load(...);
});
You mean something like this:
"CLick me No. <?php echo $i ?>
$('#yourLink').click(function() {
$('#div1').load('abc.php?ref=1'null, function() {
});
});
Bobby
Something like this maybe :
$('a[href^="abc.php"]').click(function(event){
//do whatever you want
$('#div1').load(event.target.href, null, function() {});
});
PHP:
<?php for($i=1;$i<=5;$++) {?>
<a class="anchor-click" href="#" id="<?php echo $i ?>">CLick me No. <?php echo $i ?></a><br />
<?php } ?>
JS
$(function(){
$(".anchor-click").bind("click", function(event){
event.stopPropagation();
$('#div1').load("abc.php?ref="+$(this).attr("id"), null, function() {
});
});
});