Всем Доброй времени суток. У меня пробема с ajax-ом
Хочу взять шаблон через ajax. К сожелению нету столько опыта и знания, чтобы сделать самостоятельно.
Вот это в файле, где я хочу загрузить шаблон
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
<script>
$(function() {
var doc = new Document({
width: 3.5,
height: 2,
numPages: 2,
orientation: 'landscape',
});
//init
Editor.init({
document: doc,
activePages: ['page1'],
config: {
type: 'business_card'
}
});
Editor.selectTool( $("#textTool") );
$("#pageSizeSelector .standard input.landscape").click();
var url = $.url(window.location);
var templateId = url.param('template');
if (templateId > 0) {
Editor.loadTemplate(templateId, function(template){
$("#pageSizeSelector, .design h2:first").hide();
$("#pageSelector").attr("class", Editor.document.orientation);
$("h1").html("Business Cards");
$("h2:first").html("Title: " + template.name);
$("#textTool").click();
});
}
if (url.attr('anchor') != '') var saveId = url.attr('anchor').match(/save(.+)/)[1];
if (saveId > 0) {
Editor.loadSave(saveId);
}
var sizeFormat = url.param('sizeFormat');
if (sizeFormat > 0) {
Editor.getSizeFormat(sizeFormat, function(format){
$("#pageSizeSelector .mini, #pageSizeSelector .large").remove();
$("#pageSizeSelector .standard h4").html('Standard '+format.name);
$("#pageSizeSelector .standard input.portrait").val(format.height+' x '+format.width);
$("#pageSizeSelector .standard input.landscape").val(format.width+' x '+format.height);
$("#pageSizeSelector .standard input.landscape").click();
});
}
});
</script>
js файл функции:
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
Editor.loadTemplate = function(templateId, callback) {
$.ajax({
url: '/editor/api.php?method=getTemplate',
type: 'post',
dataType: 'json',
data: {id: templateId},
success: function(response) {
if (response.document) {
var doc = $.parseJSON(response.document);
Editor.setDocument(new Document(doc));
Editor.render();
Editor.unselectObject();
Editor.setActivePages((doc.activePages) ? doc.activePages : ['page1']);
if (callback) {
callback.call(this, response);
}
}
else {
var url = $.url(window.location);
window.location = url.attr('protocol') + "://" + url.attr('host') + url.attr('path');
}
}
});
}
и api.php, пример шаблона:
1.
{"id":"1","name":"Wedding Photography","type":"business_card","orientation":"landscape","thumbnail":"weddingp1.png","document":"{\"pages\":{\"page1\":{\"name\":\"page1\",\"width\":420,\"height\":240,\"backgroundColor\":\"rgb(255, 255, 255)\",\"objects\":{\"text_1343677463093\":{\"draggable\":true,\"rotateDegree\":0,\"type\":\"text\",\"id\":\"text_1343677463093\",\"x\":22.833312988281,\"y\":52.5,\"text\":\"Blue Bird\",\"fontFamily\":\"League Script\",\"fontSize\":\"52px\",\"lineHeight\":130,\"letterSpacing\":0,\"textAlign\":\"Center\",\"color\":\"rgb(92, 50, 0)\",\"width\":217,\"height\":68},\"text_1343677521513\":{\"draggable\":true,\"rotateDegree\":0,\"type\":\"text\",\"id\":\"text_1343677521513\",\"x\":262.95001220703,\"y\":81.61669921875,\"text\":\"W E D D I N G P H O T O G R A P H Y\",\"fontFamily\":\"Mate SC\",\"fontSize\":\"8px\",\"lineHeight\":130,\"letterSpacing\":0,\"textAlign\":\"left\",\"color\":\"rgb(117, 72, 51)\",\"width\":132,\"height\":10},\"shape_1343679978558\":{\"draggable\":true,\"rotateDegree\":0,\"type\":\"shape\",\"id\":\"shape_1343679978558\",\"x\":-27.833312988281,\"y\":27.75,\"cornerRadius\":0,\"shapeScale\":104,\"width\":511,\"height\":188,\"backgroundColor\":\"rgb(160, 223, 239)\",\"originalWidth\":491,\"originalHeight\":181,\"borderRadius\":0},\"text_1343680039445\":{\"draggable\":true,\"rotateDegree\":0,\"type\":\"text\",\"id\":\"text_1343680039445\",\"x\":26.666687011719,\"y\":99.249984741211,\"text\":\". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . \",\"fontFamily\":\"Mate SC\",\"fontSize\":\"9px\",\"lineHeight\":100,\"letterSpacing\":0,\"textAlign\":\"left\",\"color\":\"rgb(117, 72, 51)\",\"width\":373,\"height\":9},\"text_1343680072757\":{\"draggable\":true,\"rotateDegree\":0,\"type\":\"text\",\"id\":\"text_1343680072757\",\"x\":27.100006103516,\"y\":115.6833190918,\"text\":\"6 0 4 3 4 5 6 7 8 4 \\nCONTACT@YOUREMAIL.COM\\nWWW.YOURWEBSITE.COM\",\"fontFamily\":\"Lato\",\"fontSize\":\"10px\",\"lineHeight\":131,\"letterSpacing\":0,\"textAlign\":\"left\",\"color\":\"rgb(117, 72, 51)\",\"width\":137,\"height\":39},\"text_1343680133205\":{\"draggable\":true,\"rotateDegree\":0,\"type\":\"text\",\"id\":\"text_1343680133205\",\"x\":238.04996778125,\"y\":128.1333265459,\"text\":\"103 - 2353 YOUR ADDRESS STREET\\nVANCOUVER, BC V4E 1K8\",\"fontFamily\":\"Lato\",\"fontSize\":\"10px\",\"lineHeight\":133,\"letterSpacing\":0,\"textAlign\":\"Right\",\"color\":\"rgb(117, 72, 51)\",\"width\":160,\"height\":27},\"text_1343680195463\":{\"draggable\":true,\"rotateDegree\":0,\"type\":\"text\",\"id\":\"text_1343680195463\",\"x\":26.950012207031,\"y\":161.0333404541,\"text\":\". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . \",\"fontFamily\":\"Mate SC\",\"fontSize\":\"9px\",\"lineHeight\":100,\"letterSpacing\":0,\"textAlign\":\"left\",\"color\":\"rgb(117, 72, 51)\",\"width\":373,\"height\":9},\"text_1343680323301\":{\"draggable\":true,\"rotateDegree\":0,\"type\":\"text\",\"id\":\"text_1343680323301\",\"x\":-15.050007804687,\"y\":27.199992195312,\"text\":\". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .\",\"fontFamily\":\"Mate SC\",\"fontSize\":\"8px\",\"lineHeight\":100,\"letterSpacing\":0,\"textAlign\":\"left\",\"color\":\"rgb(117, 72, 51)\",\"width\":466,\"height\":8},\"image_1343680793110\":{\"draggable\":false,\"rotateDegree\":0,\"type\":\"image\",\"id\":\"image_1343680793110\",\"x\":-20.650024414062,\"y\":-18.649963378906,\"src\":\"\/editor\/resources\/pattern-background-blue.png\",\"autofit\":true,\"pdfratio\":0.33,\"name\":\"pattern-background-blue.png\",\"checkSize\":true,\"jQuery15108430598164064658\":{\"olddisplay\":\"list-item\"},\"width\":565,\"height\":339,\"originalWidth\":1125,\"originalHeight\":675,\"scale\":152.15},\"text_1343681056781\":{\"draggable\":true,\"rotateDegree\":0,\"type\":\"text\",\"id\":\"text_1343681056781\",\"x\":-18.500020011719,\"y\":201.74999524707,\"text\":\". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .\",\"fontFamily\":\"Mate SC\",\"fontSize\":\"8px\",\"lineHeight\":100,\"letterSpacing\":0,\"textAlign\":\"left\",\"color\":\"rgb(117, 72, 51)\",\"width\":466,\"height\":8},\"text_1343681079642\":{\"draggable\":true,\"rotateDegree\":0,\"type\":\"text\",\"id\":\"text_1343681079642\",\"x\":26.666667,\"y\":180.91668225879,\"text\":\"LET US CAPTURE THE MOST PRECIOUS DAY OF YOUR LIFE\",\"fontFamily\":\"Mate SC\",\"fontSize\":\"8px\",\"lineHeight\":130,\"letterSpacing\":0,\"textAlign\":\"left\",\"color\":\"rgb(117, 72, 51)\",\"width\":214,\"height\":10}}},\"page2\":{\"name\":\"page2\",\"width\":420,\"height\":240,\"backgroundColor\":\"#fff\",\"objects\":[]}},\"pdfratio\":1,\"width\":3.5,\"height\":2,\"type\":\"generic\",\"orientation\":\"landscape\",\"activePages\":[\"page1\"]}","date":"2013-01-30 14:28:14","ordering":"0","author":"","new":"0"}
и я хочу чтобы он загрузилься тут:
1.
<div id="canvas" class="clearfix" style="width: 422px; background-color: rgb(255, 255, 255);"><div class="page" id="page1" style="position: relative; width: 420px; height: 240px; background-color: rgb(255, 255, 255); float: left; display: block;"></div><div class="page" id="page2" style="position: relative; width: 420px; height: 240px; background-color: rgb(255, 255, 255); float: left; display: none;"></div><div class="bleed top"></div><div class="bleed right"></div><div class="bleed bottom"></div><div class="bleed left"></div><div class="safety top"></div><div class="safety right"></div><div class="safety bottom"></div><div class="safety left"></div></div>
|
