Søg
Avatar billede cybermaster-ny Nybegynder
09. maj 2010 - 02:31 Der er 22 kommentarer og
1 løsning

Jquery Ajax gennemløb af felter

Hej, ville høre om der var en lidt smartere måde at gøre dette på. Det er alt sammen inputs felter, text password..

Er der en smart måde hvorpå jeg kan forenkle overstående, og lave fx et array med de felter der skal medtages?

Ser lidt ud som om det er den samme kode igen og igen og ... ;o)

        <script type="text/javascript">
$(document).ready(function()
{
$("#contact_company").keyup(function()
{
var jsInput = $("#contact_company").val();
if(jsInput.length > 1)
{
$.ajax({
type: "POST",
url: "../functions/liveValidate.php",
data: "field=contact_company&type=name&jsInput="+jsInput,

success: function(msg){
$(this).ajaxComplete(function(event, request){
$('#contact_company_liveValidation').remove();
$('#contact_company').after(msg);
});
}
});

}

});

$("#contact_person").keyup(function()
{
var jsInput = $("#contact_person").val();
if(jsInput.length > 1)
{
$.ajax({
type: "POST",
url: "../functions/liveValidate.php",
data: "field=contact_person&type=person&jsInput="+jsInput,

success: function(msg){
$(this).ajaxComplete(function(event, request){
$('#contact_person_liveValidation').remove();
$('#contact_person').after(msg);
});
}
});

}

});

$("#contact_phone").keyup(function()
{
var jsInput = $("#contact_phone").val();
if(jsInput.length > 1)
{
$.ajax({
type: "POST",
url: "../functions/liveValidate.php",
data: "field=contact_phone&type=phone&jsInput="+jsInput,

success: function(msg){
$(this).ajaxComplete(function(event, request){
$('#contact_phone_liveValidation').remove();
$('#contact_phone').after(msg);
});
}
});

}

});
});
</script>
Avatar billede softspot Forsker
09. maj 2010 - 07:57 #1
Jeg forestiller mig noget i stil med dette:

<script type="text/javascript">
$(function() {
  var fld = ["contact_company", "contact_person", "contact_phone"];

  for (var i = 0, l = fld.length; i < l; i++) {
    $("#" + fld[i]).keyup(function() {
      var thisId = $(this).attr("id");

      var jsInput = $("#" + thisId).val();
      if (jsInput.length > 1) {
        $.ajax({
          type: "POST",
          url: "liveValidate.htm",
          data: "field=" + thisId + "&type=name&jsInput=" + jsInput,

          success: function(msg) {
            $(this).ajaxComplete(function(event, request) {
              $("#" + thisId + "_liveValidation").remove();
              $("#" + thisId).after(msg);
            });
          }
        });
      }
    });
  }
});
</script>
Avatar billede cybermaster-ny Nybegynder
09. maj 2010 - 11:56 #2
Kan ikke se hvor
&type=name
&type=person
&type=phone
er sat, eller jeg har mulighed for at sætte sammen med de forskellige inputs.
Avatar billede softspot Forsker
09. maj 2010 - 12:49 #3
Ups! Den havde jeg overset, men du kunne evt. lægge typen i rel-atributte på inputelementet og så aflæse den atribut i forbindelse med opsætning (på samme måde som id'et aflæses). Jeg forestiller mig det ser således ud:

<script type="text/javascript">
$(function() {
  var fld = ["contact_company", "contact_person", "contact_phone"];

  for (var i = 0, l = fld.length; i < l; i++) {
    $("#" + fld[i]).keyup(function() {
      var thisId = $(this).attr("id");
      var thisType = $(this).attr("rel");

      var jsInput = $("#" + thisId).val();
      if (jsInput.length > 1) {
        $.ajax({
          type: "POST",
          url: "liveValidate.htm",
          data: "field=" + thisId + "&type=" + thisType + "&jsInput=" + jsInput,

          success: function(msg) {
            $(this).ajaxComplete(function(event, request) {
              $("#" + thisId + "_liveValidation").remove();
              $("#" + thisId).after(msg);
            });
          }
        });
      }
    });
  }
});
</script>

Og så kan du definere dine felter således:

<input type="text" id="contact_person" rel="person">
Avatar billede olebole Juniormester
09. maj 2010 - 13:16 #4
<ole>

softspot >> Du kan ikke bruge en rel attribut på et input element. Den attribut giver kun mening (og er kun valid) på a og link elementer - hvor de i øvrigt har en helt specifik anvendelse.

Om så folkene bag jQuery ikke ved dette, eller om de ikke hænger sig i 'ligegyldige bagateller' som standarder, skal jeg afholde mig fra at mene noget om  =)

/mvh
</bole>
Avatar billede softspot Forsker
09. maj 2010 - 15:12 #5
Hvis du ikke vil undgå at benytte rel-atributten, som åbenbart ikke er lovlig på input-elementer, kunne du prøve at ændre koden til at se således ud:

<script type="text/javascript">
$(function() {
  var fld =
    [
      {id:"contact_company",tp:"name"},
      {id:"contact_person",tp:"person"},
      {id:"contact_phone",tp:"phone"}
    ];

  for (var i = 0, l = fld.length; i < l; i++) {
    $("#" + fld[i].id).keyup(function() {
      var thisId = $(this).attr("id");
      var thisType = fld.tp;

      var jsInput = $("#" + thisId).val();
      if (jsInput.length > 1) {
        $.ajax({
          type: "POST",
          url: "liveValidate.htm",
          data: "field=" + thisId + "&type=" + thisType + "&jsInput=" + jsInput,

          success: function(msg) {
            $(this).ajaxComplete(function(event, request) {
              $("#" + thisId + "_liveValidation").remove();
              $("#" + thisId).after(msg);
            });
          }
        });
      }
    });
  }
});
</script>
Avatar billede cybermaster-ny Nybegynder
09. maj 2010 - 15:10 #6
Hvis det kan lade sig gøre, vil jeg fortrække at definerer det sammen med javascripten, istedet for input felterne.

mvh

Henrik
Avatar billede cybermaster-ny Nybegynder
09. maj 2010 - 15:35 #7
thisType kommer frem med undefined, ellers ser det ud til at virke efter hensigten ;o)
Avatar billede softspot Forsker
09. maj 2010 - 15:47 #8
Ups! Ændr denne linje:

      var thisType = fld.tp;

til:

      var thisType = fld[i].tp;
Avatar billede cybermaster-ny Nybegynder
09. maj 2010 - 16:09 #9
Når jeg retter den til var thisType = fld[i].tp; sker der intet, alså, den kommer ikke en gang frem med undefined

mvh

Henrik
Avatar billede softspot Forsker
09. maj 2010 - 16:37 #10
Det er ikke fordi du har klippet min kode direkte over i din egen og så i den proces har overset at jeg har rettet url'en i ajax-kaldet?

Jeg ændrede den fordi jeg lige skulle bruge en hurtig test på min egen maskine...
Avatar billede cybermaster-ny Nybegynder
09. maj 2010 - 16:43 #11
Nej, den er blevet rettet til, og for også svar fra mit php kald, men ikke når jeg retter koden desværre
Avatar billede softspot Forsker
09. maj 2010 - 16:50 #12
Nej, jeg har fundet ud af hvad der går galt og det er referencen til fld, som ikke er gyldig fra keyup. Sært nok så lader dette til at fungere bedre:

<script type="text/javascript">
$(function() {
  var fld =
    [
      { id: "contact_company", tp: "name" },
      { id: "contact_person", tp: "person" },
      { id: "contact_phone", tp: "phone" }
    ];
   
  for (var i = 0, l = fld.length; i < l; i++) {
    var thisType = fld[i].tp;
    $("#" + fld[i].id).keyup(function() {
      var thisId = $(this).attr("id");
      var jsInput = $("#" + thisId).val();

      if (jsInput.length > 1) {
        $.ajax({
          type: "POST",
          url: "../functions/liveValidate.php",
          data: "field=" + $("#" + thisId).attr("id") + "&type=" + thisType + "&jsInput=" + jsInput,

          success: function(msg) {
            $(this).ajaxComplete(function(event, request) {
              $("#" + ("#" + thisId).attr("id") + "_liveValidation").remove();
              $("#" + thisId).after(msg);
            });
          }
        });
      }
    });
  }
});
</script>

Alternativet må være at flytte definitionen af fld-array'et udenfor ready-funktionen, så det bliver globalt...
Avatar billede softspot Forsker
09. maj 2010 - 16:55 #13
Øhm... der fik jeg vist taget udgangspunkt i en lidt gammel kodestump. Denne er vist mere up to date:

<script type="text/javascript">
$(function() {
  var fld =
    [
      { id: "contact_company", tp: "name" },
      { id: "contact_person", tp: "person" },
      { id: "contact_phone", tp: "phone" }
    ];
   
  for (var i = 0, l = fld.length; i < l; i++) {
    var thisType = fld[i].tp;
    $("#" + fld[i].id).keyup(function() {
      var thisId = $(this).attr("id");

      var jsInput = $("#" + thisId).val();
      if (jsInput.length > 1) {
        $.ajax({
          type: "POST",
          url: "../functions/liveValidate.php",
          data: "field=" + thisId + "&type=" + thisType + "&jsInput=" + jsInput,

          success: function(msg) {
            $(this).ajaxComplete(function(event, request) {
              $("#" + thisId + "_liveValidation").remove();
              $("#" + thisId).after(msg);
            });
          }
        });
      }
    });
  }
});
</script>
Avatar billede cybermaster-ny Nybegynder
09. maj 2010 - 17:03 #14
Det ser ud til den tager den sidst angivet tp, og lader den køre igennem.

mvh

Henrik
Avatar billede cybermaster-ny Nybegynder
09. maj 2010 - 17:07 #15
Altså, at de alle bliver sat til phone

mvh
Avatar billede cybermaster-ny Nybegynder
09. maj 2010 - 18:13 #16
Har prøvet at lege en del rundt med det, men tror desværre ikke jeg fatter nok af javascript til at klare det på engen hånd. ;o)
Avatar billede softspot Forsker
09. maj 2010 - 19:02 #17
Hmm... nå, men så skal det åbenbart gribes anderledes an. Jeg har fedtet lidt med det og er kommet frem til at dette må være løsningen (indtil du finder ud af hvad jeg har overset):

<script type="text/javascript">
  var fld = {
      "contact_company": {
        id: "contact_company",
        tp: "name"
      },
      "contact_person": {
        id: "contact_person",
        tp: "person"
      },
      "contact_phone": {
        id: "contact_phone",
        tp: "phone"
      }
    };

  $(function() {
    for (var obj in fld) {
      $("#" + obj).keyup(function() {
        var thisId = $(this).attr("id");
        var thisType = fld[thisId].tp;

        var jsInput = $("#" + thisId).val();
        if (jsInput.length > 1) {
          $.ajax({
            type: "POST",
            url: "../functions/liveValidate.php"
            data: "field=" + thisId + "&type=" + thisType + "&jsInput=" + jsInput,
            success: function(msg) {
              $(this).ajaxComplete(function(event, request) {
                $("#" + thisId + "_liveValidation").remove();
                $("#" + thisId).after(msg);
              });
            }
          });
        }
      });
    }
  });
</script>

Jeg undrer mig dog lidt over hvad det er du vil i success-eventet. Burde det ikke blot være således:

            success: function(msg) {
              $("#" + thisId + "_liveValidation").remove();
              $("#" + thisId).after(msg);
            }
Avatar billede cybermaster-ny Nybegynder
09. maj 2010 - 19:39 #18
Ser ud til at fungerer perfekt. der var en lille komma fejl jeg så
(url: \"../functions/liveValidate.php\",)

Jeg har ændret dit sidste forslag også, ved ikke specielt hvad det skulle gøre, men så at der var andre der gjore det på den måde.

har ændret det så det fjerner alle div bokse, når en ny kommer frem:
success: function(msg) {
                $('div').remove('.liveValidation');
                $(\"#\" + thisId).after(msg);
            }

Jeg vil sige 1000 Tak for hjælpen, og din tålmodighed.

Lig et svar ;o)
Avatar billede cybermaster-ny Nybegynder
09. maj 2010 - 19:48 #19
Fantastisk, lige hvad jeg ønskede mig ;o)
Avatar billede softspot Forsker
09. maj 2010 - 19:55 #20
Jeg tror ajaxComplete er en generel erklæring af en funktion som kaldes, når ajax-kald er gennemført. Så den skal nok kun sættes én gang hvis den skal bruges.

Hvis du har flere forskellige ajax-kald på samme side, kan det dog være en ulempe, da funktionen jo så også vil blive kaldt når de andre ajax-kald afslutter, hvilket kan give uønskede sideeffekter.

Det du har ændret success-eventet til nu, bliver kun kaldt i det tilfælde at ajax-kaldet lykkedes og kun for den kontrol hvortil kaldet er knyttet.

Du kan i øvrigt godt optimere objektet fld lidt, da det kun er feltet tp der refereres i koden:

  var fld = {
      "contact_company": { tp: "name" },
      "contact_person": { tp: "person" },
      "contact_phone": { tp: "phone" }
    };
Avatar billede cybermaster-ny Nybegynder
09. maj 2010 - 19:59 #21
1000 Tak for hjælpen og lærdommen ;o)
Avatar billede softspot Forsker
09. maj 2010 - 20:03 #22
Hvis du ændrer denne linje:

        var thisType = fld[thisId].tp;

til:

        var thisType = fld[thisId];

burde du kunne optimere fld yderligere til:

  var fld = {
      "contact_company": "name",
      "contact_person": "person",
      "contact_phone": "phone"
    };
Avatar billede softspot Forsker
09. maj 2010 - 20:03 #23
Velbekomme :)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel Indlæg Oprettet Seneste aktivitet
Mangler et JavaScript til htm side med iframe i Joomla5 Af Peder Lund Nielsen i JavaScript 2 03/02/202614:19 04/04/202616:02
Åbne en PDF fil fra en mappe Af mbl i JavaScript 9 18/04/202516:52 22/04/202512:33
Spørgsmål til cookies Af Mads i JavaScript 2 14/02/202511:47 27/06/202514:34
Sæt vindue størrelse Af poulmadsen i JavaScript 1 08/10/202417:18 13/10/202412:33
Opgavestyring Af ingeman i JavaScript 1 15/09/202416:06 15/09/202420:40
Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I dag 21:19 Lydindstilling Prosonic TV Af TageArent i Fjernsyn & projektorer
I dag 15:37 Sort skærm Af mort1 i Windows
I går 12:32 iPadOS 26.4.1 kan ikke opdatere Af claes57 i Apps til iOS
08/0410:38 Indholdsfortegnelse ændrer sig, når jeg gemmer som PDF Af Jan K i Word
06/0419:53 installer mange programmer på en gang Af Overgaard1654 i Andet software
White papers
Flere white papers »