JavaScript HTML Tags in Array / JQuery nutzt immer die Methode replace()

[PEASANT KING]

Hallo Leute,

ich arbeite an meiner Laravel Application und nutze in einer View einen Ajax Request. Ich bekomme auch wunderbar Ergebnisse zurück..

In meiner View habe ich das Ergebinis so anzeigen lassen:

$(document).ready(function(){
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
 
        $('#search').keyup(function() {
            var search = $('#search').val();
                
                $.getJSON("{{ URL::to('search') }}",{search:search}, function(data)
                {
                    $('tbody').empty();
                    
                    $(data).each(function(key, value) {

                        if(search) {

                           
                                $('tbody').append(
                                '<tr><td>'+$(this).attr('id')+'</td>'
                                    +'<td>'+$(this).attr('username')+'</td>'
                                    +'<td>'+$(this).attr('name')+'</td>' 
                                    +'<td>'+$(this).attr('email')+'</td>'
                                    +'<td>'+$(this).attr('avatar')+'</td>'
                                    +'<td>'+$(this).attr('created_at')+'</td>'
                                    +'<td></td>'
                                    +'<td>'+$(this).attr('updated_at')+'</td>'
                                    +'<td><a class="action float-left" href="users/'+$(this).attr('id')+'/edit">'
                                    +'<i class="fa fa-edit"></i></a>'
                                    +'<button class="submit action icon float-left"><i class="fa fa-trash"></i></button></td></tr>');



                        }
                        else
                        {
                                $('tbody').append(
                                '<tr><td>'+$(this).attr('id')+'</td>'
                                    +'<td>'+$(this).attr('username')+'</td>'
                                    +'<td>'+$(this).attr('name')+'</td>' 
                                    +'<td>'+$(this).attr('email')+'</td>'
                                    +'<td>'+$(this).attr('avatar')+'</td>'
                                    +'<td>'+$(this).attr('created_at')+'</td>'
                                    +'<td></td>'
                                    +'<td>'+$(this).attr('updated_at')+'</td>'
                                    +'<td><a class="action float-left" href="users/'+$(this).attr('id')+'/edit">'
                                    +'<i class="fa fa-edit"></i></a>'
                                    +'<button class="submit action icon float-left"><i class="fa fa-trash"></i></button></td></tr>');
                        }
                    });                   
                        
                });
            });
    });

Elegant geht anders daher wollte ich den ganzen Mist einfach in einen Array packen etwa so:

$(document).ready(function(){
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
 
        $('#search').keyup(function() {
            var search = $('#search').val();
                
                $.getJSON("{{ URL::to('search') }}",{search:search}, function(data)
                {
                    $('tbody').empty();
                    
                    $(data).each(function(key, value) {

                        if(search) {

                            var users = [
                                @foreach($users as $user)
                                [   "<td>", 
                                    "{{ $user->id }}",
                                    "</td>", 
                                ],
                                @endforeach 
                            ]; 

                            $('tbody').append(users);
                        }
                        else
                        {
                            $('tbody').append(users);
                        }
                    });                   
                        
                });
            });
    });

Leider wird der ganze Htmlkram automatisch versucht zu ersetzen von JQuery. Wie kann ich das umgehen es nervt tierisch.

 

[berto]

ohne den Code jetzt getestet zu haben...
Du weißt schon dass @foreach eine Blade directive ist? Die geht also nur wenn das ganze ein Blade view (Backend/Laravel) ist, in jquery funktioniert foreach anders (https://api.jquery.com/each/). Falls das wirklich ein Blade view ist, würde ich aber sagen, dass du das hier zu stark vermischst. Ich würde das so angehen:

1. Alles was JS ist raus aus dem Blade view und rein in ein .js file, das du als asset einfach einbindest in dein HTML.

2. Dann im Jquery das Array holen mit den Werten (nur die Werte ohne die ganzen HTML teile)

3. Mit oben verlinkter .each methode über das array iterieren und dann für jedes Element im Array ein neues HTML Dom element erzeugen

Ich hoffe du kannst was damit anfangen. lg

 

[J.D]

3. Mit oben verlinkter .each methode über das array iterieren und dann für jedes Element im Array ein neues HTML Dom element erzeugen

Sinnvollerweise in der Schleife einen langen String aus Elementen erzeugen ( str += el) und dann außerhalb alles auf einmal ins HTML schreiben. Ist besser für die Performance.

 

[PEASANT KING]

@berto

Ja ich weiß das es eine Bladedirektive ist und es ist auch genau so gewünscht. Die Direktive funktioniert auch, aber die HTML Tags werden automatisch replaced und das nervt mich.

Ich verstehe nicht warum sie replaced werden, weil an und für sich sollten es ja Teilstrings sein.

Im ersten Beispiel wie es zuvor war, habe ich ja die Strings einfach zusammen gesetzt mit den jeweiligen Arraywerten meiner Abfrage, oder verstehe ich dich dort falsch?

Danke schon mal für die Tipps.

 

[berto]

@DJ_We$t

Kannst du bitte den output posten was du mit "die HTML tags werden automatisch replaced" meinst? Vielleicht verstehe ich dich hier einfach falsch...

Also was bekommst du für einen output ubd was für einen hättest du gerne.

Lg

 

[PEASANT KING]

Beim Output des Arrays in der Konsole bekomme ich die Meldung "html.replace is not a function".
Was echt blödsinn ist, da ich replace gar nicht nutze, aber anscheinend die HTML Values im Array bei JQuery automatisch versucht wird zu replacen.

Hat das schon mal Jemand gehabt? Ich will nuir meinen ganzen HTML Output vorher in einer Variable haben und dann ausgeben. Die Variable mit zusammengesetzten Strings habe ich ja zuvor genutzt, nur habe ich hier das Problem, das ich irgendwann nicht mehr vernünftig escapen kann, muss ich aber, da ich HTML Code, PHP und Ajax Results in einem String haben möchte...