Jquery Dialog проблема - PullRequest
       14

Jquery Dialog проблема

1 голос
/ 20 декабря 2010

Чтобы использовать диалоговый модуль jquery UI с использованием метода $ .extend (), я написал следующее:

User.confirmationDialog = function(options)
{
  if(undefined === options.selector)
  {
      return false;
  }

  this.close = function()
  {
    modal.dialog('close');
  }

  this.forward = function()
  {
    if(undefined !== trigger.attr('href'))
    {
      document.location.href = trigger.attr('href');
    }
  }

  var modalButtons = {};
  if(undefined !== options.buttons)
  {
    for(var buttonTitle in options.buttons)
    {
      modalButtons[buttonTitle] = (function(e, f)
      {
        return function() {
          e.call(f);
        }
      })(options.buttons[buttonTitle], this);
    }
    delete options.buttons;
  }

  var modalHtmlElementId = 'confirmDialog';
  if(undefined !== options.id)
  {
    modalHtmlElementId = options.id;
    delete options.id;
  }

  var modalOptions = jQuery.extend({
    autoOpen: false,
    width: 410,
    height: 'auto',
    minHeight: false,
    dialogClass: 'modalDefault',
    modal: true,
    resizable: false,
    draggable: false,
    close: function()
    {
      bindTriggers();
    },
    open: function()
    {
      unbindTriggers();
    },
    buttons: modalButtons
  }, options || {});

  var modal = jQuery('<div />', {'id': modalHtmlElementId});
  if(undefined !== options.text)
  {
    modal.html(options.text);
  }
  modal.dialog(modalOptions);


  var trigger = null;
  var onTriggerClick = function(e)
  {
    e.preventDefault();
    trigger = jQuery(e.target);
    if(undefined !== options.beforeOpen)
    {
      options.beforeOpen.call(trigger, modal, e);
    }
    modal.dialog('open');
  };

  //bind custom event to current options.selector elements
  var bindTriggers = function()
  {
    jQuery(options.selector).live('click', onTriggerClick);
  }

  //unbind custom event to current options.selector elements
  var unbindTriggers = function()
  {
    jQuery(options.selector).die('click', onTriggerClick);
  }

  //First init: bind custom event listener on option.selector
  bindTriggers();
}

/*
*
* @required User.confirmationDialog
*/
User.singleBtnDialog = function (options)
{
  if(undefined === options.selector) return false;

  var text= options.text,
      ok = options.okBtnTxt,
      dialogButton = {};

  dialogButton[ok] = function()
  {
    this.forward();
  };

  var modalOptions = jQuery.extend({
    selector: options.selector,
    text : text,
    closeOnEscape: false,
    open: function(event, ui)
    {
      jQuery(".ui-dialog-titlebar-close").hide()
    },
    buttons: dialogButton
  }, options || {});
  User.confirmationDialog(modalOptions);
}

User.twoBtnDialog = function(options)
{
  if(undefined === options.selector) return false;

  var text= options.text,
      ok = options.okBtnTxt,
      cancel = options.cancelBtnTxt,
      dialogButtons = {};

  dialogButtons[ok] = function()
  {
    forward();
  };
  dialogButtons[cancel] = function()
  {
    close();
  };

  var modalOptions = jQuery.extend({
    selector: options.selector,
    text: text,
    buttons: dialogButtons
  }, options || {});
  User.confirmationDialog(modalOptions);
};

User.ajaxContentDialog = function(options)
{
  if(undefined === options.selector) return false;

  var modalOptions = jQuery.extend({
    selector: options.selector,
    beforeOpen: function(modal, e)
    {
      e.stopPropagation();
      jQuery.ajax({
         async: false,
         type: 'GET',
         url: this.attr('href'),
         success: function(data, textStatus, XMLHttpRequest)
         {
          modal.html(data);
         }
      });
    }
  }, options || {});
  User.confirmationDialog(modalOptions);
};

Фронтенд, на самом деле я связываю любой из 3 методов (singbutton, 2buttons или ajax) следующим образом:

 [User.singleBtnDialog, {
      okBtnTxt: 'Ok',
      text: 'blablablablabl',
      selector: '.addToFav'}],

    [User.twoBtnDialog, {
      okBtnTxt: 'Ok',
      cancelBtnTxt: 'Ablehnen',
      text: 'blablablablabl',
      selector: '.topicOpenClose'}],

Моя проблема довольно проста, но я не могу решить ее легко: событие хорошо привязано к каждому из моих селекторов, кнопки созданы правильно, но при нажатии на кнопку «ОК» я получаю

trigger is null
[Break On This Error] if(undefined !== trigger.attr('href')) 

ошибка. Я подозреваю какое-то недопонимание области видимости, но не могу найти правильного решения.

Спасибо за помощь, очень признателен.

1 Ответ

1 голос
/ 20 декабря 2010

Да, это проблема объема. Попробуйте вызвать его с помощью User.confirmationDialog.forward(); Если это не работает, сделайте функцию общедоступной.

РЕДАКТИРОВАТЬ: Вы должны превратить свои функции в объекты с функциями и вызывать только эти функции.

User.confirmationDialog = {

 recent_function: function(options){
   // do ...
 }

 close: function()
  {
    alert('close');
  }
  ...
}

Вызов User.confirmationDialog.recent_function запустит предыдущую функцию confirmationDialog. Вы можете закрыть доступ сейчас, используя User.confirmationDialog.close();

...