SitePoint Sponsor

User Tag List

Results 1 to 19 of 19
  1. #1
    SitePoint Enthusiast
    Join Date
    Jan 2014
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Changing part of a link on SharePoint page with javascript

    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


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

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

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,171
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    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?

  3. #3
    SitePoint Enthusiast
    Join Date
    Jan 2014
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:

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

    CHANGE TO:

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

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,171
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    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?

  5. #5
    SitePoint Enthusiast
    Join Date
    Jan 2014
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,171
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    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.

  7. #7
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,154
    Mentioned
    190 Post(s)
    Tagged
    2 Thread(s)
    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.

  8. #8
    SitePoint Enthusiast
    Join Date
    Jan 2014
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  9. #9
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,154
    Mentioned
    190 Post(s)
    Tagged
    2 Thread(s)
    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/

  10. #10
    SitePoint Enthusiast
    Join Date
    Jan 2014
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  11. #11
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,154
    Mentioned
    190 Post(s)
    Tagged
    2 Thread(s)
    Ah, I see, Bless MicroSoft.

    Maybe @NightStalker-DNS ; will have some ideas.

  12. #12
    SitePoint Evangelist silver trophybronze trophy
    Join Date
    Jul 2013
    Posts
    406
    Mentioned
    22 Post(s)
    Tagged
    0 Thread(s)
    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 ...
    HTML Code:
    <input id="btnViewDetails" class="btnBlue" type="button" onclick="location.href='/JobSeekers/Pages/JobPositionDetail.aspx?VacancyId=2516'" value="View Details">
    can be renamed to ...
    HTML Code:
    <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.

  13. #13
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    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:

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

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

    Code:
    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.

    Code:
    $("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

  14. #14
    SitePoint Enthusiast
    Join Date
    Jan 2014
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks for your suggestion, unfortunately I can't change the class at this stage. I'll keep looking into it.

  15. #15
    SitePoint Enthusiast
    Join Date
    Jan 2014
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

    Code:
    $("input[type=text]").each(function(){
      var oldLocation = $(this).attr("onclick"),
         newLocation;
    
      newLocation = oldLocation.replace("JobSeekers", "mobile").replace("JobPositionDetail", "JobPositionDetail_Mobile");
      $(this).attr("onclick", newLocation);
    });

  16. #16
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    Sorry, I just saw that they're type=button.

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

  17. #17
    SitePoint Enthusiast
    Join Date
    Jan 2014
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is now working, thanks Pullo and everyone else who has contributed. what a great forum, thanks again.

  18. #18
    SitePoint Enthusiast
    Join Date
    Jan 2014
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  19. #19
    SitePoint Enthusiast
    Join Date
    Jan 2014
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    not to worry ,figured it out, see below

    Code:
    <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()">


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •