我从服务器获取了一个包含数据的div，使用ajax，该div将替换为我用jquery和ajax提交到php路由的表单

Question

Everything works except for the replacement of the div. When i submit the form with jquery and ajax, my php stores the data in the database and it creates a new div that needs to be placed where the form was. But when i submit the form it will place the div that was replaced by the form.

The controller:

public function postStoryPanel(UpdateStoryRequest $request, $user_id)
{
    $provider = new StoryProvider($user_id);
    $panel[] = $provider->updateStoryByUserId($request, $user_id);

    return Response::json($panel);
}

The StoryProvider:

// This just stores the data in the database and it wil trigger the method
// for creating the div with the data from database

public function updateStoryByUserId($request, $user_id)
{
    $story = User::findOrFail($user_id)->story->last();
    if(is_null($story)) {

        $story = new Story();
        $story->bio_id = Bio::firstOrCreate(['user_id' => $user_id])->id;
        $story->title = $request->get('title');
        $story->body = $request->get('body');
        $story->save();
    }else{
        $story->delete();

        $story = new Story();

        $story->bio_id = Bio::where('user_id', $user_id)->first()->id;
        $story->title = $request->get('title');
        $story->body = $request->get('body');
        $story->save();

    }
    return $this->getStoryPanelByUserId($user_id);
}

// This will create the div with the data from database

public function setEditStoryPanelByUserId($user_id)
{
    return $this->storyPanel = new StoryPanel(
            $user_id,
            $this->setEditHeaderContent($user_id),
            $this->setEditBodyContent($this->story),
            $this->setEditFooterContent($user_id)
        );
}

JQuery and Ajax:

function postRoute(route, form_id)
{
    $.ajax({
        type: "POST",
        url:  route ,
        data: $('#'+form_id).serialize(),
        dataType: 'json',
        success: function (data) {
            placePanel(data);
        }
    });
}

function placePanel(data){
    var response = '';

    if(data.length > 1){
        response = 'multi';
    }else{
        response = 'single';
    }

    var panels = [];
    var panel_id = [];
    if(response == 'multi'){
        for(var i = 0; i < data.length; i++){
            panels[i] = renderPanel(data[i]);
            panel_id[i] = data[i]['panel_id'];

        }
    }else{
        panels[0] = renderPanel(data[0]);
        panel_id[0] = data[0]['panel_id'];
    }
    for(var x = 0; x < panels.length; x++){
        injectPanel(panels[x], panel_id[x]);
    }
}

function renderPanel(panelObj)
{
    var panel = "";
    for(var key in panelObj){
        if(panelObj[key] != null) {
            console.log(panelObj[key]);
            if(key != 'panel_id'){
                panel += panelObj[key];
            }
        }
    }

    return panel;
}

function injectPanel(panel, panel_id)
{
    var found_panel = document.getElementById(panel_id);
    if(found_panel != null){
        $('#'+panel_id).replaceWith(panel);
    }else{
        $('#bio').append(panel);
    }
}

Hopefully I have my question well formulated. Forgive me for my (bad) english my main language is dutch.

Answer 1

I found the fault in my code. When i created a new StoryProvider($user_id), i get in the __construct the data from the database for my div . That's why i got the old div instead of the new.

Now i get the data from the database when the method is triggered that will create the div.