Adding search button and text box in ui-dialog-buttonpane

Question

I am writing a greasemonkey script to manipulates the DOM, queries a server and displays the result on a separate jquery dialog. I want to add following two functionalities to it:

1. Provide a search box which acts like a simple search on a browser (i.e. searches through the content of the jquery dialog only and highlights the text).
2. Provide a text-box, the content of which should be stored permanently for all future use of the userscript unless the user changes it specifically.

The problem I am facing is that I want to include both of these in the ui-dialog-buttonpane area of the dialog, to the left of the close button, but I am not able to figure out how to do that.

What I do know is that I can use window.find() (as used here http://www.javascripter.net/faq/searchin.htm) to enable the browser find functionality.

Can someone help me with this ? Following is the code for my existing greasemonkey script:

// ==UserScript==
// @name        Query for each URL Asynchronously
// @namespace   SupportScript
// @include     *
// @require     https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js
// @require     https://ajax.googleapis.com/ajax/libs/jquery/ui/1.11.0/jquery-ui.min.js
// @resource    jqUI_CSS  https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/redmond/jquery-ui.css
// @grant       GM_addStyle
// @grant       GM_getResourceText
// @grant       GM_getResourceURL
// @run-at      document-end
// allow pasting
// ==/UserScript==

var snapshotResults = document.evaluate('//a[contains(@href,"http")]/@href', document, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null);
var windowWidth = $(window).width()-800;
var windowHeight = $(window).height();

var zNode = document.createElement ('input');
zNode.setAttribute ('id', 'SSButton');
zNode.setAttribute( 'type', 'image' );
zNode.setAttribute( 'src', 'http://www.veryicon.com/icon/64/System/Longhorn%20R2/Back%20Button.png');
//zNode.setAttribute( 'src', 'https://dperkins.org/2013/2013-07-24.Icon.2.png');
//zNode.setAttribute( 'src','http://i1043.photobucket.com/albums/b433/suzuki800/Button-Info-icon.png');
document.body.appendChild (zNode);

var batchSize = 10;
var urlsToUpsert = [];
var uniqueHostnameSet = new Set();
var uniqueURLArray = [];
uniqueHostnameSet.add(window.location.hostname);
var finalUrl = window.location.protocol + '//' + window.location.hostname;
uniqueURLArray.push(finalUrl);
for (var iterate = 0; iterate < snapshotResults.snapshotLength; iterate++)
{
    var hrefContent = snapshotResults.snapshotItem(iterate).textContent;
    var regex = /http.*/;
    var href = regex.exec(hrefContent);
    var a = document.createElement('a');
    a.href = href;
    if (!uniqueHostnameSet.has(a.hostname))
    {
        uniqueHostnameSet.add(a.hostname);
        finalUrl = a.protocol + '//' + a.hostname;
        uniqueURLArray.push(finalUrl);
    }
}

var divMain = '<div id="SSOverlayDialog"></div>';
$('body').append(divMain);

$.Coral = function (options) {
    $.extend(options, {
        url: "my URL",
        data: JSON.stringify(options.data),
        dataType: 'json',
        crossDomain: true,
        type: 'POST',
        contentType: 'application/json',
        processData: false,
        headers: {
            'Content-Encoding': 'abc',
            'X-Target': options.operation
        },

        dataFilter: function(data, type) {
            return data || "{}";
        }
    });
    return $.ajax(options);
};

$.GetOperation = function (options) {
    $.extend(options, {
        async: true,
        success: function(data) {
            handleData(data);
        },
        operation: 'opeartion1'
    });
    return $.Coral(options);
};

$.UpsertOperation = function (options) {
    $.extend(options, {
        async: true,
        operation: 'Operation2'
    });
    return $.Coral(options);
};


for (var iterateUniqueURLArray=0; iterateUniqueURLArray<uniqueURLArray.length; iterateUniqueURLArray+=batchSize) {
    var urlList = uniqueURLArray.slice(iterateUniqueURLArray,iterateUniqueURLArray+batchSize);
    try {
        var listOfURLs = {
            storeUrlList: urlList
        };
        var dataGetAttributes = {data: listOfURLs};
        $.GetOperation(dataGetAttributes);
    } catch(e) {
        console.log(e);
    }

}

function handleData (data) {
    var div = '<div id="SSOverlayDialog">';
    var response = JSON.stringify(data);
    var subString = "";
    var startIndex = response.indexOf('{',1);
    var endIndex = response.lastIndexOf('}');
    var responseText = response.substring(startIndex,endIndex);
    var subString = JSON.parse(responseText);
    $.each( subString, function( key, value ) {
        key = JSON.stringify(key);
        div+='<b><i><a style="color:#0645AD" href="'+key.substring(1,key.length-1)+'"><u>' + key.substring(1,key.length-1) + '</u></a></i></b><br><br>';
        if(JSON.stringify(value)==='{}') {
            console.log("Value for URL "+key+" is null.");
            div+='<p>This URL does not exist with Mobius.<span style="color:red" class="urlNotPresent" id ="'+key.substring(1,key.length-1)+'"><u>Click Here</u></span> to submit to Mobius.</p>';
        }
        $.each( value, function( ky, val ) {
            ky = JSON.stringify(ky);
            if (val==null) {
                div += '<p><b>'+ky.substring(1,ky.length-1)+': </b><i>'+val+'</i></p>';
            }
            else{
                val = JSON.stringify(val);
                div += '<p><b>'+ky.substring(1,ky.length-1)+': </b><i>'+val.substring(1,val.length-1)+'</i></p>';
            };
        });
        div+='<br>';
    });
    div += '</div>';
    $('#SSOverlayDialog').append(div);
    $(".urlNotPresent").off('click');
    $(".urlNotPresent").one('click', urlNotPresentFn);
    $(".urlNotPresent").hover(pointerToClick, pointerToDefault);
}

var urlNotPresentFn = function() {
    var url = jQuery(this).attr("id");
    if (urlsToUpsert.length == batchSize-1) {
        urlsToUpsert.push(url);
        var listOfURLs = {
            storeUrlList: urlsToUpsert
        };
        var myOptions = {data: listOfURLs};
        $.UpsertOperation(myOptions);
        urlsToUpsert.length = 0;
    } else {
        urlsToUpsert.push(url);
    };
    console.log(urlsToUpsert);
}

var pointerToClick = function() {
    $(".urlNotPresent").css("cursor", "pointer");
}

var pointerToDefault = function(){
    $(".urlNotPresent").css("cursor", "default");
}

$(window).bind('beforeunload', function() {
    if(urlsToUpsert.length>0) {
        var listOfURLs = {
            storeUrlList: urlsToUpsert
        };
        var myOptions = {data: listOfURLs};
        $.UpsertOperation(myOptions);
        urlsToUpsert.length = 0;
    };
    return ;
});

$('#SSOverlayDialog').dialog({

    autoOpen: false,
    modal: false,
    title: 'Discovered URLs (press "Esc" button to close)',
    position: {
        at: 'right top'
    },
    resizable: false,
    width: windowWidth,
    height: windowHeight,
    open: function(event, ui) { $(".ui-dialog-titlebar-close").hide(); },
    zIndex: 11111111,
    buttons: [
    {
        text: 'Close',
        click: function () {
            $(this).dialog('close');
        }
    }
    ]
});

$("#SSButton").click(function() {
    ($("#SSOverlayDialog").dialog("isOpen") == false) ? $("#SSOverlayDialog").dialog("open") : $("#SSOverlayDialog").dialog("close") ;
/*  if ($("#SSOverlayDialog").dialog("isOpen") == false) {
            $("#SSOverlayDialog").dialog("open"),
            $('#SSButton').css({
                'transform': 'rotate(180deg)',
                'transform': 'translate(-windowWidth)'
            });
    } else{
        $("#SSOverlayDialog").dialog("close"),
        $('#SSButton').css({
            'transform': 'initial'
        });
    };*/
});

var jqUI_CssSrc = GM_getResourceText('jqUI_CSS');
jqUI_CssSrc = jqUI_CssSrc.replace(/\.ui-front \{[\s]*z-index:\s100\;[\s]*\}/g,".ui-front \{\n z-index: 20000000 \; \n\}");
GM_addStyle(jqUI_CssSrc);

GM_addStyle ( multilineStr ( function () {/*!
  #SSButton {
    background: none repeat scroll 0% 0% ;
    background-image: none;
    background-repeat: repeat;
    background-attachment: scroll;
    background-position: 0% 0%;
    background-size: auto auto;
    overflow: hidden;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 22222222;
    width: 40px;
    height: 40px;
}
*/} ) );

function multilineStr (multiLineStringFn) {
    var str = multiLineStringFn.toString ();
    str     = str.replace (/^[^\/]+\/\*!?/, '') // Strip function () { /*!
            .replace (/\s*\*\/\s*\}\s*$/, '')   // Strip */ }
            .replace (/\/\/.+$/gm, '') // Double-slash comments wreck CSS. Strip them.
            ;
            return str;
        }

Answer 1

To include controls to the left of the "Close" button in a ui-dialog-buttonpane, you can use the .prepend() function on the .ui-dialog-buttonset class like this:

$('.ui-dialog .ui-dialog-buttonset').prepend('<input type="text"/><button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only"><span class="ui-button-text">Search</span></button>');

You'll most likely want to add a selector for the specific dialog you're using to avoid adding this control to any dialog on the page. Based on your example, it would be something like this:

$('div[aria-describedby=SSOverlayDialog]').find('.ui-dialog-buttonset').prepend('<input type="text"/><button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only"><span class="ui-button-text">Search</span></button>');

Hope that helps answer the main problem. Best of luck!