How to get link URL from JavaScript? - php

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

Related

How to get the ids of div looping through foreach in jquery variable

Hello there i'm having trouble in getting the id's of a div that is stored in an foreach loop. What i want to do is to get the id one by one in jquery as the ids are looping in the php code.
<script>
$(document).ready(function(){
$(".cat-anchor").click(function(){
var target=('get the id of cat-title class here')
});
});
</script>
<?php
foreach($cat_arr['cat_pro'] as $cat_name){
echo "<div class='cat-back'>";
echo "<a href='#".$cat_name[0]."' class='cat-anchor'>".$cat_name[1]."</a> <br>";
echo "</div>";
}
foreach($cat_arr['cat_pro'] as $mykey=>$myvalues){
echo '<div name="'.$myvalues[1].'" class="cat-title" id="'.$myvalues[0].'">
<h2>'.$myvalues[1].'</h2></div>';
?>
<script>
$(document).ready(function(){
$(".cat-anchor").click(function(){
$(".cat-title").each(function(index, element) {
var target=$(this).attr("id");
});
});
});
</script>
Trying this, you'll get object for each div and use them as as you wish.
<script>
$(document).ready(function(){
$(".cat-anchor").click(function(){
var target = $(this).attr('id');
});
});
</script>
Just Google for how to retrieve an element's attribute from jQuery. The .attr() function will help.
<div class="cat-title" id="1"></div>
<div class="cat-title" id="2"></div>
<div class="cat-title" id="3"></div>
<div class="cat-title" id="4"></div>
<input type="button" class="cat-anchor" value="get ids">
<script type="text/javascript" src="jquery.js"></script>
<script>
$(document).ready(function(){
$(".cat-anchor").click(function(){
var target='';
var divs = $(".cat-title");
for (var i = 0; i < divs.length; i++) {
target += divs[i].id;
};
alert(target);
});
});
</script>
First define a variable which increments till the loop completion and also append the same variable at id="your-div-name'.$i.'" as shown below
$i=1
foreach($cat_arr['cat_pro'] as $mykey=>$myvalues){
echo '<div name="'.$myvalues[1].'" class="cat-title'.$i.'" id="'.$myvalues[0].'">
<h2>'.$myvalues[1].'</h2></div>';
$i++;
}
and then when writing your script just execute the loop as no.of times prev loop executes, simultaneously echo the number for div as here. Hope this is clear!
<script>
$(document).ready(function(){
$(".cat-anchor").click(function(){
<?php
for($j=0;$j<=$i;$j++){
echo 'var target=document.getElementById("cat-title'.$j.'").innerHTML;';
}
?>
});
});
</script>

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
}
?>

Load new page in div part 2

I have managed to load the new page into the div (thanks to everyone for your help) but it looks pretty bad (got menu bar and logo, but I only wanted the content), so instead I need to load only a div from the new page. I tried a new script but got redirected to the new page. Please help.
<script>
jQuery(document).ready(function() {
jQuery('.stil_link_img a').click(function(){
var x = $(this).attr("href") + "#content_eco";
jQuery("#new_page").load(x);
return false;
});
});
</script>
<div id="pachete">
<?php
$result=mysql_query("SELECT* FROM imagini");
while($data=mysql_fetch_row($result)){
if( ($data[3]==1)&&($data[2]==2) ){ ?>
<div class="stil_link_img">
<img src="upload/<?php echo $data[1];?>">
</div>
<?php }
}?>
</div>
<div id="new_page">
//some content which should be replaced with my loaded page
</div>
jQuery(document).ready(function() {
jQuery('.stil_link_img a').click(function(){
var $pageContent = jQuery('<div/>').load($(this).attr("href"));
jQuery("#new_page").html(jQuery("#content_eco",$pageContent).html());
return false;
});
});
I assume #content_eco is the divisions ID in the new page(the url from href attribute).
or you can load just the content from the url and avoid the link postback as
<script>
jQuery(document).ready(function() {
jQuery('.stil_link_img a').click(function(){
var x = $(this).attr("rel") + " #content_eco";
jQuery("#new_page").load(x);
return false;
});
});
</script>
<div id="pachete">
<?php
$result=mysql_query("SELECT* FROM imagini");
while($data=mysql_fetch_row($result)){
if( ($data[3]==1)&&($data[2]==2) ){ ?>
<div class="stil_link_img">
<img src="upload/<?php echo $data[1];?>">
</div>
<?php }
}?>
</div>
<div id="new_page">
//some content which should be replaced with my loaded page
</div>
Hope this helps you.

trigger link in CListView from dropdownlist

I need to trigger link from CListView when change selected value in dropdownlist.
$(function () {
$(".dd").change(function(){
$('.title').trigger('click');
});
});
<div class="dd">
<?php echo CHtml::dropDownList('title', '', $RawData); ?>
</div>
//view for CListView
<div class="title" id="">
<?php echo CHtml::link(CHtml::encode($data->naslov), Yii::app()->request->baseUrl.'/one/two?id1='.$data->id2.'&id2='.$data->id2 ?>
</div>
OK, I solved the problem
$(function () {
$(".dd").change(function(){
var valString = $(".dd option:selected").val();
var link = $('#titID_'+valString+' a').attr('href');
//alert(link);
$('#titID_'+valString).bind('click', function() {
window.location.href = link;
return false;
});
$('#titID_'+valString).trigger('click')
});
});

call jquery load on <a > link

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

Categories