Jquery - How to change part of attribute href in link? - javascript

I don't know what I am doing wrong with changing href attribute in link from ?page to &page. It stays on ?page. Thank you for any advice.
Jquery:
var article_pagination_change = function(){
$('pagination a').each(function(){
$(this).href.replace('?page','&page');
});
}
article_pagination_change();
HTML:
<div id="pagination80" class="pagination" style="">
<a class="first" data-action="first" href="?page=1"><<</a>
<a class="previous" data-action="previous" href="?page=1"><</a>
<input class="pag_input_80" type="text" value="1 of 12" data-max-page="12" readonly="readonly">
<a class="next" data-action="next" href="?page=2">></a>
<a class="last" data-action="last" href="?page=12">>></a>
</div>

You need to actually set the attribute:
var article_pagination_change = function(){
$('.pagination a').each(function(){
var newurl = $(this).attr('href').replace('?page','&page');
$(this).attr('href', newurl);
});
}
article_pagination_change();
Note that I added the . before pagination and am using attr('href') instead of just href.
Here's a working jsFiddle.

If you don't mind changing your code a bit more, you can try this simpler approach:
var article_pagination_change = function(){
$('.pagination a').attr('href',function(index,attr){
return attr.replace('?','&');
});
}
article_pagination_change();
You don't really need the .each() nor replacing ?page with &page unless you had extra ?s on your hrefs...
Sample JSFiddle

Related

Jquery : Access data-link attribute

i want to get data-link attribute form an image click .
Following is my image tag
<a href="#" class="aclick">
<img data-link="petroliumjelly.php" src="productsimgs/petroliumjelly.png" class="img-responsive" id="2">
</a>
to get it on click this is what i am doing ,
<script type="text/javascript" language="javascript">
$(".aclick").click(function (e) {
e.preventDefault();
alert($(this).attr("data-link"));
var link = $(this).data("data-link");// tried both
console.log(link);
});
</script>
when i try to log or alert it, i get undefined
Please help me how can i fix it
Below is code snippet to help you. data-link attribute is in img tag and not in 'a' tag.
$(".aclick").click(function (e) {
e.preventDefault();
alert($(this).find('img').attr("data-link"));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="aclick">
<img data-link="petroliumjelly.php" src="productsimgs/petroliumjelly.png" class="img-responsive" id="2">
</a>
The reason you're not getting a value is that you're getting the data-link attribute of the anchor tag as that is what represents this. If you find the child image you'll get the data-link. Here is a fiddle of it working.
<script type="text/javascript" language="javascript">
$(".aclick").click(function (e) {
e.preventDefault();
alert($(this).find('img').attr('data-link'));
var link = $(this).find('img').attr('data-link')
console.log(link);
});
</script>
You can try this,
<script type="text/javascript" language="javascript">
$(".aclick").click(function (e) {
e.preventDefault();
alert($(this).find('img').attr('data-link'));
var link = $(this).find('img').attr('data-link')
console.log(link);
});
</script>
In the context, $(this) refers to the link, not the image.
To get the image instead, use:
var link = $('img', $(this)).data('link');
That gets the img element inside the link (which is $(this)).
Read more about the .data()-method here: https://api.jquery.com/data/
In my opinion, it makes it a bit cleaner than using the .attr()-method.
You assign you data-link attribute in img tag,
so you have to write click event on img tag
$(".aclick img").click(function (e) {
e.preventDefault();
alert($(this).data("link"));
var link = $(this).data("link");
console.log(link);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="aclick">
<img data-link="petroliumjelly.php" src="productsimgs/petroliumjelly.png" class="img-responsive" id="2">
</a>
You click event must be on the image tag as well.
<script type="text/javascript" language="javascript">
$(".aclick img").click(function (e) {
e.preventDefault();
alert($(this).attr("data-link"));
var link = $(this).attr("data-link");// tried both
console.log(link);
});
</script>
working Fiddle
$(".aclick img").click(function (e) {
e.preventDefault();
alert($(this).attr("data-link"));
var link = $(this).attr("data-link");// tried both
console.log(link);
});
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<a href="#" class="aclick">
<img data-link="petroliumjelly.php" src="productsimgs/petroliumjelly.png" class="img-responsive" id="2">
</a>
Img is the child element of a.so try with $(this).children('img') .And use use with data('link') instead of data('data-link')
$(".aclick").click(function(e) {
e.preventDefault();
alert($(this).children('img').attr("data-link"));
var link = $(this).children('img').data("link"); // tried both
console.log(link);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="aclick">
<img data-link="petroliumjelly.php" src="productsimgs/petroliumjelly.png" class="img-responsive" id="2">
</a>
this refers to the anchor tag not the image tag.
use this
$('.aclick img').attr("data-link");
On (.aclick).click() data-link will return undefined, the data-link is on the image, get the image using .find()
The find() method returns descendant elements of the selected element.
To get the value of data* use .data()
The data-* attributes is used to store custom data private to the page or application.
.data() Store arbitrary data associated with the matched elements or return the value at the named data store for the first element in the set of matched elements.
$(".aclick").click(function (e) {
e.preventDefault();
var link = $(this).find('img').data('link');
console.log(link);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="aclick">
<img data-link="petroliumjelly.php" src="productsimgs/petroliumjelly.png" class="img-responsive" id="2">
</a>

Click on a link and go to a input

I'd like to make a link to a input. My current link example works (takes me to the area where the id is set) but what I really want is when a user clicks on the link to take him exactly to the input, being able to type right away.
<input type="text" id="search" name="search">
<a href="#search">
<img src="http://www.example.com/images/something.jpg" alt="">
</a>
Is this even achievable without JQuery/JavaScript? Please post solutions in any method you can imagine. Been searching for this for a while and couldn't find an answer.
No need to use javascript: use a label instead of a link with the for attribute
<input type="text" id="search" name="search">
<label for="search">
<img src="http://www.example.com/images/something.jpg" alt="something">
</label>
if you also need a smooth page scroll animation, in order to reach the top offset of the input element, you can instead use a script, e.g.
Codepen Example: http://codepen.io/anon/pen/VLyOqg
$(function() {
$('label[for]').on('click', function(evt) {
evt.preventDefault();
var inputId = "#" + $(this).attr('for');
$('html:not(:animated), body:not(:animated)').animate({
scrollTop: $(inputId).offset().top
}, 600, function() {
$(inputId).focus();
});
});
});
<script>
function setFocus(){
elm = document.getElementById("search");
jump(elm);
elm.focus();
}
function jump(elm){
var top = elm.offsetTop; //Getting Y of target element
window.scrollTo(0, top); //Go there.
}​
</script>
...
<a href="javascript:setFocus('search')">
<img src="http://www.example.com/images/something.jpg" alt="">
</a>
Use jQuery focus!
$('[href="#search"]').click(function(){$('#search').focus();});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="search" name="search">
<a href="#search">
<img src="http://www.example.com/images/something.jpg" alt="">
</a>

Link not working on image?

I've been attempting to create an effect where a user clicks on an image, that image is replaced by another image which also acts as a link.
However my problem is that whenever I click the replaced image, the link doesn't work.
Fiddle: http://jsfiddle.net/ha6qp7w4/321/
$('.btnClick').on('click',function(){
$(this).attr('src','https://placekitten.com/g/200/300')
$(this).attr('href','google.com')
});
img tags don't have href properties. You need to wrap the image in an anchor and assign the url to that, or do a custom redirect.
Notice your image html on inspection of element:
<img src="https://placekitten.com/g/200/300" id="1" class="btnClick" href="google.com"> <!-- not valid! -->
This isn't valid because imgs aren't anchors!
function first() {
this.src = 'https://placekitten.com/g/200/300';
$(this).unbind("click");
$(this).on("click", second);
}
function second() {
window.location.href = "https://www.google.com";
$(this).unbind("click");
$(this).on("click", first);
}
$('.btnClick').on('click', first);
(I tried to make a fiddle but it wouldn't save, but this should work)
You need to store your actions in functions so you can revert if need be. First action is the change the source, then change the event to redirect you like a link.
here is an example.
example
html part
<img src="http://i.imgur.com/o46X87d.png" data-new="http://i.imgur.com/9lf2Mjk.png" id="1" class="btnClick" />
add data-new attribute on image with new url of image
and replace it with js
$('.btnClick').on('click',function(){
var url = $(this).attr("data-new");
$(this).attr("src", url);
});
I would use a totally different approach, but here's how to do that with the code you already have:
<div class="btnClick">
<img src="http://i.imgur.com/o46X87d.png" id="1" />
<a href="javascript:check()" id="2" style="display:none;">
<img src="http://i.imgur.com/9lf2Mjk.png" id="static" />
</a>
</div>
<script type="text/javascript">
$('.btnClick').on('click',function(){
if($('#1').is(':visible')) {
$('#1').hide();
$('#2').show();
} else {
$('#1').show();
$('#2').hide();
}
});
</script>
I purposely didn't use toggle() to better show the technique, in case you'd want to turn the click event off when the clicking image appears etc.

anchor tag data not accessible when clicking on glyphicons inside the anchor tag

How do I get the data when there is only a glyphicon in the anchor tag? Below is a demonstration of the problem...
http://jsfiddle.net/sua0yp4y/2/
HTML:
<h1 id="output1">OUTPUT1</h1>
<h1 id="output2">OUTPUT2</h1>
<a class="withIcon" href="#" data-taskid="1123" data-userid="5813"><span class="glyphicon glyphicon-time"></span></a>
<h1 id="output3">OUTPUT3</h1>
<h1 id="output4">OUTPUT4</h1>
<a class="withoutIcon" href="#" data-taskid="1123" data-userid="5813">without icon</a>
JS:
$('body').on('click','a.withIcon',function(e){
e.preventDefault();
$("h1#output1").text($(e.target).data('userid'));
$("h1#output2").text($(e.target).data('taskid'));
});
$('body').on('click','a.withoutIcon',function(e){
e.preventDefault();
$("h1#output3").text($(e.target).data('userid'));
$("h1#output4").text($(e.target).data('taskid'));
});
Add the closest('a') to find the closest anchor tag and get the data values:
$("h1#output1").text($(e.target).closest('a').data('userid'));
$("h1#output2").text($(e.target).closest('a').data('taskid'));
http://jsfiddle.net/sua0yp4y/3/
The user clicks over the image you can change the event:
$('body').on('click','.glyphicon',function(e){
e.preventDefault();
$("h1#output1").text($(e.target).parent().data('userid'));
$("h1#output2").text($(e.target).parent().data('taskid'));
});
fiddle
Use this instead of e.target to referece the element you clicked on.
Updated Fiddle - http://jsfiddle.net/sua0yp4y/5/
$('body').on('click','a.withIcon',function(e){
e.preventDefault();
$("h1#output1").text($(this).data('userid'));
$("h1#output2").text($(this).data('taskid'));
});
$('body').on('click','a.withoutIcon',function(e){
e.preventDefault();
$("h1#output3").text($(this).data('userid'));
$("h1#output4").text($(this).data('taskid'));
});
replace $(e.target) with $(this) your problem get resolved.
demo http://jsfiddle.net/sua0yp4y/8/

jquery script to select previous brother

hi im using jquery mobile this is the code
<form class="ui-filterable">
<input id="filterBasic-input" data-type="search">
</form>
<div data-role="collapsible">
<h2><span>paris</span><span class="pays">france</span>
<a class="gene02"data-role="button" data-inline="true" data-mini="true">generique</a></h2>
<p>code:24</p>
</div>
</li>
<li>
<div data-role="collapsible">
<h2><span>marakeche</span>
<span class="pays">maroc</span>
<a class="gene02"data-role="button" data-inline="true" data-mini="true">generique</a>
</h2>
<p>code:3300</p>
</div>
</li>
i want wen i click on class="gene02" it will take a valu of a precedent span with class pays and put it on a form class="ui-filterable" i try to do this form class ui-filterable
$(document).ready(function () {
$(".gene02").click(function () {
$("#filterBasic-input").val($(".pays").html());
});
});
but it only select france not maroc in second div . thx for help
You can get it like:
$(".gene02").click(function()
{
var $brotha = $(this).parent().find(".pays");
//$brotha is your element
});
http://jsfiddle.net/p7ENh/
http://jsfiddle.net/p7ENh/1/
$(".gene02").click(function () {
$("#filterBasic-input").val($(this).prevAll(".pays").html());
});
If it's always the first previous sibling you can also use $(this).prev() instead.
Basically from a class selector or a collection of elements, if you access any of its properties/values, it will return the value of the first one in the collection only.
Try,
$(document).ready(function() {
$(".gene02").click(function() {
var xOutput = '';
$('.pays').each(function(){ xOutput += $(this).html(); });
$("#filterBasic-input").val(xOutput);
});
});
$(document).ready(function() {
$(".gene02").click(function() {
$("#filterBasic-input").val($(this).closest('div').find('.pays').html());
});
});

Categories

Resources