CODEWITHSUNDEEP
jqueryajaxlaravel
Peter
Peter

Reputation: 2711

ajax button to show and change status of a DB field - Laravel 4

I am trying to create a simple settings panel. I want to create several buttons, which show and change status of some options and switch their value between 0 and 1. Basically it is exacly what we use here in Stackoverflow to vote answers.

With a friendly help I was able to create this single button, which works:

View:

<div class="box_option flexvert invoke2">


@if(isset($userdata) && $userdata->ShowToolbar == 1)      
    <a data-remote="true" data-method="post" href="{{ route('switch.toggle_option') }}" id="experiment_update3" class="csh_07"> Activated</a>
@else
     <a data-remote="true" data-method="post" href="{{ route('switch.toggle_option') }}" id="experiment_update3" class="csh_11"> Not Activated</a>
@endif

 </div>

Route:

Route::post( '/usersettings/ajax_buttons3', array(
    'as' => 'switch.toggle_option',
    'uses' => 'UserWorkspacesController@toggle_option'
) );

Controller:

    public function toggle_option() {

$userdata = UserWorkspace::where('user_id', '=', Auth::user()->id)->first(); 

if($userdata->ShowToolbar === 1)
{
    $userdata->ShowToolbar = 0;
    $response = array(
        'toggle_update' => trans('messages.un_joined')
    );
}
else
{
    $userdata->ShowToolbar = 1; // This also handles newly created UserWorkspaces
    $response = array(
        'toggle_update' => trans('messages.joined')
    );
}

$userdata->save();

        return Response::json( $response );

    }

JS:

$('a[data-remote=true]').on('ajax:beforeSend', function(xhr, settings) {
    $(this).find('.dropdown-toggle').click();
});
$('a[data-remote=true]').on('ajax:success', function(xhr, data, status) {
    $(this).text(data.toggle_update);
});

Problem:

  1. create more than one button without cloning code in the controller method or js. In Sisou's solution the controller does't know which table I want to Change - so the link must carry the information, right? i need c. 20 buttons in single view. For now the only thing I came out with is this ugly nesting IFs (sorry):

    Route::post( 'switch/{option}', array( 'as' => 'switch.toggle_option', 'uses' => 'UserWorkspacesController@toggle_option' ) );

and separate IF for each option/button to be toggled:

if($option = 1) {
if($userdata->ShowToolbar == 1)
{
    $userdata->ShowToolbar = 0;
 ... and so on...

Thx

Upvotes: 1

Views: 1752

Answers (1)

sisou
sisou

Reputation: 323

If you want the same button to change a value from 1 to 0 or 0 to 1, I suggest you let the server-side handle the appropriate value and just call a route (without any parameter) from the button. So your button would simply be

<a data-remote="true" data-method="post" href="{{ route('join.join_an_action') }}" id="experiment_update">

And you controller would check what the value currently is in the DB and then change it:

if($setactionstatus->Ajaxtest === 1)
{
    $setactionstatus->Ajaxtest = 0;
    $response = array(
        'interface_update' => trans('messages.un_joined')
    );
}
else
{
    $setactionstatus->Ajaxtest = 1; // This also handles newly created UserWorkspaces
    $response = array(
        'interface_update' => trans('messages.joined')
    );
}

$setactionstatus->save();

As for other buttons: you need to make the DOM crawling relative to the link:

$('a[data-remote=true]').on('ajax:beforeSend', function(xhr, settings) {
    $(this).find('.dropdown-toggle').click();
});
$('a[data-remote=true]').on('ajax:success', function(xhr, data, status) {
    $(this).text(data.interface_update);
});

Upvotes: 1

Related Questions