We Keep Coding

hyperlink alternate text replacement

At the moment i've got this code, which replaces a span class whith a hyperlink. The hyperlink includes a abbreviation and the alternate texxt for the hyperlink includes the same abbreviation. Now what i want to do is, to somehow replace the second abbreviation in the alternate text of the hyperlink. So that there isn't "click here to visit + 'name of'abbreviation" but instead an alias. So if the abbreviaton is ggl, the alias should be google. But the hyperlink shouldn't use this alias. Can sb help me? thx
(function($) {
var number = "1234567";
function linkBuilder(abbreviation) {
return "<a href='https://www.test.com/" + abbreviation + "?sitenumber=" + number + "default'>Click here to visit " + abbreviation + "</a>";
}
function linkBuilder2(abbreviation2) {
return "<a href='https://www.test.com/" + abbreviation2 + "?sitenumber=" + number + "default'>Click here to visit " + abbreviation2 + "</a>";
}
jQuery(document).ready(function() {
var fl = $(".first-link");
if (fl.length > 0) {
fl.html(linkBuilder(fl.data("abbreviation")));
}
var sl = $(".second-link");
if (sl.length > 0) {
sl.html(linkBuilder2(sl.data("abbreviation2")));
}
});
})(jQuery);

Here is a working jsfiddle:
https://jsfiddle.net/e7qdx031/1/
linkBuilder() should be re-usable, as kalsowerus mentioned.
Another thing that should be mentioned is that the following code returns a collection of elements, not just a single element.
var fl = $(".first-link");
...
var sl = $(".second-link");
The code you have provided will not function properly if there are multiple .first-link classes on the page. So instead I would iterate over each element using $.each() and run the linkBuilder() function on them individually.
As for the linkBuilder function I would modify it to accept the element object, then read the properties to retrieve alias and name. Full name is something that you seemed to indicate you need, but was not present in the code.
(function($) {
var number = "123456";
function linkBuilder($obj) {
var abbreviation = $obj.data('abbreviation');
var name = $obj.data('name');
return "<a href='https://www.test.com/" + abbreviation + "?sitenumber=" + number + "default'>Click here to visit " + name + "</a>";
}
jQuery(document).ready(function() {
$('.first-link, .second-link').each(function(index, obj){
$(obj).html(linkBuilder($(obj)));
});
});
})(jQuery);

What you probably want is something like this:
function linkBuilder(abbreviation, alias) {
return "<a href='https://www.test.com/" + abbreviation + "?sitenumber=" + number + "default'>Click here to visit " + alias + "</a>";
}
Just pass the display-name you want for your link as the second argument.

Make word in into a link jQuery

I'm trying to make this:
<td class="Monthly Status-cell">/fileid=XXXX</td>
Display as
http://www.domain.com/fileid=XXXX
Can you tell me what is wrong with my code?
$('.Status-cell').replaceWith(function() {
var url = $.trim($(this).text());
return '' + url + '';
});
Thanks!

Use .html() instead of .replaceWith(). While using replaceWith you are replacing the td with anchor inside your table, which is invalid and that must be causing your alignment to get messed up.
$('.Status-cell').html(function(_, currentText) {
var url = "http://www.domain.com" + $.trim(currentText);
return '' + url + '';
});
Fiddle

Rather than replace the td with a link you should place the link in the td. Also you didn't add the domain to the link
$('.Status-cell').html(function() {
var url = window.location.protocol+'//'+window.location.host+$.trim($(this).text());
return '' + url + '';
});
http://jsfiddle.net/bUpYE/1/

Try
$('.Status-cell').html(function(idx, value){
value = $.trim(value);
return 'http://www.domain.com' + value + '';
})
Demo: Fiddle

Place the link in the cell using .html() instead of .replaceWith():
var domain = window.location.hostname; // current domain
$('.Status-cell').html(function(i, value) {
var link = domain + $.trim(value);
return '' + link + '';
});
http://jsfiddle.net/samliew/ZUYCX/

Value from a text field is not returning anything

I'm trying to build a little app where the user enters a store name which will become the alt text to an image and the URL of their store which will become a h ref, which will then generate some copy and paste code to use on their website.
The problem I have is that when trying to use vanilla JavaScript to read the value of the store name nothing is showing.
Please see my fiddle:
http://jsfiddle.net/willwebdesigner/gVCcm/
$(document).ready(function() {
// Creates a method and prototype for the Array for splicing up words
Array.prototype.removeByValue = function(val) {
for(var i=0; i<this.length; i++) {
if(this[i] == val) {
this.splice(i, 1);
break;
}
}
}
var myStore = {
storeName: document.getElementById("storeName").value,
Url: document.getElementById("yourURL"),
instructions: "<p>Please copy the code above and paste it into your webpage to display the shop4support logo and a link to your store.</p>",
blackLogo: function() {
return "<img src="https://www.shop4support.com/Resources/home/information/InformationForProviders/Availables4s-bk.jpg" alt="" + this.storeName + " is available on shop4support" />";
}
}
$("#urlForm").submit(function(e) {
// Clear output form first
$(output).html(' ');
e.preventDefault();
// Create an array for conditional statements
var address = [];
address = $(myStore.Url).val().split("www");
// Need to put a conditional in here to detect if https://
if(address[0] === "https://") {
$(output)
.slideDown()
.prepend("<a href=""+ $(myStore.Url).val() + "">" + myStore.blackLogo() + "</a> ")
.append(myStore.instructions);
} else if(address[0] === "http://") {
// Remove the http part off the URL
var removeHttp = address;
removeHttp.removeByValue('http://');
$(output)
.slideDown()
.prepend("<a href="https://www" + removeHttp + "">" + myStore.blackLogo() + "</a> ")
.append(myStore.instructions);
} else {
$(output)
.slideDown()
.prepend("<a href="https://"+ $(myStore.Url).val() + "">" + myStore.blackLogo() + "</a> ")
.append(myStore.instructions);
}
});
});
Thanks Will

The moment you are initializing the myStore object the values aren't filled in yet. You will have to do this on submit.
So you can move the var myStore = {} into the submit callback:
http://jsfiddle.net/gVCcm/1/

update your code as :
$("#urlForm").submit(function(e) {
myStore.storeName= (document.getElementById("storeName").value);
/* The rest of your code */
}

Initialize your myStore variable in:
$("#urlForm").submit(function(e) {
var myStore = {}
});

add parameter to links on page using jquery

How do I add let's say something like ajax=1 to all links on my page with jquery. I will also need to check if the url has existing parameters. for example http://example.com/index.php?pl=132 will have to become http://example.com/index.php?pl=132&ajax=1
Also, if the link does not have any parameters, for example http://example.com/index.php, it will become http://example.com/index.php?ajax=1 I want to load the jQuery script on document ready so all links are changed on page load.

You could do something like this:
$(function() {
$("a").attr('href', function(i, h) {
return h + (h.indexOf('?') != -1 ? "&ajax=1" : "?ajax=1");
});
});
On document.ready this looks at every <a>, looks at it's href, if it contains ? already it appends &ajax=1 if it doesn't, it appends ?ajax=1.

Like this:
$(function() {
$('a[href]').attr('href', function(index, href) {
var param = "key=value";
if (href.charAt(href.length - 1) === '?') //Very unlikely
return href + param;
else if (href.indexOf('?') > 0)
return href + '&' + param;
else
return href + '?' + param;
});
})

Here is a solution I put together for native Javascript, it supports existing query strings and anchors:
function addToQueryString(url, key, value) {
var query = url.indexOf('?');
var anchor = url.indexOf('#');
if (query == url.length - 1) {
// Strip any ? on the end of the URL
url = url.substring(0, query);
query = -1;
}
return (anchor > 0 ? url.substring(0, anchor) : url)
+ (query > 0 ? "&" + key + "=" + value : "?" + key + "=" + value)
+ (anchor > 0 ? url.substring(anchor) : "");
}
I've posted my existing tests on JSBin: http://jsbin.com/otapem/2/

If you're interested in plugins, there's the jQuery Query String Object. This will allow you simple checking of parameters in the querystring, and if necessary the ability to add more, remove some, or edit others.

Taking what is above, this is the best way to concatenate parameters to links.
Also avoid link with href like href="Javascript:YourFunction();"
$(function(){
var myRandom = getRandom();
$('a[href]').each(function(i){
var currHref = $(this).attr("href");
var isAfunction = currHref.substring(0,10);
if(isAfunction == "javascript"){
$(this).attr("href",currHref);
}else{
if (currHref.charAt(currHref.length - 1) === '?')
$(this).attr("href",currHref);
else if (currHref.indexOf('?') > 0)
$(this).attr("href",currHref+"&rand="+getRandom());
else
$(this).attr("href",currHref+"?rand="+getRandom());
}
});
});
function getRandom(){
var randomnumber = Math.floor(Math.random()*10000);
return randomnumber;
}

a href must be full and corrected URL.
$(function() {
$('a[href]').attr('href', function(index, href) {
var url = new URL(href);
url.searchParams.set('ajax',1);
return url;
});
})
JSFiddle

How would I remove from spaces from a search form using jQuery?

I've replaced the submit URL from the search form with this jQuery snippet:
<script type="text/javascript">
$(document).ready(function() {
$('.search-form').submit(function() {
window.location.href = "/search-" + $('.search-form input:text').val() + "-" + "keyword"+ "-"+ "keyword2/" + $('.search-form input:text').val() + ".html";
return false;
});
});
</script>
This works fine and turns the URL into a nice SEO cleaned URL. But how can I replace the spaces?
When someone types in "search me" the URL looks like /search-search me-keyword-keyword2/search me.html with spaces. With + or - it would look much better. I know of str_replace from PHP, but how would I go about this in jQuery?

There's a native JavaScript function called encodeURIComponent that's intended to do exactly what you need.
window.location.href =
"/search-" +
encodeURIComponent($('.search-form input:text').val()) +
"-" + "keyword" + "-" + "keyword2/" +
encodeURIComponent($('.search-form input:text').val()) +
".html";

Method 1: Using Replace
<script type="text/javascript">
$(document).ready(function() {
$('.search-form').submit(function() {
var value = $('.search-form input:text').val();
value = value.replace(' ', ''); // replace
window.location.href = "/search-" + value + "-" + "keyword"+ "-"+ "keyword2/" + value + ".html";
return false;
});
});
</script>
Method 2: Encoding URL
<script type="text/javascript">
$(document).ready(function() {
$('.search-form').submit(function() {
// encode url
var value = encodeURIComponent($('.search-form input:text').val());
window.location.href = "/search-" + value + "-" + "keyword"+ "-"+ "keyword2/" + value + ".html";
return false;
});
});
</script>
Note that replace method would work even in JQuery because Jquery is simply library of javascript :)

http://www.w3schools.com/jsref/jsref_replace.asp
replace() method is native javascript. That'll get you what you want.

You could remove spaces with using mod_rewrite. It’s quite useful way. You can also remove spaces from URLs by replacing spaces by %20, but that only helps with spaces and won't escape other characters. What you really need to do is use a URL-escaping function.