Using AJAX with Laravel GET request not working












0














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.










share|improve this question
























  • 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










  • @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


















0














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.










share|improve this question
























  • 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










  • @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
















0












0








0







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.










share|improve this question















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






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 13 '18 at 3:49

























asked Nov 13 '18 at 3:10









IneedToAskQuestions

216




216












  • 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










  • @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




















  • 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










  • @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


















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














1 Answer
1






active

oldest

votes


















0














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






share|improve this answer





















    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
    });


    }
    });














    draft saved

    draft discarded


















    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









    0














    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






    share|improve this answer


























      0














      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






      share|improve this answer
























        0












        0








        0






        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






        share|improve this answer












        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







        share|improve this answer












        share|improve this answer



        share|improve this answer










        answered Nov 13 '18 at 4:00









        Joe

        384217




        384217






























            draft saved

            draft discarded




















































            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.





            Some of your past answers have not been well-received, and you're in danger of being blocked from answering.


            Please pay close attention to the following guidance:


            • 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.




            draft saved


            draft discarded














            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





















































            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







            Popular posts from this blog

            Bressuire

            Vorschmack

            Quarantine