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>
Related
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 cannot export prime-faces chart as Image.
categoryModel is same as Prime-show Case.
Is it need dependency lib to export?
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
......
template="/common/commonLayout.xhtml">
<ui:define name="content">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript">
//<![CDATA[
function exportChart() {
//export image
$('#output').empty().append(chart.exportAsImage());
//show the dialog
dlg.show();
}
//]]>
</script>
<h:form enctype="multipart/form-data">
<p:barChart id="basic" value="#{ChartActionBean.categoryModel}" legendPosition="ne"
title="Bar Chart" widgetVar="chart" animate="true" yaxisLabel="Number of Count"/>
<p:commandButton type="button" value="Export" icon="ui-icon-extlink" onclick="exportChart()"/>
<p:dialog widgetVar="dlg" showEffect="fade" modal="true" header="Chart as an Image">
<p:outputPanel id="output" layout="block" style="width:500px;height:300px"/>
</p:dialog>
</h:form>
</ui:define>
</ui:composition>
In Showcase and Export button and OutputPanel are not wrapped in so $('#output') is able to pick the expected element to append the image.
But in your case you have wrapped these components in so JSF will generate an id for form like j_idt10 and the component's id "output" will become "j_idt10:output".
To fix this:
<h:form id="form1">
//chart
// export button
//dialog containing outputPanel
</h:form>
And in javascript:
function exportChart() {
$('#form1\\:output').empty().append(chart.exportAsImage());
dlg.show();
}
or simply put outside the and $('#output').empty().append(chart.exportAsImage()); will work as expected.
I also think that to specify a model you use a model attribute and not value. So in your case it would be:
<p:barChart id="basic" model="#{ChartActionBean.categoryModel}" legendPosition="ne" title="Bar Chart" widgetVar="chart" animate="true" yaxisLabel="Number of Count"/>
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");
in my data_feed controller and bar action, there's only one line in bar.html.erb:
[1,2,3,4]
My expected output by requesting http://localhost:3000/data_feed/bar is just one line I wrote above.
However, rails help me add some html heads into that page, as below:
<!DOCTYPE html>
<html>
<head>
<title>Guustock</title>
<link href="/assets/application.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/charts.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/data_feed.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/show.css?body=1" media="all" rel="stylesheet" type="text/css" />
<script src="/assets/jquery.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery_ujs.js?body=1" type="text/javascript"></script>
<script src="/assets/charts.js?body=1" type="text/javascript"></script>
<script src="/assets/data_feed.js?body=1" type="text/javascript"></script>
<script src="/assets/show.js?body=1" type="text/javascript"></script>
<script src="/assets/application.js?body=1" type="text/javascript"></script>
<meta content="authenticity_token" name="csrf-param" />
<meta content="lhHWCW82xtqQ8fmgBZemDggL2DGJe+4chXM8MY1LKvs=" name="csrf-token" />
</head>
<body>
[1,2,3,4]
How can I avoid rails doing this?
Thanks!
Env:
linux mint 11.0
ruby 1.9.3 with rvm
rails 3.2.1
EDIT:
Actually I want to provide the json format data in this page as an ajax data source. So these heads will not helpful but break the data.
You're probably rendering within the layout (a view template, which lives in app/views/layouts/), which is the default. If you want to render an action without the layout, use something like
render :bar, :layout => false
in the appropriate action.
See also: http://guides.rubyonrails.org/layouts_and_rendering.html
EDIT:
Please see the documentation linked above. For JSON rendering, you might use this directly from the controller:
render :json => #product
or in your case
render :json => [1,2,3,4]
You could also use JSON view templates (for which you'll need to render again). Using a bar.html.erb template for json is not only tricky as you noticed, it will also produce the wrong content type headers.
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.