Add a dynamic form to specific pages using Greasemonkey and JQuery
In a particular forum, clicking the reply button spawns a new window with a text form to type a reply. I want to implement a script to create that specific text form within the main page (instead of spawning a new window). How would I go about doing this?
Here is the source code for the pages I want to implement the script on:
http://pastebin.com/2UaUVGJA (the main discussion page) http://pastebin.com/hAx2SPUu (the reply page)
Here is the attempted script (note that I still need some method to extract the appropriate post_id value, and create the form based on that Id), that does not work at all.
// ==UserScript==
// @name Quick_ReplyTest
// @namespace http://userscripts.org/users/181447
// @description Inserts QuickReply
// @include *
// @require http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js
// ==/UserScript==
/* Optional:
window.addEventListener ("load", Greasemonkey_main, false);
*/
$(document).ready (Greasemonkey_main);
function Greasemonkey_main ()
{
/*--- Get the first node inside the id="main" span (Google.com)
If that's not there, then get the first node of the html body.
*/
var TargetNode = $("a[href*='event=reply/post']");
if (!TargetNode)
TargetNode = $("body *:first");
$(TargetNode).after
(
'<form method="POST" action="http://dl.tccd.edu/index.php/classforums/posts/event=saveReply"> \
<input type="hidden" name="subject" size="45" id="txt_subject" maxlength="200" value=""> \
<br> Message:<br> \
<textarea rows=开发者_JAVA技巧"20" style="width:70%;" name="message" id="message"></textarea> \
<br> <br> \
<input type="submit" id="submit_post" value="Post Reply"> \
<input type="hidden" name="post_id" value="1010815"> \
<input type="hidden" name="thread_id" value="1010815"> \
</form> \
'
);
}
Ok, here is the script modified to make the form live. It should function now, but obviously I can't fully test it without a login.
I tried to explain what was going on on the comments and a handy jQuery reference is at: http://www.jqapi.com/ .
/* NOTE: Do not use:
// @include *
This slows things down and could cause all sorts of interesting side-effects.
*/
// ==UserScript==
// @name Quick_ReplyTest
// @namespace http://userscripts.org/users/181447
// @description Inserts QuickReply
// @include http://*.tccd.edu/*
// @include https://*.tccd.edu/*
// @require http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js
// ==/UserScript==
$(document).ready (Greasemonkey_main);
function Greasemonkey_main ()
{
/*--- Use jQuery to get links (anchor tags) that point to the reply form.
The links are of the form:
<a href="http://dl.tccd.edu/index.php/classforums/posts/event=reply/post_id=1013402">Reply</a>
*/
var zTargetNodes = $("a[href*='event=reply/post']"); //-- href contains "event=reply/post".
/*--- Now, for each link, extract the post_id and insert the reply form with the post_id filled in.
Uses the jQuery each() function.
*/
zTargetNodes. each (function (iPostNum) {AddReplyForm ($(this), iPostNum);} );
}
function AddReplyForm (zJnode, iPostNum)
{
/*--- Extract the post_id from the link, using the jQuery attr() function and the javascript
match() function.
*/
var sHref = zJnode.attr ('href');
var sPostID = (sHref + '&').match (/post_id=([^\&\#]+)[\&\#]/) [1];
/*--- Build up the form HTML-string. Using sPostID for post_id and thread_id.
(Or we could just insert the form into the doc, and change the id values after.)
*/
var sNewHTML = '<form method="POST" action="http://dl.tccd.edu/index.php/classforums/posts/event=saveReply"> \n'
+ '<input type="hidden" name="subject" size="45" id="txt_subject" maxlength="200" value=""> \n'
+ '<br> Message:<br> \n'
+ '<textarea rows="20" style="width:70%;" name="message" id="message"></textarea> \n'
+ '<br> <br> \n'
+ '<input type="submit" id="submit_post" value="Post Reply"> \n'
+ '<input type="hidden" name="post_id" value="' + sPostID + '"> \n'
+ '<input type="hidden" name="thread_id" value="' + sPostID + '"> \n'
+ '</form>'
;
/*--- Inject the reply form.
*/
zJnode.after (sNewHTML);
}
精彩评论