0

私はウェブサイトを作ろうとしていて、コンテンツをロードするために ajax を使用しています。問題は、送信ボタンをクリックすると別のページが読み込まれているのに、戻ってきたときに ajax が読み込まれていないことです。自分のページをそのままにしたいのです。

ポップ状態イベントを使用してデータをストックし、pushState で履歴のリンクを変更できることは知っていますが、機能しません。ポップ状態イベントは、ボタンをクリックしたときにのみ機能しますが、フォームを送信すると、pushState が呼び出されても機能しません。

これが私のコードです**コメント済み

**//On those button click, pop state event work**
**// Those button calls ajax function that print content below**

<div onclick='afficheInformations("Ajax/getInternet.php")' id="boutonServices">
<a class="button" href="#informations" role="button" >
<span>Internet</span>
<div class="icon">
    <div class="fa fa-check"></div>
</div>
</a>
</div>

<div onclick='afficheInformations("Ajax/getTelevision.php")' id="boutonServices">
<a class="button" href="#informations" role="button">
<span>Télévision</span>
<div class="icon">
    <i class="fa fa-remove"></i>
    <i class="fa fa-check"></i>
</div>
</a>
</div>
<div id="features-wrapper">
<div id="future">

//This is the content loaded after the button click, its a select that calls ajax
<center><label style="color:white">Voir votre <a style="color:red"href="Speedtest.php" target="_blank"> vitesse</a> actuelle</label></center>
        <div class="container">
        <div class="row">
        <div class="3u 12u(mobile)">
        <section>
        <table class="table">
      <tr>                                               
    <th class="fontInternet" style="color:white">Vitesse de téléchargement</th>
       </tr>
      <tr>
      <th> 

  <select id="telechargement" onchange="addInternet()">
     <option value="non selectionne">Non selectionné</option>
     <option value="1-9">1-9 Mbits/s</option>
     <option value="10-19">10-19 Mbits/s</option>
     <option value="20-49">20-49 Mbits/s</option>
     <option value="50">50+ Mbits/s</option>
  </select>
        </th>
        </tr>
    </table>

**//Finally this is the final content loaded on my main page
//At end, there is my submit, and there is where I want the onclick to keep 
// my data saved when i come back, as I said, pop state dont work on this...**
<li class="price_block">
<form method="POST" action="Fournisseurs/'.$nom.'.php">
<h3 name="services" value="internet">'.$nom.'</h3>
<div class="price">
<div class="price_figure">
<span class="price_number">$'.$prix.'</span>
    <br>
<span class="price_tenure">par mois</span>
</div>
 </div>
 <ul class="features">
   <li>Technologie<br>'.$tech.'</li>
   <li>Téléchargement<br>'. $telechargementData.' Mb/s</li>
 </ul>
<div class="footer">
<input type="submit" onClick="pushHistorique()" class="action_button" value="Consulter" /></input>
 </form>
 </div>
</li>

それは私のポップ状態関数です:

window.onpopstate = function(event) {
alert("popstate");
}

それは私のプッシュ状態関数で、私のサムビットクリックで呼び出されます:

function pushHistorique(){
history.pushState({informations: window.currentInformation}, "title",window.location.href );
 }

これが明確であることを願っています。ご注意いただきありがとうございます。

4

0 に答える 0