Laravel 4 javascript ajax request

Question

I performed and Ajax request when a button is being clicked, to make a get request and update a div,but my page doesn't seem to update at all.but using the debugging tools i realised that:

it gives error: Cannot set property 'innerHTML' of null 

But when i save my xmlhttp.responseText to a variable and i alert it alert this:

<div>

This is a new Ajax Message !! Thanks
</div>

which is the content of msg.blage.php that am requesting for.Though am new to using ajax and laravel.

Below here is the code:

register.blade.php

<button id="btn" onclick="makerequest('{{route('msg')}}','succesMessage')">Update!!</button>
<div id="successMessage"></div>

msg.blade.php

<div>
This is a new Ajax Message !! Thanks
</div>

script.js

function makerequest(serverPage, objID) {
var obj = document.getElementById(objID);
xmlhttp.open("GET", serverPage);
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
  var data = xmlhttp.responseText;
  alert(data);
obj.innerHTML=data;
}
}
xmlhttp.send(null);
}

routes.js

Route::get('/msg',['as' => 'msg', 'uses' => 'HomeController@msg']);

HomeContoller.php

public function msg()
    {
        return View::make('msg');
    }

The error shows on line "sortable.js:14";

and that i think is the second each()

Answer 1

<button id="btn" onclick="makerequest('{{route('msg')}}','succesMessage')">Update!!</button>
<div id="successMessage"></div>

You have a typo in the first line, succesMessage instead of successMessage . It's trying and failing to find an element with the ID succesMessage as a result.