CODEWITHSUNDEEP
javascriptphpjqueryajax
trazy97
trazy97

Reputation: 43

How to load a view through ajax with data

I want to load a another page content below my current page when i'm clicking on a div.

When you click .work-item div it will get the id and fetch the data to that relavant id from work/getListData function so that function will return json encoded data object with relavant data. now I want to pass those into detail-view,php and show it below the .work-item div

please advice

//js

$(".work-item").live('click', function () {
  var id= this.id;
  $.ajax({
    type: 'GET',
    url: '/work/getistData/',
    data: {id : id},
    success: function (data) {
      var json_obj = $.parseJSON(data);
      console.log(data);
    }
  });
});

//controller 
public function listpage ($data) { 
  //this will give a page
}

public function getistData () { 
  $id = $this->request->getQuery('id');
  $data = $this->helper->fetchList($id )
  // echo json_encode($data);
  return $this->listpage($data);
}

Upvotes: 1

Views: 211

Answers (2)

Per Henrik Jakobsson
Per Henrik Jakobsson

Reputation: 163

If I understood your question correctly, then you should execute this piece of code inside your AJAX success function:

let div = document.createElement("div");
div.innerHTML = data;
document.getElementsByTagName("body")[0].appendChild(div);

Upvotes: 1

joy
joy

Reputation: 164

This is my first answer in SO.

Usually what I do first is to break the problem into small pieces. Test and if succeed then move forward.

Step-1:

console.log(id)
  • In your JavaScript click callback, Make sure you get the correct id.

In jQuery:

var id = $(this).attr("id"); //if your required id in HTML id element.

var id = $(this).data("id"); //if your required id in HTML data-id element.

Step-2: I'm not sure your PHP function name is getistData() or getListData().

Step-3: var_dump($id) in your PHP getistData() function, just be sure you received the correct id.

I personally think if you use GET, You can also send parameter like this:

In JavaScript:

url: '/work/getistData/' + id,

Then receive in php => getistData($id)

Step-4: I'm not sure why you use $$ in 

$$this->helper->fetchList($id)

Step-5: I'm sure the correct function is JSON.parse()

You should write:

var json_obj = JSON.parse(data);

Ok then. Best of luck.

Upvotes: 0

Related Questions