I am using the type ahead address picker given here
1) Have included google map and typeahead. Jquery is added through a gem and referenced in application.js
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=places&language=en-US"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.9.3/typeahead.min.js"></script>
<script type="text/javascript" src="https://rawgithub.com/sgruhier/typeahead-addresspicker/master/dist/typeahead-addresspicker.js"></script>
2)Have added input text
<input id="address" type="text" placeholder="Enter an address">
3)Have instantiated address picker and typeahead.
$(document).on('ready page:load', function () {
var addressPicker = new AddressPicker();
$('#address').typeahead(null, {
displayKey: 'description',
source: addressPicker.ttAdapter()
});
});
Issue was resolved here
Should have included https://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.js
for typeahead + bloodhound
Related
On select2 4.0.2, right after I init select2, I try to do :
$(myelement).select2("open")
and I have this error :
The select2('open') method was called on an element that is not using Select2
Here you have a working example. Are you sure to use same element use for initialization of Select2?
$("#myField").select2();
$("#myField").select2("open");
.select2 {
width:50%
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/select2/4.0.2/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/select2/4.0.2/js/select2.full.js"></script>
<select class="form-control select2" id="myField" name="myField" autocomplete="off">
</select>
I am new to phonegap and and trying to build a basic app that is pulling data from a rails app using ajax. Here are the relevant files...
#www/index.html
<body>
<h1>Task List</h1>
<div class="page current" id="tasks">
<header>
<h1>Open Tasks</h1>
</header>
<ul></ul>
</div>
<script type="text/javascript" src="phonegap.js"></script>
<script type="text/javascript" src="js/zepto.min.js"></script>
<script type="text/javascript" src="js/tasks.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
</body>
</html>
#www/js/tasks.js
function loadTasks() {
var tasks = $('#tasks ul');
$.ajax({
type: 'GET',
url: 'http://limitless-chamber-2009.herokuapp.com/tasks.json',
dataType: 'JSON',
timeout: 5000,
success: function(data) {
$.each(JSON.parse(data), function(i,item){
tasks.append('<li>'+item.name+'</li>')
});
},
error: function(data) {
tasks.append('<li>There was an error loading the tasks');
}
});
}
loadTasks();
When I loaded index.html in my web browser I get the error "There was an error loading the tasks". I know there are sophisticated ways to debug this, but I'm a js and ajax noob, so not sure what to check, but I am open to suggestions. Any help appreciated.
To make this work in a Cordova/PhoneGap app, try setting your whitelist.
In ./www/config.xml, set your whitelist to:
<access origin="limitless-chamber-2009.herokuapp.com" />
or even
<access origin="*" />
To make this work in your web browser, you will need to start Chrome with web-security disabled: https://stackoverflow.com/a/6083677/878602
UPDATE This seems to no longer be an issue in latest Fx/Chrome using edge jQuery
PROBLEM: The autocomplete will be behind the dialog and if you move it, the dialog will move outside the page.
Investigation
I have already checked
Why does jquery ui dialog mangle my jquery.tokeninput.js autocomplete?
And read github requests
issue 93 Result list doesn't display properly when in jQuery-ui modal dialog and
issue 94 Dropdown positioning issues
but I still have the same issues with what I believe are the latest of everything (TokenInput JS and CSS from github jQuery TokenInput).
DEMOS AND CODE
DEMO1: how TokenInput works when jQuery UI is commented out
DEMO2: what I want to have working
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" type="text/css" />
<script type="text/javascript" src="jquery.tokeninput.js"></script>
<link rel="stylesheet" href="token-input-facebook.css" type="text/css" />
<button id="filterBut">FILTER</button>
<div id="dialog-form" title="Filter" style="border:1px solid black">
<p class="validateTips">Enter text contained in the respective fields</p>
<form>
<fieldset>
<label for="name">Field1</label><br/><input type="text" name="Flt1" id="Flt1" class="text ui-widget-content ui-corner-all" style="width:300px"/><br/><br/>
<label for="email">Field2</label><br/><input type="text" name="Flt2" id="Flt2" value="" class="text ui-widget-content ui-corner-all" style="width:300px" />
</fieldset>
</form>
</div>
<script>
$(function() {
$("#Flt1, #Flt2").tokenInput([
{id: 7, name: "Ruby"},
{id: 11, name: "Python"},
{id: 13, name: "JavaScript"},
{id: 17, name: "ActionScript"},
{id: 19, name: "Scheme"},
{id: 23, name: "Lisp"},
{id: 29, name: "C#"},
{id: 31, name: "Fortran"},
{id: 37, name: "Visual Basic"},
{id: 41, name: "C"},
{id: 43, name: "C++"},
{id: 47, name: "Java"}
],{theme:"facebook"});
$( "#dialog-form" ).dialog({
autoOpen: false,
height: 400,
width: 460,
modal: true
});
$( "#filterBut" ).click(function() {
// suggestion from
// https://stackoverflow.com/questions/6669654/why-does-jquery-ui-dialog-mangle-my-jquery-tokeninput-js-autocomplete
$("#dialog-form script").remove();
// does not seem to change anything
$( "#dialog-form" ).dialog( "open" );
});
});
</script>
</div>
</div>
</form>
This is a known issue of this library (issue #94 on github). You can collect the patched files from here to fix the issue.
Change style en css for div.token-input-dropdown and replaze z-index:1 with z-index:1005.
I worked on your HTML a bit and seems like setting zindex:1005 shows the dropdown over the dialog.
],{theme:"facebook", zindex:1005});
However, if you move the dialog, the autocomplete dropdown stays on the previous position.
This jQuery code solves the hiding problem for me (thanks #user2192014 and this answer for the idea):
$(".token-input-dropdown-facebook, .token-input-list-facebook").css("z-index","9999");
I have the following markup in an MVC 3 Razor view. As is, the ComboBox renders properly, but doesn't drop down when I click the dropdown arrow. If I remove the jQuery validate script references that are added to the view by the create view template, all works. What could be wrong here?
<script src="#Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script type="text/javascript">
function provinceChanged() {
var cityCombo = $('#Cities').data('tComboBox');
cityCombo.loader.showBusy();
$.get(url, { provinceId: e.value }, function (data) {
cityCombo.dataBind(data);
cityCombo.loader.hideBusy();
cityCombo.enable();
});
}
</script>
...
<div class="editor-field">
#(Html.Telerik().ComboBox()
.Name("Provinces")
.SelectedIndex(1)
.BindTo(new SelectList(Model.ProvinceList, "ProvinceId", "Name"))
.ClientEvents(events => events.OnChange("provinceChanged"))
)
</div>
Here is how reference jQuery, in my master layout:
<head>
<title>#ViewBag.Title</title>
<link href="#Url.Content("~/Styles/Blueprint/screen.css") rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
#Html.Telerik().StyleSheetRegistrar().DefaultGroup(group => group.Add("telerik.common.css").Add("telerik.vista.css"))
<script src="#Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script>
</head>
RESOLVED: I have no idea what else changed, but after putting the jQuery Validate references back just for a code sample, my code now works with them as well.
Check this. You are probably using an older version of jquery.validate.js which conflicts with jQuery.fn.delegate.
I use inplacericheditor plugin and tiny_mce
Before asset_packager usage, this is how I include the files and they work well
<script src="/javascripts/patch_inplaceeditor_1-8-2.js" type="text/javascript">
</script>
<script src="/javascripts/patch_inplaceeditor_editonblank_1-8-2.js" type="text/javascript" </script>
<script src="/javascripts/tiny_mce/tiny_mce.js" type="text/javascript"></script>
<script src="/javascripts/tiny_mce_init.js" type="text/javascript"></script>
<script src="/javascripts/inplacericheditor.js" type="text/javascript"></script>
My asset_packager.yml section looks like this for the above files:
tinyeditor:
patch_inplaceeditor_1-8-2
patch_inplaceeditor_editonblank_1-8-2
tiny_mce/tiny_mce
tiny_mce_init
tiny_mce/langs/en
tiny_mce/themes/advanced/editor_template
tiny_mce/themes/advanced/langs/en
tiny_mce/plugins/save/editor_plugin
tiny_mce/plugins/autoresize/editor_plugin
tiny_mce/plugins/paste/editor_plugin
tiny_mce/plugins/preview/editor_plugin
tiny_mce/plugins/table/editor_plugin
tiny_mce/plugins/contextmenu/editor_plugin
tiny_mce/plugins/emotions/editor_plugin
inplacericheditor
When I include the asset_packaged file and load the page (in production)
I get the following errors:
"Ajax.InPlaceEditor is undefined"
"Ajax.InPlaceRichEditor is not a constructor"
Can anyone shed some light on where I am going wrong or share a better way to asset_package tinymce?
Thanks!
Ajax required prototype.js
try Following just after tiny_mce_init.js
<%= javascript_include_tag :defaults %>
<script src="/javascripts/inplacericheditor.js" type="text/javascript"></script>