addEventListener() вопрос/странное поведение

Я разрабатываю игру для Facebook. Я использую PHP и FBJS. Я использую addEventListener() для прикрепления событий к двум кнопкам. Каждая кнопка имеет свой собственный обработчик событий, который является функцией js. Первый обработчик события (loadNewCargo()) вызывается без проблем. Но второй обработчик событий (discardExistingCargo()) вызывает обновление страницы при его вызове. В примерах, которые я видел, используется одна функция обработчика событий для нескольких элементов. Я создаю один обработчик для каждого элемента. Это незаконно? Вот код («load-new-submit» и «discard-existing-submit» — это идентификаторы двух кнопок в диалоговом окне):

function loadCargo() {
  var actionPrompt = document.getElementById('action-prompt');
  actionPrompt.setTextValue('Loading cargo...');

  var ajax = new Ajax();
  ajax.responseType = Ajax.JSON;
  ajax.ondone = function(data) {
//debugger;
    ajax.responseType = Ajax.FBML;
    ajax.ondone = function(fbjsData) {
//debugger;
      if(data.loadableCargo.length == 0) {
        moveTrainManual();
      } else {
        var dialog = new Dialog().showChoice('Load Cargo', fbjsData, 'Minimize', 'Pass');

        var dlgBtnNew = document.getElementById('load-new-submit');
        dlgBtnNew.cityId = data.loadableCargo.city_id;
        dlgBtnNew.trainId = data.loadableCargo.train_id;
        dlgBtnNew.addEventListener('click', loadNewCargo);
/**/
        var dlgBtnDiscard = document.getElementById('discard-existing-submit');
        dlgBtnDiscard.cityId = data.loadableCargo.city_id;
        dlgBtnDiscard.trainId = data.loadableCargo.train_id;
        dlgBtnDiscard.addEventListener('click', discardExistingCargo);
/**/
        dialog.onconfirm = function() {
          // Submit the form if it exists, then hide the dialog.
          dialog.hide();
          actionPrompt = document.getElementById('action-prompt');
          actionPrompt.setInnerXHTML('<span><div id="action-text">'+
            'The "Load cargo" dialog has been minimized'+
            '</div>'+
            '<div id="action-end">'+
            '<form action="" method="POST">'+
            '<input type="button" value="Maximize" id="next-phase" onclick="loadCargo();" />'+
            '</form>'+
            '</div></span>');
          actionButton = document.getElementById('next-phase');
          actionButton.setValue('Maximize');
          actionButton.addEventListener('click', loadCargoEventHandler);
        };
        dialog.oncancel = function() {
          moveTrainManual();
        }
      }
    }
    ajax.post(baseURL + '/turn/load-cargo-dialog-fbjs', data);
  }
  ajax.post(baseURL + '/turn/load-cargo');
}

function loadCargoEventHandler(evt) {
  if(evt.type == 'click') {
    var dialog = new Dialog().showChoice('Load Cargo', fbjs_load_cargo_select, 'Minimize', 'Pass');
    dialog.onconfirm = function() {
      // Submit the form if it exists, then hide the dialog.
      dialog.hide();
      var actionPrompt = document.getElementById('action-prompt');
      actionPrompt.setInnerXHTML('<span><div id="action-text">'+
        'The "Load cargo" dialog has been minimized'+
        '</div>'+
        '<div id="action-end">'+
        '<form action="" method="POST">'+
        '<input type="button" value="Maximize" id="next-phase" onclick="loadCargo();" />'+
        '</form>'+
        '</div></span>');
      var actionButton = document.getElementById('next-phase');
      actionButton.setValue('Maximize');
      actionButton.addEventListener('click', loadCargoEventHandler);
    };
    dialog.oncancel = function() {
      moveTrainManual();
    }
  }
}

function loadNewCargo(evt) {
  //new Dialog().showMessage('loadNewCargo', 'city id='+cityId+', train id='+trainId);
//debugger;
  cityId = evt.target.cityId;
  trainId = evt.target.trainId;

  ajax = new Ajax();
  ajax.responseType = Ajax.JSON;
  param = { 'load-cargo-submit': "Load new goods", 'city-id': cityId, 'train-id': trainId };
  ajax.ondone = function(data) {
    openCargoHolds = data.openCargoHolds;
    cargoHoldsUsed = 0;
    ajax.responseType = Ajax.FBML;
    param = { 'openCargoHolds': data.openCargoHolds, 'cityGoods': data.cityGoods, 'trainId': data.trainId };
    ajax.ondone = function(fbjsData) {
//debugger;
      var dialog = new Dialog().showChoice('Load Cargo', fbjsData, 'Load cargo', 'Cancel');
      dialog.onconfirm = function() {
        var goods = [];
        var goodsIds = [];
        numGoods = document.getElementById('goods-count').getValue();

        for(var i = 0; i < numGoods; i++) {
          j = i + 1;
          goods[i] = document.getElementById('goods-' + j).getValue();
          goodsIds[i] = document.getElementById('goods-id-' + j).getValue();
        }
        var trainId = document.getElementById('train-id').getValue();
        param = { "goods": goods, "goods-id": goodsIds, "train-id": trainId };
        ajax.responseType = Ajax.JSON;
        ajax.ondone = function(data) {
          loadCargo();
        }
        ajax.post(baseURL + '/turn/do-load-cargo-new', param);
        //dialog.hide();
      };
      dialog.oncancel = function() {
        loadCargo();
      }
    }
    ajax.post(baseURL + '/turn/load-cargo-new-dialog-fbjs', param);
  }
  ajax.post(baseURL + '/turn/load-cargo-select', param);
}

function discardExistingCargo(evt) {
  //new Dialog().showMessage('loadNewCargo', 'city id='+cityId+', train id='+trainId);

  cityId = evt.target.cityId;
  trainId = evt.target.trainId;
/**/
  ajax = new Ajax();
  ajax.responseType = Ajax.JSON;
  param = { 'load-cargo-submit': "Discard existing goods", 'city-id': cityId, 'train-id': trainId };
  ajax.ondone = function(data) {
    ajax.responseType = Ajax.FBML;
    param = { 'openCargoHolds': data.openCargoHolds, 'trainGoods': data.trainGoods, 'trainId': data.trainId };
    ajax.ondone = function(fbjsData) {
      var dialog = new Dialog().showChoice('Discard Cargo', fbjsData, 'Discard cargo', 'Cancel');
      dialog.onconfirm = function() {
        var goods = [];
        var goodsIds = [];
        numGoods = document.getElementById('goods-count').getValue();
        for(var i = 0; i < numGoods; i++) {
          j = i + 1;
          goods[i] = document.getElementById('goods-' + j).getValue();
          goodsIds[i] = document.getElementById('goods-id-' + j).getValue();
        }
        var trainId = document.getElementById('train-id').getValue();
        param = { "goods": goods, "goods-id": goodsIds, "train-id": trainId };
        ajax.responseType = Ajax.JSON;
        ajax.ondone = function(data) {
          loadCargo();
        }
        ajax.post(baseURL + '/turn/do-load-cargo-discard', param);
        //dialog.hide();
      };
      dialog.oncancel = function() {
        loadCargo();
      }
    }
    ajax.post(baseURL + '/turn/load-cargo-discard-dialog-fbjs', param);
  }
  ajax.post(baseURL + '/turn/load-cargo-select', param);
/**/
}

Спасибо за любую помощь, которую вы можете предложить.


person Chris Barnhill    schedule 16.10.2009    source источник


Ответы (2)


Вы можете вернуть ложь; из функции discardExistingCargo, чтобы избежать действия отправки по умолчанию, которое вызывает обновление страницы.

person Technowise    schedule 17.10.2009

Проблема решена: тип ввода кнопки был «отправить», поэтому страница обновлялась (дох!)

person Chris Barnhill    schedule 17.10.2009