how to append blade statements to a div using javascript?

Question

If we have following structure, the id variable is not recognized in the js. what is wrong? I mean, how to use id variable in where condition in blade statement? Meawhile, the blade syntax works properly but I don't know how to pass it the id variable. It assumes the id variable equals to zero!!!

<body>
    <div class='fake' id='test'>

    </div>

    <script>
        $('.fake').hover(function() {
            var id = this.id;
            var content = "<ul>"+
                "@foreach(DB::table('category')->where('parent_id', 'id')->get() as $childCat)"+
                "<li>"+
                "{{$childCat->name}}"+
                "</li>"+
                "@endforeach"+
                "</ul>";
        }, function() {
        });

        $('#'+id).append(content);
    </script>
</body>

Possible duplicate of [Appending Laravel Blade from JQuery](https://stackoverflow.com/questions/37089795/appending-laravel-blade-from-jquery) — fahim152, Nov 15 '19 at 05:52

user3532758 · Answer 1 · 2019-11-15T05:56:37.697

0

By the time the page is loaded, blade would have compiled. So I doubt it's possible. Even if it is possible, this line should be like so, notice that id is concatenated in the string.

"@foreach(DB::table('category')->where('parent_id', '"+id+"')->get() as $childCat)"+
//also
@endfoeach instead of {{endforeach}}

I think you should consider finding an alternative method to implement this logic. As one of the comments indicated, you could maybe use ajax to pull pre-rendered component. Sent 'id' and get subcategory list.

edited Nov 15 '19 at 05:56

answered Nov 15 '19 at 05:42

user3532758

2,221
1
12
17

Thanks, but I want to do it in jquery not with ajax approach. I don't know how to concatenate id variable to work? I spent a lot of time for fix this problem but I couldn't reach a solution in js!! – amir Nov 15 '19 at 06:14
1

If the blade really works, as you've said in your edit, from where do you get the id? Right now you say var id = this.id; Do you have a global id? Or do you want to get the id attribute from the div? In that case, it should $(this).attr('id'), but your id just says test. You could perhaps include a data attribute and pass id there and get the attribute value of data. – user3532758 Nov 15 '19 at 06:38
1

You cannot append blade syntax to inner html via js because blade syntax are rendered in php serverside and it gives the browser static html. when you try to append blade syntax your browser via js, it wont understand it and it will print as it is. – fahim152 Nov 15 '19 at 07:10
@fahim152 OP insists that the blade syntax work, but I am with you. – user3532758 Nov 15 '19 at 07:12

score 0 · Answer 2 · answered Nov 15 '19 at 06:15

0

You can iterate through your items with jQuery like this

<script>
    $('.fake').hover(function() {
        let ul = $('<ul>')
        let categories = @json(DB::table('category')->where('parent_id', 'id')->get())

        for(let category in categories) {
            ul.append($(<li>).text(category['name']))
        }

        $(this).append(ul)
    });
</script>

answered Nov 15 '19 at 06:15

julianstark999

3,450
1
27
41

id variable is not recognized! – amir Nov 15 '19 at 08:16
@amir please be more specific – julianstark999 Nov 15 '19 at 09:05

Nicolas Goosen · Answer 3 · 2019-11-16T10:35:22.383

The only way this could work is if you are you trying to generate JS code using Blade before sending that to the browser - is that what you're trying to do?

The below code works perfectly for me (change your table names as appropriate):

// displays a list of page 3's children on hovering over the box
<div class="fake" style="width: 300px; height: 300px; background-color: cyan" id='test'>
</div>
<script>
    $(document).ready( function () {
        $('.fake').hover(function() {
            var content = "<ul>"+
                @foreach(DB::table('pages')->where('parent_id', '3')->get() as $page)
                    "<li>"+"{{$page->name}}"+"</li>"+
                @endforeach
                "</ul>";
            this.innerHTML = content;
        });
    });
</script>

Also, you were using the id and content variables out of scope.

Nicolas Goosen · Answer 4 · 2019-11-16T10:33:50.367

Your original post has changed somewhat in intention, or at least has been clarified. Originally it seemed you wanted to use Blade to generate JS, which is feasible, if a little awkward.

It's still very unclear what it is you want to do with the id variable. If you could explain what you're trying to do that would be helpful.

Are you trying to pass something from the DOM back into Blade? If so, this is impossible. Blade needs to compile the page before being sent to the browser - but the DOM is only created in the browser (once it receives the page).

Maybe this example will clear up what your intention is? Would something like this work for you?

// controller passes variable $id into view

<div class='fake' id={{ $id }}></div>   // seems unnecessary, but hey?

<script>
    $('.fake').hover(function() {
        var id = {{ $id }};
        // etc...

how to append blade statements to a div using javascript?

4 Answers4