2015-06-18 3 views
0

Я не большой с jquery/javascript, я дублирую код здесь и хочу сделать его функцией jQuery, поэтому мне не нужно дублировать код.Как сделать эту функцию jquery?

У меня есть два текстовых поля в моем сезоне HTML и SeasonID. Всякий раз, когда любой из этих двух текстовых полей теряется, я хочу сделать то же самое.

Поместите их в объект javascript и отправьте вызов AJAX моему MVC-контроллеру, включая объект.

Я хочу сделать дубликат кода в функцию, но не знаю, как это сделать. Любые предложения?

<div class="season form-group"> 
     <label class="control-label col-md-2" for="Season">Season</label> 
     <div class="col-md-10"> 
      <input class="form-control text-box single-line" data-val="true" data-val-number="The field Season must be a number." id="Season" name="Season" type="number" value="" /> 
      <span class="field-validation-valid text-danger" data-valmsg-for="Season" data-valmsg-replace="true"></span> 
     </div> 
    </div> 

    <div class="season form-group"> 
     <label class="control-label col-md-2" for="SeasonID">Season ID</label> 
     <div class="col-md-10"> 
      <input class="form-control text-box single-line" data-val="true" data-val-number="The field Season ID must be a number." id="SeasonID" name="SeasonID" type="number" value="" /> 
      <span class="field-validation-valid text-danger" data-valmsg-for="SeasonID" data-valmsg-replace="true"></span> 
      <span id="ScenarioSeasonSeasonIDValidation" class="validation"></span> 
     </div> 
    </div> 

<script> 
    $(function() { 
     $('#Season').focusout(function() { 
      if (jQuery.trim($('#Season').val()).length > 0) { 
       if (jQuery.trim($('#SeasonID').val()).length > 0) { 

        var seasonSeasonID = { Season: $('#Season').val(), SeasonID: $('#SeasonID').val() }; 

        console.log(seasonSeasonID) 

        $.ajax({ 
         contentType: "application/json", 
         data: { seasonSeasonIDJson : JSON.stringify(seasonSeasonID) }, 
         datatype: 'json', 
         error: function() { 
          $('ScenarioSeasonSeasonIDValidation').html('An Error Has Occurred'); 
         }, 
         format: 'json', 
         success: function (response) { 
          if (response != null) { 
           if (response) { 
            $('#ScenarioSeasonSeasonIDValidation').html('Scenario Season/Season ID combination already submitted'); 
            $('form').submit(function (e) { 
             e.preventDefault(); 
            }); 
           } 
          } 
         }, 
         url: '@Url.Action("SeasonSeasonIDExists", "PFSContent")' 
        }) 
       } 
      } 
     }); 

     $('#SeasonID').focusout(function() { 
      if (jQuery.trim($('#SeasonID').val()).length > 0) { 
       if (jQuery.trim($('#Season').val()).length > 0) { 

        var seasonSeasonID = { Season: $('#Season').val(), SeasonID: $('#SeasonID').val() }; 

        console.log(seasonSeasonID) 

        $.ajax({ 
         contentType: "application/json", 
         data: { seasonSeasonIDJson: JSON.stringify(seasonSeasonID) }, 
         datatype: 'json', 
         error: function() { 
          $('ScenarioSeasonSeasonIDValidation').html('An Error Has Occurred'); 
         }, 
         format: 'json', 
         success: function (response) { 
          if (response != null) { 
           if (response) { 
            $('#ScenarioSeasonSeasonIDValidation').html('Scenario Season/Season ID combination already submitted'); 
            $('form').submit(function (e) { 
             e.preventDefault(); 
            }); 
           } 
          } 
         }, 
         url: '@Url.Action("SeasonSeasonIDExists", "PFSContent")' 
        }) 
       } 
      } 
     }); 
    ); 
</script> 

Мой контрольный код здесь.

public JsonResult SeasonSeasonIDExists(string seasonSeasonIDJson) 
{ 
    JavaScriptSerializer js = new JavaScriptSerializer(); 
    PFSScenario scenario = js.Deserialize<PFSScenario>(seasonSeasonIDJson); 
    bool scenarioExists = db.PFSScenarios.Any(x => x.Season == scenario.Season && x.SeasonID == scenario.SeasonID); 

    return Json(scenarioExists, JsonRequestBehavior.AllowGet); 
} 

ответ

1

Просто определить функцию для этого перед установкой его в качестве обработчика:

function getServerData(){ 
    if (jQuery.trim($('#Season').val()).length > 0 && jQuery.trim($('#SeasonID').val()).length > 0) { 

       var seasonSeasonID = { Season: $('#Season').val(), SeasonID: $('#SeasonID').val() }; 

       console.log(seasonSeasonID) 

       $.ajax({ 
        contentType: "application/json", 
        data: { seasonSeasonIDJson : JSON.stringify(seasonSeasonID) }, 
        datatype: 'json', 
        error: function() { 
         $('ScenarioSeasonSeasonIDValidation').html('An Error Has Occurred'); 
        }, 
        format: 'json', 
        success: function (response) { 
         if (response != null) { 
          if (response) { 
           $('#ScenarioSeasonSeasonIDValidation').html('Scenario Season/Season ID combination already submitted'); 
           $('form').submit(function (e) { 
            e.preventDefault(); 
           }); 
          } 
         } 
        }, 
        url: '@Url.Action("SeasonSeasonIDExists", "PFSContent")' 
       }) 

     } 
} 

$('#SeasonID, #Season').focusout(getServerData); 

Я также очистить ваш код немного, используя оператор И вместо того, чтобы, если условия и с помощью Jquery запятой seperator для присоединения обработчика к обоим элементам в одной строке.

+0

Благодарим вас за помощь в очистке кода. Я не знал о разделителе запятой и теперь использую его для других вещей в JQuery. – shaun

Смежные вопросы