1

I am working on a web part that must display some information in a modal box. Having worked with jQuery UI in the past and appreciating its simplicity and acceptance in the .NET world, I am trying to figure out what is the recommended approach to integrate the library via the web part. There are a lot of articles on the web, but having bounced from one to another in search of succinct instructions, I reached SO somewhat exhausted!

Here are my specific constraints:

  1. I don't want to add jQuery and jQuery UI to the master page.
  2. I don't want to use a CEWP to add the libraries to the page, since there are a good number of existing web part pages that will use the web part I am developing.
  3. Whatever mechanism I use to add the libraries to a page, I want to make sure they don't conflict with an already added jQuery to that page. For instance, if I add two instances of this custom web part, the second one should ideally detect that jQuery has already been added to the page and must not be added again.
  4. Using Designer is not at all an option (I just brought this up, even though it is most likely not an option).

Hopefully this does not sound too off-topic, but I need to add a jqGrid inside this modal box; I am considering a simpler approach such as using a combination of an SP application page + IFRAME.

I hope someone can give me step by step instructions to get started. That is tantamount to winning the lottery, at this point :-) Thank you!

Web User
  • 7,438
  • 14
  • 64
  • 92

2 Answers2

0

To dynamically add javascript to a web page, you can do something like this:

var jQscript = document.createElement('script');
jQscript.type = 'text/javascript';
jQscript.src = '//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js';

if (typeof (jQuery) == 'undefined') //you can use !jQuery.ui for jQuery UI
    document.getElementsByTagName('head')[0].appendChild(jQscript);

//make sure jQuery is fully loaded before trying to use it

For making sure it doesn't wreck anything else in the page, see jQuery.noConflict().

Colin
  • 4,025
  • 21
  • 40
  • I need to add this from C# code from within the web part. Not sure how the above addresses my question. – Web User Oct 11 '13 at 19:44
  • 1
    One of your stated requirements was to not load jQuery if it's already loaded, which is something you'll only be able to due with client script. What you'll have to do is take the above and add it to the page via your web part by calling a method like Page.ClientScript.RegisterClientScriptBlock() (or via ScriptManager.RegisterClientScriptBlock() if you'd prefer). – Colin Oct 11 '13 at 23:42
0

If you add the jQuery and jQueryUI scripts to the style library you could use RegisterClientScriptInclude.

// Define the name, type and url of the client script on the page.
String csname = "jQuery";
String csurl = "/Style Library/Scripts/jquery-2.0.3.min.js";
Type cstype = this.GetType();

// Get a ClientScriptManager reference from the Page class.
ClientScriptManager cs = Page.ClientScript;

// Check to see if the include script exists already.
if (!cs.IsClientScriptIncludeRegistered(cstype, csname))
{
    cs.RegisterClientScriptInclude(cstype, csname, csurl);
}

Do the same again for jQueryUI replacing the references to jQuery as appropriate.

Aquila Sands
  • 1,471
  • 1
  • 20
  • 28
  • I read that ScriptManager is used for registering in a similar manner, that also facilitates partial-page updates (since I eventually want to refresh only the area within the modal box. Is ClientScriptManager an equally effective option? Also, how do I include jquery UI css on an as-needed basis (while also making sure it is not included twice)? – Web User Oct 12 '13 at 11:41
  • The `ScriptManager` is used for managing `asp.net Ajax` as you're loading `jQuery` I would use the `jQuery Ajax` methods to fetch the data and refresh your modal box, you can add your own js using the [RegisterClientScriptBlock method](http://msdn.microsoft.com/en-us/library/btf44dc9.aspx). As for the css there is no equivalent of these methods but check this [SO question - Is there a ClientScriptManager.RegisterClientScriptInclude equivalent for CSS](http://stackoverflow.com/questions/54658/is-there-a-clientscriptmanager-registerclientscriptinclude-equivalent-for-css) for some solutions. – Aquila Sands Oct 12 '13 at 14:46