We Keep Coding

How to use Javascript to change href and html text?

So I've got this little piece of HTML that I have zero access to, and I need to change the URL of where it's linking, to somewhere else.
Now I've looked around, and I've tried different approaches and non seem to work so I must be doing something wrong.
the Html code:
<div class="manageable-content" data-container="edit_register_ind_container">
<a class="entry-text-link secondary-step step-button" id="register_ind_container" href="oldurl">Register</a>
</div>
First I wanted to try something that seemed easier, which was to change the displayed text "Register" to "Start a Fundraiser"
This is what I have got for that part:
// url manipulation
$(document).ready(function(){
$("#register_ind_container").click(function(){
$("#manageable-content a").text('Start a Fundraiser');
});
$("#register_ind_container").attr("href", "http://google.ca");
});
No luck so far for any of it.
a little background information:
I am using a platform called Luminate/Blackbaud, its a CMS with a weird set up. header tags and stuff like that go in a different place than the html body and the css is somewhere else as well (but I'm just using ftp to reference it in the header).
How I'm referencing the javascript code.
<script type="text/javascript" src="../mResonsive/js/urlmanipulation.js"></script>
My css works so I'm certain this should to, but I just don't know why it isn't.
All suggestions welcome (except for asking for the html access because I have, 3 weeks ago lol)
Thank you for your time!

I saw your both code :
$("#register_ind_container").attr("href", "http://google.ca");
This line will execute on page load so href should be changed on load
$("#register_ind_container").click(function(){
But when you performing this click on Id
it wont work because at that instance this id associated with an hyperlink
so hyperlink having the default subset rules
for Overriding this you can try
$("#register_ind_container").click(function(e){
// custom handling here
e.preventDefault();
$(this).text('Start a Fundraiser');
});
But this is also not a Good Practice. Hope this helps !

$(document).ready(function(){
$("#register_ind_container").click(function(){
$(this).text('Start a Fundraiser');
$(this).attr("href", "http://google.ca");
});
});

You are changing the URL outside the click event.. Wrap it inside the click event.. Also make use of $(this)
// url manipulation
$(document).ready(function(){
$("#register_ind_container").click(function(){
$(this).text('Start a Fundraiser').attr("href", "http://google.ca");
});
});

Why is rails changing my placeholder hashtag values?

I have hyperlinks with href="#" that are assigned to client-side javascript event handlers. When making requests via ajax, these links behave as expected (via "click" events) but when I occasionally use a link generated by the Rails link_to helper these href values suddenly become corrupted: href="#" becomes href="users/1/photo/4" for example. Every link on the page picks up the same value!
When I use Chrome's Inspect Element, it reveals that the rendered href value remains href="#", yet rolling over it reveals it is pointed to the unwanted url. The event listeners fail. Is this turbolinks forcing my link placeholders to take on unwanted values? Why is rails messing with my links?
Here is typical javascript code assigning an event handler:
Menu.prototype.activatePhotosLink = function() {
var self = this;
// ======= get all user photos =======
$("#main-nav").on("click", function(){
event.preventDefault();
self.getUserPhotos();
});
}
Here's how the link looks via Chrome's Inspect Element with href="#":
photos
I tried to fix this problem with data-no-turbolink="true" but that did not work. Meanwhile, here is what I see in the browser's "link to tooltips" on rollover:
localhost:30000/users/1#
Why not href="#"? Thank you for any thoughts!

The path is not corrupted. It should be the path of the page you are at with the hashtag appended to it. This is not related to Rails nor JavaScript, but rather a feature in HTML. In HTML, if you want to create an anchor link to a certain element in the page, you pass its id to the href. You can read more about it here.
If you don't want a url to appear when you roll over the link, you can use href='javascript:void(0)'

jQuery if url hash, click event/activate javascript

So from the home page, i have a link that goes to a products listing page.
The product page has expand/collapse divs.
I need the appropriate div to expand depending on what the url# is.
So the link on the homepage is
healthy snacks
when i click the link above, i am trying to activate this, on the product page:
Healthy Snacks
I've tried some of the other codes that i found that trigger click by checking for hash tag and none of them were working properly, i think it's because of the ReverseDisplay js.
Please any insight would help.
thanks

You can make the following changes in the document ready function of your product page:
Simple fix: Since the jQuery id-selector is #elementId, you can simply use the window.location.hash value as your id selector, and use it to target the desired element.
if ( window.location.hash ) {
$(window.location.hash).click(); //clicks on element specified by hash
}
Better: In addition to the above, take the js out of your markup.
$('#healthysnacks').click(function(e) {
e.preventDefault();
ReverseDisplay('products4');
});
Then, after doing this, use the $(window.location.hash).click() code from above.
Also, change your link to:
Healthy Snacks

You can use the hash property of the Location object, try the following:
$(document).ready(function(){
var id = window.location.hash;
$(id).trigger('click')
})
As you are using jQuery instead of using javascript: protocol, you can use the jQuery click method:
$('#healthysnacks').click(function() {
// do something here
})

The answers suggested here are valid, but...
Be extremely careful when using the window.location.hash as it is in a jQuery selector because this could lead to a XSS vulnerability. $() can also create an HTML element and with a carefully constructed hash value, someone could execute arbitrary JavaScript code.
For example
http://my-website.com/about#'><img src=x onerror=alert(/XSSed/)>
If my-websites.com/about page uses the window.location.hash inside a jQuery selector, that onerror code would end up getting executed.

workaround to using ID in <a> to call function

I'm using an XML file that has a number for each section. The page loads a link for each section of the XML and puts the article number in the URL parameter (page.html?aid=###). When the link is clicked an overlay iframe pops up the with more information about that article. is calling the overlay iframe popup but I can't use more than one of the same ID for a page.
$(function(){
$('#b1').frameWarp();
});
Instead of using ID="b1", am I able to use each article number for the id? I cannot use class instead of ID.
Would there be another way to do this?

You could use $('a[id^="b"]'), but that's hugely inefficient and will probably match more than what you want it to. Alternatively, you could filter on a regex:
$('a').filter(function(){
var re = /^b[0-9]+$/;
return re.test($(this).attr('id'));
}).frameWarp();
It's not much more efficient, if at all, but at least it would rule out false positives.

Here is the answer courtesy of benalpert on reddit:
$('.b1').each(function() { $(this).frameWarp(); })
This allows the class to be used instead of ID without error.
Thanks to everyone for the help.

Invoking jQuery function without an element

So, I use jQuery quite extensively and I am well aware of the "right" way to do the below, but there are times where I want to solve it in a more generic way. I'll explain.
So, I may have a link, like this: <a href='menu' class='popup'>Show menu</a>. Now, I have a jQuery function that fires on click for all a.popup that takes the href-attribute and shows the <div id='menu'></div> item (in this case). It also handles URL's if it can't find a DOM item with that ID.
No problem here. But, there are times when I don't have the same control over the coe where I can create a selectable target that way. Either because the code isn't created by me or because it is created through a chain of function that would all need a huge ovrhaul which I won't do.
So, from time to time, I would like to have this code:
Show menu
This would be in a case where I can only submit the label and the HREF for a link. No class, no nothing.
Problem here is that the function popup() has no idea about what element invoked it, and in most cases that's not a problem for me, since I only need to know where the mouse cursor was upon invokation.
But in some cases, I use someone elses jQuery functions, like qTip or something else. so I still want to fire off qTip(); when clicking a link that runs this JS function, but what do I attach it to to make it show? I can't just runt $().qTip(); because that implies $(this) and "this" is undefined inside the function.
So how do I do it? Any ideas?

Is there anyway you change the javascript method to javascript:popup('menu', this);? I've used this method successfully many times.

Instead of referring to "this" try referring to $('a:focus') to refer to the link that was clicked.
Here's a quick and, as #Crescent Fresh would add, dirty (☺) sample:
<body>
<p>Show popup()</p>
<div id="menu" style="display:none">Today's menu</div>
<script type="text/javascript">
function popup(elm) {
$('#' + elm).show();
alert( $('a:focus').text() )
}
</script>
</body>
I tried just ":focus" but IE7 returned too much content. I tested this in FF 3.6.3, IE7, Chrome 4.1.249.1064 (all on Windows) and it seems OK, but I see now (when I was just about to hit "Post Your Answer") this relies on the browser's native support for querySelectorAll - see this jQuery Forum post ":focus selector filter?" and the jQuery.expr entry in the jQuery Source Viewer (where it appears Paul's idea was not implemented).

How about
Show menu
Once you get the event object you can virtually do anything to it.