dimanche 22 mars 2015

Jquery tabs lose CSS on form submit and page refresh

I have a problem and could not locate a solution on the web and so far my own experiments have not worked either. I am using Jquery horizontal tabs and the problem is on html form submit the form submits and the alert box pops up... while the alert box is up and before it is clicked ok the jquery tabs lose all of their CSS... once the alert box is clicked ok the page refreshes and then the horizontal tabs are okay. How can I keep the jquery CSS stable during form submit and while the alert box is displayed?


Here is the horizontal tabs code:



<!-- J Query Files Follows -->

<link rel="stylesheet" href="../jquery-ui-1.11.4.custom/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>

<!-- End Of J Query -->


Here is the HTML for display of the tabs:



<div id="tabs">
<ul>
<li><a href="#tabs-1">Info</a></li>
<li><a href="#tabs-2">Private Profile</a></li>
<li><a href="#tabs-3">Public Profile</a></li>
<li><a href="#tabs-4">Update Personal Info</a></li>
<li><a href="#tabs-5">Update Business Info</a></li>
<li><a href="#tabs-6">Advertise</a></li>
</ul>
<div id="tabs-1"></div>
<div id="tabs-2"></div>
<div id="tabs-3"></div>
<div id="tabs-4"></div>
<div id="tabs-5"></div>
<div id="tabs-6"></div></div>


Here is the code for the alert and refresh:



// If the database insert fails let's print a query failed warning
if (mysqli_affected_rows($conn) == 0) {

echo 'Profile Update Failed';
}

// If the database insert succeeded we can alert the user and refresh the page
else {

echo "<script>alert('Business Profile Update Successful!');</script>";
echo "<script>window.location=window.location</script>";

}


Here is what the horizontal tabs look like when the alert box is displayed and not yet clicked ok:


enter image description here


Here is what the horizontal tabs look like before form submit/alert-box:


enter image description here


Aucun commentaire:

Enregistrer un commentaire