Skip to content

Commit 9a3a4e3

Browse files
sparksmsparksm
committed
update response event to fire on host
1 parent a3ef5d3 commit 9a3a4e3

File tree

4 files changed

+37
-43
lines changed

4 files changed

+37
-43
lines changed

‎README.md

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -34,13 +34,13 @@ Or [download as ZIP](https://github.com/sparksm/ajax-element/archive/master.zip)
3434

3535
```html
3636
<script>
37-
window.addEventListener('ajaxElementSuccess', function (data) {
38-
console.log(data);
39-
});
37+
document.getElementById('myID').addEventListener('ajaxElementSuccess', function (event) {
38+
document.getElementById('anotherID').textContent = event.detail.data;
39+
});
4040
41-
window.addEventListener('ajaxElementError', function (data) {
42-
console.log(data);
43-
});
41+
document.getElementById('myID').addEventListener('ajaxElementError', function (event) {
42+
document.getElementById('anotherID').textContent = event.detail.data;
43+
});
4444
</script>
4545

4646
3. Start using it!

‎bower.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "ajax-element",
3-
"version": "0.1.2",
3+
"version": "0.1.3",
44
"description": "VanillaJS Ajax Web Component",
55
"license": "MIT",
66
"main": "src/ajax-element.html",

‎index.html

Lines changed: 19 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -12,29 +12,31 @@
1212
</head>
1313
<body>
1414

15+
<!-- Using Custom Elements -->
16+
<ajax-element url="http://ip.jsontest.com/?mime=5" id="ajaxtext"></ajax-element>
17+
18+
<ajax-element url="http://time.jsontest.com/" datatype="json" id="ajaxtime"></ajax-element>
19+
<pre>The time is <span id="time"></span></pre>
20+
21+
<ajax-element type="POST" url="http://posttestserver.com/post.php" data="parameter=value&also=another" id="ajaxpost"></ajax-element>
22+
<pre id="postdata"></pre>
23+
1524
<script>
16-
window.addEventListener('ajaxElementSuccess', function (event) {
17-
console.log(event);
18-
var request = event.detail.request;
25+
document.getElementById('ajaxtime').addEventListener('ajaxElementSuccess', function (event) {
1926
var data = event.detail.data;
20-
if (request.url === 'http://time.jsontest.com/') {
21-
document.getElementById('time').textContent = data.time;
22-
}
27+
document.getElementById('time').textContent = data.time;
2328
});
2429

25-
window.addEventListener('ajaxElementError', function (event) {
26-
console.error(event);
30+
document.getElementById('ajaxpost').addEventListener('ajaxElementSuccess', function (event) {
31+
var data = event.detail.data;
32+
document.getElementById('postdata').textContent = data;
2733
});
28-
</script>
29-
30-
<!-- Using Custom Elements -->
31-
<ajax-element url="test.txt"></ajax-element>
32-
33-
<ajax-element url="http://time.jsontest.com/" datatype="json"></ajax-element>
34-
<div>The time is <span id="time"></span></div>
35-
36-
<ajax-element type="POST" url="http://posttestserver.com/post.php" data="parameter=value&also=another"></ajax-element>
3734

35+
document.getElementById('ajaxtext').addEventListener('ajaxElementSuccess', function (event) {
36+
var data = event.detail.data;
37+
document.getElementById('time').textContent = data.time;
38+
});
39+
</script>
3840

3941
</body>
4042
</html>

‎src/ajax-element.html

Lines changed: 11 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -7,21 +7,13 @@
77

88
// Fires when an instance of the element is created
99
element.createdCallback = function () {
10-
// importer
11-
var thatDoc = document;
10+
this.host = this;
1211

13-
// importee
14-
var thisDoc = (thatDoc._currentScript || thatDoc.currentScript).ownerDocument;
15-
16-
// shadow root
17-
var shadowRoot = this.createShadowRoot();
18-
19-
// shadow host
2012
this.getAttributes();
2113
if (this.ajaxArgs.type !== 'POST') {
2214
this.request(this.ajaxArgs);
2315
} else {
24-
this.post(this.ajaxArgs);
16+
this.post(this, this.ajaxArgs);
2517
}
2618
};
2719

@@ -47,8 +39,8 @@
4739
this.ajaxArgs = args;
4840
};
4941

50-
// Custom event to be triggered on window after ajax request
51-
element.trigger = function (name, detail) {
42+
// Custom event to be triggered after ajax request
43+
element.trigger = function (host, name, detail) {
5244
if (window.CustomEvent) {
5345
var event = new CustomEvent(name, {
5446
detail: detail
@@ -57,11 +49,11 @@
5749
var event = document.createEvent('CustomEvent');
5850
event.initCustomEvent(name, true, true, detial);
5951
}
60-
window.dispatchEvent(event);
52+
host.dispatchEvent(event);
6153
};
6254

6355
// Ajax post method
64-
element.post = function (options) {
56+
element.post = function (host, options) {
6557
if (typeof options === 'undefined') {
6658
return false;
6759
}
@@ -74,13 +66,13 @@
7466
options.headers['Content-Type'] = 'application/x-www-form-urlencoded; charset=UTF-8';
7567
}
7668
if (!error) {
77-
element.request(options);
69+
element.request(options, host);
7870
}
7971
};
8072

8173
// Ajax request method
82-
element.request = function (options) {
83-
var host = this;
74+
element.request = function (options, host) {
75+
var host = host || this;
8476
if (typeof options === 'undefined') {
8577
return false;
8678
}
@@ -107,9 +99,9 @@
10799
} else {
108100
data = this.responseText;
109101
}
110-
element.trigger('ajaxElementSuccess', {request: options, data: data});
102+
element.trigger(host, 'ajaxElementSuccess', {request: options, data: data});
111103
} else {
112-
element.trigger('ajaxElementError', {request: options, data: data});
104+
element.trigger(host, 'ajaxElementError', {request: options, data: data});
113105
}
114106
}
115107
};

0 commit comments

Comments
 (0)