Odświeżanie div zamiast iframe Opcje

[Malinaa]

Witam,
sie macie

Chciałbym rozwiązać taki problem:

mam na stronie iframe w którym jest sonda i wszystko byłoby ok, tylko no właśnie sonada jest w iframe.

Jak zrobić div'a, który będzie działał jak iframe, będzie się odświeżał bez przeładowania całej strony (po kliknięciu submit).

IFRAME: <iframe src="elementy/sonda/sonda.php" width="170" height="200" scrolling="no" frameborder="0"></iframe>

DIV: <div id="div_iframe"><div> ?

Gdyby nie możliwość głosowania odświeżane div (iframe) nie byłoby potrzebne, wystarczyłoby tylko include("elementy/sonda/sonda.php");
wewnątrz div'a, ale można, ba nawet trzeba głosować i dlatego musi być odświeżany div (iframe działa, ale nie spełnia oczekiwań).

Kłopotliwe szczegóły na które trzeba zwrócić uwagę:

w pliku sonda.php znajduję się przycisk formularza <input type="submit"> i właśnie w tym cały problem, aby po wybraniu opcji głosowania w sondzie i kliknięciu input SUBMIT (Głosuj) przeładował się tylko sam DIV, w którym powinna być sonda, a nie cała strona.

Jak to zrobić, bardzo proszę o pomoc.

[ces]

piszesz w dziale ajax a w podanym przykladzie nie wykorzystales ajaxa a zamiast iframe mozesz np tak

$.ajax({
url: 'elementy/sonda/sonda.php',
success: function(data) {
$('.nazwa_diva').html(data);
}
});

przy uzyciu jquery

[Malinaa]

Witam,
ajax, jquery znam tyle o ile, ale myślę że w ajax'ie można to zrobić, dla tego piszę tutaj.

Wpisałem coś takiego j.w. w kod strony z nadzieją że zadziała,

<script type="text/javascript">
$.ajax ({
url: 'elementy/sonda/sonda.php',
success: function(data) {
$('.nazwa_diva').html(data);
}
});
</script>

nie działa, albo nie wiem jak zastosować?

[chomiczek]

@Malina musisz zaimplementować bibliotekę jquery wcześniej, oraz oczywiście przeedytować linijkę url.
jeżeli Twój div ma jakieś ID to powinno to wyglądać tak:

Kod

$('#nazwa_diva').html(data);

[Malinaa]

Sorry, I don't understand?

Można jaśniej,
jak zrobić takie odświeżanie w divie na stronie zamiast iframe?

Czy ktoś wie więcej?

Nie znalazłem informacji jak zrobić takie odświeżanie (js, ajax, jquery) ?

Może nie opisałem problemu jak trzeba?

Jest taka strona , na której jest sonda (na podstawie sondaży).
Ta sonda jest w iframe src="elementy/sonda/sonda.php", chciałbym aby zrobić ją w divie (src=?).
Tak, aby po kliknięciu w button (głosuj) nie otwierało (odświeżało) całej strony, tylko boksa z sondą.

Iframe dziła tutaj jak trzeba, tyle tylko że jest to iframe, a chciałbym taki oświeżany div.

Inna rzecz, którą chciałbym w ten sposób rozwiązać:
W iframe szerokość i wysokość jest stała, może w ten sposób wysokość boxa zmieniałby się zależnie od zawartości po odświeżeniu diva.

Jeśli ktoś byłby tak miły.
Dziękuje za pomoc.

Mam coś takiego

[HTML] pobierz, plaintext 
<script type="text/javascript" language="JavaScript">
 <!--
 var object = false;
 
 if (window.XMLHttpRequest) object = new XMLHttpRequest();
 else if (window.ActiveXObject) object = new ActiveXObject("Microsoft.XMLHTTP");
 
  function getData(dataSource, divID) {
  object.onreadystatechange = function() {
   if (object.readyState == 4) document.getElementById(divID).innerHTML=object.responseText;
  }
  object.open("GET",dataSource,true);
  object.send(null);
 }
 
 function odswiez() {
  getData('test_v3.php?ile=1','idSonda');
 }
 // -->
</script>
[HTML] pobierz, plaintext 

[HTML] pobierz, plaintext 
<input type="submit" onclick="odswiez()" value="Odśwież">
<div id="idSonda"></div>
<script language="javascript">
<!--
 odswiez();
// -->
</script>
[HTML] pobierz, plaintext 

Div w jakiś sposób jest odświeżany jeśli w funkcji odswiez() nazwa pliku test_v3.php jest nie prawidłowa (tzn. kiedy plik nie istnieje).
Jeśli podam prawodłową ścieżkę i nazwę pliku nie odświeża.

Co jest tutaj nie tak?

I jak zrobić, aby <input type="submit" onclick="odswiez()" value="Odśwież"> znajdował się w pliku test_v3.php wewnątrz diva?

Tak, aby w kodzie html bylo tylko <div id="idSonda">Zawartość strony test_v3.php</div> po kliknięciu w test_v3.php przycisku <input> odświeżyło sondę.

Nie wiem jak to napisać, ba nie wiem jak pytać.

Zapytam wprost. Czy jest tu jakiś mądrala?

[chomiczek]

na początku strony podłącz sobie bibliotekę jQuery.. możesz to zrobić tak, dodając 2 poniższe linijki w sekcji head:

Kod

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.4.2");</script>

a następnie masz taki kod:

Kod

<script type="text/javascript">
function odswiez() {
  $("#idSonda").load("elementy/sonda/sonda.php"); //spowoduje wpisanie zawartości pliku z podanej lokalizacji do div idSonda
}
</script>
<div id="idSonda"></div>
<script>
  $("#idSonda").load("elementy/sonda/sonda.php");
</script>
<input type="submit" onclick="odswiez()" value="Odśwież">

czasem może się okazać, że jednak load() z funkcji odswiez() nie działa tak jak powinnien to ja wtedy używam $.ajax

Kod

$.ajax({
        type: "POST",
        url: "elementy/sonda/sonda.php"
        success: function(msg){
            $("#idSonda").html(msg); //spowoduje wpisanie do diva zwróconej zawartości pliku
        }
     });
    });

pisane z palca więc jakieś drobne błędy mogą być.

EDT: zmieniłby jeszcze onclick z subimit, z uwagi na to, że trzeba wyłączyć normalną akcję (submit).. onclick możesz podpiąć do czegokolwiek..

Ten post edytował chomiczek 5.08.2010, 14:05:31

[Malinaa]

Na ten czas, jest tak

[HTML] pobierz, plaintext 
<script type="text/javascript">
 function odswiez() {
  $.ajax ({
   type: "POST",
   url: "elementy/sonda/sonda.php",
   success: function(data) {
   $("#idSonda").html(data);
  }
 });
 
 //$("#idSonda").load("elementy/sonda/sonda.php");
 
 document.formSonda.submit(); // Co Tutaj 
 }
</script>
 
<div id="idSonda"></div>
<script>
 $("#idSonda").load("elementy/sonda/sonda.php");
</script>
[HTML] pobierz, plaintext 

W pliku sonda.php umieściłem input type button zamiast submit. Czy o tym pisałeś, aby zmienić?

sonda.php
<form action="$_SERVER['PHP_SELF']" method="post" name="formSonda">
<input type="button" value="Odśwież" onclick="odswiez()">
</form>

Uwagi: Ścieżka do pliku: elementy/sonda/sonda.php . Sonda wyświetlana jest na stronie index.php .

Problem: co dodać w funkcji odswiez() lub gdzie indziej, aby po kliknięciu button Odśwież, który jest w pliku sonda.php wyświetlanym w divie na stronie index.php prezkazywane były niezbędne zmienne dla sondy.

W funkcji dodałem: document.formSonda.submit(); ale po kliknięciu zamiast być na stronie index.php wędruję do boxa sonda.php
jeżeli natomiast w formularzu dam w action index.php nie zlicza głosów w box'ie sondy.

Inna rzecz. Myślałem, że ten kod w ogóle nie działa, ponieważ testowałem w Internet Explorer, ale spróbowałem w FireFoxie i tutaj działa.
Czy ten kod jest uniwersalny i może działać na Internet Explorer również, ponieważ u mnie na tej przeglądarce nie działa prawidłowo, coś fiksuje i po sondzie echo?

--
Uruchomiłem skrypt dzisiaj i sonda pokazała się również w Internet Explorer, gdzie wczoraj było echo czyli nic w divie.
Wygląda tutaj że w IE też działa tylko IE zapamiętuje pierwszą zawartość diva i nie wyświetla zmieniających się losowo sond w sondażach.

Mam już prawie gotowe sondaże, skrypt sonda.php generuje losowo jedną z sond i potrzebuję Waszej pomocy, aby ukończyć sondę w divie.
W divie wyświetlana powinna być losowa sonda i FireFox działa bez kłopotu, ale w IE jest widoczna cały czas jedna pierwsza sonda?

Pojawił się kłopot z polskimi znakami w divie obsługiwanym przez powyższy kod.
Można temu jakoś zaradzić?

I wspomniany button Głosuj (na obrazku) co zrobić, aby zliczane były głosy i aby działał w divie ?
Button jest w formularzu sondy - plik sonda.php, a plik sonda.php wyświetlany jest w divie na stronie index.php .


--
Zrobiłem sondę na gotowe, działa jak trzeba div zamiast iframe.
Po prostu extra, jestem niemożliwy, dzięki chomiczek

Zlicza głosy, bez kłopotu, zabezpieczenie przed nabijeniem glosów też działa i polskie znaki są.
Zastanawiam się jeszcze nad przeglądarką IE, dlaczego nie pokazuje losowych sond tylko jedną sondę, kiedy inne przeglądarki nie mają oporów?

Dla tych, którzy szukają rozwiązanie jest tutaj:

[HTML] pobierz, plaintext 
<script type='text/javascript'>
        function odswiez() {
         var sonda = document.formSonda.form_kid.value;     
         var glos = 0;
 
         for (i=0; i < document.formSonda.glos.length; i++) {
          if ( document.formSonda.glos[i].checked == true )
          glos = document.formSonda.glos[i].value;
         }
 
         //if (sonda != '') alert('Sonda, ' + sonda + '!');
         //if (glos != '') alert('Głos, ' + glos + '!');
 
         $.ajax ({
          type: 'POST',
          url: 'sonda.php?form_kid='+sonda+'&glos='+glos,
          success: function(data) {
           $('#idSonda').html(data);
          }
         });
 
         // $('#idSonda').load('sonda.php');
        }
       </script>
[HTML] pobierz, plaintext 

Kind Regards

Ten post edytował Malinaa 7.08.2010, 13:02:06

[chomiczek]

taka mała uwaga, jeżeli masz załączone jquery (a masz) to zamień
document.formSonda.form_kid.value

na $('#formSonda).value() i podobnie w pozostałych przypadkach.

co do użycia buttona to nie dokładnie o to mi chodziło raczej o coś typu:

Kod

<img src="jakisObraz.jpg" alt="" id="idB" onclick="odswiez();" />

[Malinaa]

Nie wiem o co chodzi, ale próbowałem zamienić

zamieniłem: var sonda = document.formSonda.form_kid.value;
na: var sonda = $('#formSonda').val('form_kid');
i tak nie działa?

zamiast: <input type="button" value=".$sonda_glosuj." class="inputSonda" onclick="odswiez()">
dałem: <img src="grafika/button_green_60x22.gif" alt="" id="idSondaButton" onclick="odswiez();" onMouseOver="idSondaButton.src='grafika/button_orange_60x22.gif'" onMouseOut="idSondaButton.src='grafika/button_green_60x22.gif'">
ale img w ogóle mi tutaj nie pasuje.
Strona, którą piszę jest wielojęzyczna dla img musiałbym zrobić obrazki z napisami (Głosuj, Vote itd. tylko po co. Input zmienia też kolor po najechaniu myszką, a tutaj musiałem dodać onMouseOver, onMouseOut).
W input value mam słowo w jakim chcę języku, a w img. Jak to zrobić lepiej?

Można więcej szczegółów o co chodzi?

[chomiczek]

var sonda = $('#formSonda').val('form_kid');

poczytaj tutaj: http://api.jquery.com/val/

powinno być: var sonda = $('#form_kid').val();

zamiast: <input type="button" value=".$sonda_glosuj." class="inputSonda" onclick="odswiez()">
dałem: <img src="grafika/button_green_60x22.gif" alt="" id="idSondaButton" onclick="odswiez();" onMouseOver="idSondaButton.src='grafika/button_orange_60x22.gif'" onMouseOut="idSondaButton.src='grafika/button_green_60x22.gif'">
ale img w ogóle mi tutaj nie pasuje.
Strona, którą piszę jest wielojęzyczna dla img musiałbym zrobić obrazki z napisami (Głosuj, Vote itd. tylko po co. Input zmienia też kolor po najechaniu myszką, a tutaj musiałem dodać onMouseOver, onMouseOut).
W input value mam słowo w jakim chcę języku, a w img. Jak to zrobić lepiej?

poczytaj odnośnie click albo submit
jeden z pierwszych przykładów odnośnie subimita, rozwiązuje Twój problem.

[Malinaa]

Funkcja odswiez() teraz wygląda całkiem pięknie, bez petli i działa znakomicie

[HTML] pobierz, plaintext 
<script type="text/javascript">
        function odswiez() {
         var sonda = $('#form_kid').val();
         var glos = $('input:radio[name=glos]:checked').val();
 
         $.ajax ({
          type: 'POST',
          url: 'elementy/sonda/sonda.php?form_kid='+sonda+'&glos='+glos,
          success: function(data) {
           $('#idSonda').html(data);
          }
         });
        }
</script>
[HTML] pobierz, plaintext 

ale z input to się całkiem zakręciłem:

[HTML] pobierz, plaintext 
<form action="destination.html" id="formSonda" method="post">
 <input type="button" value=".$sonda_text_submit." class="inputSonda" onclick="odswiez()">
 <div id="other">Trigger the handler</div>
</form>
 
<script type="text/javascript">
$('#formSonda').submit(function() {
  alert('Handler for .submit() called.');
  return false;
});
 
$('#other').click(function() {
  $('#target').submit();
});
</script>
[HTML] pobierz, plaintext 

Po co takie kombinacje jeśli input zostaje jak był, w jaki sposób rozwiązać mój problem?