Using AJAX with Laravel GET request not working
What I am trying to do is to load @yield('somecontent.content') on a master a master layout dynamically. Just for informative purposes I have the following:
Controller:
public function someFunction()
{
//DB logic here
return view('/exampleView')
->with($dataset1)
->with($dataset2)
->with($dataset3)
->with($dataset4);
}
Route:
Route::get('someRoute', ['as' => 'theRoute', 'uses' => 'someController@someFunction']);
Ajax/jquery function:
$(document).ready(function(){
$('.ajaxClick').click(function(event){
//event.preventDefault();
$.ajax(
type: 'GET',
url: 'theRoute',
datatype: 'json',
success: function(data){
console.log('AJAX loaded something');
},
error: function(){
console.log('AJAX load did not work');
}
});
});
});
View logic:
<a class="ajaxClick" data-name="{{
route('theRoute') }}" href="#">Testing Ajax</a>
In the a tag I had the route originally which would work but would refresh the page and not load without refreshing.
How it flows is, click the link in the navbar and load the Laravel route dynamically in a set field which is allocated for views to load in by using @yield('somecontent').
Also another question would be, how would you implement this in Laravel? If need anything else comment.
Thankyou!
P.S
This example of a dashboard is pretty much what I want to do, how the content loads straight away without any refreshing of the page.
jquery ajax laravel laravel-5
asked Nov 13 '18 at 3:10
IneedToAskQuestionsIneedToAskQuestions
216
add a comment |
What I am trying to do is to load @yield('somecontent.content') on a master a master layout dynamically. Just for informative purposes I have the following:
Controller:
public function someFunction()
{
//DB logic here
return view('/exampleView')
->with($dataset1)
->with($dataset2)
->with($dataset3)
->with($dataset4);
}
Route:
Route::get('someRoute', ['as' => 'theRoute', 'uses' => 'someController@someFunction']);
Ajax/jquery function:
$(document).ready(function(){
$('.ajaxClick').click(function(event){
//event.preventDefault();
$.ajax(
type: 'GET',
url: 'theRoute',
datatype: 'json',
success: function(data){
console.log('AJAX loaded something');
},
error: function(){
console.log('AJAX load did not work');
}
});
});
});
View logic:
<a class="ajaxClick" data-name="{{
route('theRoute') }}" href="#">Testing Ajax</a>
In the a tag I had the route originally which would work but would refresh the page and not load without refreshing.
How it flows is, click the link in the navbar and load the Laravel route dynamically in a set field which is allocated for views to load in by using @yield('somecontent').
Also another question would be, how would you implement this in Laravel? If need anything else comment.
Thankyou!
P.S
This example of a dashboard is pretty much what I want to do, how the content loads straight away without any refreshing of the page.
jquery ajax laravel laravel-5
asked Nov 13 '18 at 3:10
IneedToAskQuestionsIneedToAskQuestions
216
What does your browser console say? Also check the Network tab. FYI, it'sdataType, notdatatype(case is important). Also, the error callback has information passed to it which you can use. For example ~error: (jqXhr, status, error) => { console.error(status, error) }
– Phil
Nov 13 '18 at 3:52
Another issue, your response must be JSON. Otherwise it will fail.
– itachi
Nov 13 '18 at 3:54
@itachi actually, with the incorrectdatatype, it won't matter 🙂
– Phil
Nov 13 '18 at 3:54
yeah. Agreed. It shouldn't matter as of now.
– itachi
Nov 13 '18 at 3:55
add a comment |
What I am trying to do is to load @yield('somecontent.content') on a master a master layout dynamically. Just for informative purposes I have the following:
Controller:
public function someFunction()
{
//DB logic here
return view('/exampleView')
->with($dataset1)
->with($dataset2)
->with($dataset3)
->with($dataset4);
}
Route:
Route::get('someRoute', ['as' => 'theRoute', 'uses' => 'someController@someFunction']);
Ajax/jquery function:
$(document).ready(function(){
$('.ajaxClick').click(function(event){
//event.preventDefault();
$.ajax(
type: 'GET',
url: 'theRoute',
datatype: 'json',
success: function(data){
console.log('AJAX loaded something');
},
error: function(){
console.log('AJAX load did not work');
}
});
});
});
View logic:
<a class="ajaxClick" data-name="{{
route('theRoute') }}" href="#">Testing Ajax</a>
In the a tag I had the route originally which would work but would refresh the page and not load without refreshing.
How it flows is, click the link in the navbar and load the Laravel route dynamically in a set field which is allocated for views to load in by using @yield('somecontent').
Also another question would be, how would you implement this in Laravel? If need anything else comment.
Thankyou!
P.S
This example of a dashboard is pretty much what I want to do, how the content loads straight away without any refreshing of the page.
jquery ajax laravel laravel-5
asked Nov 13 '18 at 3:10
IneedToAskQuestionsIneedToAskQuestions
216
What I am trying to do is to load @yield('somecontent.content') on a master a master layout dynamically. Just for informative purposes I have the following:
Controller:
public function someFunction()
{
//DB logic here
return view('/exampleView')
->with($dataset1)
->with($dataset2)
->with($dataset3)
->with($dataset4);
}
Route:
Route::get('someRoute', ['as' => 'theRoute', 'uses' => 'someController@someFunction']);
Ajax/jquery function:
$(document).ready(function(){
$('.ajaxClick').click(function(event){
//event.preventDefault();
$.ajax(
type: 'GET',
url: 'theRoute',
datatype: 'json',
success: function(data){
console.log('AJAX loaded something');
},
error: function(){
console.log('AJAX load did not work');
}
});
});
});
View logic:
<a class="ajaxClick" data-name="{{
route('theRoute') }}" href="#">Testing Ajax</a>
In the a tag I had the route originally which would work but would refresh the page and not load without refreshing.
How it flows is, click the link in the navbar and load the Laravel route dynamically in a set field which is allocated for views to load in by using @yield('somecontent').
Also another question would be, how would you implement this in Laravel? If need anything else comment.
Thankyou!
P.S
This example of a dashboard is pretty much what I want to do, how the content loads straight away without any refreshing of the page.
jquery ajax laravel laravel-5
jquery ajax laravel laravel-5
asked Nov 13 '18 at 3:10
IneedToAskQuestionsIneedToAskQuestions
216
asked Nov 13 '18 at 3:10
IneedToAskQuestionsIneedToAskQuestions
216
edited Nov 13 '18 at 3:49
IneedToAskQuestions
asked Nov 13 '18 at 3:10
IneedToAskQuestionsIneedToAskQuestions
216
asked Nov 13 '18 at 3:10
IneedToAskQuestionsIneedToAskQuestions
216
asked Nov 13 '18 at 3:10
IneedToAskQuestionsIneedToAskQuestions
216
216
What does your browser console say? Also check the Network tab. FYI, it'sdataType, notdatatype(case is important). Also, the error callback has information passed to it which you can use. For example ~error: (jqXhr, status, error) => { console.error(status, error) }
– Phil
Nov 13 '18 at 3:52
Another issue, your response must be JSON. Otherwise it will fail.
– itachi
Nov 13 '18 at 3:54
@itachi actually, with the incorrectdatatype, it won't matter 🙂
– Phil
Nov 13 '18 at 3:54
yeah. Agreed. It shouldn't matter as of now.
– itachi
Nov 13 '18 at 3:55
add a comment |
What does your browser console say? Also check the Network tab. FYI, it'sdataType, notdatatype(case is important). Also, the error callback has information passed to it which you can use. For example ~error: (jqXhr, status, error) => { console.error(status, error) }
– Phil
Nov 13 '18 at 3:52
Another issue, your response must be JSON. Otherwise it will fail.
– itachi
Nov 13 '18 at 3:54
@itachi actually, with the incorrectdatatype, it won't matter 🙂
– Phil
Nov 13 '18 at 3:54
yeah. Agreed. It shouldn't matter as of now.
– itachi
Nov 13 '18 at 3:55
What does your browser console say? Also check the Network tab. FYI, it's
dataType, not datatype (case is important). Also, the error callback has information passed to it which you can use. For example ~ error: (jqXhr, status, error) => { console.error(status, error) }– Phil
Nov 13 '18 at 3:52
What does your browser console say? Also check the Network tab. FYI, it's
dataType, not datatype (case is important). Also, the error callback has information passed to it which you can use. For example ~ error: (jqXhr, status, error) => { console.error(status, error) }– Phil
Nov 13 '18 at 3:52
Another issue, your response must be JSON. Otherwise it will fail.
– itachi
Nov 13 '18 at 3:54
Another issue, your response must be JSON. Otherwise it will fail.
– itachi
Nov 13 '18 at 3:54
@itachi actually, with the incorrect
datatype, it won't matter 🙂– Phil
Nov 13 '18 at 3:54
@itachi actually, with the incorrect
datatype, it won't matter 🙂– Phil
Nov 13 '18 at 3:54
yeah. Agreed. It shouldn't matter as of now.
– itachi
Nov 13 '18 at 3:55
yeah. Agreed. It shouldn't matter as of now.
– itachi
Nov 13 '18 at 3:55
add a comment |
1 Answer
1
active
oldest
votes
if you still want to use jQuery, you can use something like this:
$(document).ready(function(){
$('.ajaxClick').click(function(event){
//event.preventDefault();
$.ajax({
type: 'GET',
url: 'theRoute',
datatype: 'json',
success: function(data){
$('#main-wrapper').html(data);
},
error: function(){
console.log('AJAX load did not work');
}
});
});
});
I suggest you try and study javascript frameworks. The link you sent is using Angular JS, and the functionalities you need are built into them, and is called SPA or Single Page Application
Uncomplete list of JS Framework:
- Angular
- React
- Vue
answered Nov 13 '18 at 4:00
JoeJoe
384217
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53273219%2fusing-ajax-with-laravel-get-request-not-working%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
if you still want to use jQuery, you can use something like this:
$(document).ready(function(){
$('.ajaxClick').click(function(event){
//event.preventDefault();
$.ajax({
type: 'GET',
url: 'theRoute',
datatype: 'json',
success: function(data){
$('#main-wrapper').html(data);
},
error: function(){
console.log('AJAX load did not work');
}
});
});
});
I suggest you try and study javascript frameworks. The link you sent is using Angular JS, and the functionalities you need are built into them, and is called SPA or Single Page Application
Uncomplete list of JS Framework:
- Angular
- React
- Vue
answered Nov 13 '18 at 4:00
JoeJoe
384217
add a comment |
if you still want to use jQuery, you can use something like this:
$(document).ready(function(){
$('.ajaxClick').click(function(event){
//event.preventDefault();
$.ajax({
type: 'GET',
url: 'theRoute',
datatype: 'json',
success: function(data){
$('#main-wrapper').html(data);
},
error: function(){
console.log('AJAX load did not work');
}
});
});
});
I suggest you try and study javascript frameworks. The link you sent is using Angular JS, and the functionalities you need are built into them, and is called SPA or Single Page Application
Uncomplete list of JS Framework:
- Angular
- React
- Vue
answered Nov 13 '18 at 4:00
JoeJoe
384217
add a comment |
if you still want to use jQuery, you can use something like this:
$(document).ready(function(){
$('.ajaxClick').click(function(event){
//event.preventDefault();
$.ajax({
type: 'GET',
url: 'theRoute',
datatype: 'json',
success: function(data){
$('#main-wrapper').html(data);
},
error: function(){
console.log('AJAX load did not work');
}
});
});
});
I suggest you try and study javascript frameworks. The link you sent is using Angular JS, and the functionalities you need are built into them, and is called SPA or Single Page Application
Uncomplete list of JS Framework:
- Angular
- React
- Vue
answered Nov 13 '18 at 4:00
JoeJoe
384217
if you still want to use jQuery, you can use something like this:
$(document).ready(function(){
$('.ajaxClick').click(function(event){
//event.preventDefault();
$.ajax({
type: 'GET',
url: 'theRoute',
datatype: 'json',
success: function(data){
$('#main-wrapper').html(data);
},
error: function(){
console.log('AJAX load did not work');
}
});
});
});
I suggest you try and study javascript frameworks. The link you sent is using Angular JS, and the functionalities you need are built into them, and is called SPA or Single Page Application
Uncomplete list of JS Framework:
- Angular
- React
- Vue
answered Nov 13 '18 at 4:00
JoeJoe
384217
answered Nov 13 '18 at 4:00
JoeJoe
384217
answered Nov 13 '18 at 4:00
JoeJoe
384217
answered Nov 13 '18 at 4:00
JoeJoe
384217
384217
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53273219%2fusing-ajax-with-laravel-get-request-not-working%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
What does your browser console say? Also check the Network tab. FYI, it's
dataType, notdatatype(case is important). Also, the error callback has information passed to it which you can use. For example ~error: (jqXhr, status, error) => { console.error(status, error) }– Phil
Nov 13 '18 at 3:52
Another issue, your response must be JSON. Otherwise it will fail.
– itachi
Nov 13 '18 at 3:54
@itachi actually, with the incorrect
datatype, it won't matter 🙂– Phil
Nov 13 '18 at 3:54
yeah. Agreed. It shouldn't matter as of now.
– itachi
Nov 13 '18 at 3:55