Develop Reference

What is correct way to change image src using variable on different page?

javaScript Code:
function Productadd() {
var imageid = document.getElementById("pic1").src;
var textid = document.getElementById("text1").textContent;
localStorage.setItem("imagesrc", imageid);
localStorage.setItem("text", textid);
window.location.href = "E:/GOO%20WEB/medic-care/index3.html";
imageid = imageid.toString();
textid = textid.toString();
document.getElementById("image2").src = localStorage.getItem("imagesrc");
document.getElementById("text2").textContent = localStorage.getItem("textid");
}

You can not change an image on the next page that is loaded from the current page. The code only executes on the current page. So what you want to do is not possible.
You would need to have code running on the next page and trigger it somehow with localstorage, cookie, or a querystring parameter.

Replace url with ellipses

I'm showing url path for every page showing where the user is exactly. Like if user came to home->mobile->design then I'm showing user path like "home/mobile/design". everything is working fine but for mobile I have to hide content between home and design like home/.../design. I'm not sure how to implement this. Can someone help.... Thanks for your help in advance.

EDIT:
New example with toggling content:
var url = 'home/mobile/design';
var start = url.indexOf('/');
var end = url.lastIndexOf('/');
var finalString = url.substring(0,start+1) + '...' + url.substring(end, url.length);
$('#myURL').text(finalString);
$('#myURL').click(function(){
if(!$('#myURL').hasClass('toggle')){
$('#myURL').text(url);
$('#myURL').addClass('toggle');
}else{
$('#myURL').text(finalString);
$('#myURL').removeClass('toggle');
}
})
https://jsfiddle.net/2mq0dwbd/1/
This code will do what you want:
var url = 'home/mobile/design';
var start = url.indexOf('/');
var end = url.lastIndexOf('/');
alert(url.substring(0,start+1) + '...' + url.substring(end, url.length))
This code will account for another variants as well, if you have more "sections" inside it will only take the first one and the last one:
home/some/deep/section/goes/here
result:
home/.../here
You can play with it and modify it to meet your particular needs, of course.
Hope it helps!
Fiddle:
https://jsfiddle.net/2mq0dwbd/

In case you don't want to use slice/substring you can use a regex which results in a smaller amount of code:
var test = 'home/mobile/design';
test.replace(/\/.*\//, '/.../'); // home/.../design
It also works for different versions:
var test2 = 'home/mobile/design/test';
test2.replace(/\/.*\//, '/.../'); // home/.../test

Alter URL #ID with JQuery button

I'm trying to create a function where, on every button click, the ID at the end of the pages URL is added to by 1. So,
example.org/page -> (buttonclick) -> example.org/page#1 -> (buttonclick) -> example.org/page#2 etc. etc.
What I've got at the moment is:
var anchor = 0;
$('#bottom-right').click(function() {
var anchor += 1;
var anchorurl = "#" + anchor;
var currenturl = window.location.href;
var newurl = currenturl.slice(0, -1) + anchorurl;
window.location.replace(newurl);
});
But it doesn't really work & I imagine there is a cleaner solution...
Thanks in advance.

simply make it
$('#bottom-right').click(function() {
window.location.hash = ++anchor;
});
Make use of the built-in hash method.

So basically the url contains #.So you can also track this # and get the next number and increment it.
Code example:
var hashValue = window.location.href.substring(window.location.href.indexOf('#')+1);
window.location.hash = hashValue + 1;

have only one class name append to the end of href of an anchor tag?

var myClass;
jQuery(".option-set a").click(function() {
myClass = jQuery(this).attr("class");
jQuery("a.perma").each(function() {
var _href = jQuery(this).attr("href");
jQuery(this).attr("href", _href + "#filter=." + myClass);
});
});
Im using this code to append the class name of the filters to the end of the permalink for each thumbnail here
The issue Im running into now is that the class keeps getting assigned to the end of the permalink with each click so if I click on print then web then photography the url of the permalink would appear as: /#filter=.print#filter=.web#filter=.photography which still works, however it would be great if for the sake of tidiness it only displayed the last one.
Also once a thumbnail is clicked and the next page is loaded, I need the thumbnails to maintain the current permalink of the filter selected. Any ideas would be appreciated. I just cant seem to figure this out. I truly appreciate the help!!

call it just once not on every click...
jQuery(document).ready(function() {
myClass = jQuery('.option-set a').attr("class");
jQuery("a.perma").each(function() {
var _href = jQuery(this).attr("href");
jQuery(this).attr("href", _href + "#filter=." + myClass);
});
jQuery(".option-set a").click(function() {...});
});

This modification should check if current class filter is not present.
jQuery("a.perma").each(function() {
var _href = jQuery(this).attr("href"),
newHref = _href.indexOf(myClass) === -1 ? _href + "#filter=." + myClass : _href;
jQuery(this).attr("href", newHref);
});
});
And to maintain filtered thumbnail urls on next page load you need to work with server and parse what parameters it passes or use Web storage to save current filtered path and set thumbnail hrefs accordingly on document load.

How can I change the href of an anchor after it has been clicked?

I have a page that pulls in data via AJAX. As well as this I have a link to download said data as a CSV file.
The problem I have is that upon I need to pass some parameters along with the click event so that the server can return the correct CSV file.
Without any processing the link looks like this:
Download Target Reports
This then fires off an ASP.NET MVC Controller action that returns the CSV. What I want to do though is pass two parameters along in the query string. Initially I thought that I could intercept the click event and add data to the query string like so:
var holder = $('.hidden-information').first();
var newOutlets = $('input[name="newoutlets"]', holder).val();
var queryDate = $('input[name="enddate"]', holder).val();
var anchor = $(this);
var link = anchor.attr('href');
link = link + "?endDate=" + queryDate + "&newOutlets=" + newOutlets;
anchor.attr('href', link);
It would seem that changing the href at this stage will not update the link in time and the URL will be as it was when it hits the server?
Is it possible to change a URL after it has been clicked or do I need to look at another method?
Thanks

You could redirect the window yourself, like this:
var holder = $('.hidden-information').first();
var newOutlets = $('input[name="newoutlets"]', holder).val();
var queryDate = $('input[name="enddate"]', holder).val();
window.location.href = this.href + "?endDate=" + queryDate + "&newOutlets=" + newOutlets;
return false; //prevent default going-to-href behavior
Or, whatever is updating those hidden fields, update the link then instead of when it's clicked, for example:
$("#someField").change(function() {
var holder = $('.hidden-information').first();
var newOutlets = $('input[name="newoutlets"]', holder).val();
var queryDate = $('input[name="enddate"]', holder).val();
$("a.black").attr("href", function() {
return "/manager/TargetResults.csv" + "?endDate=" + queryDate + "&newOutlets=" + newOutlets;
});
});
The main difference is this still allows normal click behavior to work, ctrl+click, etc.

Just rounding out your options, you could put a span inside the link:
<span>Download Target Reports</span>
...and then hook the click event on the span, which will happen before the click on the link.

you can make javascript redirect here:-
var holder = $('.hidden-information').first();
var newOutlets = $('input[name="newoutlets"]', holder).val();
var queryDate = $('input[name="enddate"]', holder).val();
var anchor = $(this);
var link = anchor.attr('href');
link = link + "?endDate=" + queryDate + "&newOutlets=" + newOutlets;
anchor.attr('href', link);
location.href=link;
ya someone can disable js but your code is completely based on js.
Thanks

Without having a href, the click will reload the current page, so you need something like this:
jhhghj
Or prevent the scroll like this:
jhhghj
Or return false in your f1 function and:
jhhghj
....or, the unobtrusive way:
jhg
jhhghj
<script type="text/javascript">
document.getElementById("myLink").onclick = function() {
document.getElementById("abc").href="xyz.php"; `enter code here`
return false;
};
</script>