Dynamically inserting HTML into View through AJAX with JS Array in LARAVEL

Question

Hi I am new to Laravel having a situation like: I have a HTML form and loading some HTML like "partial.blade.php" using AJAX in Same form, that is working perfectly with static HTML but,

I want to send a JS Array of object with AJAX Request to Dynamically loading HTML Content like: Drop down in same form

Could any Guide me how Can i Pass JS Array to that piece of HTML so i can Render that Array in "partial.blade.php"

here is my code

this is main form HTML & Array i want to pass with this AJAX Request

var dataArray = $('#data1').val();

code included at last in HTML Form Page

$.ajax({                
            url: "add-property/residential",
            type: 'GET',
            dataType: 'html',
            data: { dataArr: dataArray },
            contentType: false,
            processData: false,
            success: function(response) {
                console.log(response);
                $('#dynamicForm').html(response);
                //alert(response);
            },
            error: function(response) {
                console.log(response);
                alert('Error....!');
            }
        });

here is my Route

Route::any('admin/add-property/residential',function() { return view('admin.residential'); });

all i want to receive that JS array in this piece of HTML that is dynamically loading

I'm more than sure that var dataArray = $('#data1').val(); must be returning a string. Even if that was a json array in php, it's still a string after adding to an input value. Did you try using JSON.parse() on it to convert it into JSON? — Fr0zenFyr
– Fr0zenFyr, Commented Mar 19, 2019 at 18:59

Tim Lewis · Accepted Answer · 2019-03-20 12:56:26Z

2

When you want to return the contents of a view() to an AJAX request, you can store the view as a variable and return in a JSON response:

public function apiResponse(){
  $html = view("admin.residential")->render();

  return response()->json(["html" => $html]);
}

In your AJAX request, you can access this as response.html:

success: function(response) {
  $("#dynamicForm").html(response.html);
}

To pass a variable from AJAX to the view, you can use the request object. At the top of your routes/api (or routes/web.php, whichever you're using) add use Illuminate\Http\Request;, then in your Route inject that into the function:

<?php
use Illuminate\Http\Request;
...
Route::any('admin/add-property/residential',function(Request $request){ 
  ...
});

Not that $request is available, you can access the data being sent in the AJAX request via $request->input("dataArr");, and pass that to the view partial using ->with();:

Route::any('admin/add-property/residential',function(Request $request){ 

  $dataArr = $request->input("dataArr");
  $html = view("admin.residential")->with(["dataArr" => $dataArr])->render();

  return response()->json(["html" => $html]);
});

edited Mar 20, 2019 at 12:56

answered Mar 19, 2019 at 18:53

Tim Lewis

29.5k14 gold badges82 silver badges109 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Zeeshan DaDa Over a year ago

I Really appreciate your response but Actually I have some serverside variable in partial HTML when i load that HTML with AJAX Server Respond Undefined Variables

Zeeshan DaDa Over a year ago

to over come that problem i want to send that Server side array variable Through Ajax so that when i load partial html i also want to receive that passed array variable again

Zeeshan DaDa Over a year ago

can you guide me how to receive array variable sent from AJAX in Route Closure and pass to partial view

Zeeshan DaDa Over a year ago

thanks for your time again I just learned how to put all view in a single variable to pass away. I have just fix my issue by removing the "processData: false" from AJAX now I am moving forward.

Alberto Guilherme · Accepted Answer · 2019-03-20 11:50:49Z

0

According to this

Instead of return view('admin.residential');

You need to do this: return (string) View::make('admin.residential');

Edit

If you want to receive data from the ajax, and then load the view, you could do something like this:

Import the Request.

use Illuminate\Support\Facades\Response;

Make your rote point to a specific method on a controller.

Route::any('admin/add-property/residential',"YourController@returnView");

Make your function to handle the data

public function returnView(Request $request){
    $data = $request->all(); // Here you will have all the data you send via AJ
    //Make sure the $data has all the necessary parameter to load the view
    $view = View::make('my_view', $data);//Here you will pass the data to the view
    return response()->json(["html" => $$view->render()]); // Using @TimLewis return
}

edited Mar 20, 2019 at 11:50

answered Mar 19, 2019 at 18:47

Alberto Guilherme

3582 silver badges13 bronze badges

2 Comments

Zeeshan DaDa Over a year ago

i have no issue to render partial html without server side variables

Alberto Guilherme Over a year ago

@ZeeshanDaDa I make a change to the code, I hope i can help you with your problem

Collectives™ on Stack Overflow

Dynamically inserting HTML into View through AJAX with JS Array in LARAVEL

2 Answers 2

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related