Avatar billede Slettet bruger
27. september 2011 - 20:40 Der er 14 kommentarer og
1 løsning

jQuery: Formular opdatering af database vha. AJAX og ASP

Jeg kan ikke rigtig få følgende ajax-opdatering af min formular til at virke. Er der nogle der har nogle bud til, hvad der er forkert?

HTML'en:

<div id='targets1' class='ui-dialog' title='Titel'>
  <form id='targetsForm1' name='targetsForm1' method='post' onsubmit='updateTargets(1);'>
    <input id='input1target' name='input1target' type='text' value='' style='width: 95%;' />
    <input id='input2target' name='input2target' type='text' value='' style='width: 95%;' />
    <input id='input3target' name='input3target' type='text' value='' style='width: 95%;' />
  </form>
</div>

Vær her opmærksomme på, at der kan være rigtig, rigtig mange inputs, da de oprettes dynamisk alt efter antallet af inputs i databasen.

JavaScriptet - til at eksekvere ASP koden og videresende formulardataene:

function updateTargets(i) {
  $('#targetsForm' + i).die().live('submit', function(e) {
    e.preventDefault();
    $.ajax({
      type: POST,
      url: functions.asp,
      dataType: 'json',
      cache: false,
      contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
      data: { a: 'rapports_updatetargets', id: i, $('#' + i).serialize() },
      success: function() { $('#targets' + i).dialog('close'); }
    });
    return false
  });
}


ASP - til backend opdateringen:

if a = "rapports_updatetarget" then
  sql = "select * from ctabel where id = " & id
  set rs = conn.execute(sql)
 
  if not rs.eof then
    inputs = rs("inputs")
   
    sql = "update rtabel
    for i = 1 to inputs
      if i = 1 then
        sql = sql & " set input" & i & "target = " & replace(tal.replace(request.form(id & "input" & i & "target"), ""), ",", ".")
      else
        sql = sql & ", input" & i & "target = " & replace(tal.replace(request.form(id & "input" & i & "target"), ""), ",", ".")
      end if
    next
    sql = sql & " where id = ?"
    set cmd = commandCreateText(conn, sql)
    call cmd.execute(, array(secure(id)))
  end if
end if


Det er primært min updateTargets funktion som går galt.
Javascript-fejlen lyder på "missing : after id property", så det er vidst nok noget med dataene jeg sender med over.

Hvordan gør jeg? :)
Avatar billede softspot Forsker
27. september 2011 - 20:44 #1
Umiddelbart mangler der apostroffer omkring den url du sender til, dvs. functions.asp skal nok være 'functions.asp'
Avatar billede softspot Forsker
27. september 2011 - 20:45 #2
Det samme gør sig egentlig gældende for type: POST, som skal være type: 'POST' i stedet.
Avatar billede softspot Forsker
27. september 2011 - 20:52 #3
Jeg noterer mig desuden at du, i de data der sendes over, angiver

data: { a: 'rapports_updatetargets'

mn på serveren tjekker du for om

if a = "rapports_updatetarget" then

dvs. der mangler et s til sidste i strengen med rapports_updatetarget...

Desuden skal jeg lige sikre mig at du, inden denne kodestump i ASP, har udlæst værdierne i a og id af det sendte fra request.form...?
Avatar billede softspot Forsker
27. september 2011 - 20:56 #4
Burde dette:

$('#' + i).serialize()

ikke se således ud i stedet:

$('#targetsForm' + i).serialize()
Avatar billede Slettet bruger
27. september 2011 - 21:33 #5
#1, #2, #3 og #4 er rettet :)

Jeg får dog stadig fejlen med "missing : after property id"
Det er nok primært denne fejl som ødelægger en hel del?

Og ja, jeg har et asp dokument som altid indlæser a, id, m.fl. vha. request.querystrings.
Avatar billede softspot Forsker
27. september 2011 - 22:37 #6
"Og ja, jeg har et asp dokument som altid indlæser a, id, m.fl. vha. request.querystrings."... du mener forhåbentlig request.form :-)

Prøv evt. at erstatte denne linje i javascript'et

data: { a: 'rapports_updatetargets', id: i, $('#' + i).serialize() },

med denne linje:

data: { a: 'rapports_updatetargets', id: i, formdata: $('#' + i).serialize() },

og så skal du aflæse formdata fra request.form i ASP-filen. Det er bare et bud. Jeg er ikke helt sikker på hvordan serialize() formaterer data (det kan man naturligvis bare teste sig ud af :-))
Avatar billede Slettet bruger
28. september 2011 - 09:42 #7
Nu er der ihvert fald ingen fejlmeddelelser, så jeg tror, at data-siden i scriptet ser fornuftigt ud.

Dog måtte jeg ændre på min form og min jQuery-dialog, da den før rent faktisk postede formularen og dermed refreshede. Derfor har jeg lagt funktionen op i OK knappen i dialogen og ændret formularen til return false, som set nedenfor:

$('#targets1').dialog({
  width: 400,
  buttons: {
    'close': {
      text: 'Luk',
      click: function() { $(this).dialog('close'); }
    },
    'submit': {
      text: 'OK',
      click: function() { $(this).dialog('close'); updateTargets(i); }
    }
  }
});

<form id='targetsForm1' name='targetsForm1' method='post' onsubmit='return false;'>


Nu er problemet så, at det ikke ser ud til, at den rent faktisk kører ajax funktionen? Er der en måde hvorpå jeg kan tjekke det? :) Jeg kan ikke se, at der kommer et POST-request i Web-Developer-værktøjet i Firefox..
Avatar billede softspot Forsker
28. september 2011 - 11:24 #8
Jeg ved ikke om du bare kunne have klaret dig med at returnere false efter kaldet til updateTargets i onsubmit-eventet i stedet, men du kan da prøve:

<form id='targetsForm1' name='targetsForm1' method='post' onsubmit='updateTargets(1); return false;'>
Avatar billede Slettet bruger
28. september 2011 - 13:31 #9
Den var allerede prøvet desværre.
Den poster stadig, altså det virker som om den ignorer return false når den submitter..
Avatar billede softspot Forsker
28. september 2011 - 13:41 #10
Hvis dit script kalder submit via script, kaldes onsubmit-handleren ikke.

Jeg kan ikke lige gennemskue hvordan hele din sides kode er skruet sammen, men noget kunne tyde på at submit på form-elementet kaldes fra scriptet.

Du må prøve at debugge scriptkoden og se hvad der helt konkret sker i det øjeblik formularen submittes...
Avatar billede Slettet bruger
28. september 2011 - 16:33 #11
Nu er jeg faktisk nået en hel del af vejen.

Grunden til, at den aldrig går ind i selve ajax scriptet, er fordi, at den - som du skriver - går udenom onsubmit, da submit kommer fra et javascript. Så nu har jeg forsøgt, at gå udenom denne knap, og blot lavet et submit input for at få min ajax funktion færdiggjort. Så må jeg kigge på det andet bagefter :)

Jeg installerede lige hurtigt firebug til debugging af kaldene og er kommet frem til, at følgende virker:


$('#targetsForm1').submit(function(e) {
  e.preventDefault();
  $.ajax({
    type: 'POST',
    dataType: 'json',
    cache: false,
    contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
    url: 'functions.asp?a=rapports_updatetargets&id=1',
    data: { formdata: $('#targetsForm1').serialize() },
  });
});


MEN, nu kan jeg simpelthen ikke få ASP funktionen til at foretage en fx request.form("input1target") på de formdata som sendes.
Hvordan gør jeg dette?

Mit formdata parameter ser således ud:

input1target=10&input2target=0&input3target=3


Så vi er rigtig, rigtig tæt på mål! :)
Så må jeg lige se hvad filen jeg gør ved den der jQueryUI Dialog submit knap som har en click funktion der hedder document.Form.submit();
Avatar billede softspot Forsker
28. september 2011 - 17:24 #12
Prøv at skifte denne linje:

    data: { formdata: $('#targetsForm1').serialize() },

ud med denne linje:

    data: $('#targetsForm1').serialize(),

Dette skulle gerne placere dine feltdata direkte i request.form-listen.
Avatar billede Slettet bruger
29. september 2011 - 12:02 #13
Det virker saftsusme! :)

Så må jeg prøve, at finde ud af hvorfor submit(); ikke har samme direkte virkning som input type='submit' :s

Smid gerne et svar :)
Avatar billede Slettet bruger
29. september 2011 - 14:36 #14
Til nysgerrige så virkede følgende for jquery dialog knappen istedet for submit()

$(this).find('form').trigger('submit');

Så kunne jeg fjerne inputtet :)
Avatar billede softspot Forsker
29. september 2011 - 14:40 #15
Super!
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
Vi tilbyder markedets bedste kurser inden for webudvikling

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.

Du kan også logge ind via nedenstående tjenester