r_khan
جمعه 11 مرداد 1392, 15:30 عصر
با سلام یه چند وقتی میخواستم سایتی طراحی کنم که برای رفتن به صفحات دیگر از ajax استفاده کنم ابتدا از مسترپیچ و updatepanel استفاده کردم ولی این هم جواب نداد رفتم سراغ webmethod ولی دیگر در مسترپیچ اجرا نمیشد . یه صفحهhtml ایجاد کردم و صفحه مورد نظرم رو در یک div فراخوانی کردم در صفحه ای که لود میشه رویداد کلیک باتن اجرا نمیشه.
چرا؟
کد صفحهhtml را اینجا میذارم
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link type="text/css" href="StyleSheets/iGridView-classic.css" rel="stylesheet" />
<link type="text/css" href="StyleSheets/iGridView-common.css" rel="stylesheet" />
<script lang="javascript" type="text/javascript" src="Scripts/jquery-1.2.6.pack.js"></script>
<style type="text/css">
body
{
width:95%;
padding-left:20px;
font-family:Arial;
font-size:10pt;
padding-right:20px;
}
</style>
</head>
<body>
<input id="ss" type="button" value="Load Customer Order" onclick="getData('ScriptService.asmx/GetControlHtml', '~/Controls/WebUserControl.ascx');" />
<input type="button" value="Load Login" onclick="getData('ScriptService.asmx/GetControlHtml', '~/Controls/LoginControl.ascx');" />
<div id="testDiv"></div>
</body>
<script type="text/javascript">
/// <reference path="jquery-1.2.3.min.js" />
function getData(serviceURL, controlLocation) {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: serviceURL,
data: "{'controlLocation':'" + controlLocation + "'}",
success:
function (msg) {
$('#testDiv').html(eval(msg));
formatTable();
},
error:
function (XMLHttpRequest, textStatus, errorThrown) {
alert("Error Occured!");
}
});
}
function formatTable() {
//get all row in gridview table and set style/event/attribute on them
$("div#testDiv tr")
.addClass("data-row")
.mouseover(function () {
if (!isClickedStyleSet(this.className)) {
this.className = "row-over";
}
if (!jQuery.browser.mozilla) {
this.style.cursor = "hand";
}
})
.mouseout(function () {
if (!isClickedStyleSet(this.className)) {
this.className = "data-row";
}
})
.click(
function () {
if (!isClickedStyleSet(this.className)) {
this.className = "row-select";
}
else { this.className = "data-row"; }
});
//get all cell in gridview table and set style/event/attribute on them
$("div#testDiv td")
.addClass("data-row")
.css("white-space", "nowrap")
.css("vertical-align", "middle")
.mouseover(function () {
setTitle(this);
});
}
function setTitle(object) {
//check browser type
if (jQuery.browser.mozilla) {
object.title = object.textContent;
}
else {
object.title = object.innerText;
}
}
function isClickedStyleSet(className) {
//if row is already clicked return true
if (className == "row-select") {
return true;
}
return false;
}
</script>
</html>
چرا؟
کد صفحهhtml را اینجا میذارم
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link type="text/css" href="StyleSheets/iGridView-classic.css" rel="stylesheet" />
<link type="text/css" href="StyleSheets/iGridView-common.css" rel="stylesheet" />
<script lang="javascript" type="text/javascript" src="Scripts/jquery-1.2.6.pack.js"></script>
<style type="text/css">
body
{
width:95%;
padding-left:20px;
font-family:Arial;
font-size:10pt;
padding-right:20px;
}
</style>
</head>
<body>
<input id="ss" type="button" value="Load Customer Order" onclick="getData('ScriptService.asmx/GetControlHtml', '~/Controls/WebUserControl.ascx');" />
<input type="button" value="Load Login" onclick="getData('ScriptService.asmx/GetControlHtml', '~/Controls/LoginControl.ascx');" />
<div id="testDiv"></div>
</body>
<script type="text/javascript">
/// <reference path="jquery-1.2.3.min.js" />
function getData(serviceURL, controlLocation) {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: serviceURL,
data: "{'controlLocation':'" + controlLocation + "'}",
success:
function (msg) {
$('#testDiv').html(eval(msg));
formatTable();
},
error:
function (XMLHttpRequest, textStatus, errorThrown) {
alert("Error Occured!");
}
});
}
function formatTable() {
//get all row in gridview table and set style/event/attribute on them
$("div#testDiv tr")
.addClass("data-row")
.mouseover(function () {
if (!isClickedStyleSet(this.className)) {
this.className = "row-over";
}
if (!jQuery.browser.mozilla) {
this.style.cursor = "hand";
}
})
.mouseout(function () {
if (!isClickedStyleSet(this.className)) {
this.className = "data-row";
}
})
.click(
function () {
if (!isClickedStyleSet(this.className)) {
this.className = "row-select";
}
else { this.className = "data-row"; }
});
//get all cell in gridview table and set style/event/attribute on them
$("div#testDiv td")
.addClass("data-row")
.css("white-space", "nowrap")
.css("vertical-align", "middle")
.mouseover(function () {
setTitle(this);
});
}
function setTitle(object) {
//check browser type
if (jQuery.browser.mozilla) {
object.title = object.textContent;
}
else {
object.title = object.innerText;
}
}
function isClickedStyleSet(className) {
//if row is already clicked return true
if (className == "row-select") {
return true;
}
return false;
}
</script>
</html>