Problemen met AJAX post

[Stefan|IA2]

Tweakers,

Ik zit met een issue waar ik niet uit kom. De situatie is als volgt:

• Form 1 bevat vele invoervelden.
• Form 1 post middels een AJAX oplossing in jQuery de inhoud van de invoervelden naar de database.
• De AJAX oplossing zorgt ervoor dat Form 2 wordt opgemaakt met extra velden, hiervoor staan opties in Form 1.
• Form 2 post middels een AJAX oplossing in jQuery de inhoud van de invoervelden naar de database.

Nu is er een volgend probleem, als ik dit bovenstaande uitvoer dan kan ik de velden uit Form 2 niet meer posten naar de database. Echter als ik de pagina ververs wordt Form 2 ook opgemaakt met opties via de database om deze in te vullen. Als ik iets - na het verversen - invoer in Form 2 worden de gegevens netjes met AJAX richting de database geschoten. Het is niet gewenst om de pagina te moeten verversen voordat Form 2 verzonden kan worden.

Dus pagina verversen, Form 2 kan verwerkt worden indien Form 1 nog niet is aangepast. Zodra Form 1 wordt aangepast dan kan Form 2 zijn data niet meer verwerken, Form 2 wordt dan wel netjes opgemaakt.

Wat zou het probleem hier voor kunnen zijn?

Kan ik nadat ik een Form met AJAX heb aangepast deze niet meer verzenden met AJAX?

JavaScript:

function AjaxRequest(id, url, source)
{
     (function($) {
        $(source).find(":input").bind('change', function(){            
            var c = $(this);
            $.when(c.focusout()).then(function(){
                $.ajax({
                    type: "POST",
                    url: url,
                    data: $(source).serialize(),
                    dataType: "json",
                    success: function(msg){
                        $("#savemessage").html(msg.sidebar);
                        $('#form2').html(msg.maintenance);
                    },
                    error: function(xhr, ajaxOptions, thrownError){
                        alert(xhr.status);
                        alert(thrownError);
                        alert(xhr.responseText);
                    }
                });
            });
        });
    })(jQuery);
}

Voor het posten van Form2 gebruik ik dezelfde function alleen dan met een andere 'success message'.

[ Voor 29% gewijzigd door Stefan|IA2 op 16-01-2015 11:37 ]

[NNF]

Wellicht kun je een voorbeeld online zetten? Aan de hand van deze informatie kunnen we alleen maar raden naar wat er gebeurt

[MarcoC]

Je OP bevat veel te weinig informatie. Plaats je volledige code (al dan niet geanonimiseerd/gereduceerd tot enkel de relevante code die het probleem veroorzaakt wat jij opgelost wilt hebben).

[BtM909]

MarcoC schreef op zaterdag 17 januari 2015 @ 00:31:
Plaats je volledige code

En als extra aanvulling: dus niet ALLE code, maar maak een testcase met 2 simpele form's die ieder ook maar 1 of 2 velden bevatten

[Stefan|IA2]

Even duidelijk maken, zonder dat er iets in form1 is aangepast wordt form2 prima opgeslagen. Wijzigt er iets in form1 dan wordt form2 opnieuw gegenereerd en kan form2 niet meer worden opgeslagen (automatisch althans).

Javascript (moet ik nog samenvoegen)

code:

function AjaxRequest(id, url, source)
{
     (function($) {
        $(source).find(":input").bind('change', function(){            
            var c = $(this);
            $.when(c.focusout()).then(function(){
                $.ajax({
                    type: "POST",
                    url: url,
                    data: $(source).serialize(),
                    dataType: "json",
                    success: function(msg){
                        $("#savemessage").html(msg.sidebar);
                        $('#form2').html(msg.maintenance);
                    },
                    error: function(xhr, ajaxOptions, thrownError){
                        alert(xhr.status);
                        alert(thrownError);
                        alert(xhr.responseText);
                    }
                });
            });
        });
    })(jQuery);
}

function AjaxRequest2(id, url, source)
{
     (function($) {
        $(source).find(":input").bind('change', function(){            
            var c = $(this);
            $.when(c.focusout()).then(function(){
                $.ajax({
                    type: "POST",
                    url: url,
                    data: $(source).serialize(),
                    dataType: "json",
                    success: function(msg){
                    },
                    error: function(xhr, ajaxOptions, thrownError){
                        alert(xhr.status);
                        alert(thrownError);
                        alert(xhr.responseText);
                    }
                });
            });
        });
    })(jQuery);
}

Page

code:

<script type="text/javascript">
$('#form1').change(function(){
AjaxRequest({$pageId}, "{$application_url}&page=saveForm1&id={$pageId}&item=form1", "#form1");                        
});
</script>
<div id="form1_container">
<form id="form1" name="form1">                    
{$fields_form1}
</form>
</div>

<script type="text/javascript">
$('#form2').change(function(){
AjaxRequest2({$pageId}, "{$application_url}&page=saveForm2&id={$pageId}&item=form2", "#form2");                        
});
</script>
<div id="form2_container">
<form id="form2" name="form2">                    
{$fields_form2}
</form>
</div>

<div id="savemessage"></div>

saveForm1

code:

/* do database saving stuff with models  */

// retrieve data from database
$data = new dataClass(dataController::isGet('id'));
$response_array['savemessage'] = $data->sidebarData->output();
$response_array['maintenance'] = $data->maintenanceData->output();

// show output
echo json_encode($response_array);

saveForm2

code:

/* do database saving stuff with models */

[C0rnelis]

Het probleem met je voorbeeld is volgens mij aardig simpel (maar zou tevens betekenen dat het nooit werkt, niet alleen nadat form1 is aangepast): ten tijde van de $('#form2')-selector bestaat er nog geen element met id form2, dus krijg je nooit een change-event van. Of dit ook speelt in je volledige code weet ik niet.

Klopt deze situatie met wat je schetst ?

[Stefan|IA2]

In de volledige code staat de $('#form2')-selector na de <form>.
En het voorbeeld wat je schetst is inderdaad de situatie.

Ik maak dan alleen geen gebruik van buttons maar gebruik van een auto-save.

[C0rnelis]

ik vermoed dat toch exact hetzelfde probleem speelt. Je bind namelijk niet alleen op de change van form, maar ook van de input. Dit doe je echter met bind en niet on waardoor je de change events niet krijgt van de input's die je na de ajax-request-verwerking voor form1 in de html van form2 zet, maar alleen van de inputs ten tijde van je selector.

Dit voorbeeld werkt bijvoorbeeld niet: http://jsfiddle.net/et75z2es/1/ (ik heb de :input achter de form-selector toegevoegd.

Los daarvan: je combineert nu een aantal events: form.change, input.change en input.focusout - mijns inziens nodeloos complex.

Met gebruik van on en enkel input.change kan je volgens mij hetzelfde bereiken. Voorbeeld: http://jsfiddle.net/et75z2es/2/

Voor zover ik weet gebeurt een change van een form-element sowieso pas na focusout. Voorbeeld met meer form-elementen: http://jsfiddle.net/et75z2es/3/, ik zie hier bij elke change direct dat form2 verandert.

[Stefan|IA2]

Op een of andere manier gaat het wel goed, en form2 wijzigt ook prima. Alleen zodra het form gewijzigd is lukt het niet meer om data die ingevoerd wordt in form2 op te slaan.

Ik ga eens met jou tips aan de gang, ik laat even weten of het wat wordt.

EDIT
Ik zie overigens wat ik het voorbeeld fout heb gedaan, kwam doordat ik aan het testen was gegaan.
Ik roep de AjaxRequests aan met $(window).load(function(){ ipv $('#form1').change(function(){

[ Voor 28% gewijzigd door Stefan|IA2 op 18-01-2015 18:52 ]

[C0rnelis]

Stefan schreef op zondag 18 januari 2015 @ 18:49:
Alleen zodra het form gewijzigd is lukt het niet meer om data die ingevoerd wordt in form2 op te slaan.

Precies, dat zou door die selector moeten komen. In de eerste jsfiddle link van mijn vorige post zie je om die reden dus geen console message wanneer je form2 wijzigt nadat je form1 hebt aangepast (en daarvoor wel).

[Stefan|IA2]

Is er een manier om die selector dan zo te maken dat hij wel werkt.
Ik heb al veel manieren geprobeerd maar ik kom er gewoon niet uit.

En wie weet kan het ook niet wat ik wil...

[C0rnelis]

Het verschil kan je zien in link1 en link2, maar misschien valt het niet op

Dit werkt dus totdat form1 is veranderd:

code:

$('#form-2 :input').change(function(event) {

Dit werkt ook nadat form1 is veranderd

code:

$('#form-2').on('change', ':input', function(event) {

[Ramon]

Je moet delegate gebruiken.

[Stefan|IA2]

Ik heb hem nu even zo gemaakt

code:

               $('#form-2').on('change', ':input', function(event) {
                        console.info('change form 2');
                        $.ajax({
                            type: "POST",
                            url: "{$application_url}&page=formSave2&id={$data.form.id}",
                            data: $(this).serialize(),
                            dataType: "json",
                            success: function(msg){
                            },
                            error: function(xhr, ajaxOptions, thrownError){
                                alert(xhr.status);
                                alert(thrownError);
                                alert(xhr.responseText);
                            }
                        
                    });
                });

Echter als ik nu direct na het herladen van de pagina iets in form2 invul dan komt er netjes een regel bij in mijn console. Als ik nu form1 aanpas en daarna weer form2 dan komt er geen regel bij in mijn console. Form2 wordt wel netjes door Form1 aangepast (middels die JSON / success message dan).

[Ramon]

De selector moet dan waarschijnlijk niet #form-2 zijn, maar een hogerliggend element die niet overschreven wordt door andere javascript.

http://api.jquery.com/delegate/

[Stefan|IA2]

@Ramon, je hebt nog gelijk ook! Ik re-create <form id="form2"> opnieuw.
Ik ga eens kijken naar dat delegate!

Tot zo ver, hij werkt nu prima!

Ontzettend bedankt C0rnelis, ik ben in elk geval een heel stuk verder zo! Super!

[C0rnelis]

Ramon schreef op zondag 18 januari 2015 @ 19:17:
De selector moet dan waarschijnlijk niet #form-2 zijn, maar een hogerliggend element die niet overschreven wordt door andere javascript.

http://api.jquery.com/delegate/

Stefan schreef op zondag 18 januari 2015 @ 19:22:
@Ramon, je hebt nog gelijk ook! Ik re-create <form id="form2"> opnieuw.
Ik ga eens kijken naar dat delegate!

Check, ik ging ervanuit dat form2 inderdaad niet opnieuw gecreeerd werd door het voorbeeld.

In dat geval kan je een parent-element gebruiken. Succes!

[Stefan|IA2]

Nogmaals super bedankt. Zonder jullie hulp was ik er denk ik niet zo snel uitgekomen!

De code moet ik nog wel optimaliseren en verbeteren maar heb nu in elk geval een uitgangspunt die werkt!

[Toulon7559]

Misschien niet het correcte toegangspunt, maar dit lijkt geschikt voor een vraag over toepassing van javascript als deel van een HTML-webpagina.

Bijgaande code is een uittreksel.
Met dit script (dat gebruik maakt van mchp.js) komen de klokjes onder elkaar te staan.
De vraag is nu: hoe krijg ik de klokjes naast elkaar?
Al een aantal pogingen zelf gedaan, maar zonder resultaat.
Zal wel iets 'kleins' zijn, maar ik kom er niet uit:
wie weet de oplossing?

<html>
<!--Revised: April 24, 2018 By: APvN@T4S-->
<head>
<TITLE>NL7559KW7: Fijnstof-meting, SDS011</TITLE>
<H2>Fijnstof-waarde: PM2.5 en PM10</H2>
<script type='text/javascript' src='http://www.google.com/jsapi'></script>
<meta http-equiv="refresh" content="130">
<script src="mchp.js" type="text/javascript"></script>
</head>
<!-- klokjes gevuld door uitlezen van SDS_P2 en SDS_P1 uit xml_sds011_upload2.xml -->
<!-- de klokken worden getekend alsof voor toepassing met temp en hum -->
De 2 klokjes tonen de laatstgemeten fijnstof-waarden uit de SDS011-sensor op een schaal tot 200 ug/m³:
<UL>
<LI>PM2.5 met Groen is PM2.5 < 20, Blauw is 20 < PM2.5 < 50, Geel is 50 > PM2.5 > 90, Rood is PM2.5 > 90</LI>
<LI>PM10 met Groen is PM2.5 < 30, Blauw is 30 < PM10 < 75, Geel is 75 > PM10 > 150, Rood is PM10 > 150</LI>
</UL>
<P>
<script type="text/javascript">
google.load('visualization', '1.1', {'packages':['gauge']});
</script>
<script type="text/javascript">
// now the gauges
google.setOnLoadCallback(drawGauges);

var gaugeTempData = new google.visualization.DataTable();
var gaugeTemp;

var GPoptions1 = {
width: 90, height:90,
min: 0, max: 200,
greenFrom: 0, greenTo: 20,
blueFrom: 20, blueTo: 50,
yellowFrom: 50, yellowTo: 90,
redFrom: 90, redTo: 200,
minorTicks: 10
};

var gaugeHumData = new google.visualization.DataTable();
var gaugeHum;
var GPoptions2 = {
width: 90, height:90,
min: 0, max: 200,
greenFrom: 0, greenTo: 30,
blueFrom: 30, blueTo: 75,
yellowFrom: 75, yellowTo: 150,
redFrom: 150, redTo: 200,
minorTicks: 10
};

function drawGauges() {
gaugeTempData.addColumn('string', 'Label');
gaugeTempData.addColumn('number', 'Value');
gaugeTempData.addRows([['PM2.5', 0]]);
gaugeTemp = new google.visualization.Gauge(document.getElementById('chart_PM25'));
gaugeTemp.draw(gaugeTempData, GPoptions1);
gaugeHumData.addColumn('string', 'Label');
gaugeHumData.addColumn('number', 'Value');
gaugeHumData.addRows([['PM10', 0]]);
gaugeHum = new google.visualization.Gauge(document.getElementById('chart_PM10'));
gaugeHum.draw(gaugeHumData, GPoptions2);}

// Parses the xmlResponse from the xml-file and updates the graph
function updateStatus(xmlData) {

// Check if a timeout occurred
if(!xmlData)
{
return;
}

gaugeTempData.setValue(0,1,parseFloat(getXMLValue(xmlData, 'SDS_P2')));
// gaugeTempData.setValue(0,1,gaugeTempData.getValue(0,1)+1);
gaugeTemp.draw(gaugeTempData, GPoptions1);
gaugeHumData.setValue(0,1,parseFloat(getXMLValue(xmlData, 'SDS_P1')));
// gaugeHumData.setValue(0,1,gaugeHumData.getValue(0,1)+1);
gaugeHum.draw(gaugeHumData, GPoptions2);
setTimeout("newAJAXCommand('xml_sds011_upload2.xml', updateStatus, false)",1000);
}

setTimeout("newAJAXCommand('xml_sds011_upload2.xml', updateStatus, false)",300);

</script>
<body>
<span id='chart_PM25'></span>
<span id='chart_PM10'></span>
</body>

<HR>
Terug naar de <A HREF="esp8266a7_Dust00.html">Fijnstof-pagina</A><BR>
<HR>
<A HREF="Sitemap.html">Sitemap/ Jumplist voor deze website</A>, <b>incl. links to english versions of pages</b><P><BR>
<A HREF="PV_Meteo.html"><IMG SRC="4PRVBUTT.GIF" ALT="startpagina" TITLE="Naar de 'Systeem'-pagina"></A>
<BR><FONT SIZE=2>Copyright © 2013-2018 <A HREF="index.html">T4S</A>
</html>

[RobIII]

Toulon7559 schreef op donderdag 26 september 2019 @ 11:52:
Misschien niet het correcte toegangspunt

Nee, een topic van 4, bijna 5, jaar oud uit de sloot trekken om 't vervolgens te 'kapen' met je eigen vraag is niet echt de bedoeling nee. Open even een nieuw topic (zie onze Quickstart) en gebruik dan ook meteen code tags als je code post a.u.b.