[JavaScript]Odświeżanie ramki Opcje

[miras]

Witam, mój problem polega na tym, że robię taki mały edytor css i po lewej stronie mam taki podgląd online i jak coś zmienię w pliku css to ta strona, które jest w iframe w podglądzie online powinna się zauktualizować od razu, teraz pokażę mniej więcej jak mam zbudowaną edycję pliku css



{sprawdzenie czy formularz został wysłany, jeżeli tak to nadpisanie pliku css}

{pobranie pliku css}


{Formularz, iframe, w którym jest pobrany wyżej plik css, submit}


jak proponujecie rozwiązać mój problem ?

[b4rt3kk]

Zamiast iframe zastosuj jakieś bardziej przyjazne rozwiązanie, np. pobieraj dane ajaxem do zwyczajnego diva. Jak już się uprzesz przy tych ramkach to przy kliknięciu submita dodaj również odświeżanie ramki.

[HTML] pobierz, plaintext 
 document.frames["nazwaRamki"].location.reload();
[HTML] pobierz, plaintext 

[miras]

Muszę zostać przy iframe...

zrobiłem tak:

[HTML] pobierz, plaintext 
<iframe id="mobi" name="mobi" src="sciezka..." height="600" width="294"></iframe>
 
.
.
.
 
<input type="submit" value="Zapisz" onsubmit="document.frames["mobi"].location.reload();"/>
[HTML] pobierz, plaintext 

i nie działa..

[XML] pobierz, plaintext 
<script type="text/javascript">
window.setInterval(function(){
var iframe = document.getElementById('mobi');
    iframe.src = iframe.src;
},1000);
</script>
[XML] pobierz, plaintext 

coś takiego niby odświeża ramkę, ale jak zmienię w css np. tło to po odświeżeniu nadal jest to samo, dopiero jak odświeżę całą stronę (f5) to pojawia się nowy kolor...

jakby było jakieś fajne rozwiązanie w jquery działające podobnie jak iframe to mogłoby już być..

[b4rt3kk]

To formularz ma akcję submit, nie input. Dopisz sobie funkcję, która przechwyci domyślną akcję submit, ewentualnie wychwyci przeładowanie strony z formularzem.

Jak wiesz, css jest cache-owany przez przeglądarkę, by tego uniknąć wygeneruj losowy ciąg znaków przy pliku css.

[HTML] pobierz, plaintext 
<link rel="stylesheet" type="text/css" href="style.css?<?php echo date('d:m:Y, h:i:s').time(); ?>" />
[HTML] pobierz, plaintext 

Coś w tym stylu.

[miras]

[HTML] pobierz, plaintext 
style.css?<?php echo date('d:m:Y, h:i:s').time(); ?>
[HTML] pobierz, plaintext 

dodałem to i niestety po odświeżeniu nadal brak zmian...

[b4rt3kk]

Oczywiście plik w ramce ma rozszerzenie PHP? Jeśli tak to rzuć okiem na źródło, czy generuje datę i czas, jeśli nie to wymyśl sobie jakiś inny losowy ciąg znaków.

[miras]

tak, to plik php i generuje czas i date ( sprawdziłem )...

[zegarek84]

timestap dodatkowo nie zawsze działa by wyłączyć cache plików js i css (niektóre przeglądarki to pomijały - chyba zwłaszcza starszy IE), lepiej go dać w adresie i przekierowanie na plik php np. w htaccess...

po za tym nie musisz korzystać z iframe - podejrzewam, iż napisałeś tak, by nie nadpisywać styli na stronie, ale podgląd możesz zrobić całkiem inaczej... dajesz treść do jakiegoś div'a z unikalnym id i przy każdym selektorze możesz dodać przedrostek tego id... a jeśli chcesz to w iframe to przecież też nie musisz dodawać tam zewnętrznych styli i odświerzać iframe, wystarczy dodać/zaktualizować tam odpowiednie pode "style"... do .document w iframe możesz się dostać np. w ten sposób (oczywiście w tej samej domenie ;]):
http://www.w3schools.com/jsref/prop_frame_...entdocument.asp
dawno w to się nie bawiłem gdyż nie jestem programistą z zawodu... firebug i inne narzędzia konsolowe dostępne w innych przeglądarkach Twoim przyjacielem + trochę dokumentacji i pomyślunku ;]

tak, to plik php i generuje czas i date ( sprawdziłem )...

to zależy jak to sprawdziłeś - pamiętam swoje początki... to że sam plik generuje nic nie znaczy - sprawdziłeś, czy przeglądarka i strony nie zbuforowała?? może samo odświeżenie nie pomaga?? jak już wspominałem narzędzia konsolowe, mozilla to firebug + ewentualnie live http headers ale w sumie przy firebug'u nie potrzebne...

Ten post edytował zegarek84 21.11.2012, 22:16:24

[miras]

Tak, ale twoja rada z tą zmianą tła to mi nie o to chodzi, bo opcję zmiany tła podałem tylko przykładowo, mam w <textarea> cały plik style.css i wlasnie w tym textarea go edytuję i nadpisuję i właśnie dlatego chcę ten podgląd online, a co do zrobienia tego w divie - możesz trochę bardziej to wytłumaczyć ? z js/jquery jestem kompletnie początkujący..

@@@ dodam jeszcze, że na tej stronie, którą mam w tej ramce musi być dostęp do przechodzenia do innych podstron w tej ramce wiec nie wiem czy da się w divie to zrobić..