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");
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 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
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
I'm working up an ember-rails app that precompiles Handlebars assets through the rails pipeline. Everything is updated to the latest versions via bundle update.
When we load the index, the ember data is not rendered to the list, despite (app/views/gigs/index.html.erb):
<h1>Gigs</h1>
<script type="text/x-handlebars">
{{ view App.ListGigsView }}
</script>
<script type="text/javascript">
$(function() {
App.gigsController.loadAll(<%= #gigs.to_json.html_safe %>);
});
</script>
So, I checked the ListGigsView, which contains the following (app/assets/javascripts/app/views/gigs/list.js):
App.ListGigsView = Ember.View.extend({
templateName: 'app/templates/gigs/list',
gigsBinding: 'App.gigsController',
showNew: function() {
this.set('isNewVisible', true);
},
hideNew: function() {
this.set('isNewVisible', false);
},
refreshListing: function() {
App.gigsController.findAll()
}
});
Seems like the templateName is pointing fine (this is similar in, say, new.js). Nonetheless, the browser console (Google Chrome Version 25.0.1364.172) keeps returning the following:
Uncaught Error: assertion failed: You specified the templateName app/templates/gigs/list for <App.ListGigsView:ember194>, but it did not exist.
Here is the file at app/assets/javascripts/app/templates/gigs/list.handlebars:
<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
</tr>
</thead>
<tbody>
{{#each gigs}}
{{view App.ShowGigView gigBinding="this"}}
{{/each}}
{{#if isNewVisible}}
<tr>
<td>*</td>
<td>
{{view App.NewGigView}}
</td>
</tr>
{{/if}}
</tbody>
</table>
<div class="commands">
<a href="#" {{action "showNew"}}>New Gig</a>
<a href="#" {{action "refreshListing"}}>Refresh Listing</a>
</div>
Why is the template not rendering? Running Ember.TEMPLATES in the console returns all the other view template links intact:
> Ember.TEMPLATES
=> Object {app/templates/gigs/edit: function, app/templates/gigs/event: function, app/templates/gigs/show: function, application: function}
But not the one for list. Why is that template AWOL?
For reference, I am running the following according to the browser console:
Ember.VERSION : 1.0.0-rc.1 ember.js:339
Handlebars.VERSION : 1.0.0-rc.3 ember.js:339
jQuery.VERSION : 1.9.1
-Edit: I have just discovered that including the Handlebars reference to the Event view in index.html.erb causes that template to disappear,too:
<h1>Gigs</h1>
<script type="text/x-handlebars">
{{ view App.ListGigsView }}
</script>
<script type="text/x-handlebars">
{{ view App.EventView }}
</script>
<script type="text/javascript">
$(function() {
App.gigsController.loadAll(<%= #gigs.to_json.html_safe %>);
});
</script>
Why does this happen? And how can I avoid it?
app/templates/ gets stripped from the template name by default. Try gigs/list.
For me it worked when stripping out templates, e.g. app/gigs/list.
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.