jQuery UI starting from version 1.8.4 html-encodes Autocomplete suggestions (according to this issue).
This became a problem for me now. I used to theme the output for the suggestions, but now (if I use version 1.8.4 or higher) Autocomplete just html-encodes my theming. All tags like <b>, <span> are being printed to the user instead of displaying the actual styling.
So the suggestions now look like:
<b>su<b>suggestion
another <b>su<b>suggestion
instead of:
suggestion
another suggesion
I've read about custom data, but I use Yii framework and the output is being generated from certain actions (PHP code).
So, how do I theme the output now?
Thank you!
Better use a HTML plugin
You can use open function from jQuery UI to replace the encoded text.
Here's an example:
$this->widget('zii.widgets.jui.CJuiAutoComplete', array(
'name'=>"bug",
'source'=>$this->createUrl('/autocomplete'),
// additional javascript options for the autocomplete plugin
'options'=>array(
'open'=> 'js:function(event, ui){
$("ul.ui-autocomplete li a").each(function(){
var htmlString = $(this).html().replace(/</g, "<");
htmlString = htmlString.replace(/>/g, ">");
$(this).html(htmlString);
});
}'
),
));
Related
I want to know what is the correct way to change any attribute value of an element in geb (selenium).
For example, I have this element:
static content = {
radioSelect(wait: true) { $('input[name=rr]')}
}
Now I want to set any attribute. I did not found a good method, I use this workaround:
(driver as JavascriptExecutor).executeScript( "document.getElementsByName('rr')[0].setAttribute('checked', true)" )
Is there another way? Like radioSelect.setAttribute?
Use the jQuery integration offered by Geb:
radioSelect.jquery.attr("checked", true)
This is the equivalent of
js.exec 'jQuery("input[name=rr]").attr("checked", true)'
But be careful:
The jQuery integration only works when the pages you are working with
include jQuery, Geb does not install it in the page for you. The
minimum supported version of jQuery is 1.4.
I'm using the Like Box social plugin (https://developers.facebook.com/docs/reference/plugins/like-box/) and it works great.
Problem is that I'm using it within a Rails 4 application with Turbolinks. Whenever I reload a page, the like box shows up. If I click on any link, the next page loads and the Like Box doesn't show up.
I tried this already but didn't worked =/
http://reed.github.io/turbolinks-compatibility/facebook.html
Any ideas on how to solve this problem?
The link you have posted in original question is quite nice. It asks us to create three functions:
1) saveFacebookRoot: This is needed so that the div#fb-root can be restored at a later point. This is called upon page:fetch. page:fetch is called while the DoM is still of the old page. i.e: new page has not replaced the old page
2) restoreFacebookRoot: This is needed to that the div#fb-root can be appended back to the page. It is called on page:change. page:change is called when the new DoM is available.
3) There is minor typo in there. We need to call this in page:load
FB.XFBML.parse() // Correct
Instead of :
FB?.XFBML.parse() // InCorrect
Remember that when the page is first reloaded, only the page:change is called out of these three.
The trick here is the use of global variables fb_root and fb_events_bound. These must be accessible in all other pages, but this is the reason why we hate turbolinks in the first place.
References: http://reed.github.io/turbolinks-compatibility/facebook.html
Install observejs:
gem 'observejs'
Then add tag to the widget:
<div as="FB" class="fb-comments" data-href="<%= request.original_url %>"></div>
Then create a new script in javascripts folder (fb.coffee in my example):
ObserveJS.bind 'FB', class
root: document.createElement('div')
#::root.id = 'fb-root'
loaded: =>
if !document.body.contains(#root)
document.body.appendChild(#root)
if FB?
FB.XFBML.parse()
else
#initialize()
initialize: =>
js = document.createElement('script')
script = document.getElementsByTagName('script')[0]
js = document.createElement('script')
js.id = 'facebook-jssdk'
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=YOUR_APP_ID&version=VERSION_OF_API"
script.parentNode.insertBefore(js, script)
Include the js files in your application.js
//= require observejs
//= require fb
I want to update from dojo 1.7 to 1.8.3 so I have to replace the dojo.connect command.
switch:
< div id="universalPushSwitch" data-dojo-type="dojox.mobile.Switch" style="float:right" class="mblSwRoundShape1"></div>
Now I have:
dojo.require("dijit/registry");
dojo.require("dojo/ready");
dojo.require("dojox/mobile/ListItem");
dojo.require("dojo/aspect");
dojo.ready(function(){
dojo.aspect.after(dijit.registry.byId("universalPushSwitch"), "onStateChanged",
function(newState){
alert(newState);
}
)});
Firebug says: "aspect is not defined"
PS: I know I don't use the new AMD loader. This is an old project and I am also new to all the dojo stuff. A simple translate from dojo.require("x");dojo.require("y"); to require(["x","y"], function (x,y){...} doesn't work for me so there is still the old style require.
Try using:
dojo.aspect.after(...);
instead of
aspect.after(...);
And do not stop at the next function ! :-)
If that doesn't work at once, try loading aspect the global way (with a dot, not a slash):
dojo.require("dojo.aspect");
It also could be possible, that the old dojo is not compatible with "/" and that it only works with dots !
Source:
http://livedocs.dojotoolkit.org/dojo/require
Edit
Here is a working fiddle based on your fiddle:
http://jsfiddle.net/9Xdv2/
The main problem with your code was that you did not parse the html. dojo parser converts some specific html to "dojo javascript objects" ! You use that kind of html a lot ! You should have done a:
dojox.mobile.parser.parse();
Everything is in the jsfiddle !
Since you are using dojo 1.8.3 and have been using dojo 1.7, why don't you use the AMD syntax instead of the pre-1.7 ?
You would do something like :
<div id="universalPushSwitch" data-dojo-type="dojox/mobile/Switch" style="float:right" class="mblSwRoundShape1"></div>
And in your js :
require(["dijit/registry",
"dojox/mobile/ListItem",
"dojo/aspect",
"dojo/parser",
"dojo/domReady!"
], function(registry, ListItem, aspect, parser){
parser.parse().then(function(instances){
aspect.after(registry.byId("universalPushSwitch"), "onStateChanged",
function(newState){
alert(newState);
});
});
});
I made a template and there is a <select dojotype="dijit.form.ComboBox" dojoAttachPoint="selectPageNumber" id="selectPageNumber">tag with id and dojoAttachPoint be "selectPageNumber". I want to populate it with options upon create so I add some code to the postCreate function:
var select = dijit.byId("selectPageNumber");
or
var select = this.selectPageNumber;
but I always have select being undefined.
What am I doing wrong?
UPD:
The problem with element has been solved spontaneously and I didn't got the solution. I used neither dojo.addOnLoad nor widgetsInTemplate : true, it just started to work. But I have found the same problem again: when I added another tag I can't get it!
HTML:
<select class="ctrl2" dojotype="dijit.form.ComboBox" dojoAttachPoint="selectPageNumber" id="selectPageNumber">
</select>
<select class="ctrl2" dojotype="dijit.form.ComboBox" dojoAttachPoint="selectPageNumber2" id="selectPageNumber2">
</select>
widget:
alert(this.selectPageNumber);
alert(this.selectPageNumber2);
first alert shows that this.selectPageNumber is a valid object and the this.selectPageNumber2 is null.
widgetsInTemplate is set to false.
all the code is within dojo.addOnLoad()
dojo.require() is valid
I am using IBM Rational Application Developer (if it is essential).
WHY it is so different?
Based on your syntax, I am assuming that you are using 1.6. Your question mentions template and postCreate, so i am assuming that you have created a widget that acts as a composite (widgets in the template).
Assuming 1.6, in your widget, have you set the widgetsInTemplate property to true. This will tell the parser that your template has widgets that need to be parsed when creating the widget.
http://dojotoolkit.org/documentation/tutorials/1.6/templated/
I would remove the id from the select. Having the id means that you can only instantiate your widget once per page. You should use this.selectPageNumber within your widget to access the select widget.
If you are using 1.7 or greater, instead of setting the widgets widgetsInTemplate property, you should use the dijit._WidgetsInTemplateMixin mixin.
http://dojotoolkit.org/reference-guide/1.8/dijit/_WidgetsInTemplateMixin.html
Depending on when dijit.byId() is being called, the widget may not have been created yet. Try using dojo.addOnLoad()
dojo.addOnLoad(function() {
var select = dijit.byId("selectPageNumber");
});
I came close to the solution: it seems like there is a some sort of RAD "caching" that doesn't respond to changes made in html code.
Ways to purge the workspace environment with RAD (based on Eclipse) might be a solution.
I am trying to create form element using Zend_Config_Ini. Among other elements, I have a datepicker element (zendx_jquery_form_element_datepicker) which fails to work.
I have tried setting the element like so:
user.login.elements.Date.type = "datePicker"
and
user.login.elements.Date.type = "zendx_jquery_form_element_datepicker"
either way ends in the same error message:
Plugin by name 'Zendx_jquery_form_element_datepicker' was not found in the registry; used paths: Zend_Form_Element_: Zend/Form/Element/
or
Plugin by name 'DatePicker' was not found in the registry; used paths: Zend_Form_Element_: Zend/Form/Element/
Please help, thanks.
Just add prefix path before form config
$form = new Zend_Form();
$form->addPrefixPath('ZendX_JQuery_Form_Element', 'ZendX/JQuery/Form/Element', 'element');
$form->setConfig($config->form);
Try
user.login.elements.Date.type = "DatePicker"
The class name is class
ZendX_JQuery_Form_Element_DatePicker
I dont know how to make form using ini file. But I know Zendx_jquery_form_element_datepicker is not standed zend form element. It is make by ZendX. So you cant use it as zend element.