[英]Refresh div contents after making changes
下面是我的代碼,可以正常工作...
<Script type="text/javascript">
function im()
{
var Name=document.getElementById("Name").value;
var pointsize=document.getElementById("pointsize").value;
var format=document.getElementById("format").value;
var bckclr=document.getElementById("bckclr").value;
var color=document.getElementById("color").value;
var bcolor=document.getElementById("bcolor").value;
var font=document.getElementById("font").value;
$(document).ready(function(){
var url = 'Name='+Name+'&pointsize='+pointsize+
'&format='+format+'&bckclr='+bckclr+
'&color='+color+'&bcolor='+bcolor+
'&font='+font;
alert(url);
//-----Sending request to server for getting job name list by ajax-----
$.ajax({
type : "POST",
url : "i.php?",
data : url,
cache : false,
success : function(html) {
//document.getElementById('Div_PJobId').style.display="block";
//alert('hi');
alert(html);
var pic='<img src="'+html+'">';
$("#Div_Im").html(pic).show();
}
});
});
}
</script>
和php代碼...
echo('Name: <input type="text" id="Name" onchange="im()" value="your name" name="Name" />');
echo('pointsize: <input type="text" id="pointsize" onchange="im()" value="50" name="pointsize" />');
echo('format: <input type="text" id="format" value=".gif" onchange="im()" name="format" />');
echo('BackGround Color: <input type="text" id="bckclr" value="red" onchange="im()" name="bckclr" />');
echo('FontColor: <input type="text" id="color" value="white" onchange="im()" name="color" />');
echo('Border Color: <input type="text" id="bcolor" value="blue" onchange="im()" name="bcolor" />');
echo('<a href="./lang/ims.php"><img src="'.$image.'" height="82" width="82" /></a>');
echo('Font: <input type="text" id="font" value="'.$image1.'" onchange="im()" name="font" />');
echo ('<div id="Div_Im">');
echo('replace me');
echo ('</div>');
如您所見,我正在使用AJAX從服務器獲取數據並在其正常工作下顯示,但每次進行更改時,我都需要刷新div。
進行某些更改時如何刷新div ...當數據來自服務器時,我還需要添加符號或加載圖像.....該怎么做?
也許試試這個:
<script type="text/javascript">
$(document).ready(function(){
$('#theIMform input')
.change(function(){
// Automatically creates a Query String for all fields within the parent form
formdata = $(this).closest('form').serialize();
$.ajax({
type : "POST" ,
url : "i.php" ,
data : formdata ,
cache : false ,
error : function( jqXHR , textStatus , errorThrown ){
// Something went wrong
} ,
success : function( data , textStatus , jqXHR ){
$( "#div_im" )
.hide()
.html( '<img src="'+data+'">' )
.show();
}
});
});
});
</script>
?>
<form id="theIMform" name="theIMform">
Name: <input type="text" id="Name" value="your name" name="Name" />
pointsize: <input type="text" id="pointsize" value="50" name="pointsize" />
format: <input type="text" id="format" value=".gif" name="format" />
BackGround Color: <input type="text" id="bckclr" value="red" name="bckclr" />
FontColor: <input type="text" id="color" value="white" name="color" />
Border Color: <input type="text" id="bcolor" value="blue" name="bcolor" />
<a href="./lang/ims.php"><img src="<?php echo $image; ?>" height="82" width="82" /></a>
Font: <input type="text" id="font" value="<?php echo $image1; ?>" name="font" />
</form>
<div id="div_im">replace me</div>
<?php
更改頁面元素時,它會自動刷新。
我認為您的問題與這條線有關
$("#Div_Im").html(pic).show();
因為您將show稱為img元素,而不是div。
嘗試改變它
$("#Div_Im").html(pic);
$("#Div_Im").show();
此外,我建議您使用jquery來獲取值,因此您需要更改color=document.getElementById("color").value;
用更簡單的color = $('#color').val();
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.