mardi 22 décembre 2020

I want to get dynamic dependent dropdown using jQuery Ajax in Laravel 5.8 from other microservices?

geeks here is my issue that when i am changing project name it should show some similar URL of that project but it's not showing. but the response is coming when i inspect the value and checking the log it's working but in the view file it's not showing anything. can you please check below files to answer the question.

test.blade.php

@extends('layouts.backend.mainlayout')
@section('title','Seo Keyword View')

@section('content')
<input type="hidden" id="a_u_a_b_t" value="{!! $a_user_api_bearer_token !!}">
<script type="text/javascript">
localStorage.setItem('a_u_a_b_t', $('#a_u_a_b_t').val());
</script>
<!-- hidden Auth email and id for calling in json index -->
<input type="hidden" value="" name="admin_id" id="auth_id" />
<input type="hidden" value="" name="admin_email" id="auth_email" />

<div class="row page-titles">
<div class="col-md-5 align-self-center">
    <h3 class="text-themecolor">Account Admin</h3>
</div>
<div class="col-md-7 align-self-center">
    <!-- <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="javascript:void(0)">System Setting</a></li>
        <li class="breadcrumb-item active">Task</li>
    </ol> -->
</div>
</div>

<div class="container-fluid">

<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <div class="table-responsive m-t-40">

                    
                    <div class="row">
                        <div class="col-md-8">
                            <button type="button" name="create_record" id="create_record"
                                class="btn btn-primary ">Add New Keyword</button>
                        </div>
                    </div>

                    <table id="keywordTable" class="table">
                        <thead>

                        </thead>
                        <tbody>

                        </tbody>

                    </table>

                    <div id="formModal" class="modal fade" role="dialog">
                        <div class="modal-dialog" role="document">
                            <div class="modal-content">
                                <div class="modal-header bg-primary">
                                    <h5 class="modal-title text-white" id="exampleModalLabel">Add New Keyword</h5>
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                </div>
                                <div class="modal-body">
                                    <!-- Success Message after submit -->
                                    <span id="form_result" aria-hidden="true"></span>
                                    <!-- Error Message after form not submit -->
                                   
                                    <form method="post" id="sample_form" class="form-horizontal"
                                        enctype="multipart/form-data">
                                        @csrf

                                        <div class="form-group" id="name_form">
                                            <label class="control-label col-md-4">Project Name</label>
                                            <div class="col-md-8">
                                                <select name="project_name" id="project_name" class="w-100 p-2">
                                                    <option value="default" class="form-control text-dark">Select Project </option>
                                                    @foreach(App\Http\Controllers\Api\ProjectApiController::getvalueall() as $project)

                                                    <option name="" value=""></option>
                                                    @endforeach
                                                </select>

                                            </div>
                                        </div>

                                        <div class="form-group" id="name_form">
                                            <label class="control-label col-md-4">URL</label>
                                            <div class="col-md-8">
                                                <select name="url" id="url" class="w-100 p-2">
                                                <option value="" class="form-controll text-dark">Select URL </option>
                                                </select>

                                            </div>
                                        </div>

                                        <div class="form-group" id="name_form">
                                            <label class="control-label col-md-4">Keyword</label>
                                            <div class="col-md-8">
                                                <input type="text" name="keyword" id="keyword" class="form-control" />
                                                <!-- <span id="username" class="text-danger"></span> -->
                                            </div>
                                        </div>

                                        
                                        <!-- Sending admin_id and admin_email in hidden input box -->
                                        <input type="hidden" value="" name="admin_id"
                                            id="admin_id" />
                                        <input type="hidden" value="" id="admin_email" name="admin_email" />
                                        <input type="hidden" value="" id="url_id" name="url_id" />
                                        <input type="hidden" value="" id="project_id" name="project_id">
                                </div>

                                <!-- <br /> -->
                                <div class="form-group text-center">
                                    <input type="hidden" name="action" id="action" />
                                    <input type="hidden" name="hidden_id" id="hidden_id" />
                                    <input type="submit" name="action_button" id="action_button"
                                        class="btn btn-warning float-center" value="Add" />
                                </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="confirmModal" class="modal fade" role="dialog">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header bg-light">
                                <button type="button" class="close" data-dismiss="modal">&times;</button>
                                <br>
                                <span class="modal-title_delete">Confirmation</span>
                            </div>
                            <div class="modal-body">
                                <h4 class="text-center" style="margin:0; color:red;">Are you sure you want to remove this URL?</h4>
                            </div>
                            <div class="modal-footer">
                                <button type="button" name="ok_button" id="ok_button"
                                    class="btn btn-danger">OK</button>
                                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                            </div>
                        </div>
                    </div>
                </div>

                

            </div>
        </div>
    </div>
</div>
</div>
</div>
@endsection
@push('js')

<script>
$(document).ready(function() {
// onchange function for url get via project name
$('#project_name').on('change',function(){
    console.log('project name change');
    if(this.value !='default'){
        ajaxCall();
    } else{
        $('#url').empty();
        $('#url').append('<option> Select URL</option>');
    }
    function ajaxCall() {
    console.log('in ajaxCall');
    var project_id = $("#project_name option:selected").attr("name");
    console.log(project_id);
    $.ajax({
            type: "GET",
            url: '/'+project_id,
            data: {},
            headers: {
                "Authorization": "Bearer " + localStorage.getItem('a_u_a_b_t')
            },
            success: function(response) {
            $('#url').empty();
            $('#url').append('<option> Select Url </option>');
            console.log(response);
            console.log(response.data);
            console.log(response.success);
            if(response.success){

                $.each(response.data, function(i, link) { 
                    $('#url').append('<option name="'+link.id+'" value="' + link.url + '">' + link.url + '</option>');
                });
            }
            },
            error: function(errorResponse) {
            console.log(errorResponse);
            }
        });
    }
});
// onchange function for url get via project name  
</script>
@endpush

TestApiController.php ( controller that i am getting link)

        <?php

    namespace App\Http\Controllers\Api;

    use Illuminate\Http\Request;
    use App\Http\Controllers\Controller;
    use GuzzleHttp\Client as Client;
    use Illuminate\Support\Facades\Log;
    use Config;
    use Validator;
    use Auth;

    class LinkApiController extends Controller
    {
        //generating access token as static for getvalueall function
        private static function getAddUrlAccessToken()
        {
            Log::info('In LinkApiController->getAddUrlAccessToken()');
            try{
                $http = new Client(); //GuzzleHttp\Client
                $response = $http->post(
                    Config::get('app.SD_ADD_URLS_MS_BASE_URL') . Config::get('app.SD_ADD_URLS_MS_OAUTH_TOKEN_URL'),
                    [
                        'form_params' => [
                            'grant_type' => Config::get('app.SD_ADD_URLS_MS_GRAND_TYPE'),
                            'client_id' => Config::get('app.SD_ADD_URLS_MS_CLIENT_ID'),
                            'client_secret' => Config::get('app.SD_ADD_URLS_MS_SECRET'),
                            'redirect_uri' => '',
                        ],
                    ]
                );
                $array = $response->getBody()->getContents();
                $json = json_decode($array, true);
                $collection = collect($json);
                $access_token = $collection->get('access_token');
                Log::info('Got the token!');
                return $access_token;
            } catch(RequestException $e){
                Log::info('There is some exception in LinkApiController->getAddUrlAccessToken()');
                return $e->getResponse()->getStatusCode() . ': ' . $e->getMessage();
            }
        }

        //get project function
        public function getUrl($id)
        {
            try{
                Log::info('SD_ADD_URLS_MS_ALL_URL: ' . Config::get('app.SD_ADD_URLS_MS_ALL_URL'));
                $access_token = $this->getAddUrlAccessToken();
                $url = ''
                .Config::get('app.SD_ADD_URLS_MS_BASE_URL')
                .Config::get('app.SD_ADD_URLS_MS_ALL_URL')
                .'/'
                .$id;
                Log::info('Got the access token from LinkApiController::getAddUrlAccessToken(). Now fetching URLs!');
                Log::info('ALL Addurls URL: ' . $url);
                $guzzleClient = new Client(); //GuzzleHttp\Client
                $params = [
                    'headers' =>[
                        'Accept' => 'application/json',
                        'Authorization' => 'Bearer ' .$access_token
                    ]
                ];
                $response = $guzzleClient->request('GET', $url, $params);
                Log::info('Got the Response from SD ADDurls MS');
                Log::info('Store hone ke baad index page par value aa raha hai !');
                $json = json_decode($response->getBody()->getContents(), true);
                Log::info('Number of objects in response: ' . count($json['data']));
                return $json;
            } catch(\Exception $e){
                Log::info('There was some exception in LinkApiController->getProject()');
                return $e->getResponse()->getStatusCode(). ':' . $e->getMessage();
            }
        }

        // onchange function via project_id
    public static function getProjectid($project_id)
        {
            Log::info('in LinkApicontroller->getProjectid(sadfasdfasdfasdfasdf)'.$project_id);
            try{
                $access_token = LinkApiController::getAddUrlAccessToken();
                Log::info('Got the access token from LinkApiController->getAddUrlAccessToken(). Now fetching urls!');
                $http = new Client(); //GuzzleHttp\Client
                $response = $http->get(
                    Config::get('app.SD_ADD_URLS_MS_BASE_URL') . Config::get('app.SD_ADD_URLS_MS_GETPROJECT_URL')
                    .'/'
                    .$project_id,
                    [
                        'headers' => [
                            'Accept'     => 'application/json',
                            'Authorization' => 'Bearer ' . $access_token
                        ]
                    ]
                );
                Log::info('Got the response from URL!');
                $json = json_decode($response->getBody()->getContents(), true);
                Log::info('Number of objects in response: ' . count($json['data']));
                return $json['data'];
            } catch(\Exception $e){
                Log::info('ye aa gye ham error part me');
                return $e->getResponse()->getStatusCode() . ': ' . $e->getMessage();
            }
        }
    }

api.php (routes)

<?php

    use Illuminate\Http\Request;


    Route::group(['prefix'=>'v1/j', 'middleware' => 'auth', 'middleware' => 'client_credentials'], function(){
            
            // web url api route
            Route::get('addurl/index/{id}','Api\LinkApiController@getUrl')->name('addurl.index');
            Route::post('addurl/store/{project_name}','Api\LinkApiController@storeUrl')->name('addurl.store');
            Route::get('addurl/edit/{id}','Api\LinkApiController@editUrl')->name('addurl.edit');
            Route::post('addurl/update','Api\LinkApiController@updateUrl')->name('addurl.update');
            Route::get('addurl/destroy/{id}','Api\LinkApiController@destroyUrl')->name('addurl.delete');
            Route::get('addurl/getProject/{project_id}','Api\LinkApiController@getProjectid')->name('addurl.getProject');

    });

google chrome inspect result enter image description here



via Chebli Mohamed

Aucun commentaire:

Enregistrer un commentaire