|
|||||||||
|
|||||||||
| |||||||||
|
|||||||||
|
|||||||||
| |||||||||
|
|
|
| ||||||||||||||||||||||||||||||||
 |
|
|
«
Previous Thread
|
Next Thread
»
|
Thread Tools | Search this Thread | Rate Thread | Display Modes |
Codewalkers Forums Sponsor:
|
|
|
|
#1
July 6th, 2009, 06:04 PM
|
|||
|
|||
|
JQuery
I'm running into an issue, as practice I'm porting over some existing javascript to jQuery. I have an onclick event that runs a function and passes parameters to the function:
Code:
<a href="#" onclick="test('p1','p2'); return false;">Go</a>
lets say the function looks like this: Code:
function test(var1,var2) {
alert(var1);
alert(var2);
}
How do I use the 'onclick' event and pass parameters to the jQuery function?
__________________
Sir, a desire of knowledge is the natural feeling of mankind; and every human being, whose mind is not debauched, will be willing to give all that he has to get knowledge.
|
|
#2
July 6th, 2009, 06:19 PM
|
|||||||
|
|||||||
|
with jquery you put everything inside the head tag and use the $(document).ready() to run everything after the DOM tree has loaded (so before the page loads completely like images and such but after the DOM tree has downloaded which is why its better than using window.onload). then you just make a selector for the link and use the .click()(http://docs.jquery.com/Events/click) method. The idea is to separate the javascript from the body and have only the html in the body.
Code:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
function test(var1,var2) {
alert(var1);
alert(var2);
}
//once the document is ready...
$(document).ready(function(){
//make a selector for the <a> tag. usually you would
//use an id, but any css selector works technically.
//the .click will assign a onClick event. You can also
//pass a variable in the function(someVar) and it will
//be the event class where you can access event info.
//
$('a').click(function(){
//whatever you want to happen on click.
test('p1', 'p2');
//return false will stop the link.
return false;
});
});
</script>
</head>
<body>
<a href="#">Go</a>
</body>
</html>
see http://docs.jquery.com/Events/jQuery.Event for the event object if you want to use it.
|
|
#3
July 6th, 2009, 07:21 PM
|
|||
|
|||
|
sweet! I knew I was missing something simple. Thank you!
|
|
#4
July 6th, 2009, 08:56 PM
|
|||
|
|||
|
Alright, maybe I didn't it it throughly enough the first time.
I still don't understand how I'm going to pass arguments from the link to the function, the reason is I'm pulling different things from a database which is easily echoed out to the onclick event. So if I have a bunch of links, lets say 20: Code:
<a href="#" onclick="test('123','456'); return false;">Send 1</a>
<a href="#" onclick="test('54','23'); return false;">Send 2</a>
<a href="#" onclick="test('5','4'); return false;">Send 3</a>
<a href="#" onclick="test('14','46'); return false;">Send 4</a>
<a href="#" onclick="test('1','44'); return false;">Send 5</a>
<a href="#" onclick="test('13','446'); return false;">Send 6</a>
How do I tell the jQuery function that each link has a different set of arguments to be passed to the function?
|
|
#5
July 7th, 2009, 12:17 AM
|
|||||||
|
|||||||
|
there are 3 options here...test 1: has the title as both numbers separated by a comma and splits them up by the comma and passes both those into the function. test 2: has the entire function inside the title tag and get it, uses eval to run that code. test 3: has 2 non-standard attributes num1 and num2 and gets those then uses them on the function. this probably won't pass validation (if you care which i gave up on a while ago) but is probably the easiest and is my preferred method. other than that, you don't have to use title, it just what I chose. it could be any attribute even non-standard ones like num1, num2...etc.
Code:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
function test(var1,var2) {
alert(var1);
alert(var2);
}
//once the document is ready...
$(document).ready(function(){
$('a.test1').click(function(event){
//get the title
var title = $(event.target).attr("title");
//split the title on ,
title = title.split(/,/);
//run the function.
test(title[0], title[1]);
return false;
});
$('a.test2').click(function(event){
//get the title
var title = $(event.target).attr("title");
//eval on the code in the title.
eval(title);
return false;
});
$('a.test3').click(function(event){
//get the title
var num1 = $(event.target).attr("num1");
var num2 = $(event.target).attr("num2");
//run the function.
test(num1, num2);
return false;
});
});
</script>
</head>
<body>
<a href="#" class="test1" title="123,456">test 1</a>
<a href="#" class="test1" title="54,23">test 1</a><br /><br />
<a href="#" class="test2" title="test('5','4');">test 2</a>
<a href="#" class="test2" title="test('14','46');">test 2</a><br /><br />
<a href="#" class="test3" num1="1" num2="44">test 3</a>
<a href="#" class="test3" num1="13" num2="446">test 3</a>
</body>
</html>
|
|
#6
July 7th, 2009, 07:58 AM
|
|||
|
|||
|
Alright I understand that stuff now, but I'm running into another issue - if I load content in using AJAX (those links above) the click event doesn't work.
test.php page contains only: PHP Code:
index.html page contains: PHP Code:
The link 'Training Original Link Working' works, but the loaded up 'Training' link does not. What am I doing wrong here?
|
|
#7
July 7th, 2009, 11:24 AM
|
|||
|
|||
|
Not sure if the subscribed thread email went out because codewalkers was down for a bit after I tried sending this up, so just in case....
|
|
#8
July 7th, 2009, 12:39 PM
|
|||||||
|
|||||||
|
you will need to use unbind and re-bind them after the ajax has loaded.
Code:
<script type="text/javascript">
function test(var1,var2) {
alert(var1);
alert(var2);
}
//once the document is ready...
$(document).ready(function(){
$('#container').append('<img src="img/loading.gif" alt="Currently Loading" id="loading" />');
$.ajax({
url: 'test.php',
type: 'GET',
data: 'month=',
success: function(result) {
$('#response').remove();
$('#calendar').append('<span id="response">' + result + '</span>');
$('#loading').fadeOut(500, function() {
$(this).remove();
});
//just moved the same code from below into the success portion
//and added a unbind('click')
$('a.training_link').unbind('click').click(functio n(){
//get the title
var title = $(this).attr("title");
//split the title on ,
title = title.split(/,/);
//run the function.
test(title[0], title[1]);
return false;
});
return false;
}
});
$('a.training_link').click(function(){
//get the title
var title = $(this).attr("title");
//split the title on ,
title = title.split(/,/);
//run the function.
test(title[0], title[1]);
return false;
});
});
</script>
Last edited by IAmALlama : July 7th, 2009 at 12:42 PM.
|
|
#9
July 7th, 2009, 04:00 PM
|
|||
|
|||
|
Thanks again Llama, but I think after messing with this thing a bunch I'm going to implement a little bit of jQuery into it to add some additional functionality, and leave the existing javascript the way it is. I think in this case it's more work to use jQuery than just regular javascript.
Thanks, I'm going to get a jQuery book from the library and study up so I can write in it without running into strange issues. FYI: I used that last part, but couldn't get my AJAX app to flip between two dynamic screens in the app, I ended up with a need for an infinite function inside function thing otherwise when link 1 is clicked then link 2 is clicked to go back to the screen where link 1 resides and then link 1 is clicked again, link 2 wouldn't work - for instance, it depends on how many functions within functions I used. I was probably doing something weird. Last edited by jamestrowbridge : July 7th, 2009 at 04:10 PM.
|
|
#10
July 7th, 2009, 06:02 PM
|
|||
|
|||
|
Well, I don't think I'm going to be able to simply use jQuery for some of it because the links in the AJAX app part won't unbind without jQuery.
I'll upload the app I'm converting in case anyone feels like helping, I downloaded some code from another site (don't remember where) and then edited it to make it work and make it work the way I wanted it to. At the very least I'd like to have a fancy tooltip thing when the 'training' links are hovered over to display some of the training details, but it would be cool to convert all of the javascript over to jQuery type javascript. The database info is in a screen shot 'db.jpg' - I removed a bunch of images to let it upload let me know if you want/need any.
|
|
| Viewing: Codewalkers Forums > Other Technologies > Client Side Things > JQuery |
| Thread Tools | Search this Thread |
| Display Modes | Rate This Thread |
|
|
|
|
|
|
 |
|
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
