Ticket #5892: rendered.html

File rendered.html, 8.6 KB (added by JonathansCorner.com, 9 years ago)

HTML where UI behavior appears correct from Chrome, but handler is not being called on change.

Line 
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
2<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US"> 
3    <head> 
4        <title>Honorifics Test name Post nominals</title> 
5        <link rel="icon" href="/static/favicon.ico" type="x-icon" /> 
6        <link rel="shortcut icon" href="/static/favicon.ico" type="x-icon" /> 
7       
8           
9            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
10            <meta http-equiv="Content-Language" value="en-US" /> 
11           
12           
13           
14           
15           
16       
17       
18       
19            <link rel="stylesheet" type="text/css" href="/static/css/style.css" /> 
20<link rel="stylesheet" type="text/css"
21href="/static/css/smoothness/jquery-ui-1.8.2.custom.css" /> 
22           
23           
24       
25       
26       
27    </head> 
28    <body> 
29        <div id="sidebar"> 
30       
31        </div> 
32        <div id="content"> 
33       
34            <div id="header"> 
35           
36               
37                <h1></h1> 
38               
39           
40            </div> 
41           
42           
43<h1> 
44    <span id="entity_honorifics_1" class="edit"> 
45       
46            Honorifics
47       
48    </span> 
49    <span id="entity_name_1" class="edit"> 
50       
51            Test name
52       
53    </span> 
54    <span id="entity_post_nominals_1" class="edit"> 
55       
56            Post nominals
57       
58    </span> 
59</h1> 
60 
61 
62<p id="entity_description_1" class="edit_textarea"> 
63   
64        Description
65   
66</p> 
67 
68<!-- Work on handling department and location correctly. Dropdown menus --> 
69<p>Department:
70 
71    <strong> 
72        <select name="department" id="department" class="autocomplete"> 
73        <option 
74       
75            selected="selected"
76       
77        value="department.-1">&mdash; Select &mdash;</option> 
78       
79            <option 
80           
81            value="department.1">Test name</option> 
82       
83        </select> 
84 
85    </strong> 
86    <br /> 
87    Homepage:
88   
89        <a href="http://www.google.com"> 
90   
91    <strong class="edit_rightclick" id="entity_homepage_1"> 
92       
93            http://www.google.com
94       
95    </strong> 
96       
97            </a> 
98       
99    <br /> 
100    Email:
101    <strong> 
102       
103        <span class="edit" id="EntityEmail_new_1"> 
104            Click to add email.
105        </span> 
106    </strong> 
107    <br /> 
108    Location:
109    <strong> 
110        <select name="location" id="location" class="autocomplete"> 
111        <option 
112       
113            selected="selected"
114       
115        value="location.-1">&mdash; Select &mdash;</option> 
116       
117            <option 
118           
119                selected="selected"
120           
121            value="location.1">Test location</option> 
122       
123        </select> 
124    </strong> 
125    <br /> 
126    Phone:
127    <strong class="edit" id="entity_phone_1"> 
128       
129            Phone
130       
131    </strong> 
132    <br /> 
133    Reports to:
134    <strong> 
135        <select name="reports_to" id="reports_to" class="autocomplete"> 
136        <option 
137       
138            selected="selected"
139       
140        value="reports_to_-1">&mdash; Select &mdash;</option> 
141       
142            <option 
143           
144            value="reports_to_1">Test name</option> 
145       
146        </select> 
147    </strong> 
148    <br /> 
149    Start date:
150    <strong> 
151        2010-07-30
152    </strong> 
153    <br /> 
154 
155 
156       
157        </div> 
158        <div id="footer"> 
159       
160           
161           
162       
163        </div> 
164    </body> 
165   
166       
167           
168<script language="JavaScript" type="text/javascript" src="/static/js/jquery.js"></script> 
169<script language="JavaScript" type="text/javascript" src="/static/js/jquery-ui.js"></script> 
170<script language="JavaScript" type="text/javascript" src="/static/js/jquery.jeditable.js"></script> 
171 
172           
173           
174<script language="JavaScript" type="text/javascript"> 
175<!--
176function register_editables()
177    {
178    $(".edit").editable("/ajax/save",
179        {
180        cancel: "Cancel",
181        submit: "OK",
182        tooltip: "Click to edit.",
183        });
184    $(".edit").editable("/ajax/save",
185        {
186        cancel: "Cancel",
187        submit: "OK",
188        tooltip: "Click to edit.",
189        });
190    $(".edit_rightclick").editable("/ajax/save",
191        {
192        cancel: "Cancel",
193        submit: "OK",
194        tooltip: "Right click to edit.",
195        event: "contextmenu",
196        });
197    $(".edit_textarea").editable("/ajax/save",
198        {
199        cancel: "Cancel",
200        submit: "OK",
201        tooltip: "Click to edit.",
202        type: "textarea",
203        });
204    $(".edit_textarea").editable("/ajax/save",
205        {
206        cancel: "Cancel",
207        submit: "OK",
208        tooltip: "Click to edit.",
209        type: "textarea",
210        event: "contextmenu",
211        });
212    }
213 
214function update_autocomplete(event, ui)
215    {
216    alert("Reached update_autocomplete");
217    var split_value = ui.item.value.split(".");
218    var field = split_value[0];
219    var id = split_value[1];
220    $.ajax({
221        data:
222            {
223            id: "Entity_" + field + "_" + 1,
224            value: id,
225            },
226        url: "/ajax/save", 
227        });
228    }
229 
230$(function()
231    {
232    register_editables();
233    });
234 
235/*
236    <style type="text/css">
237        .ui-button { margin-left: -1px; }
238        .ui-button-icon-only .ui-button-text { padding: 0.35em; }
239        .ui-autocomplete-input { margin: 0; padding: 0.48em 0 0.47em 0.45em; }
240    </style>
241    <script type="text/javascript">
242    */
243    (function($) {
244        $.widget("ui.combobox", {
245            _create: function() {
246                var self = this;
247                var select = this.element.hide();
248                var input = $("<input>")
249                    .insertAfter(select)
250                    .autocomplete({
251                        source: function(request, response) {
252                            var matcher = new RegExp(request.term, "i");
253                            response(select.children("option").map(function() {
254                                var text = $(this).text();
255                                if (this.value && (!request.term || matcher.test(text)))
256                                    return {
257                                        id: this.value,
258                                        label: text.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + $.ui.autocomplete.escapeRegex(request.term) + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "<strong>$1</strong>"),
259                                        value: text
260                                    };
261                            }));
262                        },
263                        delay: 0,
264                        change: function(event, ui) {
265                            if (!ui.item) {
266                                // remove invalid value, as it didn't match anything
267                                $(this).val("");
268                                return false;
269                            }
270                            select.val(ui.item.id);
271                            self._trigger("selected", event, {
272                                item: select.find("[value='" + ui.item.id + "']")
273                            });
274                           
275                        },
276                        minLength: 0
277                    })
278                    .addClass("ui-widget ui-widget-content ui-corner-left");
279                $("<button>&nbsp;</button>")
280                .attr("tabIndex", -1)
281                .attr("title", "Show All Items")
282                .insertAfter(input)
283                .button({
284                    icons: {
285                        primary: "ui-icon-triangle-1-s"
286                    },
287                    text: false
288                }).removeClass("ui-corner-all")
289                .addClass("ui-corner-right ui-button-icon")
290                .click(function() {
291                    // close if already visible
292                    if (input.autocomplete("widget").is(":visible")) {
293                        input.autocomplete("close");
294                        return;
295                    }
296                    // pass empty string as value to search for, displaying all results
297                    input.autocomplete("search", "");
298                    input.focus();
299                });
300            }
301        });
302 
303    })(jQuery);
304   
305$(function()
306    {
307    $(".autocomplete").combobox();
308    $(".autocomplete").autocomplete({select: update_autocomplete});
309    $(".autocomplete").bind({"autocompleteselect": update_autocomplete});
310    $(".autocomplete").bind({"autocompletechange": update_autocomplete});
311    });
312 
313// -->
314</script> 
315 
316       
317   
318</html>