Webboard

Webboard > Webmastering > HTML/CSS/JavaScript > Bootstrap navs powrót do podmenu po odświeżeniu strony
Pełna wersja: Bootstrap navs powrót do podmenu po odświeżeniu strony
Aktualnie przeglądasz uproszczoną wersję forum. Kliknij tutaj, by zobaczyć wersję z pełnym formatowaniem.

matti9410

28.04.2017, 16:29
Witam,

Napisałem sobie strone z wykorzystaniem Navs z bootstrap i w każdej zakładce mam formularz który zwraca jakiś alert po wciśnięciu buttona. Moje pytanie brzmi co zrobić aby po przeładowaniu strona nie załączała pierwszej domyślnej zakładki tylko pozostawała na tej w której wykonywany był formularz ? 

Divir

28.04.2017, 17:24
Pokaż kod. Nie wiemy jak to zrobiłeś ani nic konkretnego.
Zapewne musisz zablokować domyślne działanie twojego przycisku (https://api.jquery.com/event.preventdefault/)

Chyba, że chodzi ci o to, że przechodzisz do jakiejś zakładki, klikasz jakiś przycisk, odświeża ci całą stronę wracając do poprzedniego stanu. Zależy w jaki sposób zrobiłeś te zakładki. Po przejściu do danej zakładki zapisuj jej id w np. cookies i po załadowaniu strony otwieraj to id.

matti9410

28.04.2017, 19:14
Kod html
<div class="row">
<div class="container">
<div class="tab-content">
<div id="person_data" class="tab-pane fade in active">
<div class="alert alert-info" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h2>Dane osobowe</h2>
<p>W tym miejscu możesz zmienić swoje dane osobowe.</p>
<p>Wypełnij poniższe pola następnie kliknij "Aktualizuj".</p>
</div>
{$alert}
<div class="row">
<div class="col-sm-6">
<div class="well">
<form method="POST" action="./profile.php">
<h2>Dane osobowe</h2>
<hr>
<div class="form-group">
<div class="row">
<div class="col-sm-8">
<label><h5>Imię</h5></label>
</div>
</div>
<div class="row">
<div class="col-sm-8">
<input type="text" class="form-control" name="name_user" value="{$name}">
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-8">
<label><h5>Nazwisko</h5></label>
</div>
</div>
<div class="row">
<div class="col-sm-8">
<input type="text" class="form-control" name="last_name_user" value="{$last_name}">
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-8">
<label><h5>Telefon</h5></label>
</div>
</div>
<div class="row">
<div class="col-sm-8">
<input type="text" class="form-control" name="phone_user" value="{$phone}">
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-xs-12">
<div class="text-right">
<button type="submit" name="submit_user_data" class="btn btn-primary">Aktualizuj</button>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
<div class="col-sm-6">
<div class="well">
<form method="POST" action="./profile.php">
<h2>Adres zamieszkania</h2>
<hr>
<div class="form-group">
<div class="row">
<div class="col-sm-12">
<div class="col-sm-4">
<div class="row">
<label><h5>Dom/mieszkanie</h5></label>
</div>
<div class="row">
<input type="text" class="form-control" style="width: 80%;" name="house_number_user" value="{$house_number_user}">
</div>
</div>
<div class="col-sm-7">
<div class="row">
<label><h5>Ulica</h5></label>
</div>
<div class="row">
<input type="text" class="form-control" name="street_user" value="{$street_user}">
</div>
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-12">
<div class="col-sm-4">
<div class="row">
<label><h5>Kod</h5></label>
</div>
<div class="row">
<input type="text" class="form-control" style="width: 80%;" name="postal_code_user" value="{$postal_code_user}">
</div>
</div>
<div class="col-sm-7">
<div class="row">
<label><h5>Miasto</h5></label>
</div>
<div class="row">
<input type="text" class="form-control" name="city_user" value="{$city_user}">
</div>
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-12">
<div class="text-right">
<button type="submit" name="submit_user_addres" class="btn btn-primary">Aktualizuj</button>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>

<div id="login_data" class="tab-pane fade">
<div class="alert alert-info" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h2>Dane logowania</h2>
<p>W tym miejscu możesz zmienić swoje dane logowania.</p>
<p>Wygeneruj kod (kod zostanie wysłany na e-maila) i wpisz go w pole "Kod potwierdzający".</p>
<p>Następnie uzupełnij pozostałe pola i kliknij "Aktualizuj".</p>
<p><button id="submit_gen_code" class="btn btn-primary">Generuj kod</button></p>
<p><div id="alert"></div></p>
<script src="./js/gen_code.js"></script>
</div>
<div class="row">
<div class="col-sm-6">
<div class="well">
<form method="POST" action="./profile.php">
<h2>E-mail</h2>
<hr>
<div class="form-group">
<div class="row">
<div class="col-sm-8">
<label><h5>Kod potwierdzający</h5></label>
</div>
</div>
<div class="row">
<div class="col-sm-8">
<input type="text" class="form-control" name="code_user"> {$alert_email_gen_code}
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-8">
<label><h5>Aktualny e-mail</h5></label>
</div>
</div>
<div class="row">
<div class="col-sm-8">
<input type="text" class="form-control" name="email_user">
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-8">
<label><h5>Nowy e-mail</h5></label>
</div>
</div>
<div class="row">
<div class="col-sm-8">
<input type="text" class="form-control" name="new_email_user">
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-12">
<div class="text-right">
<button type="submit" name="submit_user_email" class="btn btn-primary">Aktualizuj</button>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
<div class="col-sm-6">
<div class="well">
<form method="POST" action="./profile.php">
<h2>Hasło</h2>
<hr>
<div class="form-group">
<div class="row">
<div class="col-sm-8">
<label><h5>Kod potwierdzający</h5></label>
</div>
</div>
<div class="row">
<div class="col-sm-8">
<input type="text" class="form-control" name="code_user">
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-8">
<label><h5>Aktualne hasło</h5></label>
</div>
</div>
<div class="row">
<div class="col-sm-8">
<input type="password" class="form-control" name="password_user">
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-8">
<label><h5>Nowe hasło</h5></label>
</div>
</div>
<div class="row">
<div class="col-sm-8">
<input type="password" class="form-control" name="new_password_user">
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-8">
<label><h5>Powtórz nowe hasło</h5></label>
</div>
</div>
<div class="row">
<div class="col-sm-8">
<input type="password" class="form-control" name="double_new_password_user">
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-12">
<div class="text-right">
<button type="submit" name="submit_user_password" class="btn btn-primary">Aktualizuj</button>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>


<div id="avatar_user" class="tab-pane fade">
<div class="alert alert-info" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h2>Avatar</h2>
<p>W tym miejscu możesz zmienić swój avatar.</p>
<p>Akceptowane wymiary avatara to 250px na 250px.</p>
<p>Przeciągnij zdjecie na pole poniżej i kliknij "Wyślij na serwer".</p>
</div>

<div class="row">
<div class="col-sm-8">
<div class="well">
<h2>Prześlij plik</h2>
<hr>
<form enctype="multipart/form-data" action="./profile.php" method="POST">
<div class="form-group">
<div class="row">
<div class="col-sm-12 text-center">
<div class="row">
<div class="col-sm-3">
<div class="text-left">
<h5>Wybierz lub przeciągnij</h5>
</div>
</div>
<div class="col-sm-9">
<div class="text-right">
<button type="submit" name="submit_avatar_user" class="btn btn-primary">Wyślij na serwer</button>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12 text-center">
<input type="file" class="box_upload_file" name="avatar_user">
</div>
</div>
</div>
</form>
</div>
</div>

<div class="col-sm-4">
<div class="well">
<h2>Aktualny avatar</h2>
<hr>
<div class="row">
<div class="col-sm-12 text-center">
<img id="avatar" src="{$avatar_link_user}">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

kod php
Kod PHP:
if(isset($_POST["submit_user_data"])){
 if(empty($_POST["name_user"]) || empty($_POST["last_name_user"]) || empty($_POST["phone_user"])) 
 {
 $alert = '<div class="alert alert-warning" role="alert">
 <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
 <h2>Upsss...</h2> 
 <p>Wypełnij wszystkie pola formularza.</p>
 </div>';
 }else{
 db_connect();
 $name_user = clear($_POST['name_user']);
 $last_name_user = clear($_POST['last_name_user']);
 $phone_user = clear($_POST['phone_user']);
 
 $inquiry = "UPDATE users SET name_user='$name_user', last_name_user='$last_name_user', phone_user='$phone_user' WHERE id='$id_user'";

 if(mysql_query($inquiry)){
 $alert = '<div class="alert alert-succes" role="alert">
 <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
 <h2>Zaaktualizowano !</h2> 
 <p>Twoje dane zostały poprawnie zaaktualizowane.</p>
 </div>';
 }else{
 $alert = '<div class="alert alert-danger" role="alert">
 <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
 <h2>Upss...</h2> 
 <p>Wystąpił problem połączenia z bazą danych.</p>
 <p>Spróbuj ponownie później.</p>
 </div>';
 }
 db_close(); 
 }
 } 

jak widać jest to normalny formularz z odświeżaniem strony i w jaki sposób dostarczyć dane dla skryptu z bootstrapa (tak sądzę) jaka zakladke ma domyślnie podświetlić ?

Matslom

29.04.2017, 11:27
http://stackoverflow.com/a/19015027

matti9410

09.05.2017, 18:14
wszystko fajnie bo pokazuje id w adresie, ale czy pomógłbyś mi to przerobić tak żeby strona nie zjeżdżała do do diva o tym id ? który fragment kodu za to podpowiada i jak to przerobić? Nie znam javascriptu.
Webboard > Webmastering > HTML/CSS/JavaScript > Bootstrap navs powrót do podmenu po odświeżeniu strony