String in javascript function

Door Gijs Anoniem op 21-05-2016 11:46

4.688 views

Dag mensen,

Ik genereer een tabel met nieuwsberichten, deze komen uit de database. In elke tabelrij gooi ik een button, om de data te kunnen bewerken. Dit doe ik d.m.v. een modal. Het ziet er nu als volgt uit :


echo '<td><button class="btn btn-default" onclick="editNews(' . $ni['news_id'] . ')">Bewerken</td>';


function editNews(id) {
                $('#myModal').modal('show');
                $('#hiddennewsid').val(id);
            }


<!-- Modal -->
        <div id="myModal" class="modal fade" role="dialog">
            <div class="modal-dialog">

                <!-- Modal content-->
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title">Nieuws aanpassen</h4>
                    </div>
                    <div class="modal-body">
                        <form class="form-horizontal" method="POST">
                            <div class="form-group">
                                <label class="col-sm-2 col-sm-2 control-label">Onderwerp</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" id="subject">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 col-sm-2 control-label">Nieuwsbericht (max 500 tekens)</label>
                                <div class="col-sm-10">
                                    <textarea required rows = "6" style="min-width: 100%" id="content"></textarea>
                                </div>
                            </div>
                            <input type="hidden" value="" id="hiddennewsid" name="newsid">
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal" onclick="edit_news_handle()">Bijwerken</button>
                    </div>
                </div>

            </div>
        </div>

Dit zijn de onderdelen, nu wil ik graag de tekstinputs in het modal aanvullen. Dit wil ik doen op de volgende manier;


echo '<td><button class="btn btn-default" onclick="editNews(' . $ni['news_id'] . ', ' . $ni['news_subject'] . ', ' . $ni['content']. ')">Bewerken</td>';

function editNews(id, subject) {
                $('#myModal').modal('show');
                $('#hiddennewsid').val(id);
                $('#subject').val(subject);
            }

Verder geen wijzigingen in het modal. Wanneer ik dit test en ik controleer de console. Geef hij aan "Test not defined". Test is in dit geval de waarde van $ni['news_subject'] (het stukje tekst 'test').

Ik heb van alles geprobeerd door o.a. te klote met quotes. Helaas geen resultaat.

SOS help

Groet,

Gijs

Thomas van den Heuvel

22-05-2016 17:18

Waarom haal je niet gewoon de titel + content op aan de hand van een nieuws-id middels een AJAX-call? Dat lijkt mij makkelijker. Ook zullen er bij het afdrukken wat karakters met een speciale betekenis omgezet moeten worden. Dat zou je bijvoorbeeld met de volgende snippet kunnen doen:

// @see https://github.com/janl/mustache.js
var entityMap = {
    "&": "&amp;",
    "<": "&lt;",
    ">": "&gt;",
    '"': '&quot;',
    "'": '&#39;',
    "/": '&#x2F;'
};
function escapeHtml(string) {
    return String(string).replace(/[&<>"'\/]/g, function (s) {
        return entityMap[s];
    });
}

Zorg er gewoon voor dat als je in de success callback functie van je AJAX call de waarden terugplaatst in je (modal popup) formulier dat je deze waarden escaped met de escapeHtml() functie.

Gijs Anoniem

24-05-2016 16:26

echo '<td><button class="btn btn-default" onclick=\'edit_news_handle(' . $ni['news_id'] . ', ' . json_encode($ni['news_subject']) . ', ' . json_encode($ni['news_content'], JSON_HEX_APOS) . ')\'>Bewerken</td>';

Een klasgenoot gaf mij deze oplossing! Het werkt. Alsnog bedankt Thomas voor de optie, ik kijk hier sowieso nog naar.

Reageren

Inloggen om te reageren