[jQuery] progressive enhancement link href hurdle
Hi All,
I want to use a whole bunch of jQuery functionality on a website and
still have it accessible in its current form. I believe the term for
such a process is 'progressive enhancement'
Correct me if I'm wrong but I understand about adding enhancements to
an existing webapp is that:
1) There are three layers to a website: HTML,CSS and JS
2) Each layer adds more functionality/style/interaction than the last
and these layers should be applied in order to all browsers than are
compatible
So with that in mind I went off to enhance my existing webapp.
There are a lot of links on the website that i would like to turn into
Ajax interactions.
They are generally like this:
<a href="index.php?do=add&id=1&s=1">Add Item 1 Section 1</a>
I want to have an easy way of extracting all parameters from the href
or maybe supplying an object in the a href for jQuery to parse:
I thought of something like this which would be a matter of changing a
few templates on the site:
<a class="addItem" href="index.php?do=add&id=1&s=1" params="{do:add,id:
1,s:1}">Add Item 1</a>
I might well be completely off track but Is it legal (W3C) to just add
your own attributes to a tag like this?
Would this work and how would i get it into an object to use in my
click function?: (i'm guessing here)
Regardless of that here is my script thus far:
HTML:
----
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="jquery-1.2.1.min.js"></script>
<script type="text/javascript" src="actions.js"></script>
</head>
<body>
<h3>Test</h3>
<div id="msg"></div>
<div id="loading"></div>
<div id="content">
<a class="addItem" href="index.php?do=add&id=1&s=1">Add Item 1
Section 1</a>
<a class="addItem" href="index.php?do=add&id=2&s=2">Add Item 2
Section 2</a>
<a class="addItem" href="index.php?do=add&id=3&s=3">Add Item 3
Section 3</a>
</div>
</body>
</html>
----
JS:
----
function doRPC(data) {
$.ajax({
type: "GET",
url: "rpc.php",
data: data,
error: function() { $('#msg').text('There was an error completing
your request, please try again later.'));},
success: function(msg){ $('#msg').html(msg); },
}
});
return false;
};
$(document).ready(function() {
$("a.addItem").click(function() {
doRPC($(this).attr('href'));
return false;
}
}
----
At the moment the data sent to the server is something like this:
Array([index.php?do=] => add [id] => 1 [s] => 1)
Should i just deal with this ugly format in php and move on?
Any help is appreciated.
Thanks