Блог

Я использую jquery и ajax для отправки данных с одной страницы на другую и добавления их в виде содержимого html к элементу. Я использую маршрутизацию AngularJS, чтобы иметь одностраничное приложение для всех моих страниц. Теперь на моей домашней странице с помощью jquery, когда я отправляю данные в модальное поле, я перенаправляю без перезагрузки на страницу, используя (AngularJS), которая отображает данные . Проблема в том, что когда событие запускается в первый раз, я успешно перенаправляю, но данные данные не загружаются. Если я открываю модальное и запускаю событие снова, данные загружаются нормально. Это просто не работает в первый раз. Изучив подробнее , я понял , что мою страницу результатов нужно сначала посетить один раз , а затем моя функция выполняется правильно и загружает данные на страницу . Я хотел бы знать, как это исправить.

JQUERY (при готовности документа) :

  $("#submitSearch").click(()=>{
        
      var inptVal = $("#ModalInput")[0].value; //get input from modal box 
      if(!inptVal){
        alert("Enter a product ");
      }else{
        $.ajax({
          url:'searchResults.php', //this is the php script that returns the html 
          type:'POST',
          data:{
            searchItem:inptVal,
          },
          cache:false,
          success:(data)=>{
            console.log({data}); //the returned html is correct 
            window.location.href='../php/index.php#!/results'; //this is where I redirect 
            $('.res-center').empty(); //empty the element 
            $('.res-center').append(data); //insert the html to the element 
          },
          error:(xhr)=>{
            alert(xhr);
          }
        })
 }
 

AngularJS для маршрутизации :

 var app = angular.module("myApp" , ["ngRoute"]);


app.config(($routeProvider)=>{
  $routeProvider
    .when("/" , {templateUrl:"main.php"})
    .when("/login" , {templateUrl : "login.php"})
    .when("/register" , {templateUrl : "register.php"})
    .when("/results" , {templateUrl : "showResults.php"});
});
 

searchResults.php который возвращает HTML-элементы из данных mongodb

 <?php

  require '../vendor/autoload.php';

  if(isset($_POST['searchItem'])){
    
     try{
      $m = new MongoDBClient("mongodb://127.0.0.1/");
      $db = $m ->ECommerce;
      $collection = $db->products;
      $item = $_POST['searchItem'];
      $cursor = $collection->find( array('title'=> new MongoDBBSONRegex($item ,'i') ) );  
      $count = 0;
      foreach($cursor as $doc){
        $count  ;
      }

      if($count==0){
        echo "<h1>  No items found </h1>";
        exit();
      }else{
        $prods = $collection->find( array('title'=> new MongoDBBSONRegex($item ,'i') ) );  
        foreach ($prods as $dc){

          echo 
            " <div class= 'product category__products'>
                  <div class='product__header'>
                    <img src = ".$dc["image"]." />";
                  
  
          echo "  
                 </div>     
                  <div class= 'product__footer'>
                    <h2> ".$dc["title"]." </h2>
                    <h5> Public Stores </h5>
                    
                    <div class= 'product__price'>
                        <h4> $".$dc["price"]." </h4>
     
                    </div>
                    <a href='#'><button type='submit' class='product__btn'>Add To Cart</button></a>
                  </div>
              </div>
            ";
  
        }  
        exit();
      }

     }catch(Exception $e){
       echo $e->getMessage();
       exit();
     }   

  }else{
    echo "No input";
    exit();
  }




?>
 

Для получения каких-либо разъяснений, пожалуйста, спрашивайте.