Как передать событие в функцию jquery - PullRequest
0 голосов
/ 31 января 2012

У меня есть четыре кнопки в моем html.

  1. Создать аэропорт
  2. Создать город
  3. Создать городское имя
  4. Создать аэропортное имя

Все кнопки будут вызывать ajax на одной и той же странице, а ниже приведен код, написанный для одной из кнопок.

 $('#imgbtnCreateAirport').click(function (event) 
    {        
    if($('#hidtext').val()!= 'true')
        {
        var file = $('input[type=file]').val(); 
        if (!file)
        {
            $('#lblCreateKeywordsError').html('Please select the excel file from top.');
            event.preventDefault();
            return;
        } 
       else if (!file.match(/^.*\.xls[xm]?$/)) 
       {
            $('#lblCreateKeywordsError').html('Please select excel file only!');          
            event.preventDefault();
            return;
       }
        else
        {
        $('#lblCreateKeywordsError').empty();
        var strInput = "";
        strInput = strInput + "?cck=CreateAirportKeys";
        var serviceReq = "/TridionCustomPageWeb/Exceldata/excelupload.aspx";
             $.ajax({
                url: serviceReq + strInput,
                contentType: "application/json; charset=utf-8",
                dataType: "jsonp",
                jsonpCallback: "processcck",
                beforeSend: function()
                {     
                    $("#hidtext").val('true');                  
                    $("#imgbtnCreateAirport").attr('src', 'images/processing.gif').attr('alt','Processing...');                      
                },
                success: function(data, textStatus, jqXHR) 
                {    
                    $("#hidtext").val('false');                
                    $("#imgbtnCreateAirport").attr('src', 'images/CreateAirport.jpeg');
                    if (data.result=="CreateAirportKeys")
                    {
                        alert("Valid")
                    }
                    else
                    {
                        alert("Invalid");
                    }                   
                },
                error: function(jqXHR, textStatus, errorThrown) {
                alert(textStatus + "---" + errorThrown);
                }
            });
            return false;
            }
            event.preventDefault();
            return;
            }
            else
            {
                alert("Please wait till other process is completed!!");
                event.preventDefault();
                return;
            }
    });

Теперь выше, кроме двух вещей, весь кодбудет одинаковым для каждой кнопки, и ниже две вещи будут отличаться

strInput = strInput + "?cck=CreateAirportKeys"; //here CreateAirportKeys part will be different in every button call
$("#imgbtnCreateAirport").attr('src', 'images/processing.gif').attr('alt','Processing...');  // here $("#imgbtnCreateAirport") will be different.

Я попытался сделать функцию JQuery.но я не смог сделать из-за 'event.preventDefault ();' , так как я не смог получить его в функции.

Пожалуйста, предложите, как я могу написать функцию, которая будетиметь event.preventDefault ();а также параметры для вышеупомянутых двух полей.

Спасибо.

1 Ответ

0 голосов
/ 31 января 2012

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

function processButton(event, inputStr, btnCreate) {
    // all your code goes here and it uses the three arguments passed in
}

И затем для каждого обработчика событий вы можете сделать следующее:

$('#imgbtnCreateAirport').click(function (event) {
    return(processButton(event, "?cck=CreateAirportKeys", "#imgbtnCreateAirport"));
}

Как видите, каждый обработчик события щелчка вызывает общий код и передает три разные части: объект события, строку и значение id. Для объекта DOM вы также можете либо просто передать this, если хотите, чтобы он всегда был фактическим объектом, по которому щелкнули, либо вы также можете получить этот объект из event.

...