0

I'm creating a userscript that will inject a search box into this forum. The forum is running IP.Board, which includes a definition for $ in the javascript code. This is the userscript code that I'm using:

// ==UserScript==
// @name LTT Search redirector
// @namespace   1fb3e69b2f9d1a868b4e5a4c8c559152
// @description Replaces the target of the search box on linustechtips.com with a google search within linustechtips.com. the URL used is https://www.google.com/search?q=site:linustechtips.com+%s
// @include /^https?:\/\/(?:[^\.]+\.)?linustechtips\.com(?:\/.*)*$/
// @require https://code.jquery.com/jquery-2.1.1.min.js
// @version 2.0.0
// @updateURL   https://monkeyguts.com/260.meta.js?c
// @downloadURL https://monkeyguts.com/260.user.js?c
// ==/UserScript==

var $jq = jQuery.noConflict(true);

if($jq("#search-box").length === 0) { //Search box does not exist
    $jq("#branding .main_width").append('<div id="search" class="right">'+
'   <form action="http://linustechtips.com/main/" method="post" id="search-box">'+
'           <span class="right" id="search_wrap">'+
'               <input type="text" tabindex="100" size="17" class="" name="search_term" id="main_search" placeholder="Search...">'+
'               <span style="" id="search_options" class="choice ipbmenu">Using Google</span>'+
'               <input type="submit" value="" class="submit_input clickable">'+
'           </span>'+
'   </form>'+
'</div>');
}

$jq("#search-box .submit_input").click(function(){
    window.location.href="https://www.google.com/search?q=site:linustechtips.com+"+
        (jQuery("#main_search").val().replace(/(\s)/g,"+"));
    return false;
});

However, when I use this user script, I get an error from the site saying TypeError: $(...) is null, relating to the site's javascript (it's trying to reference the original definition of $.

If I type $ into the dev console, I get the site's definition of it, and if I delete the text that is appended (everything in the .append(...)), it works fine. The issue only occurs when I inject this text (or potentially something of similar length - I haven't tested that).

If I enter the code into the console, it functions fine, and the definition of $ doesn't change.

JackW
  • 999
  • 11
  • 22
  • Not enough info for us to replicate the problem; some settings (`@grant` and `@run-at` mostly) in the Metadata Block have a **crucial** effect in cases like this. Otherwise this is a duplicate as is. Don't use jQuery that way! Use it as in the linked answers or, worst case, use it [like this](http://stackoverflow.com/a/12751531/331508). – Brock Adams Dec 17 '14 at 22:51
  • @brock The only metadata that I removed was the name, namespace, description, version and update/download URLs. – JackW Dec 17 '14 at 22:58
  • Also, if the script causes an exception before the `.append(...)`, it works; if not, it causes the error, even when I follow the instructions in the duplicate that you marked and the link in your comment. – JackW Dec 17 '14 at 22:59
  • Edit the question to add the EXACT code you tried. Try to make it an MCVE. – Brock Adams Dec 17 '14 at 23:01
  • I thought you said you tried the approaches outlined in the linked answers? If you do that it will work. If you think you are doing that and it still doesn't work, **append** the code you tried to the question. – Brock Adams Dec 17 '14 at 23:21
  • @brock It seems to be an issue with the length of the content appended because I have rewritten it, and it fails as it is, but if I remove the `` line or the `` & `` lines, it works fine. It's a weird issue, but I will try avoiding it now. – JackW Dec 17 '14 at 23:24
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/67169/discussion-between-stormdrive-and-brock-adams). – JackW Dec 17 '14 at 23:28

0 Answers0