Mam stronę html ( editor.php ), która zawiera wiele stron html w postaci zakładek jquery. Każda karta jest ładowana przez ajax.
Jedna z zakładek ( piekarnik.php ) ma wbudowany jqgrid. Kiedy ładuję piekarnik.php za pomocą wywołania ajax, jak poniżej
$.ajax({
type: "GET",
url: "oven.php",
data: "method=" +method+"&mode="+mode,
cache: false,
async: true,
success: function(data){
htdata = data;
$("#oven").html(data);
},
});
Kiedy robię powyższe, strona editor.php nie pokazuje siatki z piekarnika.php. Jeśli jednak zobaczę stronę piekarnika.php osobno, mogę wyświetlić jqgrid.
Strona siatki wygląda następująco.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Oven</title>
<link type="text/css" href="../../css/cupertino/jquery-ui-1.8.16.custom.css" rel="Stylesheet" />
<link rel="stylesheet" type="text/css" media="screen" href="./jquery/src/css/ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" media="screen" href="./jquery/css/ui.jqgrid.css" />
<script type="text/javascript" src="../../js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="../../js/jquery-ui-1.8.16.custom.min.js"></script>
<script src="./jquery/src/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="./jquery/js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script type="text/javascript" src="./jquery/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$.jgrid.no_legacy_api = true;
$.jgrid.useJSON = true;
var lastSelection;
</script>
<script type="text/javascript" src="./jquery/src/grid.base.js"></script>
<script type="text/javascript" src="./jquery/src/grid.common.js"></script>
<script type="text/javascript" src="./jquery/src/grid.formedit.js"></script>
<script type="text/javascript" src="./jquery/src/grid.inlinedit.js"></script>
<script type="text/javascript" src="./jquery/src/grid.custom.js"></script>
<script type="text/javascript" src="./jquery/src/jquery.fmatter.js"></script>
<script type="text/javascript" src="./jquery/src/jquery.searchFilter.js"></script>
<script type="text/javascript" src="./jquery/src/grid.jqueryui.js"></script>
<script type="text/javascript" src="./jquery/js/i18n/grid.locale-en.js"></script>
<script type="text/javascript" src="./jquery/js/jquery.jqGrid.min.js"></script>
<script type="text/javascript">
function() {
var lastsel2 =
jQuery("#tempset").jqGrid({
datatype: "local",
height: 260,
width:300,
colNames:[ " ","Rate *C/Min","Value *C", "Hold Time min", "Run Time min"],
colModel:[
{name:"id",index:"id", width:60, sorttype:"int", editable: true},
{name:"rate",index:"rate", width:40,editable: true,editoptions:{size:"20",maxlength:"30"}},
{name:"value",index:"value", width:40, editable: true,editoptions: {size:"20",maxlength:"30"}},
{name:"holdtime",index:"holdtime", width:50, editable: true,editoptions:{size:"20",maxlength:"30"}},
{name:"runtime",index:"runtime", width:100,editable: false}
],
onSelectRow: function(id){
if(id && id!==lastsel2){
jQuery("#tempset").jqGrid("restoreRow",lastsel2);
jQuery("#tempset").jqGrid("editRow",id,true);
lastsel2=id;
}
},
//editurl: "server.php",
caption: "Temperature Settings",
pager: "#tempset_pager",
});
var mydata2 = [
{id:"initial",rate:"",value:"50",holdtime:"60",runtime:"60"},
{id:"Ramp 1",rate:"15",value:"67 ",holdtime:"5",runtime:"66.133"},
{id:"Ramp 2",rate:"20",value:"89",holdtime:"10",runtime:"77.233"},
{id:"Ramp 3",rate:"25",value:"123",holdtime:"3",runtime:"81.593"}
];
for(var i=0;i < mydata2.length;i++)
{
//alert(mydata2[i].id);
jQuery("#tempset").jqGrid("addRowData",mydata2[i].id,mydata2[i]);
}
jQuery("#tempset").navGrid("#tempset_pager", {});
}
</script>
</head>
<body>
<
<div style = "margin-left:240px; top: 15px; position:absolute;">
<table id="tempset"></table>
<div id="tempset_pager"> </div>
</div>
<script>
grid();
</script>
</body>
</html>
Uprzejma pomoc.
Odpowiedzi:
1 dla odpowiedzi № 1Źle rozumiesz, jak $.ajax metoda z $("#oven").html(data) wnętrze success praca. w sposób, w jaki nie można załadować tylko nowej strony HTML zgodnie z ustawieniem nowej wartości dla windows.location. Jeśli załadujesz stronę na $.ajax żadne skrypty nie zostaną uruchomione, przynajmniej z powodu powód bezpieczeństwa. Co więcej, nie możesz po prostu ustawić cały Strona HTML włącznie <html>, <head> <body> i tak dalej w innej części strony HTML. Więc w odniesieniu do $.ajax metoda możesz załadować tylko fragment HTML, a nie całą stronę HTML.
Powinieneś więc przeprojektować swój program i nie używać $.ajax w taki sposób.
Kolejna uwaga. Jeśli nawet widziałeś coś, jeśli ładujesz oven.php strona zawiera wiele błędów. Oto tylko najważniejsze:
- Twoja strona musi zaczynać się od
<!DOCUMENT html ...>komunikat. Bez oświadczenia masz stronę HTML w tryb dziwactwa który nie jest obsługiwany przez jQuery UI lub jqGrid. Musisz dołączyć linię jak<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">(widzieć tutaj) lub HTML5<!DOCTYPE html> - Nie możesz włączyć tej samej implementacji tych samych funkcji lub obiektów więcej niż jeden raz. Najpierw kod zawiera
jquery-1.6.2.min.js, następniejquery-1.4.2.min.js. To poważny błąd. Dołączasz kod jqGrid 3 razy (!!!???). Widziećjquery.jqGrid.min.js, następniegrid.base.jsdogrid.jqueryui.jsa potem jeszcze razjquery.jqGrid.min.js. Nie możesz tego zrobić!
Reszta kodu definiującego jqGrid zawiera pewne błędy i nieoptymalny kod (bardzo stary styl kodu).
- powinieneś wymienić linię
var lastsel2 =dovar lastsel2;, który powinien po prostu zdefiniowaćlastsel2zundefinedwartość. - wykorzystanie
addRowDatapo definicja siatki nie jest dobra. To bardzo stary styl. Dużo lepiej będzie przenieść definicjęmydata2przed utworzeniem jqGrid i użyj dodatkowych parametrówdata: mydata2igridview: truew siatce.