Hoe HTML met jQuery van een AJAX call

Ik heb een select box met een lijst van boeken. De gebruiker kan een boek selecteren en druk op de knop verzenden om de hoofdstukken op een aparte pagina.

Echter, als de gebruiker wijzigingen in de select box, ik zou graag een gedeeltelijke pagina vernieuwen om het weergeven van de afgelopen merkt de gebruiker heeft ingevoerd op het boek, en kan de gebruiker schrijf een nieuwe opmerking voor dat boek. Ik wil niet met de beoordeling en de oprichting van de nota ‘ s voor een bepaald boek gedaan op de volgende pagina met de hoofdstukken, als het rommel-up.

Ik ben met behulp van Python/Fles op de backend en de SimpleTemplate motor voor de front-end.

Dit moment, wanneer de select-vak is veranderd, een ajax call ontvangt een Json string bevat het boek informatie en alle notities. Dit json-string wordt vervolgens omgezet in een json-object via jQuery.parseJson().

Wat ik zou willen kunnen doen, is vervolgens een lus over de noten en het weergeven van een tabel met meerdere cellen en rijen.

Zou ik hebben om dit te doen in jQuery/js (in plaats van de fles/template framework) ? Ik neem aan dat als ik wil alleen een gedeeltelijk vernieuwen, niet een volle.

Ik ben op zoek naar een stuk code dat u kunt maken een tabel met variabele nummers van rijen via jQuery/js van een json-object dat werd opgehaald met ajax.

<head>
    <title>Book Notes Application - Subjects</title>
    <script src="http://code.jquery.com/jquery-latest.min.js"
        type="text/javascript"></script>

    <script>
        $(document).ready(function(){
            $('#subject_id').change(function(){
                var subject_id = $(this).val();
                $.ajax({
                    url : "subject_ajax?subject_id=" + subject_id,
                    success : function(data) {
                        alert(data)

                        json = jQuery.parseJSON(data);
                    },
                    error : function() {
                        alert("Error");
                    }
                });
            })
        })

    </script>
</head>
<body>

    <!-- CHOOSE SUBJECT -->
    <FORM action="/books" id="choose_subject" name="choose_subject" method="POST">
        Choose a Subject:
        <select name="subject_id" id="subject_id">
            % for subject in subjects:
                <option value="{{subject.id}}">{{subject.name}}</option>
            % end
        </select><input type="submit" name="sub" value="Choose Subject"/>
        <BR />
    </FORM>

 

3 Replies
  1. 4

    Ik ben niet bekend met Python/Fles of haar SimpleTemplate motor, maar je zou kunnen overwegen aan het genereren van de html-code voor de tabel op de server kant en terug in de ajax-reactie, eerder dan terug te JSON.

    var subject_id = $(this).val();
    $.ajax('subject_ajax', {
        type: 'get',
        data: { subject_id: subject_id },
        dataType: 'html',
        success : function(html) {
            //Insert the html into the page here using ".html(html)"
            //or a similar method.
        },
        error: function() {
            alert("Error");
        }
    });

    Bij het aanroepen van .ajax():

    1. De “type” standaard instelling “voor”, maar ik geef de voorkeur om expliciet in te stellen.
    2. Gebruik de “data” – instelling voor de ajax-call voor het opgeven van de URL parameter.
    3. Geef altijd de “dataType” instelling.

    Ik raden u ook aan het uitvoeren van de ajax call in een op-indienen-handler voor het formulier en het toevoegen van een wijziging van de handler voor de selectie die het formulier indient.

    $(document).ready(function(){
        $('#subject_id').change(function() {
            $(this.form).submit();
        });
    
        $('#choose_subject').submit(function(event) {
            event.preventDefault();
            var subject_id = $('#subject_id').val();
            if (subject_id) {
                $.ajax(...);
            }
        });
    });

    Deze manier uw submit-knop zou moeten werken in geval er op geklikt wordt.

  2. 5

    Dit is sterk afhankelijk van hoe uw JSON en HTML zijn opgemaakt. Maar met een tafel ergens als:

    <table id="books">
      <tr>
        <th>Chapter</th>
        <th>Summary</th>
      </tr>
    </table>

    Je zou kunnen doen is iets als:

    $(function(){
        $('#choose_subject').submit(function () {
            var subject_id = $(this).val();
            $.getJSON("subject_ajax?subject_id=" + subject_id, function(data) {
                console.log(data);
                $.each(data.chapters, function (index, chapter) {
                    $('#books').append('<tr><td>' + chapter.title + '</td><td>' + chapter.summary + '</td></tr>');
                })
            });
            return false;
        })
    })

    Dit veronderstelt JSON zoals:

    {
      "notes": [
        "Note 1",
        "Note 2"
      ],
      "chapters": [
        {
          "title": "First chapter",
          "summary": "Some content"
        },
        {
          "title": "Second chapter",
          "summary": "More content"
        }
      ]
    }

    Overige opmerkingen:

    • Als u HTML-4 of eerder, behoud je al je tags in hoofdletters. Als je met behulp van XHTML of HTML5, behoud je al je tags in hoofdletters.
    • U hoeft niet $(document).ready(function () {...}), met recente versies van jQuery $(function () {...} ) werkt hetzelfde en het is makkelijker om te lezen.
    • Kunt u gebruik maken van $.get in plaats van $.json als je alleen het succes staat (als u hier). En als je zeker bent dat de gegevens die u krijgt geldig is JSON, kunt u gebruik maken van getJSON in plaats van get. Het parseren van de JSON voor u bezorgen u zo een JavaScript-object automatisch.
    • Het is meestal handiger om gebruik console.log dan alert wanneer u aan het testen bent. Eigenlijk, het is meestal een slecht idee in het algemeen ooit gebruik van alert.
  3. 1

    Er zijn een paar dingen die je nodig hebt om naar te kijken:

    1) Is uw SimpleTemplate bibliotheek opgenomen?
    2) Hebt u samengesteld uw sjabloon via compileTemplate()?

    Zodra u weet wat uw bibliotheek is opgenomen (op de console voor fouten), doorgeven van uw gegevens geretourneerd naar uw succes handler methode, het compileren van uw sjabloon, die update welk element dat u wilt bijwerken.

    Ik ben niet zeker dat u wilt bijwerken hetzelfde element dat u definieert uw sjabloon in.

    $(document).ready(function(){
        $('#subject_id').change(function(){
            var subject_id = $(this).val();
            $.ajax({
                url : "subject_ajax?subject_id=" + subject_id,
                success : function(data) {
    
                    var template_data = JSON.parse(data);
                    var template = $('#subject_id').toString(); //reference to your template
                    var precompiledTemplate = compileTemplate(template);
                    var result = precompiledTemplate(template_data);
                    $('#subject_id').append(result);
    
                },
                error : function() {
                    alert("Error");
                }
            });
        })
    })

    U kunt ook proberen het verplaatsen van uw sjabloon van het element dat u wilt bijwerken, zoals deze:

    <script type="text/template" id="subject-select-template">
    % for subject in subjects:
        <option value="{{subject.id}}">{{subject.name}}</option>
    % end
    </script>

    Dan gewoon een lege selecteer een element als volgt:

    <select id="select_id"></select>

    Update verwijzingen. Hoe dan ook, hoop dat dit nuttig is. Het zou moeten werken, maar ik kan het niet testen zonder uw specifieke code 😉

    Ook, bekijk deze demo voorbeeld als u nog niet hebt:
    https://rawgithub.com/snoguchi/simple-template.js/master/test/test.html

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *