call jquery load on <a > link - php

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() {
});
});
});

Related

php jquery-load more data inside a loop

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?

jQuery cannot change bootstrap's data-placement

I've found a bug.
jQuery cannot seem to change the data-placement of its popovers after the HTML has been rendered.
Example time:
$('[data-toggle=popover],[rel=popover]').popover();
<? if (isset($labels) && $labels): ?>
<div id="<?= $id ?>" class="product-labels leak-image-click">
<? foreach($labels as $label): ?>
<a class="product-label cursor-pointer" data-label="<?= $label ?>" tabindex="0" data-toggle="popover" role="button" data-trigger="focus" <?= $label == "soldout" ? "data-soldout-target='".$soldout."'" : "" ?>>
</a>
<? endforeach ?>
</div>
<? endif ?>
labels.init = function(id) {
$('#' + id).children(".product-label").each( function() {
var labelName = $(this).data("label"),
placement = meventi.getViewSize() == "xs" ? "right" : "top",
options = {
"placement": "top"
};
$(this).attr("data-content", labels.descriptions[$(this).data("label")]);
$(this).addClass("product-label-" + labelName );
$(this).attr("data-placement", "left");
$(this).popover(options).popover("show");
$(this).click(function(e){
$(e.target).popover("show");
});
});
};
Then i use jQuery to change data-placement when the page loads.
append_slot("js") is from the Symfony framework.
<? append_slot("js") ?>
meventi.labels.init("<?= $id ?>");
<? end_slot() ?>
And when looking at the HTML element in the Chrome Developer tools, I can see that the element reads data-placement="top", however the popover still appears on the left like it was originally set
"doge" is not finding the class, you need ".doge".
Try changing
$("doge").attr("data-placement", "top");
to
$(".doge").attr("data-placement", "top");
Of course it doesn't work you have a typo and aren't attaching a handler.
$(document).ready(function(){
$(".doge").attr("data-placement", "top");
});
Got it!
Globally initiating all popovers with $('[data-toggle=popover],[rel=popover]').popover(); must be called after declaring the data-placement $(this).attr("data-placement", "left");
Changing the data-content like meventi.labels.descriptions[$(this).data("label")]); and other datas can be called after $('[data-toggle=popover],[rel=popover]').popover();
You can also edit data attributes via the jQuery data() method:
$(".doge").data("placement", "top");

showing or hiding div with id generated using php and javascript

I am trying to hide or show the div based on the div id from the php function. I am not able to make it work, please help me.
Javascript:
<script>
showOrHide(id) {
var elem=getElementById(id);
if(elem.style.visibility="hidden")
elem.style.visibility="visible";
else
elem.style.visibility="hidden";
}
</script>
PHP Script:
<?php
function display_link($link_id,$upvote_array,$downvote_array,$divid) {
?>
More links
<div id="<?php echo $divid ?>" style="visibility:hidden;">
</div>
<?php } ?>
Here's a cleaned-up version of your function.
function showOrHide(id) {
var elem = document.getElementById(id);
elem.style.visibility = (elem.style.visibility === 'hidden')? 'visible' : 'hidden';
}
<script>
function showOrHide(id){
var elem = getElementById(id);
if(elem.style.visibility=="hidden"){
elem.style.visibility="visible";
} else {
elem.style.visibility="hidden";
}
}
</script>
<?php
function display_link($link_id,$upvote_array,$downvote_array,$divid)
{
?>
More links
<div id="<?php echo $divid ?>" style="visibility:hidden;">
</div>
1 - visibility == 'hidden'
2 - missing ; after visibility="visible" and ="hidden"
3 - href="javascript:showOrHide('')" - missing '' inside your javascript function
Try this
<script>
function showOrHide(id){
var elem = document.getElementById(id);
elem.style.visibility = (elem.style.visibility === 'hidden')? 'visible' : 'hidden';
}
</script>
<?php
function display_link($link_id,$upvote_array,$downvote_array,$divid)
{
?>
More links
<div id="<?php echo $divid ?>" style="display:hidden;">
</div>
<?php
}
?>

Passing link value to ajax function onclick event

i have a link that contain some data
eg
<li><?php echo $result22['category']; ?></li>
i want this link to pass this $result22['category']; value to the ajax function
am trying this
<script type="text/javascript">
function getcategory(cat)
{
var id = cat.value;
alert("hi" + id);
}
</script>
but its shows hi undefined in alert box
what am doing wrong ?
am not getting correct value of $result22['category']; in alert box
Since cat is an a element, it won't have a value property. Use textContent or innerText (or innerHTML if there could be child elements):
function getcategory(cat) {
var id = cat.textContent;
alert("hi" + id);
}
It's generally only form controls that have a value property (the input element for example).
Why not just do this?
<li><?php echo $result22['category']; ?></li>
<script type="text/javascript">
function getcategory(content) {
alert(content);
}
</script>
Try this..
<li><?php echo $result22['category']; ?></li>
<script type="text/javascript">
function getcategory(cat)
{
//var id = cat.value;
alert("hi" + cat);
}
</script>
I would recomend you output into the function if your are not using a separate javascript file to bind the onClick handler that is :
<li>
<a href="" onclick="getcategory('<?php echo $result22['category']; ?>');">
<?php echo $result22['category']; ?>
</a>
</li>
hello
<script type="text/javascript">
function getcategory(ele) {
var id = ele.innerHTML;
alert(id);
}
</script>

How to get link URL from JavaScript?

I have the following code :
<?php
$i = 0;
foreach($this->list as $l) {
$link = JRoute::_("index.php?option=com_ecommerce&view=detail&id=$l->id");
<div class="quickview" id="quickview_<?php echo $i;?>">
<a href='<?php echo $link ?>' class='basic'>Quick view</a>
</div>
i++;
}
?>
<script>
jQuery(function ($){
var link = $('.quickview .basic').val();
$('.quickview .basic').click(function (e) {
alert(link);
return false;
});
});
</script>
I can't get link from tag <a>.
var link =$('.quickview .basic').attr("href"); should do the trick.
If you refer
I can't get link from tag <a>, please help me!
to the link you're clicking, this would work:
$(".quickview").find(".basic").click(function(e) {
e.preventDefault();
var url = $(this).attr("href");
alert(url);
});

Categories