How to Redirect or Link to a URL Inside Another Page's DIV Element?

Question

I have a page setup on Sharepoint with four different links with descriptions under them that are ever changing. Right now, I have the title of each link and the description of each link pulling from another page (an .aspx article page) that my co-workers can update easily. So when they update their article, jquery updates the title and description of all four of the links. The problem I have is getting the actual url destination (href) to update from a div on my co-worker's article page. All the code I can find for changing an href use .attr to accomplish something similar but in all examples I've found, that requires putting in the new url right in the code. This URL will change each time they change their article. Any ideas? (I am not a coder but a Graphic Designer with minor HTML and Javascript knowledge)

First the Script:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#CI1").load("http://jfghome/CorpInitiatives/Pages/Corporate%20Initiatives/CI1.aspx #newstitle");
$("#CI1b").load("http://jfghome/CorpInitiatives/Pages/Corporate%20Initiatives/CI1.aspx #newsbody");
$("#CI2").load("http://jfghome/CorpInitiatives/Pages/Corporate%20Initiatives/CI2.aspx #newstitle");
$("#CI2b").load("http://jfghome/CorpInitiatives/Pages/Corporate%20Initiatives/CI2.aspx #newsbody");
$("#CI3").load("http://jfghome/CorpInitiatives/Pages/Corporate%20Initiatives/CI3.aspx #newstitle");
$("#CI3b").load("http://jfghome/CorpInitiatives/Pages/Corporate%20Initiatives/CI3.aspx #newsbody"); 
$("#CI4").load("http://jfghome/CorpInitiatives/Pages/Corporate%20Initiatives/CI4.aspx #newstitle");
$("#CI4b").load("http://jfghome/CorpInitiatives/Pages/Corporate%20Initiatives/CI4.aspx #newsbody"); 
$("#pCI1").attr('src',"http://jfghome/CorpInitiatives/PublishingImages/Image1.png");
$("#pCI2").attr('src',"http://jfghome/CorpInitiatives/PublishingImages/Image2.png");
$("#pCI3").attr('src',"http://jfghome/CorpInitiatives/PublishingImages/Image3.png");
$("#pCI4").attr('src',"http://jfghome/CorpInitiatives/PublishingImages/Image4.png");
});
</script>    

Now the HTML (These are no longer APDivs btw, I have since changed their CSS properties):

<div id="Col2">
<div id="apDiv5">
<div id="apDiv8"><a href="/CorpInitiatives/MOR/SitePages/Home.aspx"><img id="pCI1" src="/CorpInitiatives/SiteAssets/SitePages/Home%20Testing/ajax-loader100x70.gif" width="100" height="70" alt="1" /></a></div>
<div id="apDiv10"><strong><a href="/CorpInitiatives/MOR/SitePages/Home.aspx" style="color:#324c71; font-size:16px; font-family: Cambria, Hoefler Text, Liberation Serif, Times, Times New Roman, serif; font-size:18px"><div id="CI1">Loading...</div></a></strong>
<div id="CI1b">...</div></div>
</div>
<div id="apDiv3">
<div id="apDiv9"><a href="/CorpInitiatives/SitePages/JFGHomeInfo.aspx"><img id="pCI2" src="/CorpInitiatives/SiteAssets/SitePages/Home%20Testing/ajax-loader100x70.gif" width="100" height="70" alt="2" /></a></div>
<div id="apDiv11"><strong><a href="/CorpInitiatives/SitePages/JFGHomeInfo.aspx" style="color:#324c71; font-size:16px; font-family: Cambria, Hoefler Text, Liberation Serif, Times, Times New Roman, serif; font-size:18px"><div id="CI2">Loading...</div></a></strong><div id="CI2b">
...</div></div>
</div>
<div id="apDiv2">
<div id="apDiv12"><strong><a href="/resources/TalkingPoints/SitePages/Scorecard.aspx" style="color:#324c71; font-size:16px; font-family: Cambria, Hoefler Text, Liberation Serif, Times, Times New Roman, serif; font-size:18px"><div id="CI3">Loading...</div></a></strong>
<div id="CI3b">...</div></div>
<div id="apDiv13"><a href="/resources/TalkingPoints/SitePages/Scorecard.aspx"><img id="pCI3" src="/CorpInitiatives/SiteAssets/SitePages/Home%20Testing/ajax-loader100x70.gif" width="100" height="70" alt="3" /></a></div>
</div>
<div id="apDiv6">
<div id="apDiv14"><strong><a href="/CorpInitiatives/Pages/townhallrecap2013.aspx" style="color:#324c71; font-size:16px; font-family: Cambria, Hoefler Text, Liberation Serif, Times, Times New Roman, serif; font-size:18px"><div id="CI4">Loading...</div></a></strong>
<div id="CI4b">...</div></div>
<div id="apDiv15"><a href="/CorpInitiatives/Pages/townhallrecap2013.aspx"><img id="pCI4" src="/CorpInitiatives/SiteAssets/SitePages/Home%20Testing/ajax-loader100x70.gif" width="100" height="70" alt="4" /></a></div>
</div>
</div>

So this does the trick for everything except grabbing the url from a div on my co-workers article and placing it in the href on my page. Please help! All suggestions are greatly appreciated.

Answer 1

I think i dont understand al all your question, i think you're asking how to redirect or link to a div inside another page?

If is, then put your url finishing with this #{div_id}, no spaces between the end of the link and the div id, hope this helps

Answer 2

If I'm understanding you correctly, there's another page that contains a link, and you want to load the content from that link into your page.

Would something like this work?

mainPage.html

<script>
$(document).ready(function() {
    $('#mainDiv').load('pageToLoadLinkFrom.html', function() {
        $('#mainDiv').load($(this).find('#specialLink a').attr('href'))
    })
})
</script>

...

<body>
  <div id="mainDiv" />
</body>

And then...

pageToLoadLinkFrom.html

<body>
  <div id='specialLink'><a href="someOtherPage.html">Some Other Page</a></div>
</body>

Answer 3

The href in link in other page contains a relative link to that page. from your page, if you want use those links, you need to make sure your page is under the same dir with target page in the same server or get window.location of target page. Then you could construct an absolute url so you can use it.