locked
Partial page only hit once by Ajax - why ? RRS feed

  • Question

  • User518677258 posted

    I am new to using partial pages. My intent is to periodically refresh a major part of the page using AJAX.  An example of a page refresh is found here.

    https://www.learnrazorpages.com/razor-pages/ajax/partial-update

    I have created that sample application and the button calls the script /AJAX when button pushed first time only

    I dont know if this pattern can work when page segment ( partial ) must get new data... suggestions ??

    ----------------------

    <h1>AjaxPartial</h1>

    <h2>Ajax</h2>
    <p><button class="btn btn-primary" id="load">Load</button></p>
    <div id="grid"></div>

    @section scripts{
    <script>

    alert ("Updating... ");
    $(function () {
    $('#load').on('click', function () {
    $('#grid').load('/ajaxpartial?handler=CarPartial');
    });
    });
    </script>
    }

    T

    public class AjaxPartialModel : PageModel
    {
    private ICarService _carService;
    public AjaxPartialModel(ICarService carService)
    {
    _carService = carService;
    }
    public List<Car> cars { get; set; }
    public void OnGet()
    {

    }

    public PartialViewResult OnGetCarPartial() // the scaffolding knows something up and creates a PartialViewResult type. how cool is that
    {
    List<Car> Cars = _carService.GetAll();
    return Partial("_CarPartial", Cars);

    }
    }

    Thanks !

    Monday, December 23, 2019 7:48 PM

Answers

  • User475983607 posted

    The coe overwrites the button which breaks the click event handler.  That's why it works once.  

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, December 23, 2019 10:03 PM

All replies

  • User475983607 posted

    The coe overwrites the button which breaks the click event handler.  That's why it works once.  

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, December 23, 2019 10:03 PM
  • User518677258 posted

    That would explain why the alert is never again used.  When I right mouse click to view source I do see the ajaxPartial html but not the content that was added.  On one attempt I was sure I saw the grid from the partial view. but I cannot recall how I did.

    At the center of my quest is to have part of the page periodically updates itself from the database.  So what would work ?

    I tried putting an entire page refresh into _partial as in

    <script type="text/javascript">
    setInterval("my_function();", 10000);

    function my_function() {
    window.location = location.href;
    }
    </script>

    But that doesnt seem to trigger the partials onGet

    Any suggestions ??

    Monday, December 23, 2019 10:43 PM
  • User-854763662 posted

    Hi andrewcw ,

    I tested the code as per the tutorial you provided , the CarPartial method would be called every time when clicking the button and then show the data in the partial view.

    At the center of my quest is to have part of the page periodically updates itself from the database.  So what would work ?

    You could directly put the load method in the setInterval( ) like below :

    <script>    
            function my_function() {
                $('#grid').load('/ajaxpartial?handler=CarPartial');
            }
    
            setInterval("my_function();", 10000);
    </script>

    Here is my test project , you could check the difference between yours.

    Best Regards ,

    Sherry

    Tuesday, December 24, 2019 7:24 AM
  • User-474980206 posted

    use the browser network debug tools. you are either getting a cached version or an error

    Tuesday, December 24, 2019 4:18 PM