WallyJ

WallyJ

Member Since 2 Years Ago

Experience Points
5,690
Total
Experience

4,310 experience to go until the next level!

In case you were wondering, you earn Laracasts experience when you:

  • Complete a lesson — 100pts
  • Create a forum thread — 50pts
  • Reply to a thread — 10pts
  • Leave a reply that is liked — 50pts
  • Receive a "Best Reply" award — 500pts
Lessons Completed
12
Lessons
Completed
Best Reply Awards
0
Best Reply
Awards
  • start-engines Created with Sketch.

    Start Your Engines

    Earned once you have completed your first Laracasts lesson.

  • first-thousand Created with Sketch.

    First Thousand

    Earned once you have earned your first 1000 experience points.

  • 1-year Created with Sketch.

    One Year Member

    Earned when you have been with Laracasts for 1 year.

  • 2-years Created with Sketch.

    Two Year Member

    Earned when you have been with Laracasts for 2 years.

  • 3-years Created with Sketch.

    Three Year Member

    Earned when you have been with Laracasts for 3 years.

  • 4-years Created with Sketch.

    Four Year Member

    Earned when you have been with Laracasts for 4 years.

  • 5-years Created with Sketch.

    Five Year Member

    Earned when you have been with Laracasts for 5 years.

  • school-session Created with Sketch.

    School In Session

    Earned when at least one Laracasts series has been fully completed.

  • welcome-newcomer Created with Sketch.

    Welcome To The Community

    Earned after your first post on the Laracasts forum.

  • full-time-student Created with Sketch.

    Full Time Learner

    Earned once 100 Laracasts lessons have been completed.

  • pay-it-forward Created with Sketch.

    Pay It Forward

    Earned once you receive your first "Best Reply" award on the Laracasts forum.

  • subscriber-token Created with Sketch.

    Subscriber

    Earned if you are a paying Laracasts subscriber.

  • lifer-token Created with Sketch.

    Lifer

    Earned if you have a lifetime subscription to Laracasts.

  • lara-evanghelist Created with Sketch.

    Laracasts Evangelist

    Earned if you share a link to Laracasts on social media. Please email [email protected] with your username and post URL to be awarded this badge.

  • chatty-cathy Created with Sketch.

    Chatty Cathy

    Earned once you have achieved 500 forum replies.

  • lara-veteran Created with Sketch.

    Laracasts Veteran

    Earned once your experience points passes 100,000.

  • 10k-strong Created with Sketch.

    Ten Thousand Strong

    Earned once your experience points hits 10,000.

  • lara-master Created with Sketch.

    Laracasts Master

    Earned once 1000 Laracasts lessons have been completed.

  • laracasts-tutor Created with Sketch.

    Laracasts Tutor

    Earned once your "Best Reply" award count is 100 or more.

  • laracasts-sensei Created with Sketch.

    Laracasts Sensei

    Earned once your experience points passes 1 million.

  • top-50 Created with Sketch.

    Top 50

    Earned once your experience points ranks in the top 50 of all Laracasts users.

Level 2
5,690 XP
Oct
09
1 week ago
Activity icon

Replied to Javascript Form Submit To URL Or Controller

Winner! I'm now in my controller! Thanks!

Activity icon

Replied to Javascript Form Submit To URL Or Controller

Do I put that after the form.submit function that is running the payment script? How do I make sure the payment script runs before the onClick?

Activity icon

Replied to Javascript Form Submit To URL Or Controller

But I want it to submit the form to the URL. Right now, it runs the script, but does not submit the form to the URL, so I can have the Controller continue the process of the payment.

Activity icon

Replied to Javascript Form Submit To URL Or Controller

But the function is firing already when the button is pressed. How will the onClick add the URL/Controller to the form submission?

Activity icon

Replied to Javascript Form Submit To URL Or Controller

Thanks for the clarification! So how do I allow the Javascript to run, and still submit the form to the URL after the script runs?

Activity icon

Started a new Conversation Javascript Form Submit To URL Or Controller

Newb Question of the day. I have some Javascript on a page to handle Braintree payments which stops the normal submittal of the form to perform some functions, using:

event.preventDefault();

I'm assuming that the form is actually submitted at the end of the function:

form.submit(function(event) {
      console.log("Function - Submit Form");
      event.preventDefault();

      var formIsInvalid = false;
      var state = hostedFieldsInstance.getState();

      // perform validations on the non-Hosted Fields
      // inputs
      if (!validateEmail() || !validateInput($('#cc-name'))) {
        formIsInvalid = true;
      }

      // Loop through the Hosted Fields and check
      // for validity, apply the is-invalid class
      // to the field container if invalid
      Object.keys(state.fields).forEach(function(field) {
        if (!state.fields[field].isValid) {
          $(state.fields[field].container).addClass('is-invalid');
          formIsInvalid = true;
        }
      });

      if (formIsInvalid) {
        // skip tokenization request if any fields are invalid
        return;
      }
      console.log("Function - Hosted Fields - Tokenize");
      hostedFieldsInstance.tokenize({
        // include the cardholderName in the tokenization
        // request
        cardholderName: $('#cc-name').val()
      }, function(err, payload) {
        if (err) {
          console.log("There was a Payload Error");
          console.error(err);
          return;
        }

        // This is where you would submit payload.nonce to your server
        $('#payment-method-nonce').val(payload.nonce);
        console.log("Declared the Nonce");
        console.log("End of Function");
      });
    });
  });
});
</script>

but other examples I've seen have an additional "form.submit()" at the end of the function.

I added that but the form submits over and over, thousands of times (Seen on the Network Tab in Chrome Dev Tools)

The beginning of my form looks like this:

<form class="needs-validation" novalidate="" method="POST" action="/payment/subscribe">
{{csrf_field()}}

But when I click button on the form I see all of my console.log statements, but it doesn't submit to the URL, which goes to a controller.

Why is that?

Oct
04
2 weeks ago
Activity icon

Replied to Running "regular Javascript" In Vue

I don't have a Vue container in this Blade view, but the Vue tab in Google Chrome's console area says that I am "Running Vue in Dev Mode" I'm not sure why the script isn't running. I'm just currently blaming it on Vue, so I wanted to run Vue only on the one view that needs it for the auto-fill functionality. I don't use Vue for anything else. The script that isn't running is for a completely different page.

Thanks for your input though.

@Mware - I think I will try that approach. Thanks!

Oct
02
2 weeks ago
Activity icon

Replied to Running "regular Javascript" In Vue

You mean I should do that when I need to use Vue?

Activity icon

Started a new Conversation Running "regular Javascript" In Vue

I have used Blade forever. I introduced Vue into a project to have Typeahead functionality for a search box using a tutorial I found. I only need this functionality in one view.

My understanding is that I can't run s at the bottom of my views because Vue is running, as it gives me an error saying so.

Is there a way to only load Vue on the view that I need it, and use Blade syntax for the rest of my project?

My payment processor has regular Javascript in their SDK, but it seems that Vue is making that cause errors.

#vuenewb

Activity icon

Replied to Laravel Cashier - Undefined Variable: Token

Pardon my ignorance, but what do you mean "importing into app.js"? I try not to touch that file, and its 52,000 lines of code.

Activity icon

Replied to Laravel Cashier - Undefined Variable: Token

Plus, even when I comment out the lines to make it work, I receive a 500 error in the console:

VM5025:1 GET http://app.test/payment/subscribe?payload%5Bnonce%5D=tokencc_bd_34c6p5_ptdfxx_hwj4g8_gsw4t2_3m6&payload%5Bdetails%5D%5BexpirationMonth%5D=02&payload%5Bdetails%5D%5BexpirationYear%5D=2021&payload%5Bdetails%5D%5Bbin%5D=411111&payload%5Bdetails%5D%5BcardType%5D=Visa&payload%5Bdetails%5D%5BlastFour%5D=1111&payload%5Bdetails%5D%5BlastTwo%5D=11&payload%5Btype%5D=CreditCard&payload%5Bdescription%5D=ending+in+11&payload%5BbinData%5D%5Bprepaid%5D=Unknown&payload%5BbinData%5D%5Bhealthcare%5D=Unknown&payload%5BbinData%5D%5Bdebit%5D=Unknown&payload%5BbinData%5D%5BdurbinRegulated%5D=Unknown&payload%5BbinData%5D%5Bcommercial%5D=Unknown&payload%5BbinData%5D%5Bpayroll%5D=Unknown&payload%5BbinData%5D%5BissuingBank%5D=Unknown&payload%5BbinData%5D%5BcountryOfIssuance%5D=Unknown&payload%5BbinData%5D%5BproductId%5D=Unknown 500 (Internal Server Error)
(anonymous) @ VM5025:1
send @ jquery.js:8526
ajax @ jquery.js:7978
jQuery.<computed> @ jquery.js:7614
(anonymous) @ cc:111
(anonymous) @ dropin.min.js:1
setTimeout (async)
(anonymous) @ dropin.min.js:1
(anonymous) @ dropin.min.js:1
(anonymous) @ dropin.min.js:1
Promise.then (async)
t.exports @ dropin.min.js:1
(anonymous) @ dropin.min.js:1
(anonymous) @ cc:110

I may just need to abandon the use of Cashier and use Braintree's straight PHP SDK...

The problem for me is that:

Laravel - Designed to make PHP easier

Braintree - Designed to make accepting payments easier

Cashier - Designed to make putting Laravel and Braintree together easier

Using Laravel, Cashier, and Braintree - Complete mess with terribly incomplete docs and 15 tutorials that all say something different, creating a mess of code that doesn't work.

@TaylorOtwell, any thoughts?

Activity icon

Replied to Laravel Cashier - Undefined Variable: Token

When I setup typeahead, it required JQuery,(I think), so I added the lines of code for it. Then for Braintree's Drop-In, the docs/tutorials showed the other line of code, so I added it. Not sure which one I should use, so I left them both.

Also, whatever Vue tutorial I used showed the CDN link, so I used it.

I guess that's a problem with a lot of tutorials, they don't necessarily explain that something they suggest is an option, but you can do it another way for another reason.

Activity icon

Replied to Laravel Cashier - Undefined Variable: Token

Ok. So, I turned on JQuery, but had to comment out this line to get it to work:

<script src="{{ asset('js/app.js') }}" defer></script>

This is fairly mission critical to my project. Not sure why it is killing the Braintree UI processing.

Activity icon

Replied to Laravel Cashier - Undefined Variable: Token

Also, it only works when I comment out the app.js file, which I have to run... This really sucks.

Activity icon

Replied to Laravel Cashier - Undefined Variable: Token

Makes sense. Should have tried that. Thanks.

I did that, and it worked partially. I received this error in the console:

Error in callback function dropin.min.js:1 ReferenceError: $ is not defined at cc:107 at dropin.min.js:1

Not sure if the issue is in my code or the dropin.min.js file.

Activity icon

Replied to Laravel Cashier - Undefined Variable: Token

I am loading Vue for functionality on other pages, but it loads in my app.blade.php, so it's loading for this page as well. I think that might be killing the javascript EventListener.

Do you think that could be it?

Oct
01
3 weeks ago
Activity icon

Replied to Laravel Cashier - Undefined Variable: Token

Technically the Drop-In UI is part of that script, and it's showing up. So the script is firing, just not the button push.

Activity icon

Replied to Laravel Cashier - Undefined Variable: Token

I added the console log test:

var button = document.querySelector('#submit-button');

    braintree.dropin.create({
      authorization: "{{ Braintree_ClientToken::generate() }}",
      container: '#dropin-container'
    }, function (createErr, instance) {
      button.addEventListener('click', function () {
        console.log('test');
        instance.requestPaymentMethod(function (err, payload) {
          $.get('{{ route('payment.subscribe') }}', {payload}, function (response) {
            if (response.success) {
              alert('Payment successfull!');
            } else {
              alert('Payment failed');
            }
          }, 'json');
        });
      });
    });
</script>

But it didn't do show anything in the console.

Activity icon

Replied to Laravel Cashier - Undefined Variable: Token

No. So weird.

Btw, these are my script lines from app.blade.php:

<!-- Scripts -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://js.braintreegateway.com/web/dropin/1.20.1/js/dropin.min.js"></script>
    <script src="{{ asset('js/app.js') }}" defer></script>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.1/bootstrap3-typeahead.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />

I don't know if that affects my issue.

Activity icon

Replied to Laravel Cashier - Undefined Variable: Token

Nothing happens in the network tab either. Seems like the javascript isn't firing on the button push.

Activity icon

Replied to Laravel Cashier - Undefined Variable: Token

No. No errors in the Console. Nothing in the Console. Should have mentioned that.

Activity icon

Replied to Laravel Cashier - Undefined Variable: Token

I've looked through the links you've sent, as well as others I have found, and interestingly, I can't find a tutorial out there that uses the syntax of:

$user = User::find(1);

$user->newSubscription('main', 'monthly')
            ->trialDays(10)
            ->create($token);

Which is found in the Laravel Cashier Docs for Braintree - https://laravel.com/docs/5.8/braintree#subscriptions

And the docs say nothing about getting the Braintree Drop-in UI, or how to get the info from the UI to the controller.

The only tutorials I found use Javascript in the view to run the CC in the Drop-In UI, then simply show a modal style "Successful" box. I would think the standard practice would be to send a user to a route to show them a "Thank You" view or something like that, like I experience everywhere when I buy something online.

I have never seen the docs be so far off what I find people talking about in tutorials.

I do have the Drop-In UI showing now, but am unsure of how to connect it back to a route (Plus it isn't processing when I hit the submit button anyway)

Currently this is my view code:

@extends('layouts.app')

@section('content')

<div class="container border">
    <div class="row justify-content-center">
        <div class="col-md-12">
            @include('flash-message')
        </div>
    </div>
    <div class="row sectioncontent">
        <div class="col-md-12">
            <div id="dropin-container"></div>
            <button id="submit-button">Process for Next Year</button>
        </div>
    </div>
</div>

<script>

var button = document.querySelector('#submit-button');

    braintree.dropin.create({
      authorization: "{{ Braintree_ClientToken::generate() }}",
      container: '#dropin-container'
    }, function (createErr, instance) {
      button.addEventListener('click', function () {
        instance.requestPaymentMethod(function (err, payload) {
          $.get('{{ route('payment.subscribe') }}', {payload}, function (response) {
            if (response.success) {
              alert('Payment successfull!');
            } else {
              alert('Payment failed');
            }
          }, 'json');
        });
      });
    });
</script>

@endsection

Not sure why my button isn't doing anything. And not sure how to send my user to a route after processing, though it seems that I could change the script code to something like this:

instance.requestPaymentMethod(function (err, payload) {
          $.get('{{ route('payment.subscribe') }}', {payload}, function (response) {
            if (response.success) {
              $.get('{{ route('payment.success') }}');
            } else {
              $.get('{{ route('payment.failed') }}');
            }

And code the functions accordingly.

Sep
26
3 weeks ago
Activity icon

Replied to Laravel Cashier - Undefined Variable: Token

Yes. I searched... and searched some more. With varying instructions. I focused originally on the Laravel Cashier documentation designed specifically for Braintree on Laravel's site, as I mentioned previously. I will try the links you sent and let you know. Thanks.

Activity icon

Replied to Laravel Cashier - Undefined Variable: Token

There are so many mixed messages out there about how to use Cashier, it is quite frustrating. A token needs to be created server-side, but the examples given by Braintree's website aren't built for Cashier. Anyone have any additional wisdom or resources?

Sep
25
3 weeks ago
Activity icon

Replied to Laravel Cashier - Undefined Variable: Token

I think the token is supposed to come from the Drop-In UI from Braintree, as a form input. I'm going to work on that and see what I find out. Anyone with Cashier experience, feel free to chime in.

Activity icon

Replied to Laravel Cashier - Undefined Variable: Token

I was aware of the issue of non-support of Braintree in 6.0, so I stuck with 5..8 for this project.

How do I check the version of cashier?

I just followed the docs and used:

composer require laravel/cashier-braintree

to install it. So I am assuming since it is the "-braintree" package, that it should work.

Activity icon

Replied to Laravel Cashier - Undefined Variable: Token

This is from the basic syntax to create a subscription in Braintree through Laravel Cashier.

See the docs at https://laravel.com/docs/5.8/braintree

Activity icon

Started a new Conversation Laravel Cashier - Undefined Variable: Token

I'm setting up Cashier for Braintree.

I have the following code:

$user = Auth::user();
            //Check if user has subscribed with their credit card to Braintree
            if ($user->subscribedToPlan('main', 'annual')) {
                //Go to User home page
                // $user = Auth::user();
                return view('home', ['user' => $user]);
            } else {
                //For a user that has not put in their credit card info through Braintree yet
                $user->newSubscription('main', 'annual')
                ->trialDays(365)
                ->create($token, [
                    'email' => $user->email,
                    'phone' => $user->phone,
                ]);

            }

This is in my HomeController. When I go to /home, I get "Undefined variable: token".

I see that I don't declare the variable anywhere else, but I thought that was handled by Cashier.

What am I missing?

Sep
19
1 month ago
Activity icon

Replied to Cashier With Braintree

That makes sense. And is what I was hoping for. This particular app is fairly simple so I am not too worried about needing additional functionality from future versions. I am concerned about Braintree changing their SDK in some way that affects Cashier, but hopefully that will be a long time from now and there could certainly be an option to create a fix for it. I have already written Braintree with me concerns. Thanks!

Activity icon

Started a new Conversation Cashier With Braintree

I am using Laravel 5.8 for a project, and in the docs, it explains how to setup Cashier for Braintree payments. However, it seems that this is deprecated in 6.0, which I haven't moved to yet. Looks like Stripe is still supported. When I call the cashier for Braintree package using

composer require laravel/cashier-braintree

It seems to install correctly, but it give me the error:

Package laravel/cashier-braintree is abandoned, you should avoid using it. Use braintree/braintree_php instead

Which is simply the Braintree SDK code for PHP, not something like Cashier which is specifically designed for Laravel.

I would rather use Cashier, and some day down the road we may switch to Stripe, but we have to use Braintree now, so is anyone else using Cashier for Braintree? Should I expect it to keep working if I'm using 5.8 with the instructions in those particular docs?

Aug
21
2 months ago
Activity icon

Replied to Create New User - Only A Few Fields Reach The DB

Leave it to @cronix to remind me that there is an "M" in "MVC"!!

Wow... just wow...

Thanks a million. This community is awesome! Not sure what I would do without you!!

Activity icon

Started a new Conversation Create New User - Only A Few Fields Reach The DB

I am editing the create.blade.php and UserController from the original Auth from Laravel to add more fields.

I adjusted the form and the Controller. It creates the user, but only puts the name, email, and password into the DB.

Here's my controller:

    {

        $flashmessage = "New User Has Been Created";
       
        $names = explode(' ', Input::get('name'), 2);
        $firstname = $names[0];
       
        $phonenumber = Input::get('phone');
       
        $phonelast4 = substr ($phonenumber, -4);
       
        $newusername = $firstname.$phonelast4;
       
        $usercheck = DB::table('users')->where('username', '=', $newusername)->count();
       
        if ($usercheck > 0)  {
           // user does exist
           while (DB::table('users')->where('username', '=', $newusername)->count() > 0) {
       
            $phonelast4++;
       
            $newusername = $firstname.$phonelast4;
       
           }

           $flashmessage = "New User Has Been Created - The expected username was taken so this user's username is " . $newusername;
       
        }
       
        $request->merge(['username' => $newusername]);
        $request->merge(['password' => Hash::make($request->password)]);

        // return $request->all();
        // die();

        $user = User::create($request->all());

        return redirect()->route('edituser', ['user' => $user])->with('success', $flashmessage);

    }

As you can see, I tried "return $request->all(); which showed me all of the values entered into the form, but they don't end up in the db.

Activity icon

Replied to Loop In Controller To Set Unique Username

That point is true, however in this case the extra query might be run once every couple of years and even then the loop will end within 1 or 2 extra queries on a small DB (<5000 records)

But as always I appreciate your insight. :)

Activity icon

Replied to Loop In Controller To Set Unique Username

@cronix There is a reason you are Level 50, and I am Level 2. :)

I read up on recursion vs simple iteration, and though I am always thankful for your sage advice, I think I'm going to go with iteration on this one. If the app was larger and the functionality was needed in multiple places I would possibly use recursion.

Here's what I went with (Needs some cleaning up to be functional, but it gives me the right value:

//Testing Username Creation
        $names = explode(' ', Input::get('name'), 2);
        $firstname = $names[0];
        $phonenumber = Input::get('phone');
        $phonelast4 = substr ($phonenumber, -4);
        $newusername = $firstname.$phonelast4;
        $usercheck = DB::table('users')->where('username', '=', $newusername)->count();
        if ($usercheck > 0)  {
           // user does exist
           while (DB::table('users')->where('username', '=', $newusername)->count() > 0) {
            echo "The username " . $newusername . " ALREADY EXISTS.";
            // $updatedusername = $firstname.$updatednumber;
            $phonelast4++;
            $newusername = $firstname.$phonelast4;
           }

           //This is where the iteration completes
           echo "The username will be set as " . $newusername; 

        }
        else {
            //username does not exist
            echo "The username DOES NOT exist. Username will be set to " . $newusername;
            die();
        }
        //TestEnd
Activity icon

Replied to Loop In Controller To Set Unique Username

UPDATE: Working on a WHILE loop to handle this. Any advice is still appreciated. :)

Activity icon

Started a new Conversation Loop In Controller To Set Unique Username

When creating a new user, the system will create a unique username automatically using the user's first name and last four digits of their phone number, then check to make sure that username doesn't exist already in the user db.

In the event that this username exists (ie "Roger1234"), I want the controller to simply add 1 to the number (ie "Roger1235") and then check that username against the existing user db.

I'm not sure how to have it loop back and keep trying until it is successful. Here's what I have so far:

//Testing Username Creation
        $names = explode(' ', Input::get('name'), 2);
        $firstname = $names[0];
        $phonenumber = Input::get('phone');
        $phonelast4 = substr ($phonenumber, -4);
        $newusername = $firstname.$phonelast4;
        $usercheck = DB::table('users')->where('username', '=', $newusername)->first();
        if ($usercheck === null) {
           // user doesn't exist
           echo "The username DOES NOT exist";
           die();
        }
        else {
            echo "That username ALREADY EXISTS";
            die();
        }
        //TestEnd

After the Else, how do I tell it to add 1 to the $phonelast4 and then have it check again? Thanks!

May
24
4 months ago
Activity icon

Replied to HTML Form - Submit And File Field In Multiple Places - Same Form

@CRONIX - Makes sense.

I decided to put the upload input at the top only. It will be used more that way anyway.

There are still 2 'Update Information" buttons but that still works.

Thanks!

Activity icon

Started a new Conversation HTML Form - Submit And File Field In Multiple Places - Same Form

I have a form in my Laravel app that has a number of text fields and one file upload field.

For the sake of ease, I wanted to put the file Upload Field and Submit button at the top AND bottom of the page, so users don't have to scroll down just to update their file.

The file field at the bottom of the page works. The one at the top doesn't.

But the submit button at the top works fine if I edit text fields, but not if I choose a file.

Only the file field at the bottom of the page works.

All fields are withing the Form tags.

Ideas?

May
22
5 months ago
Activity icon

Replied to Data Shows In Console, But Not In The View

@MUSHOOD - Ok, I've changed my approach to be more Vue-centric.

Here's my code:

Admin.vue:

<template>
<div>Clients
<table>
    <tbody>
        <tr>
            <th>Name</th>
            <th>Email</th>
            <th>Phone</th>
        </tr>
        <tr v-for="client in clients" :key="client.id">
            <td>{{client.name}}</td>
            <td>{{client.email}}<td>
            <td>678-555-1212</td>
        </tr>
    </tbody>
</table>
</div>
</template>

<script>
    export default {

        data() {
            return {
                clients : [],
            }
        },

        created() {
            axios.get('./api/admin')
            .then(response => this.clients = response.data.data);
        },

    }
</script>

AdminController index function:

public function index(Request $request)
    {
        $user = Auth::user();

        $clients = DB::table('users')
            ->orderBy('name', 'asc')
            ->get();

            if($request->ajax()){
                return response()->json(compact('user','clients'));
           }
        return view('admin.index')->with(compact('user','clients'));
    }

If I dump (response) to the console I see an array called "clients" with all my records.

If I click "Network" in DevTools, and click "admin" (from /api/admin), it shows an array called "clients with all of my records.

But I can't get the records to show in the view.

I'm so close. Do you see what I'm missing?

Activity icon

Replied to Data Shows In Console, But Not In The View

@MUSHOOD - That makes sense, thought I will change the Axios query language to get clients instead of users.

Also, if I only "return response", how do I also return the view?

Activity icon

Replied to Associative Array In Console, But Not In View

@FTIERSCH - I changed that in my admin index.blade.php file, so not it is:

<admin :assoc-array="{{ json_encode($clients) }}"></admin>

But the output is the same.

Is that what you meant?

I'm also now noticing that all of the "objects" are in the parameters of the div, not down on the table where I expected them to be.

Activity icon

Started a new Conversation Associative Array In Console, But Not In View

So, in a Laravel Controller, I create an array of results using:

public function admin()
    {
        $user = Auth::user();

        $clients = DB::table('users')
            ->orderBy('name', 'asc')
            ->get();

        return view('admin.index')->with(compact('user','clients'));

Then I bring it into my Blade view with this line:

<admin :assoc-array="{{ $clients }}"></admin>

The array and its data shows up in my Vue Devtools Console under "Components", but I'm not sure how to display it in my Vue .

What do I put in app.js and the script in Admin.vue to make this iterate through a table?

So far I have:

<template>
<div>Clients
<table>
    <tbody>
        <tr v-for="client in Array">
            <td>{{client.name}}</td>
        </tr>
    </tbody>
</table>
</div>
</template>

<script>
    export default {
        }
        mounted() {
            console.log('Component mounted.')
        }
    }
</script>

The area where the data table belongs seems blank, but when I look at the Elements in the Chrome Devtool, I see:

<div assoc-array="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]">Clients
<table><tbody></tbody></table></div>

Which shows 26 object pairs which is the correct count. So I'm close, but I'm missing something. Appreciate your help!

Activity icon

Replied to Data Shows In Console, But Not In The View

Ok, so I got the array into my view using:

<admin :assoc-array="{{ $clients }}"></admin>

All of the data shows in the Vue Devtool tab as:

$attrs
assoc-array:Array[26]
0:Object
1:Object
2:Object
3:Object
etc...

What do I put in app.js and the script in Admin.vue to make this iterate through my table?

Activity icon

Replied to Pass Associative Array From Blade To Vuejs

@KFIRBA - I know this has been answered long ago, but I followed your code which got my array into the Vue console of Devtools, but I can't get it to display on the page within a table. I'm not sure what to do next. Can you advise? Thanks!

Also, when I do this, the entire array shows up in the parameters of the div created in the Vue

Activity icon

Replied to Data Shows In Console, But Not In The View

Ok... I found the underlying problem. Just not sure what to do now.

My controller is sending the data over as a $clients array.

public function admin()
    {
        $user = Auth::user();

        $clients = DB::table('users')
            ->orderBy('name', 'asc')
            ->get();

        return view('admin.index')->with(compact('user','clients'));

How do I change my code to pull the data from that array rather than the "user api"?

Activity icon

Replied to Data Shows In Console, But Not In The View

The "created" section is something from this video series tutorial: https://www.youtube.com/watch?v=bUXhGw4aQtA

I'm ultimately going to add a search form and then make the search form instantly filter the list from the query, as he explains in the two videos that follow the one in the link.

But I need the original list to show up in my view first.

And here's something interesting. I already have the Devtools installed.

I just checked the Vue tab and it shows:

data users: undefined

So there's my problem... but what is causing it?

Activity icon

Replied to Data Shows In Console, But Not In The View

@mushood Tried that. No change. Same result.

@maverickchan Tried that. No change. Also, that would simply repeat the table cell rather than the table row, which is not what I want from a display standpoint.

Activity icon

Started a new Conversation Data Shows In Console, But Not In The View

Simple query via

<template>
<div>Clients
<table>
    <tr v-for="user in users" v-bind:key="user.id">
        <td>{{user.name}}</td>
    </tr>
</table>
</div>
</template>

<script>
    export default {
        data() {
            return {
                users : {}
            }
        },
        methods: {
            loadUsers() {
                axios.get("api/user").then(({ data }) => (this.users = data.data));
            }
        },

        created() {
            this.loadUsers();
        },
        mounted() {
            console.log('Component mounted.')
        }
    }
</script>

When I load the view I get no errors on page or in the console. I can see the user array in the Network tab, click on it and choose "Preview" to see the first record of data, so I know the query is working.

But the data doesn't show on the page.

I look at the elements on the page and see:

<table></table>

The table opens and closes with nothing in it.

For some reason the v-for is not loading the data, but it isn't producing a visible error either.

What am I missing? Thanks!

Activity icon

Replied to Best Autocomplete For Laravel Projects With MySQL Backend

@willjohnathan So, I installed Laravel Passport using the docs, then found this forum post: https://stackoverflow.com/questions/50193349/how-to-authenticate-vue-js-axios-request-of-an-api-route-in-laravel

where a guy found a note in the docs about using middleware to pass the token properly. I followed the solution example and now I don't get the 401 error any longer. No errors actually.

However, I don't see the data on the page yet, so I'm looking again at my axios syntax to see what may be wrong there.

I can click on the Network tab of the Inspection Console and see the "user" entry. When I click on it, and choose Preview, I see the first record of data, so the query is running properly.

Also, As I look at the code, the table tags show on the page. There is just nothing between them.

<table></table>

Not sure why this code isn't showing the data:

<table>
    <tr v-for="user in users" :key="user.id">
        <td>{{user.name}}</td>
    </tr>
</table>
May
21
5 months ago
Activity icon

Replied to Best Autocomplete For Laravel Projects With MySQL Backend

It redirects me to my home route. No errors in the console