Форум PHP программистов > обновить содержимое div без перезагрузки страницы

[ Поиск ] - [ Пользователи ] - [ Календарь ]

Полная Версия: обновить содержимое div без перезагрузки страницы

Mawr

8.03.2012 - 14:29

доброго времени суток!
php начал изучать совсем недавно, на форуме впервые и поэтому не знаю туда ли я обратился с вопросом :)
имеется файл index.html

<html>
    <head>
		<script src="/proverka.js"></script>
		<link href="special.css" rel="stylesheet" type="text/css">
    </head>
	<meta charset="windows-1251">
    <body>
<!--#include virtual="/index_script.php" -->
		<div align="center" > <INPUT TYPE="radio" NAME = "level" VALUE="Easy" CHECKED > Easy </div>
		<div align="center" > <INPUT TYPE="radio" NAME = "level" VALUE="Medium" > Medium </div>
		<div align="center" > <INPUT TYPE="radio" NAME = "level" VALUE="Hard" > Hard </div>
		<div align="center" > <INPUT TYPE="button" VALUE="Новая игра" style="width:105px; height:40px;"  </div>
		<div align="center" > <INPUT TYPE="button" VALUE="Проверить" style="width:105px; height:40px;" OnClick="proverka()"> </div>
    </body>
</html>

а также файл 1.php (который генерирует массив) и подключается к файлу index_script.php(который выводит таблицу с содержимым массива)

        <script language = "php">
		require_once "1.php";

				function vivod_mas($mas) {
				global $i, $j, $mas, $mas2, $n, $idd;
				
				echo "<div 'tabliza'> <table cellpadding='2' cellspacing='2' height='405' width='405' align='center'> ";
				$idd = 1;
				for ($i = 0; $i <= $n; $i++) {
					echo "<tr >";
					for ($j = 0; $j <= $n; $j++) {
						echo "<td >";
						if ($mas2[$i][$j] == 0) { 
						echo "<INPUT TYPE=TEXT id='".$idd."' name='special' SIZE='1' maxlength='1' value = '' >"; }
						if ($mas2[$i][$j] !== 0) {
						echo "<INPUT TYPE=TEXT id='".$idd."' name='typical' SIZE='1' READONLY=true maxlength='1' value = '".$mas2[$i][$j]."' >";}
						$idd++;
						echo "</td >";
					}
					echo "</tr >";
				}
				echo "</table>";
				echo "</div 'tabliza' >";
				}
				
				generation();
				obnulenie();
				vivod_mas($mas);
        </script>

необходимо чтобы при выборе одного из radio и нажатии кнопки "Новая игра" сгенерировался новый массив с соответствующим параметром и обновилось содержимое таблицы.
как я понял, надо использовать jquery.get
прочитал описание и примеры использования, но никак не понял как использовать в моем случае :(
буду очень рад помощи

Спустя 23 минуты, 37 секунд (8.03.2012 - 13:53) SerginhoLD написал(а):

google -> javascript -> ajax

Спустя 5 часов, 32 минуты, 36 секунд (8.03.2012 - 19:26) zeromind написал(а):

есть библа такая - jquery.timers.js, любой блок по таймеру можеш обновлять ajax'ом..

Спустя 5 минут, 27 секунд (8.03.2012 - 19:31) killer8080 написал(а):

в первый раз вижу, что кто то пользует тег <script language = "php">

Спустя 52 минуты, 38 секунд (8.03.2012 - 20:24) Mawr написал(а):

Цитата (killer8080 @ 8.03.2012 - 16:31)

в первый раз вижу, что кто то пользует тег <script language = "php">

буду впредь использовать <?php ... ?>

Спустя 5 минут, 46 секунд (8.03.2012 - 20:30) Mawr написал(а):

если я буду вот так передавать данные

$.get("test.php", { name: "John", time: "2pm" } );

то в качестве test.php у меня должен быть скрипт, который генерирует матрицу, да? а как сделать так чтобы после этого обновилось содержимое таблицы, которая выводится с помощью index_script.php?

Спустя 1 час, 26 минут, 57 секунд (8.03.2012 - 21:56) Xes написал(а):

jqery не знаю... читай если хочешь работь с ним как там запросы аяксом отправляются. Поидеи там гдето ты должен обозначить переменную в которую вернется ответ и уже потом юзать полученое значение. Ну принцип какойто такой я думаю, что на JS что на JQ.

Спустя 2 часа, 10 минут, 17 секунд (9.03.2012 - 00:07) killer8080 написал(а):

Цитата (Mawr @ 8.03.2012 - 19:30)

если я буду вот так передавать данные

$.get("test.php", { name: "John", time: "2pm" } );

$.get("test.php", { name: "John", time: "2pm" }, function(data){
    $('#tabliza').html(data);
});

только подправь html не <div 'tabliza'>, а <div id="tabliza">
и в закрывающем теге не должно быть никаких атрибутов.

Спустя 9 часов, 52 минуты, 31 секунда (9.03.2012 - 09:59) Mawr написал(а):

Цитата (killer8080 @ 8.03.2012 - 21:07)

Цитата (Mawr @ 8.03.2012 - 19:30)

если я буду вот так передавать данные
<pre class="sh_sourceCode" rel="code">$.get("test.php", { name: "John", time: "2pm" } );</pre>
то в качестве test.php у меня должен быть скрипт, который генерирует матрицу, да? а как сделать так чтобы после этого обновилось содержимое таблицы, которая выводится с помощью index_script.php?

$.get("test.php", { name: "John", time: "2pm" }, function(data){
    $('#tabliza').html(data);
});

только подправь html не <div 'tabliza'>, а <div id="tabliza">
и в закрывающем теге не должно быть никаких атрибутов.

спасибо!
но видимо я что то не так делаю
в файле index.html

<script> 
$(document).ready(function(){       
$('#but').click(function(){   
$.get("1.php", {'level'}, function(data){
    $('#tabliza').html(data);
}); 
});
}
</script>

в файле 1.php принимаю

$lev = $_GET['level'];

Denver ругается на эту строчку Notice: Undefined index: level
почему level остается undefined?

Спустя 15 минут, 31 секунда (9.03.2012 - 10:15) Visman написал(а):

$.get("1.php", {level: ЗНАЧЕНИЕ }, function(data){

Спустя 24 минуты, 18 секунд (9.03.2012 - 10:39) Mawr написал(а):

Цитата (Visman @ 9.03.2012 - 07:15)

$.get("1.php", {level: ЗНАЧЕНИЕ }, function(data){

даже если пишу вот так

$.get("1.php", {level: "Easy"}, function(data){

та же ошибка

Спустя 4 минуты, 39 секунд (9.03.2012 - 10:44) Mawr написал(а):

аа, я кажется понял в чем дело
я же вешал на клик по кнопке передачу level, а при загрузке страницы level еще не передается, поэтому и значение undefined

Спустя 17 минут, 17 секунд (9.03.2012 - 11:01) Mawr написал(а):

				if (isset($_GET['level'])==false) {
					$lev="Easy"; }
					else ($lev=$_GET['level']);

помогло

Спустя 3 минуты (9.03.2012 - 11:04) Mawr написал(а):

но обновить содержимое div'а все еще не получается

Спустя 11 минут, 40 секунд (9.03.2012 - 11:16) Visman написал(а):

Цитата (Mawr @ 9.03.2012 - 16:01)

помогло

$lev = isset($_GET['level']) ? $_GET['level'] : "Easy";

Спустя 40 минут, 39 секунд (9.03.2012 - 11:56) killer8080 написал(а):

Mawr
нужно блокировать переход по ссылке

$(document).ready(function(){       
    $('#but').click(function(){ 
        event.preventDefault(); 
        $.get("1.php", {level : 'Easy'}, function(data){
            $('#tabliza').html(data);
        }); 
    });
}

Спустя 24 минуты, 59 секунд (9.03.2012 - 12:21) Mawr написал(а):

Цитата (killer8080 @ 9.03.2012 - 08:56)

Mawr
нужно блокировать переход по ссылке

$(document).ready(function(){       
    $('#but').click(function(){ 
        event.preventDefault(); 
        $.get("1.php", {level : 'Easy'}, function(data){
            $('#tabliza').html(data);
        }); 
    });
}

спасибо
а можно в level засунуть значение какой нибудь переменной?
например

$level=$(":radio[name=level]").filter(":checked").val();

и потом в level засунуть значение $level?
т.е. чтобы не передавалось всегда только "Easy"

Спустя 8 минут, 25 секунд (9.03.2012 - 12:30) killer8080 написал(а):

Цитата (killer8080 @ 9.03.2012 - 10:56)

Mawr
нужно блокировать переход по ссылке

пардон, перепутал. У тебя же кнопка а не ссылка :rolleyes:

Цитата (Mawr @ 9.03.2012 - 11:21)

а можно в level засунуть значение какой нибудь переменной?
например
$level=$(":radio[name=level]").filter(":checked").val();

по идее можно и просто
$(":radio[name=level]:checked").val()
попробуй так

$(document).ready(function(){       
    $('#but').click(function(){ 
        $.get("1.php", {level : $(":radio[name=level]:checked").val()}, function(data){
            $('#tabliza').html(data);
        }); 
    });
});

Спустя 14 минут, 55 секунд (9.03.2012 - 12:45) Mawr написал(а):

и все же что то не так, не хочет работать :huh:
что приходит в ответ в качестве (data)?
функция в 1.php, в которую присылается 'level', возвращает

return $mas2;

. В качестве (data) приходит новый $mas2 ?

Спустя 3 минуты, 57 секунд (9.03.2012 - 12:49) killer8080 написал(а):

Цитата (Mawr @ 9.03.2012 - 11:45)

В качестве (data) приходит новый $mas2 ?

приходит то, что выводит твой 1.php
Вызови его напрямую в адресной строке браузера, и посмотри что он выводит
http://site.ru/1.php?level=Easy

Спустя 6 минут, 28 секунд (9.03.2012 - 12:55) Mawr написал(а):

Цитата (killer8080 @ 9.03.2012 - 09:49)

Цитата (Mawr @ 9.03.2012 - 11:45)

В качестве (data) приходит новый $mas2 ?

как оказалось, ничего не выводит

в 1.php у меня только генерируется массив, потом этот 1.php подключается в index_script.php (который уже выводит массив в таблицу). Получается мне надо объединить эти два файла в один?

Спустя 6 минут, 1 секунда (9.03.2012 - 13:01) killer8080 написал(а):

Цитата (Mawr @ 9.03.2012 - 11:55)

Получается мне надо объединить эти два файла в один?

Может просто запрашивать index_script.php, а не 1.php? Только учти, что он выдает контент вместе с дивом контейнером, что не есть гуд. Будет дубляж.

Спустя 5 минут, 57 секунд (9.03.2012 - 13:07) Mawr написал(а):

Цитата (killer8080 @ 9.03.2012 - 10:01)

Цитата (Mawr @ 9.03.2012 - 11:55)

Получается мне надо объединить эти два файла в один?

кажется мы не совсем поняли друг друга
в index_script.php у меня только вот это

        <?php
		require_once "1.php";

				function vivod_mas($mas) {
				global $i, $j, $mas, $mas2, $n, $idd;
				
				echo "<div id='tabliza'> <table cellpadding='2' cellspacing='2' height='405' width='405' align='center'> ";
				$idd = 1;
				for ($i = 0; $i <= $n; $i++) {
					echo "<tr >";
					for ($j = 0; $j <= $n; $j++) {
						echo "<td >";
						if ($mas2[$i][$j] == 0) { 
						echo "<INPUT TYPE=TEXT id='".$idd."' name='special' SIZE='1' maxlength='1' value = '' >"; }
						if ($mas2[$i][$j] !== 0) {
						echo "<INPUT TYPE=TEXT id='".$idd."' name='typical' SIZE='1' READONLY=true maxlength='1' value = '".$mas2[$i][$j]."' >";}
						$idd++;
						echo "</td >";
					}
					echo "</tr >";
				}
				echo "</table>";
				echo "</div>";
				}
				
				generation();
				obnulenie();
				vivod_mas($mas);
        ?>

мне же надо в зависимости от выбранного radio генерировать новый массив с определенными параметрами. Массив этот генерируется в 1.php

Спустя 54 минуты, 9 секунд (9.03.2012 - 14:01) Mawr написал(а):

если объединить два скрипта в один, то при нажатии кнопки ничего не происходит, а при запросе типа
http://site.ru/1.php?level=Easy
выводит таблицу с нужным содержимым, но без стилей (указанных в отдельном CSS).
Может не хочет обновлять содержимое div'a потому что он содержит таблицу, каждая ячейка которой содержит еще текстовое поле с определенным содержимым(которое и надо заменить) ?

Спустя 8 часов, 34 минуты, 16 секунд (9.03.2012 - 22:35) Mawr написал(а):

ура, содержимое div'a обновляется :)
в index.html

<div align="center" > <INPUT TYPE="button" id ="but" VALUE="Новая игра" style="width:105px; height:40px;" onclick="send();"> </div>

в proverka.js

function send()
{
var level = $(":radio[name=level]:checked").val()
$.ajax({
type: "GET",
url: "/index_script.php",
level: "level="+level,
success: function(html) {
$("#tabliza").empty();
$("#tabliza").append(html);
}
});
}

осталось только понять почему index_script.php всегда принимает только значение "Easy"
в index_script.php принимаю

$lev = isset($_GET['level']) ? $_GET['level'] : "Easy";

Спустя 26 минут, 6 секунд (9.03.2012 - 23:02) killer8080 написал(а):

Цитата (Mawr @ 9.03.2012 - 21:35)

осталось только понять почему index_script.php всегда принимает только значение "Easy"

потому что ты туда ничего не передаешь. Что означает это?

Цитата (Mawr @ 9.03.2012 - 21:35)

Эти давдесйствия

$("#tabliza").empty();
$("#tabliza").append(html);

равносильны этому

$("#tabliza").html(html);

Последний вариант, что я тебе давал с $.get() должен работать.

---

UPD там ошибка была, скобку пропустил. Должно быть так

$(document).ready(function(){       
    $('#but').click(function(){ 
        $.get("/index_script.php", {level : $(":radio[name=level]:checked").val()}, function(data){
            $('#tabliza').html(data);
        }); 
    });
});

Спустя 9 часов, 22 минуты, 41 секунда (10.03.2012 - 08:24) Mawr написал(а):

Цитата (killer8080 @ 9.03.2012 - 20:02)

Цитата (Mawr @ 9.03.2012 - 21:35)

осталось только понять почему index_script.php всегда принимает только значение "Easy"

потому что ты туда ничего не передаешь. Что означает это?

Цитата (Mawr @ 9.03.2012 - 21:35)

Эти давдесйствия

$("#tabliza").empty();
$("#tabliza").append(html);

равносильны этому

$("#tabliza").html(html);

$(document).ready(function(){       
    $('#but').click(function(){ 
        $.get("/index_script.php", {level : $(":radio[name=level]:checked").val()}, function(data){
            $('#tabliza').html(data);
        }); 
    });
});

преогромнейшее спасибо! все работает! :)
жаль еще в благодарность плюсы пока ставить не могу :(
__________________________________________________
оо, могу уже оказывается

Быстрый ответ:

Здесь расположена полная версия этой страницы.