PaulMaxOS

Considering the time and effort to do all of what forge is doing, I would say it’s in fact much cheaper to pay forge then to do it yourself. Time is money...

Try removing json_encode and pass your data as array

Well, first of all i wouldn’t consider something to be a SPA only because of turbolinks... but well, that’s kind of side note.

If you want an SPAish app without the hassle of an SPA then you might want to have a look at Livewire or Inertia. Personally I’m using inertia since it was introduced with Laravel 8 and love it.

Furthermore I guess you could have a look at the successor of turbolinks: https://github.com/hotwired/turbo

I believe one can use cashier without having a user as billable object:

https://laravel.com/docs/8.x/billing#billable-model

Cashier is assuming that it’s the user model which is billable but you can actually define that in the .env

So changing environment and using the billable trait on the model of your choice should get you going

Just out of interest - who’s saying that $request->all() is a good refactor?

Honestly, I can’t think of a situation where I would do this or where I’d approve a PR where this is being done.

To me it looks like people are suggesting this to be a proper refactor because they think that less code is always better or so...

I am working on two apps at the moment using Inertia and I love it.

But Laravel doesn’t force you to use it. It comes as an option if you’re using the jetsteam starterkit which is also optional and where you can also opt to blade / livewire.

So if you don’t want to use it, you have many options:

• don’t use any of the starterkits as Laravel itself is frontendagnostic
• use breeze if you are more on the laravel/ui side of things
• use Jetstream with Blade/Livewire option

But I would recommend at least playing around with inertia if

• you’re familiar with Vue and like it
• you have been come up with an API and SPA approach before

@ziaakbari I feel you... especially when this is on prod. Can you show your app.js file? And could you please have a look, if you're using ziggy? If that's the case, please run php artisan ziggy:generate and then npm run prod with your prod .env - and / or inspect your ziggy.js file!

... and did you also run npm run prod ?

Do you run prod build for npm after you push your code to the server? Furthermore, have you tried to set your app env to production instead of using „local“?

If it's fine for you to use a payment gateway, then you might want to have a look at Mollie and Laravel Cashier Mollie integration:

https://github.com/laravel/cashier-mollie

Mollie offers Paypal as payment method...

Are you looking for a way to make your JavaScript respond to the screen width or do you look for a css solution? If the latter: which css framework are you using?

Are you looking for a way to make your JavaScript respond to the screen width or do you look for a css solution? If the latter: which css framework are you using?

Give this a try:

// In your child component
setup(props, { emit }) {
   emit('mobileMenu', this.isMobile);
}

// in your parent component
onMobileMenu (isMobile) {
	console.log(isMobile)
}

I believe what @nimrod was trying to say is that you're missing that you need a many-to-many relationship:

• A project task can be associated to many employees
• A single employee can be associated to many project tasks

So you need a pivot table for this relationship and your model relationship methods should be using $this->belongsToMany().

This is kind of a 101 thing and that's why - I assume - @nimrod said that you better watch the Laravel from Scratch series as this will cover all those basics.

Yep, looks to me like a good addition. Was about to suggest the same thing for collapsing the item again.

Thanks for the compliment! Glad that I was able to help.

I don't mean the model side of things, but the vue side of things. Your question about the toggle was about a hardcoded list of categories with only one subcategory and I said, that you need to make it dynamic if you're going to have more then one subcategory and / or dynamic data.

So you might want to try something like this:

<template>
  <ul id="category">
    <li v-for="item in items">
      <router-link v-if="!item.subcategories.length" :to="{ name: 'Category', params: {slug: item.slug }}">{{item.title}}</router-link>
      <a href="#" @click="toggleSub(item.id)" v-else>{{item.title}}</a>
      <ul v-show="activeSubCategory === item.id" v-if="item.subcategories.length">
        <li v-for="subitem in item.subcategories">
          <router-link :to="{ name: 'Category', params: {slug: subitem.slug }}">{{subitem.title}}</router-link>
        </li>
      </ul>
    </li>
  </ul>
</template>
<script>
export default {
  data: function () {
    return {
      activeSubCategory: 0,
      items: []
    }
  },
  props: {
      surl: String
  },
  methods: {
    toggleSub(id) {
      this.activeSubCategory = id
    },
    getItems() {
      axios
        .get("https://domain.ex/json/get-category")
        .then((response) => {
          this.items = response.data.items;
          //console.log(response.data.items);
        })
        .catch(error => {
          console.log(error);
      });
    }
  },
  created() {
    this.getItems();
  },
  mounted(){
    
  }
};
</script>

I don't mean the model side of things, but the vue side of things. Your question about the toggle was about a hardcoded list of categories with only one subcategory and I said, that you need to make it dynamic if you're going to have more then one subcategory and / or dynamic data.

So you might want to try something like this:

<template>
  <ul id="category">
    <li v-for="item in items">
      <router-link v-if="!item.subcategories.length" :to="{ name: 'Category', params: {slug: item.slug }}">{{item.title}}</router-link>
      <a href="#" @click="toggleSub(item.id)" v-else>{{item.title}}</a>
      <ul v-show="activeSubCategory === item.id" v-if="item.subcategories.length">
        <li v-for="subitem in item.subcategories">
          <router-link :to="{ name: 'Category', params: {slug: subitem.slug }}">{{subitem.title}}</router-link>
        </li>
      </ul>
    </li>
  </ul>
</template>
<script>
export default {
  data: function () {
    return {
      activeSubCategory: 0,
      items: []
    }
  },
  props: {
      surl: String
  },
  methods: {
    toggleSub(id) {
      this.activeSubCategory = id
    },
    getItems() {
      axios
        .get("https://domain.ex/json/get-category")
        .then((response) => {
          this.items = response.data.items;
          //console.log(response.data.items);
        })
        .catch(error => {
          console.log(error);
      });
    }
  },
  created() {
    this.getItems();
  },
  mounted(){
    
  }
};
</script>

Hey @app_dev, that’s what I said in one of your previous questions. You need to adapt the toggle to a more dynamic solution if you have dynamic data with more then one subcategory.

Well, could be lots of different reasons, but to me the first thing that pops up is your internet connection maybe being disrupted from time to time.

Have you tested it using different internet connections, like mobile vs wifi?

If it's only on wifi, you may want to reset your router and give it try again.

Then you might want to mark that as solved, so others know that this was the issue and that it has nothing to do with CORS

Ok first, you need to setup your relationships on your models:

Category Model:

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Categorie extends Model
{
    use HasFactory;

	public function subcategories()
    {
        return $this->hasMany(Subcategorie::class);
    }
}

Subcategory Model

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Subcategorie extends Model
{
    use HasFactory;

	public function categorie()
    {
        return $this->belongsTo(Categorie::class);
    }
}

Then in your Controller for CategorieController you could now do something like this:

use App\Models\Categorie;

public function index()
{
	$items = Categorie::all()->load('subcategories');
	return Response::json(array('items' => $items));
}

Btw. maybe you rename your models to Category and Subcategory instead of Categorie and Subcategorie as both are misspelled. It will make things a lot easier in the long run.

Ok first, you need to setup your relationships on your models:

Category Model:

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Categorie extends Model
{
    use HasFactory;

	public function subcategories()
    {
        return $this->hasMany(Subcategorie::class);
    }
}

Subcategory Model

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Subcategorie extends Model
{
    use HasFactory;

	public function categorie()
    {
        return $this->belongsTo(Categorie::class);
    }
}

Then in your Controller for CategorieController you could now do something like this:

use App\Models\Categorie;

public function index()
{
	$items = Categorie::all()->load('subcategories');
	return Response::json(array('items' => $items));
}

Btw. maybe you rename your models to Category and Subcategory instead of Categorie and Subcategorie as both are misspelled. It will make things a lot easier in the long run.

Well, could be lots of different reasons, but to me the first thing that pops up is your internet connection maybe being disrupted from time to time.

Have you tested it using different internet connections, like mobile vs wifi?

If it's only on wifi, you may want to reset your router and give it try again.

What do you mean with series? I'll be happy to help, but I'm about to leave computer for a while. So try to provide as much information possible. How do your models look like?

Could you do a console.log(response) inside of your then() and show what's printed out in your browsers console?

Ahh wait, sorry - i was a bit too fast suggesting this package. I missed that you're actually using two different tables for all of that.

So you just need to setup your model relationship so a category can have many subcategories and a subcategory belongsTo a category.

Then you should be able to use with('subcategories') and your subcategories will be included in you category.

Don't know what your controller is returning, but you simply need to assign the response of it to your data:

data () {
    return {
        data: []
    }
},
methods: {
    add (id) {
        axios.post('add/' + id)
        .then((response) => {
            this.data = response // if your actual data is somehwat wrapped, make sure you do the same here
        })
     },  
}

Hey @app_dev ,

if you don't want to take care of the ins and outs of adjacency list, then you might just want to have a look at this package: https://github.com/staudenmeir/laravel-adjacency-list

Hey @app_dev ,

the idea shown below isn't really dynamic as it depends only on this one subcategory you have in your template. If the subcategories will come in dynamically or if there are more then one, you will need to adapt this of course, but for now i think this should work:

<template>
  <ul>
    <li><a href="#">Category 1</a></li>
    <li><a href="#">Category 2</a></li>
    <li><a href="#">Category 3</a></li>
    <li>
    <a href="#" @click="toggleSub()">Category 4</a>
      <ul v-show="showSub">
        <li><a href="#">Sub Category 1</a></li>
        <li><a href="#">Sub Category 2</a></li>
        <li><a href="#">Sub Category 3</a></li>
      </ul> 
    </li>
    <li><a href="#">Category 5</a></li>
  </ul>  
</template>
<script>
export default {
  data: function () {
    return {
      showSub: false
    }
  },
  props: {
      surl: String
  },
  methods: {
      toggleSub() {
          this.showSub = this.showSub ? false : true
      }
  }
};
</script>

I believe what @nimrod was trying to say is that you're missing that you need a many-to-many relationship:

• A project task can be associated to many employees
• A single employee can be associated to many project tasks

So you need a pivot table for this relationship and your model relationship methods should be using $this->belongsToMany().

This is kind of a 101 thing and that's why - I assume - @nimrod said that you better watch the Laravel from Scratch series as this will cover all those basics.

Hey @app_dev ,

the idea shown below isn't really dynamic as it depends only on this one subcategory you have in your template. If the subcategories will come in dynamically or if there are more then one, you will need to adapt this of course, but for now i think this should work:

<template>
  <ul>
    <li><a href="#">Category 1</a></li>
    <li><a href="#">Category 2</a></li>
    <li><a href="#">Category 3</a></li>
    <li>
    <a href="#" @click="toggleSub()">Category 4</a>
      <ul v-show="showSub">
        <li><a href="#">Sub Category 1</a></li>
        <li><a href="#">Sub Category 2</a></li>
        <li><a href="#">Sub Category 3</a></li>
      </ul> 
    </li>
    <li><a href="#">Category 5</a></li>
  </ul>  
</template>
<script>
export default {
  data: function () {
    return {
      showSub: false
    }
  },
  props: {
      surl: String
  },
  methods: {
      toggleSub() {
          this.showSub = this.showSub ? false : true
      }
  }
};
</script>

Well, all of that depends on your specific setup. Say you have your app, filesystem and database on the same hardware instance without any backups and dumps, then I guess you’ll have a hard time.

If your dB is decoupled from your app instance, for example by using a PaaS solution like AWS RDS then your data obviously won’t be lost as the dB is decouple from the instance your app is running on.

If you are planning to „destroy“ your current server then

• dump your DB
• backup your filesystem
• launch a new instance
• install app
• source new DB from your dump
• import your files from the backup of your filesystem
• test if your app is running fine
• switch DNS to point to your new server
• if everything’s going fine, you probably can „destroy“ your old server

Then you’ll get covered by simply watching this episode:

https://laracasts.com/series/eloquent-relationships/episodes/6

Well, all of that depends on your specific setup. Say you have your app, filesystem and database on the same hardware instance without any backups and dumps, then I guess you’ll have a hard time.

If your dB is decoupled from your app instance, for example by using a PaaS solution like AWS RDS then your data obviously won’t be lost as the dB is decouple from the instance your app is running on.

If you are planning to „destroy“ your current server then

• dump your DB
• backup your filesystem
• launch a new instance
• install app
• source new DB from your dump
• import your files from the backup of your filesystem
• test if your app is running fine
• switch DNS to point to your new server
• if everything’s going fine, you probably can „destroy“ your old server

Well, if it’s only about the styling aspects, just add some padding to your and I think you’ll have the result you want to have.

I could imagine that datatable tries to loop over your row to inspect its elements. If that’s the case this could end up in the error message you had posted because there’s nothing to loop over.

But as I said, I’m no expert at datatables, just sounds reasonable to me.

So again, I would just add padding to my cells to get the styling that I want. It’s also way cleaner

Well, if it’s only about the styling aspects, just add some padding to your and I think you’ll have the result you want to have.

I could imagine that datatable tries to loop over your row to inspect its elements. If that’s the case this could end up in the error message you had posted because there’s nothing to loop over.

But as I said, I’m no expert at datatables, just sounds reasonable to me.

So again, I would just add padding to my cells to get the styling that I want. It’s also way cleaner

Hmm... I haven’t worked with datatables yet and I’m on my phone so it’s hard to read the code, but maybe at least one or two ideas:

• why do you add the row at the end? No clue, but maybe datatable doesn’t like empty rows?

• why do you have no tbody wrapping your rows?

Just wrap your code inside three backticks, three ones before your code and three after!

https://docs.github.com/en/github/writing-on-github/creating-and-highlighting-code-blocks#fenced-code-blocks

Well it would help to see your code but it looks like you’re trying (I guess in your loop) to get the property length on a variable that is undefined. So I would have a look at your variables and check their values

Looking at your style and js imports you are already using bootstrap. I guess that’s why @snapey basically asked why you just don’t use the bootstrap popovers?

😂 everyone here hitting POST at the same time

Your route is using POST, but a link - and that’s what you are using - will do a GET to the url. So you need to convert your link to a form and submit a POST request to your route.

You might want to use Global Properties for this: https://v3.vuejs.org/api/application-config.html#globalproperties

Hi @stevenh ,

i switched to inertia the moment Laravel 8 came out and I love it. If you know Vue you will work yourself in very quickly as it's basically Vue but without the routing part which is handled through your routes and controllers.

Personally I love the simplicity of having both frontend and backend together without the hassle of having a separate SPA where I basically need to come up with everything from scratch and do the same stuff all over. On top I don't need to take care of any application load balancing or reverse proxying because everything is tied together when it comes to URL structure.

But I do here you regarding the SEO stuff. As far as I understand things, you are not bound to the Inertia stuff. So you can return regular Views on certain routes that could stick to the old fashioned way. It's your controller so it's up to you what you do inside of it.

When you already know that you'll have a mobile app for which you'll need an API then you could try to build things, having this in mind. But if you aren't sure about it, personally I would start just building things and progress as needed.

P.S.: Maybe you give this podcast a shot to find out more about Inertia: https://fullstackradio.com/127

Ah sorry, thought it was 5.7. But anyway: make sure all the requirements for 5.8 are installed: https://laravel.com/docs/5.8#server-requirements

And then just give it a try with the composer stuff.

Also, please have a look at this: https://laravel.com/docs/5.8#web-server-configuration

Yeah to me it was more like - okay i'm about to answer this question in the one thread just to see it popping up in a new thread.

Well that doesn't mean it will work on every other machine. To me it looks like you have some sort of a different setup running locally. And depending on this setup your app is working - locally.

You need to make sure that laravel has all the requirements it needs. In your other thread you mentioned that it's a laravel 5.7 app. So please look at the requirements and make sure that every single one of them is installed on your server:

https://laravel.com/docs/5.7#server-requirements

Furthermore, searching for `Undefined class constant 'HADER_CLIENT_IP' leads to a composer package that needs to updated using Laravel 5.7; it should be:

"fideloper/proxy": "^4.0"

So you might want to have a look at your composer.json and make sure that it's like that and run composer update after changing it.

Why are you asking the same thing with two questions (https://laracasts.com/discuss/channels/laravel/505-error) ?'

@sr57 has the right fix for you I believe and I would prefer this approach over the pollyfill that I was suggesting over at the other thread.

Can you try this:

composer require symfony/polyfill-iconv