Итак, я погуглил AJAX, JQuery, JSON, InnerHTML и еще несколько вещей.Я не могу найти какие-либо рабочие примеры для изменения DIV на внешнюю страницу, которая имеет форму.Если форма проходит проверку, исходный DIV обновляется до нового содержимого обновления из формы.
Код должен быть многократно использован, поскольку будет несколько DIV для переключения между формами
IЯ знаю, что нужно добавить 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, чтобы поменять местами DIV, чтобы загрузить внешнюю страницу в iFrame, содержащий форму и проверку.Пока он отлично работает.
2 проблемы сейчас.
Как загрузить содержимое iframe ТОЛЬКО ПОСЛЕ ССЫЛКИ.Существует 8 DIV, которые используют вышеуказанный метод для обновления информации в определенных разделах сайта.Я не хочу открывать 8 фреймов каждый раз, когда кто-то посещает страницу.Я искал функцию .load для 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>