Javascript-форум - Добавить элемент (выполнение php) с помощью js

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Добавить элемент (выполнение php) с помощью js (https://javascript.ru/forum/misc/27590-dobavit-ehlement-vypolnenie-php-s-pomoshhyu-js.html)

Добавить элемент (выполнение php) с помощью js

Привет, есть такой вопрос - помогите, а то своих знаний не хватает.

1. Есть html/php страничка с таким кодом
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<script type="text/javascript">
function onChange_(_this) {
document.getElementById('my').innerHTML = "ok";
}
</script>

</head>
<body>

<?php
echo"<script src='copy.js' type='text/javascript'></script>";

function my(){
$test = '<div id="my" name="my">';
$test .= 'hello world';
$test .= '<br>';
$test .= '<input type="button" value="Go" onClick="onChange_(this)"/>';
$test .= '</div>';
return $test;
}
?>

<?php
echo my();
?>
<br>
<input type="button" value="Add" onmouseup="addField()" />
</body>

и внешний скрипт
function addField() {
var div = document.createElement("div");
div.innerHTML = "<div id=\"new\" name=\"new\"> new </div>\n"; // - работает
// div.innerHTML = "<?php echo my(); ?>"; //-не работает
document.getElementById("my").appendChild(div);
return false;
}

подскажите как сделать так, чтобы после добавления элемента в DOM отрабатывал скрипт php

сори если не в ту ветку, просто пока еще не совсем все понимаю

Если честно - прочитал сначала вопрос и пару строк кода... Пара советов: обрамляйте при вставке на форум код спец тэгами и прочитайте книгу "PHP 5 В Подлиннике"

php выполняется только на сервере, javascript - только у пользователя. Чтобы выполнить какие-то действия на php для данной страницы - нужно отправить ajax запрос на сервер, а полученный ответ уже применять по назначению.

ок, сделал через ajax вот так
my.php

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />

<script type="text/javascript">
function loadXMLDoc(method,url){
    if(window.XMLHttpRequest){
        req = new XMLHttpRequest();
        req.onreadystatechange = processReqChange;
        req.open(method, url, true);
        req.send(null);
    }else if(window.ActiveXObject){
        req = new ActiveXObject("Microsoft.XMLHTTP");
        req.onreadystatechange = processReqChange;
        req.open(method, url, true);
        req.send();
    }
}
function processReqChange(){
    if(req.readyState == 4){
        if(req.status == 200){
                        getMy(req.responseText);
        }else{
            alert("There was a problem retrieving the XML data:n" + req.statusText);
        }
    }
}
function onChange_old(_this) {
	document.getElementById('my').innerHTML = "ok";
}
function onChange_(_this) {
        var url = "ajax.php?my="+_this.value;
        loadXMLDoc("get",url);
}
function getMy(data){
				var div = document.createElement("div");
				div.innerHTML = data;
			    document.getElementById('my').appendChild(div);
}
</script>


</head>
<body>

<?php
echo"<script src='copy.js' type='text/javascript'></script>";

function my(){
    $test = '<div id="my" name="my">';
	$test .= 'hello world';
	$test .= '<br>';
	$test .= '<input type="button" value="Go" onClick="onChange_(this)"/>';
	$test .= '</div>';
	return $test;
}
?>

<?php
  echo my();
?>

<br>
<input type="button" value="Add" onmouseup="addField()" />
</body>

вот ajax.php

<?PHP
header('Content-Type: text/html; charset=windows-1251');
$request = $_GET["my"];
if($request){
        echo loadData($request);
}

function getMy($request) {
	 $tmp = " - ok -";
return $tmp;
}

function loadData($request){
		$result = getMy($request);
        if($result) return $result = $result;
}
?>

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

function addField() {
    var div = document.createElement("div");
    div.innerHTML = "<div id=\"new\" name=\"new\"> new </div>\n"; // - работает
//    div.innerHTML = "<?php echo my(); ?>"; // -не работает
    document.getElementById("my").appendChild(div);
    return false;
}

Что я хочу получить и никак не могу/ не понимаю
Нужно чтобы после нажатия кнопки Add
в текущую страничку добалялась функция php

<?php
  echo my();
?>

и исполялась.
Т.е. после одного нажатия должно получится
hello world + кнопка Go
hello world + кнопка Go

Как сделать такое ? я не силен в php и JS и документация тут не сильно помогает - так что подскажите если знаете

напиши подробней что должно происходить на странице, я тебе может напишу краткий код на jquery. Просто вообще не понятно что значит php скрипт вставить на страницу. php все делает у себя на сервере и функции и скрипты(если вообще такое понятие для него применимо :) ),а пользователю лишь шлет в основном html код или js скрипты которые браузер обрабатывает.

да и еще одно, может у тебя проблема в самой функции. Она у тебя тупо возвращает значение вникуда, если она просто запускается, т.к. return $test; подразумевает, что с этим тестом потом ты будешь что-то делать дальше на сервере с помощью php. если же ты просто хочешь чтобы сервер запустил эту функцию и значение переменной тест вывелось у пользователя на экран, то делай - echo test;

даже не знаю как еще объяснить...
сейчас если запустить my.php
видно

hello world
кнопочка Go - принажатии на кнопку выполняется ajax, который выводит просто - ok -, (но может вывести что угодно, код html например)
Все это создается с помощью функции my()

теперь нужно при нажатии на кнопочку Add в эту же страницу добавить ещё раз функцию my()

Т.е.получает уже второй раз
hello world
кнопочка Go - принажатии на кнопку выполняется ajax, который выводит просто - ok -, (но может вывести что угодно, код html например)

Ок. понял процентов 30 :) объясню что знаю, а там сам допишешь что надо
В начале ставишь себе библиотеку jquery чтобы не заморачиваться сильно с js. Берешь ее тут http://jquery.com/ последнюю версию.
my.php

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<script src="jquery-1.7.1.js" type="text/javascript"></script> //подрубаешь библиотеку что только что скачал.
<script> //тут пишешь js код или подрубаешь файл где он хранится.

$(document).ready(function() { // особо не заморачивайся зачем это, просто все будет работать когда документ загружен полностью.

    $(document).on('click', '.btn_go',send_ajax); //устанавливаем обработчик события для кнопки go. $(document).on - устанавливает обработчик. 'click' - действие которое произошло с элементом. В данном случаи клик, там может быть и пук и т.д. '.btn_go' - собственно для какого элемента установлен этот обработчик события. В твоем случаи все элементы имеющие класс - btn_go(все кнопки Go). send_ajax - название функции придуманное от балды, в общем функция будет вызваться когда произошло событие(у нас - клик на элемент с классом btn_go);

function send_ajax(){ //функция которая будет отправлять запрос на сервер и обрабатывать полученный результат.

$.ajax({
	type: 'POST', //метод отправки запроса на сервер, пусть POST пофиг
	url: 'ajax_my.php', //собственно как файл на сервере будет исполнен. в общем файл где есть функция my();
        data:{},//данные которые будут на сервер передаваться, в нашем случаи никаких, если нужно выполнить тупо еще раз функцию my без параметров.
	success: function(data){//собственно тут и надо разруливать данные присланные с сервера. функция будет вызываться при успешном ответе сервера. У ней есть параметр - data. В общем это те данные что пришли с сервера. В нашем случаи пришел хтмл код типа ((<div id="my" name="my">hello world<input type="button" value="Go" onClick="onChange_(this)"/></div>)). осталось только вставить его в нужно место на странице и все. я пустой блок с id="inner_block", в него и засунем то что пришло с сервера.
               $('#inner_block').append(data) // $('#inner_block') - находит на странице элемент с id=inner_block. append(data) - в конец этого элемента дописывает нашу data(данные пришедшие с сервера) 
 
					 }
	});
}

});


</script>
</head>
<body>

function my(){
    $test = '<div id="my" name="my">';
    $test .= 'hello world';
    $test .= '<br>';
    $test .= '<input class="btn_go" type="button" value="Go" >'; //обзываем кнопку как btn_go чтобы привязать к нему обработчик события(когда кнопка будет нажата)
    $test .= '</div>';
    return $test;
}

<?php
  echo my();
?>
<div id="inner_block"></div> - сюда будем вставлять пришедшие с серва данные.
</body>

Вот код для ajax_my.php тут все очень просто

<?php
function my(){
    $test = '<div id="my" name="my">';
    $test .= 'hello world';
    $test .= '<br>';
    $test .= '<input class="btn_go" type="button" value="Go" >';
    $test .= '</div>';
    return $test;
}
  echo my();
?>

Вопрос лишь в том куда ты хочешь вставлять присланные данные в этот элемент, заменить элемент и т.д. тебе в помощь к append есть еще prepend(), html() - все jquery методы.

ага все спасибо, сам разобрался старым методом
jquery - проще конечно, с ним так же сделал как хотелось

>выполнение php с помощью js

>В начале ставишь себе библиотеку jquery чтобы не заморачиваться сильно с js