JS + PHP Ajax and page update logic check

in that tutorial, in the grocerycontroller@store, they are just returning a message

// property `success` will be sent back as json
return response()->json(['success'=>'Data is successfully added']);

which is what they are displaying in the

<div class="alert alert-success" style="display:none"></div>

using the success event of the ajax call

success: function(result) {
    // unhide the element with the class of .alert (which has display:none)
    jQuery('.alert').show();

    // populate .alert element with the 'success' property returned from the ajax call
    jQuery('.alert').html(result.success); 
}});

So it is updating a div on the page with the returned result (it's not an alert like alert('hi'))

A while back there was this big discussion, see the ajax in this post, of course view the final answer for the fix.

https://laracasts.com/discuss/channels/laravel/why-are-not-appearing-all-conferences-that-belong-to-the-clicked-category

Thats one way, build it in jquery and fill the division with the response data.

I also have put a couple of very starter ajax guides, not advanced, but just the basics.

First is mostly when you want to POST and save data https://laracasts.com/discuss/channels/guides/jquery-ajax-post-example

Second is mostly for data retrieval to display or whatever: https://laracasts.com/discuss/channels/guides/jquery-get-response

Again just very basic starter guides mainly for someone new who has never used ajax yet.

@Cronix

That makes sense.

I guess where i am confused is there is no PHP on the page, so i assume that in a scenario where i would be printing customer information for example (name, phone, emai) in a loop, i would do that with Javascript, or still do that foreach with PHP but pass the variables to Javascript to access for ajax call for post/update/delete?

@jlrdw thanks i will have a read and let you know if i have any questions :)

I guess where i am confused is there is no PHP on the page, so i assume that in a scenario where i would be printing customer information for example (name, phone, emai) in a loop, i would do that with Javascript, or still do that foreach with PHP but pass the variables to Javascript to access for ajax call for post/update/delete?

I'm not really following. It really depends on what you're actually trying to do.

so i assume that in a scenario where i would be printing customer information for example (name, phone, emai) in a loop, i would do that with Javascript

If that is being returned in the response from the ajax request (in success method), then yes, you'd loop over the data using jQuery.each() or something. That assumes there are multiple records returned, as opposed to a single record. Like if your ajax call was returning multiple $users (for example), then you'd loop. If it was returning a single $user, then you'd just use the properties. It all depends on what you're returning from the ajax call.

Maybe if you described, in steps, the scenario you are envisioning, I could give a better answer.

@Cronix

Scenario

Each client can have many cards Client details page list all cards belonging to client in an array

User can add card, delete card from client details page

If user deletes card, delete request sent to remove card from client (where id = clientid) Card is removed from database On success recieved and card is removed from the dom

If user adds card, post request send to add card where id = client id Card added to database On success recieved add card to dom

Thats basically what im trying to achieve with ajax :)

Ok, those are going to be 2 separate ajax calls (one for delete, one for adding), going to 2 separate controller methods (delete/store).

So in each of those 2 controller methods, you'd just return what you need and take appropriate action in the success method.

To create, it's basically just like the tutorial, except instead of just returning a status message, you'd also (or instead) return the grocery that was just created.

public function store(Request $request)
{
        $grocery = new Grocery();
        $grocery->name = $request->name;
        $grocery->type = $request->type;
        $grocery->price = $request->price;

        $grocery->save();

        return response()->json([
            'success'=>'Data is successfully added',
            'grocery' => $grocery->toArray()
        ]);
}

And then in the success event, it would be like

success: function(result) {
    // unhide the element with the class of .alert (which has display:none)
    jQuery('.alert').show();

    // populate .alert element with the 'success' property returned from the ajax call
    jQuery('.alert').html(result.success); 

    // create a div to hold the grocery data
    var div = '<div>Name: ' + result.grocery.name + ', Type: ' + result.grocery.type + '</div>';

    // insert it somewhere in the dom
    jQuery('#some-div').html(div);
}});

And in the html of the page, you'd have <div id="some-div"></div> or something, which would get populated with the contents of the div just created

The delete would be similar, except you'd just pass back the id of the thing that was deleted, and remove it from the dom.

assume you have this on the page

<div id="grocery-3">some data for grocery with id of 3</div>
<div id="grocery-4">some data for grocery with id of 4</div>

and in the success event:

success: function(result) {
    // let's say id 4 was sent to be deleted, and being returned as 'id'

    // find that #grocery and remove it from the dom
    jQuery('#grocery-' + result.id).remove();
}

Of course, there is a lot to this and I didn't explain 100% of everything, but that's the gist of it. It's a lot to go over...

@Cronix

That is explained very well. It has nothing to do with the PHP because the dom elements are already loaded on page load and i am using the javascript to either insert a new element or hide/delete and element.

Thank you.