Changing part of a link on SharePoint page with javascript

eckul · January 8, 2014, 10:33pm

H,i I need to edit some links on a page. The first part of below code works but causes other problems on the page because the id is not targeted. The second part of code works for text but not links. I can’t just replace the links as a query will be dynamically added to the end of each link. So in summary i just need to replace parts of all links with an input id “btnViewDetails”. Any help would be great. Cheers

<script language="javascript">
document.body.innerHTML = document.body.innerHTML.replace(/JobSeekers/g,'mobile');
</script>

<script type="text/javascript">
		$('#btnViewDetails').each( function() {
        $(this).html($(this).html().replace(/JobSeekers/g,'mobile'));
    });
</script>

ralphm · January 8, 2014, 11:07pm

Hi eckul. Welcome to the forums.

Could you post an example of the HTML you currently have, and the HTML you’d like to change it to?

eckul · January 9, 2014, 12:08am

Hi Ralph thanks for the quick response. Below is the current html and what i need to chagnge it to.
It’s difficult because I need to keep the"?VacancyId=2516" part dynamic. As you can see there are 2 parts that need to be changed : “Jobseekers” to “mobile” and “JobPositionDetail.aspx” to “JobPositionDetail_Mobile.aspx”. There will be multiple buttons on the page so I need to make sure they all change, but with VacancyId still being unique for each. thanks so much for your help.

CURRENT:



<input id="btnViewDetails" class="btnBlue" type="button" onclick="location.href='/JobSeekers/Pages/JobPositionDetail.aspx?VacancyId=2516'" value="View Details">

CHANGE TO:


<input id="btnViewDetails" class="btnBlue" type="button" onclick="location.href='/mobile/Pages/JobPositionDetail_Mobile.aspx?VacancyId=2516'" value="View Details">

ralphm · January 9, 2014, 1:53am

This is probably just an annoying question, but I’d be interested to know why you are using inputs for what seem to be links. It looks like it would be better to update the HTML. If JS fails for any reason (and it can) then those buttons are dead, which is not a good situation.

Are you seeking this JS solution because there’s too much on the site to recode?

eckul · January 9, 2014, 2:22am

Hi, a very good question. I’m working with a sharepoint webpart. The functionally of the webpart is fine except I’m using the webpart in a different part of the site so i need it’s results to load onto another page. Obviously it would be better for me to recreate or edit the web part, but at this point I am unable to do that. Any ideas. thanks again.

ralphm · January 9, 2014, 2:26am

OK, I could have a go at the JS, but it’s not my area, so I’ll pull in @Pullo, as he’s one of the members who’s good with this stuff.

Mittineague · January 9, 2014, 2:39am

I think part of your problem is

all links with an input id “btnViewDetails”

“all” and “id” are contradictory use for any single page.

I.e. it should be “the” or “class” as applicable.

eckul · January 9, 2014, 3:41am

Hi I’m not sure what you mean I just want to target everything with that id. I can’t use the class because that class is used on other parts of the page. Any thoughts.

Mittineague · January 9, 2014, 3:53am

What I mean is that on any given page only one element should have an id of “btnViewDetails”
If more than one element then they should have class “btnViewDetails”

If you have javascript get an id you can’t expect it to work as hoped if there are more than one element having the same id value. That is, the first thing you should do is correct the mark-up. i.e. validate it http://validator.w3.org/

eckul · January 9, 2014, 4:09am

Thanks, thats a good point, unfortunately I am working with an old sharepoint web part and thats the way the code is generated. The links are distinguished by the vacancyid. Is there anyway around this? I can’t change the class, I need to use the id. Cheers

Mittineague · January 9, 2014, 4:19am

Ah, I see, Bless MicroSoft.

Maybe @NightStalker_DNS; will have some ideas.

Francky · January 9, 2014, 9:37am

An element can have more classes, so you don’t depend on existing classes which are used all over the page.
Is it possible to add a class in the html?
If …

<input id="btnViewDetails" class="btnBlue" type="button" onclick="location.href='/JobSeekers/Pages/JobPositionDetail.aspx?VacancyId=2516'" value="View Details">

can be renamed to …

<input id="btnViewDetails" class="btnBlue convert" type="button" onclick="location.href='/JobSeekers/Pages/JobPositionDetail.aspx?VacancyId=2516'" value="View Details">

… then in the jQuery instructions you can use the .convert class as trigger for the conversion.
The other blue buttons without the convert-class will not be affected.

James_Hibbard · January 9, 2014, 10:11am

Howdy,

A bit late to the party
I agree with what has been said by the others, but address the immediate problem and change this:

<input id="btnViewDetails" class="btnBlue" type="button" onclick="location.href='/JobSeekers/Pages/JobPositionDetail.aspx?VacancyId=2516'" value="View Details">

to this:

<input id="btnViewDetails" class="btnBlue" type="button" onclick="location.href='/mobile/Pages/JobPositionDetail_Mobile.aspx?VacancyId=2516'" value="View Details">

you could do this:

var oldLocation = $("#btnViewDetails").attr("onclick"),
      newLocation;

newLocation = oldLocation.replace("JobSeekers", "mobile").replace("JobPositionDetail", "JobPositionDetail_Mobile");
$("#btnViewDetails").attr("onclick", newLocation);

If you have to do this for more than one button with the same id (bad!), you’ll have to get the inputs in a different way, as $("#btnViewDetails") will only pull in the first element with that id.

E.g.

$("input[type=text]).each(function(){
  var oldLocation = $(this).attr("onclick"),
     newLocation;

  newLocation = oldLocation.replace("JobSeekers", "mobile").replace("JobPositionDetail", "JobPositionDetail_Mobile");
  $(this).attr("onclick", newLocation);
});

HTH

eckul · January 9, 2014, 11:44pm

thanks for your suggestion, unfortunately I can’t change the class at this stage. I’ll keep looking into it.

eckul · January 9, 2014, 11:51pm

wow thanks Pullo, that is almost working. As you said the first part of code changes the first intance of the link. But I’m having problems getting the second code you posted to work. I’m ammended it below and added a closing " after the input type but that didn’t fix it. Any thoughts? I’ll keep trying also.

$("input[type=text]").each(function(){
  var oldLocation = $(this).attr("onclick"),
     newLocation;

  newLocation = oldLocation.replace("JobSeekers", "mobile").replace("JobPositionDetail", "JobPositionDetail_Mobile");
  $(this).attr("onclick", newLocation);
});

James_Hibbard · January 10, 2014, 9:45am

Sorry, I just saw that they’re type=button.

$("input[type=button]").each(function(){
  ...
});

eckul · January 12, 2014, 12:37am

This is now working, thanks Pullo and everyone else who has contributed. what a great forum, thanks again.

eckul · February 11, 2014, 6:43am

Hi, not sure if I should post this in a new thread or not. Let me know. The above fix has been working really well for me but now I’m wondering if i can do the same but with a url? In summary on the click of a button - I want to remove/change a few words in the url and reload the page (then the new url will load). any thoughts? Cheers

eckul · February 11, 2014, 7:03am

not to worry ,figured it out, see below

<script>
function newDoc()
  {
   window.location.href = window.location.href.replace(/JobPositionDetail_Mobile/g,"JobApplicationForm_Mobile"); 
  }
</script>


<input type="button" value="Load new document" onclick="newDoc()">