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.
Related
In this tutorial it says:
"Opening the spec runner in a web browser will give the expected outcome:"
But does not mention how to do it. How can I do it?
Example code:
var My = {
sqrt: function(x) {
if (x < ) throw new Error("sqrt can't work on negative number");
return Math.exp(Math.log(x)/2);
}
};
Test code:
describe("sqrt", function() {
it("should compute the square root of 4 as 2", function() {
expect(My.sqrt(4)).toEqual(2);
});
});
There should be a SpecRunner.html file that references jasmine, your code, and your spec files. Looks something like this:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Jasmine Spec Runner v2.0.2</title>
<link rel="shortcut icon" type="image/png" href="libs/jasmine-2.0.2/jasmine_favicon.png">
<link rel="stylesheet" type="text/css" href="libs/jasmine-2.0.2/jasmine.css">
<script type="text/javascript" src="libs/jasmine-2.0.2/jasmine.js"></script>
<script type="text/javascript" src="libs/jasmine-2.0.2/jasmine-html.js"></script>
<script type="text/javascript" src="libs/jasmine-2.0.2/boot.js"></script>
<script type="text/javascript" src="libs/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="libs/jasmine-jquery.js"></script>
<!-- include source files here... -->
<script type="text/javascript" src=""></script>
<!-- include spec files here... -->
<script type="text/javascript" src=""></script>
</head>
<body>
</body>
</html>
I have an angular 2 app that I built using the angular cli generator: https://github.com/EdmundMai/angular-2-playing
This is the generator: https://github.com/angular/angular-cli
I ran ng serve and now I have a page I can see when I visit http://localhost:4002
My dist/index.html file in the angular 2 app looks like this:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>AngularTwo</title>
<base href="/">
<script src="/ember-cli-live-reload.js" type="text/javascript"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<script src="http://carbon.ec2.crowdtap.com/component_importer.js"></script>
</head>
<body>
<angular-two-app>Loading...</angular-two-app>
<script src="vendor/es6-shim/es6-shim.js"></script><script src="vendor/reflect-metadata/Reflect.js"></script><script src="vendor/systemjs/dist/system.src.js"></script><script src="vendor/zone.js/dist/zone.js"></script>
<script>
System.import('system-config.js').then(function () {
System.import('main');
}).catch(console.error.bind(console));
</script>
</body>
<script>
window.carbon.importComponents({ components: ['ct-button', 'ct-button/ct-button-link', 'ct-dialog', 'ct-progress'] });
</script>
</html>
In my rails view, I am trying to include these JS files:
<script src="http://localhost:4200/vendor/es6-shim/es6-shim.js"></script>
<script src="http://localhost:4200/vendor/reflect-metadata/Reflect.js"></script>
<script src="http://localhost:4200/vendor/systemjs/dist/system.src.js"></script>
<script src="http://localhost:4200/vendor/zone.js/dist/zone.js"></script>
<script src="http://localhost:4200/system-config.js"></script>
<script src="http://localhost:4200/main.js"></script>
However, it's not working and complaining that main.ts:1Uncaught ReferenceError: require is not defined
Is there a proper way of doing this?
You need to change the <base href="/"> tag (line 6) in the generated
dist/index.html
to <script>document.write('<base href="' + document.location + '" />');</script>
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
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 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>