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");
});
});

MVC Add HTML with MvcHtmlString.Create but with JavaScript functionality

I have a big doubt. In a MVC project, I render a HTML template (loaded from .html file) into a View with MvcHtmlString.Create();
This works fine but have a problem. This HTML template need to do javascript functionality, the problem? That this don't work, because the HTML is rendered after the javascript and the js functionality not work.
Something like this:
<script type="text/javascript">
$(document).ready(function(){
$("#SomeID").click(funciton(){
//This don't work because the #SomeID not exists yet
});
});
</script>
<br />
#MvcHtmlString.Create(#Model.HTMLTemplateContent);
Someone can help me about this or tell me something at respect?
Thanks

Use jquery on method.
$(document).ready(function(){
$(document).on("click","#SomeID",function(){
alert("Working");
});
});
on method will work for current and future (Any thing injected to DOM later (Ex : through javascript code, ajax) elements.

Thanks! I not have idea about this.
Is possible to access at elements by the same "method"? How to do to get this? i.e
I'm using jSignature to implement sign en the document.
whit this:
$("#someDivID").jSignature();
I'm using now to access at div element with this:
var signCanvasOn = document.getElementById("someID");
signCanvasOn.jSignature();
signCanvasOn.jSignature("reset");
But this don't work for me, only work if I use:
$("#someID").jSignature();
$("#someID").jSignature("reset");
What is the real problem?

Have you tried adding the jquery at document level?
That's how i usually ensure that jquery continues to work with any stuff i load on the page dynamically.
Something like this:
$(document).on("click","#SomeID",function()
{
//This don't work because the #SomeID not exists yet
});

Javascript/jQuery Dynamic text to link/href replece

I need to replace and convert to URL following words on my entire site; Square-Technology UK. I've done some research into replacing text displayed within a site to replace it with url.
Here is the code:
http://jsfiddle.net/Hgtrh/1/
However it doesn't replace on my website for some reason. Here is the HTML am using.
<div class="main_testimonials">
<div class="c_box"></div>
<div class="main_content_img">
<img src="images/news/thumbs/1184901_10151885560986667_1371257993_n_t2.jpg" alt="News" class="news-category"></div>
<div class="main_bubble_box">
Thank you Square-Technology UK for my new system!!
</div>
</div>
this is an example of different javascipt that works, note the ' and "
echo "<script type='text/javascript'>
$(document).ready(function() {
$('body').removeClass('no-js'); $('#my-carousel-3').carousel({ itemsPerPage: 3, itemsPerTransition: 3, easing: 'swing', noOfRows: 1 }); });</script>\n";
Right managed to solve this very easily. My script didn't allow me to use double quotes inside the echo tag in PHP, which is quite obvious. Alternatively using single quotes does not work using the script I posted at the beginning. However the way to do it is just create another file.js, place the code inside it, and then attach it using the following:
echo"<script type='text/javascript' src='js/test_replace.js'></script>\n";

Did you try this?
$(document).ready(function() {
var thePage = $("body");
thePage.html(thePage.html().replace(/Square-Technology UK/ig, 'Square-Technology UK'));
})
Hope this helps..

Try using a more specific identifier to track what you want to replace instead of tracing the entire DOM to search for what you want to replace:
JS:
$(function() {
var $siteLink = $('.site-link'),
linkHtml = 'Square-Technology UK';
$siteLink.html(linkHtml);
});
HTML:
<span class="site-link"></span>
However since your fiddle seems to work we can only guess what is happening, can you provide more info about what jquery you are running, or how the page is layout.
Here is a Fiddle: http://jsfiddle.net/Hgtrh/4/
It is also worth mentioning just like ikaros45 said, that this is normally not something you would want to do with Javascript, this seems more like something that the templates should be able to deal with.

It works on your fiddler example, but not on your site. I suggest confirming that the JQuery library is loading on your site as expected.

So I managed to solve this very easily. My script didn't allow me to use double quotes inside the echo tag in PHP, which is quite obvious. Alternatively using single quotes does not work using the script I posted at the beginning. However the way to do it is just create another file.js, place the code inside it, and then attach it using the following:
echo"<script type='text/javascript' src='js/test_replace.js'></script>\n";

jQuery - dynamically remove head elements on click

Does anyone know if you can remove head elements on a button click and how to do it with jQuery?
I am trying to get rid of certain script tags from the html head when a button is clicked.
For instance. I have 1 screen view with a slideshow controlled by an external javascript file. When I click on a button "Click to get rid of this elements JS" I want to remove the external javascript path from the HTML Head.
Any ideas. Have been at this thing for a week or so.

You can add an id to a script element then remove that ID:
<script type="text/javascript" src="init.js" id="initJs" ></script>
<span id="removeScript"></span>
$('#removeScript').click(function() {
$('#initJs').remove();
});

You can do this sort of thing using javascript, sure, but before you do it, you might want to ask yourself again why. Here's a link describing how to do it in pure javascript with a jquery example provided by the other answerer:
http://www.javascriptkit.com/javatutors/loadjavascriptcss2.shtml
But try to keep in mind that most modern browsers will keep these external resources in memory for at least as long as the page is open. Therefore, you won't really be doing much.

I don't think its a good Idea to remove Entire HEAD Element. 'Cause your Page may contain some more Elements (i.e., title, style..) which are appended to Head Element. If you want to remove a particular script Element do something like
$(function() {
$('input[type=button]').click(function() {
$('script[src=path/file.js]').remove();
});
});
Edit :
var flag = false;
function breakTheCode() {
if(!flag) {
//run your code
}else return;
}
$(function() {
$('input[type=button]').click(function() {
flag = true; //flag is set, so we no more using/ running your code
breakTheCode(); //call you function/method
});
});

For my part the best solution is to use ID on the scripts.
I read many page over the web, try many solutions, and the only one who works fine every time is to remove a script like a div with an id !

For remove js file : $("script[src='your.js']").remove();

Get values between DIV tags?

How do I get the values in between a DIV tag?
Example
<div id="myOutput" class="wmd-output">
<pre><code><p>hello world!</p></code></pre>
</div>
my output values I should get is
<pre><code><p>hello world!</p></pre>

First, find the element. The fastest way is by ID. Next, use innerHTML to get the HTML content of the element.
document.getElementById('myOutput').innerHTML;

document.getElementById("myOutput").innerHTML

innerHtml is good for this case as guys suggested before me,
If you have more complex html structure and want to traverse/manipulate it I suggest to use js libraries like jQuery. To get want you want it would be:
$('#myOutput').html()
Looks nicer I think (but I wouldn't load whole js library just for such simple example of course)

Just putting all above with some additional details,
If you are not sure about that div having some id is not there on html page then to make it sure please use.
var objDiv = document.getElementbyId('myOutput');
if(objDiv){
objDiv.innerHTML;
}
This will avoid any JavaScript error on the page.