Meerdere Jquery-datepickers en formulieren die via Ajax zijn ingezonden

Kan iemand me helpen met het maken van functies voor de volgende processen? Ik wil veel datepickers, elk met verschillende formulieren, op een pagina. Vervolgens onChange, verzendt u het juiste formulier. Ik herhaal momenteel de code steeds opnieuw om dit gedrag te laten werken. Hier is al mijn code voor die pagina.

<html>
<head>
<link rel='stylesheet' type='text/css' media='all' href='style.css' />
<link rel='stylesheet' type='text/css' media='all' href='jqueryui.css' />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {
    var $datepickers = $(".datepick");
    var $setallow = $(".showdate");
    var $removeallow = $(".hidedate");

    $removeallow.click(function() {
    var $remove = $(this).closest("form");
    $remove.children(".datepick").hide("normal");
        var formData = $remove.serialize();
        submitForm(formData);       
    });
    $setallow.click(function() {
    var $allow = $(this).closest("form");
    $allow.children(".datepick").show("normal");
        var formData = $allow.serialize();
        submitForm(formData);       
    });

    $datepickers.datepicker({ dateFormat: 'yy-mm-dd' });
    $datepickers.change(function() {
        var $form = $(this).closest("form");
        var formData = $form.serialize();
        alert($form.serialize());
    submitForm(formData);       
    });
});
</script>
</head>
<body>
<div>

Testing Datepicker

<div class="entry"> <table id="striping" cellspacing="0" cellpadding="2" width="100%"><tr class="textbold"> <td class="Label" nowrap="nowrap" width="500"> Title Name </td> <td class="Label" align="center" nowrap="nowrap" width="70"> Show</td> <td class="Label" align="center" nowrap="nowrap" width="100"> Don't Show </td> <td class="Label" align="left" nowrap="nowrap" width="100"> Date (Year-Month-Day) </td></tr> <tr id="highlight"> <td nowrap="nowrap" height="33">Title 19</td> <form id="form19"> <input name="id" type="hidden" value="19" /> <td align="center" nowrap="nowrap"> <input name="allow" class="showdate" type="radio" value="yes" id="show19" /> </td> <td align="center" nowrap="nowrap"> <input name="allow" class="hidedate" type="radio" value="no" id="hide19" checked="checked" /> </td> <td align="center" nowrap="nowrap"> <table width="100%"> <tr><td> <input name="allowdate" class="datepick" id="datepicker19" type="text" size="12" maxlength="10" value="2012-06-25"> </td> <td width="121"><div id="feedback"></div></td></tr> </table> </td> <input type="hidden" name="token" value="69601e04ff3580695fa4aa1dc91d35b6" /> </form> </tr> <tr id="highlight"> <td nowrap="nowrap" height="33">Title 2</td> <form id="form2"> <input name="id" type="hidden" value="2" /> <td align="center" nowrap="nowrap"> <input name="allow" class="showdate" type="radio" value="yes" id="show2" /> </td> <td align="center" nowrap="nowrap"> <input name="allow" class="hidedate" type="radio" value="no" id="hide2" checked="checked" /> </td> <td align="center" nowrap="nowrap"> <table width="100%"> <tr><td> <input name="allowdate" class="datepick" id="datepicker2" type="text" size="12" maxlength="10" value="2012-06-25"> </td> <td width="121"><div id="feedback"></div></td></tr> </table> </td> <input type="hidden" name="token" value="69601e04ff3580695fa4aa1dc91d35b6" /> </form> </tr> </table> </div> <script> function submitForm(formData) { $.ajax({ type: "POST", url: "update.php", data: formData, dataType: "json", cache: false, timeout: 8000, success: function(data) { $("#feedback").html('').fadeIn("fast"); setTimeout("$('#feedback').fadeOut('slow')", 1000); }, error: function(data) { $("#feedback").html('').fadeIn("fast"); setTimeout("$('#feedback').fadeOut('slow')", 1000); } }); }; </script> </body> </html>

I am also trying to use the radio buttons to toggle showing and not showing the datepicker elements with no success. There is a lot more than 2 datepickers per page too. I would like to have one datepicker and one ajax function. I have tried the above links with no luck. Thanks for helping.

2
U moet iets anders hebben dan wat u laat zien dat een conflict veroorzaakt? Bekijk deze jsfiddle
toegevoegd de auteur Josh Mein, de bron
Krijgt u JavaScript-fouten in een debugger zoals firebug voor firefox?
toegevoegd de auteur Josh Mein, de bron
Ik verhuisde mijn submitForm-functie naar buiten de doc-ready-functie en verwijderde de "" rond doc. Geen verandering. Ik heb verschillende andere javascipts op de pagina, maar ik heb ze allemaal verwijderd en heb nog steeds het probleem.
toegevoegd de auteur Soccer is fun, de bron
Bedankt, als ik je code precies probeer, krijg ik het aan het werk. Ik zal proberen om vanaf daar verder te bouwen en mijn opmaak individueel stap voor stap opnieuw toe te passen.
toegevoegd de auteur Soccer is fun, de bron

1 antwoord

Iets in deze zin zou voor u moeten werken:

$(function() {
    //var $datepickers = $("#datepicker1, #datepicker2, #datepicker3");
    var $datepickers = $(".datepick");

    $datepickers.datepicker({ dateFormat: 'yy-mm-dd' });
    $datepickers.change(function() {
        var $form = $(this).closest('form');
        var formData = $form.serialize();

        submitForm(formData);       
    });
});

Live DEMO

Om de selectie te vereenvoudigen naar $ datepicker, zou u een klasse van datepicker aan de tekstvakken kunnen toevoegen.

2
toegevoegd
Heb je mijn code exact gekopieerd? Ook als u het formulier zelf waarschuwt, neem ik aan dat het de verwachte resultaten oplevert?
toegevoegd de auteur Josh Mein, de bron
Sorry, ik had specifieker moeten zijn, wanneer u $ form.html() waarschuwt, krijgt u dan wat u verwacht?
toegevoegd de auteur Josh Mein, de bron
Ik heb een demo toegevoegd en die lijkt perfect te werken. Als u zeker weet dat er niets is veranderd tussen mijn versie en uw versie, kunt u de code in uw vraag bijwerken. Misschien kan ik iets anders zien dat het probleem zou kunnen veroorzaken.
toegevoegd de auteur Josh Mein, de bron
Om een ​​of andere reden kan ik geen gegevens posten naar update.php. Ik doe een eenvoudige 'isset ($ _ POST ["setdate"])' en retourneer fout false en het werkt niet. Ik stop de return voor de isset en de return werkt. Waar ga ik fout? Bedankt
toegevoegd de auteur Soccer is fun, de bron
Wanneer ik 'alert' ($ form.serialize ()); voor ajax, geeft het me geen vraagstrings.
toegevoegd de auteur Soccer is fun, de bron
Ik heb je code precies gekopieerd. Wanneer ik het formulier zelf waarschuw met behulp van 'alert ($ ("# form1"). Serialize ());', krijg ik wel de verwachte resultaten. Bedankt voor het helpen
toegevoegd de auteur Soccer is fun, de bron
Nee, de waarschuwing zegt nul.
toegevoegd de auteur Soccer is fun, de bron