jQuery rileva automaticamente se ho bisogno di usare .html() o .val()

Question

Sto scrivendo un plugin jquery per creare chiamate ajax progettate per la mia app.

All'interno di questo plug-in, la mia chiamata ajax si presenta così (ridotto a quello che la necessità domanda):

$.ajax({ 
     url: route, 
     type: "post", 
     data: inputData, 
     success: function(response, textStatus, jqXHR) { 
      if (outputSelector !== undefined) { 

       $(outputSelector).html(response); 
       // or 
       $(outputSelector).val(response); 

      } 
     } 
    }); 

outputSelector è un selettore, definita al di fuori del plugin. Non so se questo selettore è un <div> o un <input> o anche uno <select>. C'è un modo intelligente per sapere se ho bisogno di usare val() o html()?

Answer 1

Forse abbiamo potuto verificare se l'elemento ha value proprietà:

var el = $(outputSelector); 
if (el[0].value !== undefined) { 
    el.val(response); 
} else { 
    el.html(response); 
} 

Così, un po 'come una linea di soluzione universale potrebbe essere:

$(outputSelector).each(function() { 
    this[this.value !== undefined ? "value" : "innerHTML"] = response; 
}); 

Answer 2

È possibile utilizzare il metodo .is(..) per determinare quale metodo usare.

$.ajax({ 
    url: route, 
    type: "post", 
    data: inputData, 
    success: function(response, textStatus, jqXHR) { 
     if (outputSelector !== undefined) { 
      var $output = $(outputSelector), 
       method = $output.is('input,select,textarea') ? 'val' : 'html'; 

      $output[method](response); 
     } 
    } 
}); 

Answer 3

All'interno della vostra funzione di successo, mettere:

if (outputSelector !== undefined) { 
    if(outputSelector.is("input")) 
    { 
     outputSelector.val(response); 
    } 
    else if (outputSelector.is("div")) 
    { 
     outputSelector.html(response); 
    } 
} 

sarebbe sintassi meglio utilizzare un'istruzione switch, ma se si assume solo ingresso sarà utilizzato per val(), e tutto il resto è html() poi basta sostituire l'ultimo else if con solo else e rimuovere il condizionale.

Answer 4

Se il outputSelector è un selettore di classe e gli elementi sono tipi misti, è necessario utilizzare .each. Sebbene non sia corretto mischiare div e input con la stessa classe, ma se si sta creando un plug-in, è necessario considerare tale caso.

$(outputSelector).each(function() { 
    if ('value' in this) { 
     $(this).val(response); 
    } else { 
     $(this).html(response); 
    } 
}); 

Answer 5

si potrebbe anche utilizzare il metodo .prop() per determinare se una proprietà viene definita per un dato selettore:

if ($(outputSelector).prop("value") !== undefined) 
    $(outputSelector).val(response); 
else 
    $(outputSelector).html(response); 

EXAMPLE

In alternativa si potrebbe ci .hasOwnProperty()