#jquery #ajax #json #html #innerhtml
#jquery #ajax #json #HTML #innerhtml
Вопрос:
Итак, я погуглил AJAX, jQuery, JSON, innerHTML и несколько других вещей. Я не могу найти никаких рабочих примеров для изменения DIV на внешнюю страницу, которая имеет форму. Если форма проходит проверку, исходный DIV обновляется до нового содержимого обновления из формы.
Код должен быть пригоден для повторного использования, потому что будет несколько DIVS для переключения между формами
Я знаю, что javascript и тому подобное необходимо добавить, но поскольку я не уверен, куда я помещаю только стандартный html для демонстрационных целей.
Я объясню с помощью прилагаемого кода
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
span.text{
font:normal 14px verdana;
font-style:italic;
line-height:20px;
margin:0 0 20px 10px;
}
div#link{
height:18px;
width:30px;
background:#000000;
padding:4px;
margin:0 0 0 10px;
}
div#link a{
color:#ffffff;
text-decoration:none;
font:normal 12px arial;
}
div#dynamic {
border:solid 1px #000000;
text-align:left;
text-transform:capitalize;
height:300px;
width:400px;
margin:10px 0 20px 10px;
padding:10px;
font:normal 14px arial;
}
.nopadding{
margin:0px;
padding:0px;
}
</style>
</head>
<body>
<!--link container with 'edit' hyperlink-->
<div id="link">
<a href='#0'>Edit</a>
</div>
<!--Original DIV-->
<div id="dynamic">
content content content
</div>
<span class="text">After clicking the edit link or button the div containing the content should change into a form (if you hit close the div will revert back to the original DIV content</span>
<!--link container with 'edit' hyperlink-->
<div id="link">
<a href='#1'>Close</a>
</div>
<!--Original DIV-->
<div id="dynamic">
<form class="nopadding" method="post" action"">
enter new text
<input type="textbox" name="blah" maxlength="30" />
<input type="submit" value="submit" />
</form>
</div>
<span class="text">After clicking submit and form validation the DIV is updated with the new value fro mthe form</span>
<!--link container with 'edit' hyperlink-->
<div id="link">
<a href='#0'>Edit</a>
</div>
<!--Original DIV-->
<div id="dynamic">
NEW content NEW content NEW content
</div>
</body>
</html>
ОБНОВЛЕНО
Кто-то рекомендовал скрыть / показать настройку для загрузки внешней страницы. Я использовал функцию переключения Jquery для замены DIVS, чтобы загрузить внешнюю страницу в iFrame, содержащую форму и проверку. Пока это работает отлично.
теперь 2 проблемы.
Как мне загрузить содержимое iframe ТОЛЬКО ПОСЛЕ нажатия на ссылку. Существует 8 разделов, которые используют вышеуказанный метод для обновления информации в определенных разделах веб-сайта. Я не хочу, чтобы 8 iframes открывались каждый раз, когда кто-то посещает страницу. Я смотрел на .загрузите функцию для Jquery, но я не знаю, как объединить ее с функцией .toggle.
После проверки формы в iframe, как мне закрыть iframe и вернуться к исходному DIV с обновленным содержимым.
Вот макет того, что у меня в основном есть сейчас
<!--Original page containing DIV toggle which loads an iframe-->
<a href="javascript:void(0);" id="toggle-look">Edit/Cancel</a>
<script type="text/javascript">
$(function(){
$('#toggle-look').click(function(){
$('#original').toggle();
$('#external').toggle();
});
});
</script>
<div id="original" style="width:605px;overflow:hidden;padding:0px;margin:0px;overflow:hidden;font:normal 12px arial;border:solid 1px #666666;">
Original Content Original Content Original Content Original Content
</div>
<div id="external" style="display:none;width:605px;overflow:hidden;padding:0px;margin:0px;overflow:hidden;font:normal 12px arial;border:solid 1px #666666;">
<iframe style="width:605px;height:540px;padding:0px;margin:0px;" FRAMEBORDER="0" scrolling="no" hspace="0" vspace="0" allowtransparency="true" src="external.html"></iframe>
</div>
<!--External iFrame Page With Form on external.html-->
<div id="form_and_validation">
<form method="post" action="external.html" style="padding:0px;margin:0px;">
Enter New Content:<input type="textbox" name="newcontent" />
</form>
</div>
Комментарии:
1. Просто предложение. Это проще сделать, если у вас есть отдельные разделы для содержимого и формы, а форма скрыта. Затем, когда нажата кнопка «Редактировать», вы скрываете содержимое и показываете форму. После отправки формы вы скрываете форму и отображаете обновленное содержимое.
2. Сервер работает под управлением Windows 2008, IIS7, Classic ASP. Присутствуют последние версии jQuery.
3. … и MS SQL для базы данных
Ответ №1:
Вы можете использовать функцию, подобную: JavaScript — AJAX / SJAX — Отправить данные формы в скрипт, затем функцию для обработки формы:
function postForm(form) {
data = "x_form=" (form.id == '' ? 'none' : form.id);
for(var i = 0;i < form.elements.length;i ) {
fields = form.elements[i];
data = "amp;" fields.name "=" (fields.type == "checkbox" || fields.type == "radio" ? (fields.checked == true ? "Yes" : "No") : (fields.type == "select-one" ? fields.options[fields.selectedIndex].value : encodeURI(fields.value)));
}
return data;
}
Используемый вами скрипт, будь то PHP или ASP, вернет нужную страницу обратно в div.
Например, в PHP у вас может быть что-то такое простое, как
<?php include("myform.html") ?>
Конечно, вы хотели бы использовать данные POST, которые вы отправили на страницу PHP, чтобы вернуть более настроенную страницу.
Итак, собираем все это вместе:
ваша кнопка отправки будет выглядеть следующим образом:
<input type="text" name="Send" onkeyup="runSQL('myformdiv', 'sql.php', postForm(this.form))" />
это приведет к отправке данных формы в функцию RunSQL, которая отправляет данные в sql.php который вернет myform.html в myformdiv div.
Комментарии:
1. может кто-нибудь дать мне какой-нибудь html для любого из вышеупомянутых решений. Я не могу их опробовать, потому что я действительно никогда не использую Jquery или AJAX