How do you use javascript/jQuery to rewrite amazon affiliate links? - javascript

Basically what I want the script to do, is add my affiliate ID to all Amazon links posted by my users.(Kinda what SO is doing, minus the whole redirect/racking thing)
Here is the code I'm using, and for some reason it's not working.
<script type="text/javascript">
$(document).ready(function() {
$('a[href*='amazon.com']').each(function() { this.href = this.href.replace(/\?.*$/,"") + $.query.load(this.href).set("tag","affID").toString();});
});
</script>

I am not familiar with jQuery, but I think this script may be helpful:
http://petewilliams.info/blog/2009/07/javascript-amazon-associate-link-localiser/

I think it might have something to do with your quotes. Try it like this:
$('a[href*="amazon.com"]').each(function() ... etc
Notice the difference? The point is that if you use single quotes on the outside, you need to use double quotes on this inside. Or vice versa.

Did you add the jquery plugin it requires.
$.query.load(this.href)
this requires the jquery query plugin I suppose.

Related

interchange html content using javascript

Good day! Newbie here. I just want to know if it's possible to change the whole content of an html using javascript? I got some codes here. (not mine but whoever did this, thank you so much!) I don't know where to put/insert all the codes of the new layout like when you click a button then the whole content will change. Thank you very much for helping me.
<script language="Javascript">
<!--
var newContent='<html><head><script language="Javascript">function Hi()</script></head><body onload="Hi();"><p id="p">hello</p></body></html>';
function ReplaceContent(NC) {
document.write(NC);
document.close();
}
function Hi() {
ReplaceContent(newContent);
}
-->
</script>
The easiest way to do this is with jQuery.
function insertHtml()
{
var newHtml = '<div><span>Hello World</span></div>';
$('body').html(newHtml);
}
Something like that will replace the entire contents of body with newHtml. You can also do this with pure javascript using the .innerHtml property but jQuery has many advantages.
EDIT: If you want to add something to the DOM rather than replacing the entire thing, use
$('body').append(newHtml)
instead. This will add the content to the end of the body. This is very often used for things like adding rows to a table.
Yes it is possible but this code is not valid unless you remove the comment tags however don't use the document.write() after page load unless you want to overwrite everything in page including the script

Passing a URL to a Javascript function

I've spent a while going through numerous similar questions, but based on the answers given, I'm lead to believe I have this setup correctly - but it's not working, and I'm not sure why.
I'm a newbie with Javascript/jQuery, so it's very possible (or probable!) that I'm missing something completely obvious here.
I have a page with a large 'main' div, and I'm loading content into that using jQuery .load via the navigation. That all works fine. However, some of the target pages are data-heavy, so I'm trying to integrate something in between to indicate to the user that the page is loading. Because there are numerous navigation elements, rather than having multiple functions (i.e one for each navigation element) I'm trying to do it in a single function, like so...
<script type="text/javascript">
function loadPage(pgurl) {
$('#main').html('<p align="center">Loading...</p>');
$('#main').load(' +pgurl+ ');
}
</script>
The problem I have is the onclick within the navigation. Prior to this, I had the .load within the onclick (i.e onclick="$('#main').load('/pages/testpage/');") and that worked fine. Now I'm firing the loadPage function via onclick, it's loading a black page (which firebug tells me is the site root).
Here's my onclick code;
<a onclick="loadPage('/pages/testpage/');return false;">Test</a>
I get no errors returned. I can only assume that the loadPage function is getting a zero value, rather than /pages/testpage/ - but I have no idea why!
Pointers much appreciated - much head scratching going on here!
It's already a string:
$('#main').load(pgurl);
$('#main').load(' +pgurl+ ');
needs to be
$('#main').load(pgurl);
You should probably write it as one line to prevent the second look up.
function loadPage (pgurl) {
$('#main').html('<p align="center">Loading...</p>').load(pgurl);
}
Is that a typo? Try changing:
$('#main').load(' +pgurl+ ');
to
$('#main').load(pgurl);
Because it seem you're not using the pgurl parameter, this thing in the load brackets is string a text of the variable name :)
$('#main').load(' +pgurl+ ');
use that instead
$('#main').load(pgurl);
Maybe you should look at that if you're not familiar with string concatenation http://www.youtube.com/watch?v=n17aX2TdQRk
You have to change following line // you pass string not a variable //
$('#main').load(' +pgurl+ ');
to
$('#main').load(pgurl);

Replace a set of html br elements with another in jQuery -- parsing HTML with jQuery

So here's my problem. I have a little third-party service on my site that generates a bunch of HTML from an RSS feed and sticks it in my webpage when the page is loaded. However, when it generates the HTML, it inserts a bunch of totally unnecessary break tags. Unfortunately, the source file that generates this code is on the third party's server and not mine, so I can't tweak it.
Thus, I'm trying to tweak the HTML right before the page is loaded by using a little jQuery inside the onLoad="" property in the body tag. However, I can't simply use something like $('br').remove(); because then there aren't ANY break tags, and I need one per each spot where there are currently three.
So ultimately, what I need to do is come up with a jQuery statement that replaces
<br><br clear=all><br>
with
<br />
I'm rather new to jQuery, but I couldn't seem to find anything that would help me do this. Any ideas?
Thanks in advance for any help!
Use the Next Adjacent Selector (+):
$("br+br").remove(); //Removes all <br> tags in front of another
jsFiddle demo
Assuming they are in the exact format you gave, you can do this:
var br = $('br[clear="all"]');
br.attr('clear', '');
br.prev('br').remove();
br.next('br').remove();
You can play with selector attributes, not inside the onload but inside the jquery ready (http://api.jquery.com/ready/)
$('br[clear=all]').remove();
more details on selector attribute:http://api.jquery.com/attribute-equals-selector/
Why donn`t just replace the html of the RSS HTML container:
yourContainerElem.innerHTML = yourContainerElem.innerHTML.replace(/<br><br clear=all><br>/gi, '<br />');
To remove all but one:
$('br,[clear!="all"]').remove()
Then to remove the 'clear=all':
$('br').removeAttribute('clear')
You better do this with regexps not with jquery. Simplest example:
string.replace('<br><br clear=all><br>', '<br />')

JQuery $(document).ready() and document.write()

Firstly, is there a way to use document.write() inside of JQuery's $(document).ready() method? If there is, please clue me in because that will resolve my issue.
Otherwise, I have someone's code that I'm supposed to make work with mine. The catch is that I am not allowed to alter his code in any way. The part that doesn't work looks something like this:
document.write('<script src=\"http://myurl.com/page.aspx?id=1\"></script>');
The script tag is referencing an aspx page that does a series of tests and then spits out something like so:
document.write('<img src=\"/image/1.jpg\" alt=\"Second image for id 1\">')
The scripts are just examples of what is actually going on. The problem here is that I've got a document.write() in the initial script and a document.write() in the script that get's appended to the first script and I've got to somehow make this work within JQuery's $(document).ready() function, without changing his code.
I have no idea what to do. Help?
With the requirements given, no, you can't use document.write without really hosing up the document. If you're really bent on not changing the code, you can override the functionality of document.write() like so and tack on the result later:
var phbRequirement = "";
$(function() {
document.write = function(evil) {
phbRequirement += evil;
}
document.write("Haha, you can't change my code!");
$('body').append(phbRequirement);
});
Make sure you overwrite the document.write function before it is used. You can do it at anytime.
The other answers are boring, this is fun, but very pretty much doing it the wrong way for the sake of fulfilling the requirements given.
picardo has the approach I would've used. To expand on the concept, take a read:
$('<script/>')
.attr('src', 'http://myurl.com/page.aspx?id=1')
.appendTo('body');
Alternate style:
var imgnode = $('<img alt="Second image for id 1"/>')
.attr('src', "image1.jpg");
$('#id1').append(imgnode);
Be sure to use the attr method to set any dynamic attributes. No need to escape special symbols that way.
Also, I'm not sure what the effectiveness of dynamically generating script tags; I never tried it. Though, it's expected that they contain or reference client-side script. My assumption is that what page.aspx will return. Your question is a little vague about what you're trying to do there.
jQuery has a ready substitute for document.write. All you need to use is the append method.
jQuery('<img src=""/>').appendTo('body');
This is fairly self-evident. But briefly, you can replace the with whatever html you want. And the tag name in the appendTo method is the name of the tag you want to append your html to. That's it.
picardo's answer works, but this is more intuitive for me:
$("body").append('<img src=\"/image/1.jpg\" alt=\"Second image for id 1\">');
Also, for the script part that is being inserted with document.write(), check out jQuery's getScript() function

Using jQuery, how do I change the elements html value? (div)

Using a ajax request I want to change content of my div.
<div id="d1">202</div>
So I want to change the content to a different number.
$('d1').InnerText???
Also, say I wanted to increment the number, how could I do that? Do I have to convert to int?
$("#di").html('My New Text');
Check out the jQuery documentation.
If you wanted to increment the number, you would do
var theint = parseInt($("#di").html(),10)
theint++;
$("#di").html(theint);
P.S. Not sure if it was a typo or not, but you need to include the # in your selector to let jQuery know you are looking for an element with an ID of di. Maybe if you come from prototype you do not expect this, just letting you know.
This would changed the inner text of your HTML element.
$('#d1').text(parseInt(requestResponse)++);
Unless you're embedding html like <b>blah</b> I'd suggest using $("#di").text() as it'll automatically escape things like <, > and &, whereas .html() will not.
Use the text function:
$("#d1").text($("#d1").text() + 1);
$('#d1').html("Html here");
jQuery('#d1').html("Hello World");
if your value is a pure text (like 'test') you could use the text() method as well. like this:
$('#d1').text('test'); Or $('#d1').html('test');
anyway, about the problem you are sharing, I think you might be calling the JavaScript code before the HTML code for the DIV is being sent to the browser. make sure you are calling the jQuery line in a <script> tag after the <div>, or in a statement like this:
$(document).ready(
function() {
$('#d1').text('test');
}
);
this way the script executes after the HTML of the div is parsed by the browser.
$("#div1").innerHTML="your text goes here..";

Categories

Resources