To contact staff directly or to report bugs, please use Special:Contact.
I want the following to happen using JavaScript/jQuery:
- When id "back" clicked, replace id "projects" with "list-projects"
- When id "project-1" is clicked, replace id "projects" with "info-1" (repeat this for project-2 and info-2 and so up to 18)
- Whilst replacing the original thing with the one to replace with when an id is clicked, make the original one fade out, and the new one fade in
- I want this to be ajax, so please do not reload the page to do it
I predict the code would look something like this for the first bullet point:
$(document).ready(function(){
$('#back').click(function(){
$('#project').replace(' // replace with id "list-projects ');
})
});
-- Sam Wang (talk) 11:13, July 15, 2012 (UTC)
- That's a good start. You can use load to fetch data from the server via AJAX. And you can achieve that visual effect with fadeIn and fadeOut. -- pecoes 12:19, July 15, 2012 (UTC)
- Here was a test code I wrote, but as you can see here, it didn't work:
$(document).ready(function() {
$('#list-projects').show;
$('#project-1').click(function() {
$('#projects').load('/wiki/Happylander/Project:Gamiacs Controllers #WikiaArticle');
})
});
Sam Wang (talk) 23:03, July 15, 2012 (UTC)
(Reset indent) You forgot the parentheses on the second line and there is no element with the ID project-1. -- pecoes 23:16, July 15, 2012 (UTC)
- I've just fixed that and added return false to the script, but it won't even load the page, and how to combine the fadeIn and fadeOut styles with the load function? -- Sam Wang (talk) 23:35, July 15, 2012 (UTC)
- There is no page entitled "/wiki/Happylander/Project:Gamiacs", Sam. -- pecoes 23:47, July 15, 2012 (UTC)
- Fade the #list-projects container out, then load the new contents and fade it back in. Both - fadeOut and fadeIn - would be inside the click-handler, but only the fadeIn would be inside the load-handler. -- pecoes 00:17, July 16, 2012 (UTC)
(Reset indent) I really need an example. How should I add it to the following code?
$(document).ready(function() {
$('#list-projects').show;
$('#project-1').click(function() {
$('#projects').load('/wiki/Happylander/Project:Gamiacs_Controllers #WikiaArticle');
return false;
})
});
Also, now I have another question: whilst it is loading the page I want to load, can I make it display a image (bit like what you did for the InfoWidgets)? -- Sam Wang (talk) 00:30, July 16, 2012 (UTC)
- In addition to that, it somehow won't hide the id "back" when it starts. I've added some more to the code located in the Common.js file, and can you have a look please? -- Sam Wang (talk) 00:43, July 16, 2012 (UTC)
- Try this:
$(document).ready(function() {
$('#list-projects').fadeOut(400);
$('#project-1').click(function() {
$('#projects').load('/wiki/Happylander/Project:Gamiacs_Controllers #WikiaArticle', function () {
$('#list-projects').fadeIn(400);
});
return false;
})
});
- -- pecoes 00:49, July 16, 2012 (UTC)
- (adjusted to further adjustments to the code) The code
$(document).ready(function() {
$('#list-projects').fadeOut(400);
$('#list-projects').show();
$('#back').hide();
$('#project-1').click(function() {
$('#back').fadeIn(200);
$('#projects').load('/wiki/Happylander/Project:Gamiacs_Controllers #WikiaArticle'), function() {
$('#list-projects').fadeIn(400);
});
return false;
});
$('#back').click(function() {
$('#projects').load('/wiki/Happylander #projects');
$('#back').fadeOut(200);
})
});
- There's a syntax error in your script. Sam, you need to learn how to find syntax errors! If you check the browser's error console, it will clearly tell you where the error is. It also wouldn't hurt to get an editor that does error-checking in the background and alerts you to mistakes.
- The function in the load-handler is a parameter of the load-handler. The closing parenthesis before it, is wrong. -- pecoes 01:22, July 16, 2012 (UTC)
(Reset indent) Google Chrome's console is hard to understand, and I don't have good access to other browsers, so can you please tell me what I've done wrong? Sam Wang (talk) 01:33, July 16, 2012 (UTC)
- I already did: "The function in the load-handler is a parameter of the load-handler. The closing parenthesis before it, is wrong." -- pecoes 01:48, July 16, 2012 (UTC)
$(document).ready(function() {
$('#list-projects').fadeOut(400);
$('#list-projects').show();
$('#back').hide();
$('#project-1').click(function() {
$('#back').fadeIn(200);
$('#projects').load('/wiki/Happylander/Project:Gamiacs_Controllers #WikiaArticle', function() {
$('#list-projects').fadeIn(400);
});
return false;
});
$('#back').click(function() {
$('#projects').load('/wiki/Happylander #projects');
$('#back').fadeOut(200);
})
});
- I fixed the syntax error. -- pecoes 12:11, July 16, 2012 (UTC)
- You should fix the back-button first. It's inside of $('#list-projects') and gets overwritten when the new content has loaded. -- pecoes 12:45, July 16, 2012 (UTC)
(Reset indent) How to fix it, and I need to use that! -- Sam Wang (talk) 13:12, July 16, 2012 (UTC)
- Alright, Sam. You win. I'll write a complete script for you. But only under one condition: You never ever ask me for help again. -- pecoes 13:45, July 16, 2012 (UTC)
- Sam, I'm exhausted. When I saw your first post, I thought: Oh great! Sam has finally learned how to write JavaScript himself. He doesn't need somebody to write the whole entire script for him - only somebody who fills in the few holes his scripting knowledge still has. I was wrong. In the time that I've already spend on this post, I could have easily written the entire script for you while you haven't become one little bit more self-reliant. You still refuse to learn. We're back to square one. I've been to square one. I know what it's like there. It's not interesting and I'm not going back. Feel free to stay there as long as you like. I'm moving on. So, yes, if you want me to write the entire script for you, I will - as a last favor. But from there on out you're on my blacklist. You want to stay behind? Be my guest! -- pecoes 21:12, July 16, 2012 (UTC)
- Pecoes, people need time to practice, and they can't do stuff well straight away. I don't have a lot of time for those stuff — my times have been filled with activities this summer holidays, and right now I'm not even home! If you refuse to help me anymore after you finish this code, then go ahead, write the entire script -- Sam Wang (talk) 21:22, July 16, 2012 (UTC)
(Reset indent) @Sam: If I can interject here, Pecoes has a good point. I've seen a lot of your posts and you have a tendency to be very persistent when it comes to getting help. And, don't get me wrong, that's a good thing. But, it can really test people's patience eventually. Everyone has their patience limit. When you see that you're pushing that limit, you need to back off and figure things out on your own for awhile.
If you can't make time to learn something, then frankly you shouldn't be wasting time on it. Scripts are neat things that enhance wikis, but you don't need them to build a wiki.
Coding is not something just anyone can do. It takes determination and free time, and more determination! It's not about the "finished product" -- it's about improving yourself so you can make a better finished product next time! That's the attitude you want to have. If you just want a product to be finished, then you pay someone else to do it, generally speaking. 
Mathmagician ƒ(♫) 21:42 UTC, Mon, 16 July 2012
- People who want to learn stuff, don't say things like: "Can you fix the entire code for me please?" That's the kind of thing people who don't want to learn stuff say. But that's no longer my problem, of course. Very well. I'll write the script for you. Make me an admin for the next hour or two, please, so I can access your MediaWiki:Common.js. -- pecoes 21:46, July 16, 2012 (UTC)
- Sam, what I miss is curiosity, initative and independence. Math is right: If you do not want to learn JavaScript and CSS and stuff, you have two options:
- Create your wiki without them.
- Pay somebody to do it for you.
- In the interest of full disclosure I should probably mention that a few hours ago I have send a request to the admins of Community Central that they should block you from this wiki. -- pecoes 22:10, July 16, 2012 (UTC)
- Sam, what I miss is curiosity, initative and independence. Math is right: If you do not want to learn JavaScript and CSS and stuff, you have two options:
- "Okay, if it does not matter, can you write the entire script for me please?" Alright. I promised that much. Give me temporary admin privileges, please. -- pecoes 22:51, July 16, 2012 (UTC)
(Reset indent) Done -- Sam Wang (talk) 13:50, July 17, 2012 (UTC)