How can i load the jquery with rails. I have try in the following
<script src="jquery-1.7.1.min.js"></script>
<script src="jquery.masonry.min.js"></script>
<script>
$(function () {
var $container = $('#container');
$container.imagesLoaded(function () {
$container.masonry({
itemSelector: '.item'
});
});
});
</script>
But i am getting an error. This is included in my html code. Not in the header. Now I come to realize when clicking on it i get the error route not set up. How can i load it the proper way.
See application.js.
By default, jquery is part of rails starting from rails 3. You dont need to include it separately.
Related
When I changed the page, the javascript did not execute.
index.html
$("#login").submit(function(e){
e.preventDefault();
$.mobile.changePage('main.html', {
reverse : false,
changeHash : false,
allowSamePageTransition : true,
reloadPage:true,
transition: "flow"
});
});
main.html
<script type="text/javascript">
$(document).ready(function () {
alert("Test");
});
</script>
The above javascript in main.html does not execute upon page change; can anyone explain why this is and how to fix it?
It's because change page will cause reload of pages and JQM is not getting the head section of recently loaded page in the DOM so any scripts in the <head> of the document will not be included.
Hence, you can put all of your JS into an external file and include it on each HTML page of the site that you required.
You can also place your JavaScript code inside the data-role="page" element and you JS will be included.
This code in a simple HTML file works:
<script>
function load() {
alert("load event detected!");
}
window.onload = load;
</script>
However, if I put it into the index.html file of an AngularJS web app, it does not. Does anybody know why not?
Call your function with ng-init
var app = angular.module('app',[]);
app.controller('myController', function($scope){
$scope.load = function () {
alert("load event detected!");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='app'>
<div ng-controller='myController' ng-init='load()'></div>
</div>
I prefer putting this kind of code in the app.run() function of angular.
e.g.
angular
.module('testApp', ['someModule'])
.constant('aConstant', 'hi')
.config(function($rootProvider) {/*some routing here*/})
.run(['$window', function($window) {
$window.onload = function() {/*do your thing*/};
}]);
also check this nice post that depicts the order that some things happen in angular
AngularJS app.run() documentation?
the following should work:
jQuery(function(){ /** my window onload functions **/ })
since angular uses a subset of jquery anyways you also may include the real thing.
better yet:
Instead of using this, you may consider using the angular way of initialising things:
that would be: http://docs.angularjs.org/api/ng.directive:ngInit
< any ng-init="functionInController(something)"...
to make it invisible until init: http://docs.angularjs.org/api/ng.directive:ngCloak
< any ng-cloak .....
to initialise/customize whole parts: http://docs.angularjs.org/guide/directive
< any directive-name....
Try
angular.element($window).bind('load', function() {
});
I'm trying to load a google+ 1 button on a page, the goal is to have the buttons markup inserted into the page via ajax and then make the call for the button to be rendered.
The button renders fine when the page is loaded first time around. The problem arises when the markup is fetched from /displaycode.php and then the render call is made again.
REFRESH
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
{"parsetags": "explicit"}
</script>
<script type="text/javascript">
$(function() {
$("#btn").click(function() {
$('#live-preview').empty();
$("#live-preview").load('/displaycode.php #code');
gapi.plusone.go();
return false;
});
gapi.plusone.go();
});
</script>
<div id="live-preview"><div id="code"><div class="g-plusone"></div></div></div>
</div>
A demo of the problem can be viewed here http://32px.co/googleplusdemo.php . Thanks for any help in advance.
Render method
Use explicit render: https://developers.google.com/+/plugins/+1button/#example-explicit-render
gapi.plusone.render('live-preview')
instead of:
gapi.plusone.go();
Also needs "{"parsetags": "explicit"}" set:
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
{"parsetags": "explicit"}
</script>
Edit
You further have to make sure to call render after the jQuery load is complete. So the element is really in the DOM.
$(function() {
$("#btn").click(function(e) {
e.preventDefault();
$('#live-preview').empty(); // Not necessary
$("#live-preview").load('/displaycode.php #code', function() {
gapi.plusone.render('live-preview');
});
});
gapi.plusone.render('live-preview');
});
I am trying load content via ajax when an <a> is clicked. The code I am using:
<script type="text/javascript">
jQuery(document).ready(function(){
// ajax pagination
jQuery('.znn_paginate a').live('click', function(){
var link = jQuery(this).attr('href');
jQuery('.lay1').html('<div class="zn_ajaxwrap"><div class="zn_ajax"></div></div>');
jQuery('.lay1').fadeOut("slow").load(link+' .post').fadeIn('slow');
});
}); // end ready function
</script>
The problem is When the content is loaded the page jumps to the top. I treid to prevent it with: e.preventDefault(); But then the the ajax loading stopped. I guess it stopped prevented the ajax loading too..
Is there any fix for this?
Thanks
P.S: I am using it on wordpress. Here is the tutorial I followed: http://seonix.org/wordpress-seo/easy-ajax-pagination/
EDIT
There was something wrong with the code. I am now using this without any problem: http://pastebin.com/vbXqmTHq
two things:
your function() should return false.
also the link itself should have href="javascript:void(0);
Could any one give an example, how to use Jquery in Controller Page. MVC3 -ASP.NET(How To put various tags like )
I want to show a simple alert before rendering a view in Controller.
Thank you.
Hari Gillala
Normally scripts are part of the views. Controllers shouldn't be tied to javascript. So inside a view you use the <script> tag where you put javascript. So for example if you wanted to show an alert just before rendering a view you could put the following in the <head> section of this view:
<script type="text/javascript">
alert('simple alert');
</script>
As far as jQuery is concerned, it usually is used to manipulate the DOM so you would wrap all DOM manipulation functions in a document.ready (unless you include this script tag at the end, just before closing the <body>):
<script type="text/javascript">
$(function() {
// ... put your jQuery code here
});
</script>
If you are talking about rendering partial views with AJAX that's another matter. You could have a link on some page that is pointing to a controller action:
#Html.ActionLink("click me", "someAction", null, new { id = "mylink" })
and a div container somewhere on the page:
<div id="result"></div>
Now you could unobtrusively AJAXify this link and inject the resulting HTML into the div:
$(function() {
$('#mylink').click(function() {
$('#result').load(this.href, function() {
alert('AJAX request finished => displaying results in the div');
});
return false;
});
});