Develop Reference

Save text from a href link threw javascript

I want to store a value to the cache using javascript when clicking an a href link. I'm setting up following code dynamicall
<a align="left" href="projectoverview.html">Test Manager</a>
So I want to save the text Test Manager to the cache, but I don't know how to catch this text when it's clicked. The code below is how that piece of code is setup. Do I need to add an onclick or something or is there a better way?
var text = '<a align=\"left\" href=\"projectoverview.html\">' + project['title']
+ '</a><p align=\"right\">';

If you want to pass data from page to page using javascript/jquery you can do so with sessionStorage. Below is just an example of how you would do it using jQuery.
$('a').each(function() {
$(this).on('click', function() {
var linkText = $(this).text();
// Save data to sessionStorage
sessionStorage.setItem('clickedLink', linkText);
});
});
Then on the next page you can call it by using the .getItem function like so.
$(function() {
var data = sessionStorage.getItem('clickedLink');
alert(data);
});
If implemented correctly the alert box will say "Test Manager".
You can read more about sessionStorage here.
EDIT:
I would add a special class to those links though because the code above will execute on any link you have on the page which may give you unwanted issues.

Javascript replace content innerhtml on click with integrated PHP tag

I am trying to replace the content of a DIV once the button inside that DIV is clicked, (basically replacing the button, which retreives a PHP variable:
<div id="buttonholder">
Publish
</div>
I am trying to replace it with an unpublish button after a post is published (when the button above is clicked):
function publish(status){
document.getElementById("buttonholder").innerHTML = 'Unpublish';
}
It does not work however ... What am I doing wrong ?

Your code syntax is wrong. Use like below.
function publish(status){
document.getElementById("buttonholder").innerHTML = 'Unpublish';
}

Add a button id and then do:
$(function() {
$("#buttonId").click(function() {
$("#buttonHolder").html(" html to replace with ");
});
});
Also you can use the $("#buttonHolder").html(" html to replace with "); instruction in your onClick function as well.

Trying to conditionally disable link depending on link text via javascript/jquery

I have a link whose text content is determined by some backend software. Depending on what the text content is, that link should be clickable or not clickable. I am trying to make the link not clickable if the link text is "No New Messages". I am trying to use the following code:
if ($('a#full_notifications_link').text() == "No New Messages"){
$('a#full_notifications_link').click(function(){
return false;
});
}
This is not working. The link works just like normal. How do I get the link to not work if the link text is "No New Messages"?
To be clear, I CANNOT change any of the html because it will be different every time depending on the backend. Also, I've determined the problem is with line 1, because if i place an alert right after it the alert does not appear.
Also, here is the html when the text says "No New Messages":
<a data-remote="true" href="/usernotificationslist" id="full_notifications_link">
No New Messages
</a>

Please see this Fiddle: http://jsfiddle.net/jFIT/J8eEL/
$('a#full_notifications_link').click(function(event){
if ($.trim($('a#full_notifications_link').text()) == "No New Messages"){
event.preventDefault();
return false;
}
});
returning return false from a function doesnt usually do it.. event.preventDefault();

HTML
text
JAVASCRIPT
function myfunction(){
var text_of_link = $('a #full_notifications_link').text();
if(text_of_link == "No New Messages"){
//do nothing
}else{
window.location.replace($('#full_notifications_link').attr("href"));
}
}

Make sure you have no spaces to meet the condition right..
To be sure, dont line break them
<a data-remote="true" href="/usernotificationslist" id="full_notifications_link">No New Messages</a>
also, have you already placed these inside?
$(document).ready(function(){
//enter code here
});

You can use preventDefault to do this, by catching the click event
BTW this is not working to me i don't know why the onclick does not find the function to be binded hehe
Even though this the best approach I think http://jsfiddle.net/A2wns/1/
// HTML
No New Messages
// js
function checkMessage(evt){
if ( $(evt.target).text() === "No New Messages"){
evt.preventDefault();
}
}

Using JS to Change Link

I have a script I am using that will change a link from a regular link to a mailto link. The idea is most bad robots will not parse javascript thus is a bit better than putting the email address as is or spacing and spelling the # symbol.
The HTML should render as:
Contact our Sales Manager by email.
The word email would be a link to the email. However with the JS code it renders as so:
Contact our Sales Manager by email#email.com.
I would like the first sentence to be how the page renders.
Here is the code:
HTML:
<p>Contact our Sales Manager by
<a class="email" title="email/email.com" href=" ">email</a>.
</p>
JS:
$(function() {
$('a.email').each(function(){
var e = this.title.replace('/','#');
$(this).text().replace('/','#');
this.href=" ";
this.href = 'mailto:' + e; $(this).text(e);
});
});
How would I modify the script to leave the word email in there but create the link correctly?

Here is a working example: http://jsfiddle.net/smLQ7/
To fix this, simply remove one part of the JavaScript so it is like this:
$(document).ready(function() {
$('a.email').each(function(){
var e = this.title.replace('/','#');
$(this).text().replace('/','#');
this.href=" ";
this.href = 'mailto:' + e;
});
});​
We have removed this code:
$(this).text(e);
It was responsible for replacing email with email#email.com in the page contents.

If you're going to do it via JS then why bother putting the address in the tag at all?
Why not just try something like this on (document).ready()
var theaddress ="mailto:email#email.com"
$('a.email').attr('href',theaddress);
EDIT:
Working here: http://jsfiddle.net/sMnrR/

Replace
$(this).text(e)
by
$(this).text('email');
text('some string') replaces the content of the element by its argument. So in your case, the link's content was being replaced by the email address.

If understand your problem, Here is solution:
$(function() {
$('a.email').each(function(){
var e = this.title.replace('/','#');
$(this)
.attr('href','mailto:' + e)
.text(e.substr(0,e.indexOf("#")));
});
});​
Take a look at jsfiddle

Django Admin - RelatedObjectLookups - How Does it refresh and set the select on the parent window?

I want one of my forms to work just like the admin page does so I figured I'd look in the code and see how it works.
Specifically I want the user to be able to click a "+" icon next to a select list and be taken to the admin page's popup form to add a new item.
When they enter a new item there, I want that new item to appear in the select box, and be selected (Just like how this feature works on the admin pages).
I copied the admin js libraries into my own template, and I made my link call the same JS function and the popup windows does open correctly, but after I save a new object the popup window goes blank instead of closing, and nothing happens on the parent page.
Here's what I put in my page:
...
<td>
<div class="fieldWrapper">
<select name="form-0-plasmid" id="id_form-0-plasmid">
...
</select>
<img src="/media/admin/img/admin/icon_addlink.gif" width="10" height="10" alt="Add Another"/>
</div>
</td>
...
I tried stepping through the javascript on the admin form to see how it's working, but I'm not seeing anything that would close the window or populate the parent window's select.
Thanks in advance for any help.
Update 3
I'm getting this javascript error when dismissAddAnotherPopup is run
"SelectBox is not defined"
Which is pointing to this line in dismissAddAnotherPopup
SelectBox.add_to_cache(toId, o);
I thought I knew Javascript, but I don't see where that variable is supposed to come from :-(
Update 2
Everything seems to be firing properly. After I click save on the popup window I get a blank page. This is the source of that page:
<script type="text/javascript">opener.dismissAddAnotherPopup(window, "9", "CMV_flex_myr_GENE1_._._WPRE_BGH");</script>
So it would seem that this javascript isn't being executed or is failing.
Update
Here is the relevant code that Daniel mentioned. So the only problem is that this code either isn't firing, or is firing incorrectly.
django/contrib/admin/options.py:
...
if request.POST.has_key("_popup"):
return HttpResponse('<script type="text/javascript">opener.dismissAddAnotherPopup(window, "%s", "%s");</script>' % \
# escape() calls force_unicode.
(escape(pk_value), escapejs(obj)))
...
/media/admin/js/admin/RelatedObjectLookups.js:
function dismissAddAnotherPopup(win, newId, newRepr) {
// newId and newRepr are expected to have previously been escaped by
// django.utils.html.escape.
newId = html_unescape(newId);
newRepr = html_unescape(newRepr);
var name = windowname_to_id(win.name);
var elem = document.getElementById(name);
if (elem) {
if (elem.nodeName == 'SELECT') {
var o = new Option(newRepr, newId);
elem.options[elem.options.length] = o;
o.selected = true;
} else if (elem.nodeName == 'INPUT') {
if (elem.className.indexOf('vManyToManyRawIdAdminField') != -1 && elem.value) {
elem.value += ',' + newId;
} else {
elem.value = newId;
}
}
} else {
var toId = name + "_to";
elem = document.getElementById(toId);
var o = new Option(newRepr, newId);
SelectBox.add_to_cache(toId, o);
SelectBox.redisplay(toId);
}
win.close();
}

Ok, the javascript simply uses the id attribute of the launching element to identify the select field to update. (after removing 'add_' from the beginig).
So I simply changed the link's id attribute to match the select element's id in my template:
<img src="/media/admin/img/admin/icon_addlink.gif" width="10" height="10" alt="Add Another"/>
Wow I wish this had been documented somewhere! I lost a few hours on this.
(See my updates to the question for more technical details on how it all works.)

The trick - and it's a bit of a hack, actually - is what happens when you click save on the popup in the admin.
If you look at the code of response_add in django.contrib.options.ModelAdmin, you'll see that when you save an item in the popup, the admin returns an HttpResponse consisting solely of a piece of Javascript. This JS calls the dismissAddAnotherPopup function in the parent window, which closes the popup and sets the form value appropriately.
It's fairly simple to copy this functionality into your own app.
Edited after updates If admin javascript doesn't work, it's usually because it has a dependency on the jsi18n code - which you include via a URL (not a static path):
<script type="text/javascript" src="/admin/jsi18n/"></script>

I was having the same problem refreshing the select in the parent window, and I solved following this doc
Everything is working fine now
Edit 1:
I was trying to use Select2 to make the select pretty, the single select works fine, the multiple select is giving me headaches for some reason is not updating the info in the parent form.
Anyone tried this before?