Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

Shoken's avatar

Form generated by AJAX post does not get styled.

The problem is rather simple. Here is my HTML code for the form:

                                    <h5 class="info-text"> Position</h5>
                                    <div class="row justify-content-center">
                                        <div class="col-sm-10">

                                            <div class="togglebutton">
                                                <label>
                                                    <input type="checkbox" id="subCat">
                                                    <span class="toggle"></span>
                                                    Subcategory
                                                </label>
                                            </div>
                                        </div>
                                        <div class="col-sm-10" id="mainRanking">
                                            
                                            {!! Form::select('position', array_merge(['' => 'Last (default)'],array_pluck($categories, 'sortOrder')), old('position') ,array('id'=>'position','class'=>'selectpicker','data-style'=>'select-with-transition','title'=>'Position','required'=>'required')) !!}
                                        </div>
                                        <div class="col-sm-10" style="display:none" id="parentCat">
                                         
                                            {!! Form::select('position1', array_pluck($categories, 'name'), old('position1') ,array('id'=>'position1','class'=>'selectpicker','data-style'=>'select-with-transition','title'=>'Parent Category','required'=>'required')) !!}
                                        </div>
                                        <div class  id="formcontainer">
                                        


                                        </div>

                                    </div>
                                </div>

You can see there is an empty div at the bottom, called formcontainer, which is where I put my second select form once a selection has been picked for the first one. To do so, I use this AJAX code:

$('#position1').change(function(){
            $.post("/selectcategory",
                {
                    categoryname: $('#position1 option:selected').text(),
                },
                function(data) {
                    $('#formcontainer').empty().append( data );

                }

            ) });
        });

The Controller that takes care of this post request is:

public function get(Request $request){

        $category=Category::where('name',$request->categoryname)->first();

        $subcategories=Category::where('category_id',$category->id)->get();


        return view('back_end.selectorderform')->with('subcategories',$subcategories);

    }

And lastly, the returned HTML to put inside the empty div is:

    <div class="col-sm-10" id="insideRanking">
{!! Form::select('position2', array_pluck($subcategories, 'name'),['id'=>'position2','class'=>'selectpicker','data-style'=>'select-with-transition','title'=>'Position','required'=>'required']) !!}
    </div>

The code works, as the second select is generated with the correct values I seek, next to the first one. Problem is, it isn't styled, and I can't get it to be styled. Here is a screenshot of how it looks, so maybe it can give you a better idea:

https://imgur.com/a/WyyUydb

The one on the left is the first form (styled) and the one on the right is the one generated in the empty div.

I understand this is a lenghty question, so special thanks to whoever feels like helping. (:

0 likes
1 reply
mvd's avatar
mvd
Best Answer
Level 48

Hi @shoken,

I think you need to render the form before the return.

 return view('back_end.selectorderform')->with('subcategories',$subcategories)->render();

Please or to participate in this conversation.