AJAX Javascript to create a link

Javascript to create a link

Hello, I'm sorry for my English :D

I need to creat a link via javascript that pass the attribute rel:

I have the link:

HTML Code:

<a href="#page.php" rel="history">PAGE LINK</a>

I need something that call a javascript function, for example:

HTML Code:

<a href="javascript:pageURL('#page.php','history')>PAGE LINK</a>

where call the function

Code:

function pageURL(url, rel){ }

I don't know how to create in this function, I need creat the link with the href and rel attributes inside this function, and that in it same function execute the link automatically.

I need to do it, because I have to call it in the getURL of my flash menu, because the getURl don't suport the attribute rel.

Somebody can help me??

Thank's

Something like this should work:

Code:

var el = document.createElement("a"); el.rel = "history"; el.href = "page.php"; el.onclick = function () { pageURL("#" + this.href, this.rel); return false; };

Actually, something like this:

Code:

<a href="page.php" rel="history" onclick="pageURL("#" + this.href, this.rel); return false;">PAGE LINK</a>

I am grateful for your answer friend... but I not yet understood very well.

I must call the function through my onclick to create the link, and on the same function executes the link created automatically.

Explaining:

my link should be only with the onclick, because I want to make a function that creates the link and executes it automatically. Because I will use this function on getURL of the flash that not support to pass the rel attribute.

Ex.:

Code:

<a href="#" onclick="pageURL('page name','rel attribute');">PAGE LINK</a>

So I need the function that create the link with the href and rel attributes, and after executes it automatically.

I believe that is more or less as you showed in first case but I am not achieving to do it work...

Thank's :)

When this link is created, where in the Document Object Model (created from the HTML document) should the link appear? It's one thing to create a link, but it's not really useful unless you append it to the DOM. For what you are asking, the following steps are recommended:

1) Call the pageURL() function.

2) The pageURL() function creates an <a> element

3) The new <a> element is appended to the DOM (Document Object Model)

4) Call the click() method of the new <a> element.

Maybe this function will help?

Code:

/** * Creates a link and clicks it * @param string href The link's href attribute value * @param string rel The link's rel attribute value * @return void */ function pageURL(href, rel) { // Create new <a> element var el = document.createElement("a"); // Assign attributes passed to function el.rel = rel; el.href = href; // Append new link to document document.getElementsByTagName("body")[0].appendChild(el); // "click" the link el.click(); // Nullify the reference to this DOM node to prevent memory leaks el = null; }

And to use:

Code:

<a href="#" onclick="pageURL('url_here', 'rel_here'); return false;">LINK TEXT</a>

I made exactly how you told me, but when I click on link nothing happens. The page, remains the same page.

:confused:

Can you post the HTML and JavaScript you are using? Remember, the script I posted adds the link to the very end of the web page. I need to see the HTML and JavaScript source code to help you further.

Ok

My html code and javascript are in the same page:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>MY SITE</title> <link href="css/stle.css" rel="stylesheet" type="text/css" media="screen"/> <script type="text/javascript" src="js/jquery-1.2.6.pack.js"></script> <script type="text/javascript" src="js/jquery.history.js"></script> <script type="text/javascript"> /** * Creates a link and clicks it * @param string href The link's href attribute value * @param string rel The link's rel attribute value * @return void */ function pageURL(href, rel) { // Create new <a> element var el = document.createElement("a"); // Assign attributes passed to function el.rel = rel; el.href = href; // Append new link to document document.getElementsByTagName("body")[0].appendChild(el); // "click" the link el.click(); // Nullify the reference to this DOM node to prevent memory leaks el = null; } </script>  <script type="text/javascript"> //hash = url; // PageLoad function // This function is called when: // 1. after calling $.historyInit(); // 2. after calling $.historyLoad(); // 3. after pushing "Go Back" button of a browser function pageload(hash) { // hash doesn't contain the first # character. if(hash) { // restore ajax loaded state $("#col-right").load(hash); } else { // start page //$("#load").empty(); $('#col-right').load("home.php"); // abre a pagina inicial ao abrir o site } }; //start: function(elementLink){ $(document).ready(function(){ // Initialize history plugin. // The callback is called at once by present location.hash. $.historyInit(pageload); // set onlick event for buttons // if((elementLink.getAttribute('rel') == 'history')){ $("a[@rel='history']").click(function(){ // var hash = this.href; hash = hash.replace(/^.*#/, ''); $("#col-right").html('<div class="tarjaTit"><img src="imagens/ajaxloader.gif"></div>'); // moves to a new page. // pageload is called at once. $.historyLoad(hash); return false; }); }); </script>  </div> </div> <div id="col-right">  </div> </body> </html>

It is my code:

Explaining: My original link isn't <a href="#" onclick="pageURL('#home.php','history');">HOME</a> but:
<a href="#home.php" rel="history">

The rel attribute is necesssary to the jQuery history function. So you can see, I will use the function pageURL in the flash that don't support the attribute rel of the link.

I need tha this function when clicked in the flash button, create a the link and execute it, opening the page with the jQuery history.

Thank's!