Forums (Obsolete)

Kentico Legend

Brenden Kehren - 4/8/2013 1:47:42 PM

jQuery UI Dialog

Looking for some direction as my jQuery skills are lacking here. What I'm doing is dynamically creating a jQuery.Dialog object from a div tag. I want to get the <div> title attribute and use it as the Dialog's title attribute. How do I go about getting this from this code?

jQuery(function ($) {
    $('div[id^="my-dialog_"').dialog({
        autoOpen: false,
        title: '<h4>' + needCurrentObjectsTitleAttribute + '</h4>',
        width: 500,
        modal: true
    });

    $('.my-modal').click(function () {
        var target = $(this).attr('id');
        $('#' + target + '_content').dialog('open');
        return false;
    });
});

I thought I'd be able to use

$('div[id^="my-dialog_"').attr('title')

but didn't work as expected. Wish I knew JS/jQuery as well as I know C#

Certified Developer 8

Petr Dvorak - 4/9/2013 1:24:40 PM

RE:jQuery UI Dialog

Hi,

I would suggest using foreach and call "dialog()" on each dialog individually.

Sample:


$('div[id^="my-dialog_"]').each(function() {
  var title = $(this).attr('title'); // get your title here
  $(this).dialog({ autoOpen: false, title: title ... });
});

The anonymous function is executed in context of each <div> element, so you can access its attributes using "this" keyword.

Kentico Legend

Brenden Kehren - 4/10/2013 2:59:57 PM

RE:jQuery UI Dialog

Thanks Petr. Seemed to work as you described. Now I run into another issue with the jQuery UI, I use this simple code

<script runat="server">
  protected void Page_Load(object sender, EventArgs e)
  {  
    CMS.GlobalHelper.ScriptHelper.RegisterJQueryUI(this.Page, false);
  }
</script>

to add jQuery and UI to my pages and NOT auto load the css as I'm doing it on my own but it seems to still auto load the CSS file. The bad part is it loads it after my css which overrides some classes I have. I've cleared cache and everything else and still have the same results. Any suggestions?


Kentico Consulting	richards@kentico.com - 4/12/2013 1:22:32 AM RE:jQuery UI Dialog Hi, Could you please tell me what css file do you have in mind so I can discuss it with a developer? My guess is that you want to use your own customized jQuery UI css, but Im not sure. Let me know. Kind regards, Richard Sustek


Kentico Legend	Brenden Kehren - 4/12/2013 12:27:38 PM RE:jQuery UI Dialog Yes your guess was right. I'm manually loading <link href="/CMSPages/GetResource.ashx?stylesheetfile=/CMSScripts/jquery/jquery-ui.css" type="text/css" rel="stylesheet"/> but any time I log into the site using the signoutbutton webpart and standard logon form it seems to load the stylesheet even though I indicated not to.


Certified Developer 8	Petr Dvorak - 4/13/2013 4:45:09 AM RE:jQuery UI Dialog Isn't the jquery-ui.css loaded by the OnSite editing feature?


Kentico Legend	Brenden Kehren - 4/13/2013 7:30:43 AM RE:jQuery UI Dialog Petr the person logging in is just a standard user, no editing permissions at all. So by rights there should be no editing abilities loaded when they log in. It would be nice if we could define loading order of any files automatically loaded. The head section is nice but its unpredictable most times.

Kentico Consulting

Kentico_RichardS - 4/27/2013 10:29:33 PM

RE:jQuery UI Dialog

Hi,

If you want to not load the default's ui-css and load your own one I'm guessing that you could just directly customize the default stylesheet of ui-css. Wouldnt that be possible?

You could also backup the default stylesheet just in case something went wrong, but you may define all the styles you want there.

Also, I believe that you have already came across this, but jQuery offers some nice tool for designing their widgets. http://jqueryui.com/themeroller/. I have worked with them in the past, but since Kentico uses older jQuery version there are some minor issues regarding class names etc. But it can definitely can help get on the bottom of the styles.

Kind regards,
Richard Sustek