I have a Rails app with Haml views. Now I want to add AngularJS to some parts of the application, but the problem is that the Haml views are rendered server-side and the AngularJS code is not working, because it is rendered client-side.
Let's say I have just this in my index.html.haml:
!!!
%html{"ng-app" => "Test"}
%head
%script{:src => "http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.js"}
:javascript
function Clock($scope) {
$scope.currentTime = new Date();
}
%title Welcome to AngularJS
%body
%h1 Hello, World.
%p{"ng-controller" => "Clock"}
The current time is {{currentTime | date:'h:mm:ss a'}}.
So currently, it's just printing out everything within the curly brackets without actually processing it. There are solutions but they for situations where your complete view is replaced by an AngularJS template. I want to use AngularJS mainly for small bits of functionality in my Rails app. Any ideas how to solve this?
John,
I have edited your code a bit here: http://codepen.io/anon/pen/vKiwH
%html{"ng-app"=>true}
%p{"ng-controller" => "clock"}
The current time is {{currentTime | date:'h:mm:ss a'}}.
and the javascript is:
function clock($scope) {
$scope.currentTime = new Date().getTime();
}
Related
I've just finished building a nuxt.js & contentful website. There are several routes that need to be generated when people hit the website but it doesn't seem to generate all the routes or not recognise some pages unless I refresh. Example - I upload a blog post to contentful and it doesn't appear in the list of blog posts but when I change the text of a blog that is appearing with no issue, I have attached my config generate below
generate: {
routes () {
return Promise.all([
client.getEntries({
'content_type': 'product'
}),
client.getEntries({
'content_type': 'kebaProduct'
}),
client.getEntries({
'content_type': 'blogPost'
}),
])
.then(([productEntries, kebaEntries, blogEntries]) => {
return [
...blogEntries.items.map(entry => `/blog/${entry.fields.slug}`),
...productEntries.items.map(entry => `/products/${entry.fields.slug}`),
...kebaEntries.items.map(entry => `/products/ev-charging/${entry.fields.slug}`),
]
})
}
It works fine when I am on localhost and all the product routes are being generated and updated fine, only some of the 'kebaProduct' routes are being created when I run npm run generate. Not sure what I am missing
Note when I do generate although I have 5 'kebaProducts on contentful' it only generates one .html file not sure what the expected behaviour is.
Figured it out. If some content has been specified and it isn't present in the contentful code then the page will fail to be generated as it will throw an error. You can do checks with v-if for content and conditionally render it that way or make sure all fields are 'required' in the Contentful validations
I am trying to integrate SMS in my web application. I added the code in my last line of function:
header("Location:http://www.bulksmsservice.co.in");
But its not redirecting to that site. (Function is in model page)
If you use the PHP Command header, be sure there is no output before you call it. To do it in the Yii view file is too late. But to do this in the Yii Controller is not a good Practice. Better would be $this->redirect() or in the view File use Javascript Code:
<script>
window.location ='http://www.bulksmsservice.co.in';
</script>
i added my function sendbulk in controller and replace code with below
function sendbulk($num,$msg)
{
$link = "http://www.bulksmsservice.co.in/api/sentsms.php?username=****&api_password=*******&to=".$no."&priority=2&sender=******&message=".$msg. "&unicode=1";
$ctx = stream_context_create(array(
'http' => array(
'timeout' => 1
)
)
);
file_get_contents($link, 0, $ctx);
}
Now it's working perfectly for single messages and multiple messages :)
I am working on integrating jquery pageless plugin with a rails application. The pageless plugin works seamlessly when i write out the javascript. The issue lies in trying to have a javascript method issued upon complete. What i am trying to accomplish is having a helper method to generate it, but it renders the javascript with quotes around my callback method which then generates an error in the javascript
Uncaught TypeError: Object reloadMasonry has no method 'call'
here is the helper method code
def pageless(total_pages, url=nil, container=nil) opts = {
:totalPages => total_pages,
:url => url,
:loaderMsg => 'Loading more results',
:loaderImage => image_path("load.gif"),
:complete => "reloadMasonry"
}
container && opts[:container] ||= container
javascript_tag("$('#masonry-container').pageless(#{opts.to_json});")
end
This is the produced javascript code
<script type="text/javascript">
//<![CDATA[
$('#masonry-container').pageless({"totalPages":3,
"url":"/articles",
"loaderMsg":"Loading more results",
"loaderImage":"/assets/load.gif",
"complete":"reloadMasonry"});
//]]>
</script>
the javascript results in having quotes around the reloadMasonry callback function
reloadMasonry = function(){
$('#masonry-container').masonry('reload');
}
if i copy the exact javascript produced, and simply remove the double quotes around the javascript callback method ( reloadMasonry ) in this case, everything works seamlessly.
does anyone have any suggestions.
I'm building a sort-of clone of CoverItLive in Rails 3.1 and want to have the stream of comments automatically update. I'm using a partial in the view to display comments. There's a lot of info out there on doing UJS and AJAX wit forms or buttons or links in Rails, but I can't find any specific examples for what I need to do.
I'm assuming that .ajax() is the best approach, but I've never used it before and not sure if I need to provide .js.erb files when using this particular function? Could I just have the controller send JSON back to the client and go from there, or is there a better approach in rails?
This is what I'm thinking so far, based on what I read at another question:
setInterval(function() {
$.ajax({
type: 'GET',
url: ''<%= comments_path(:json) %>'',
data: {
data: "comments_data"
},
cache: false,
success: function(result) {
if (result == "true"){
alert("true");
}else{
alert("false");
}
}
});
}, 3000);
As an alternative you should look into Private Pub, a gem that Ryan Bates has put togeather. See a screencast about it on railscasts.
The trouble with your solution is now often you server will be hit unnecessarily, i guess it depends on the number of concurrent users you thing will be viewing this page.
if you do go down your route the .js.erb could just have a somthing like this in it:
$('#id_of_area_to_replace').html("<%= escape_javascript(render"comments/index") %>")
This would replace the whole area else you could just append new comments to the bottom of the area
- form_for(#post, :remote => true, :id => 'post_form') do |f|
Works as expected in FF and Chrome, but IE just processes the submit action normally, without any ajax request.
Not really seeing any info on this on the rest of the internet so I imagine I've done something wrong somehow. Ive used both the default rails.js, and the jquery version from the github page
Well, I don't know why the default rails version doesn't work for me here on IE, but I wrote this as a workaround:
if ($.browser.msie) {
var form = $('form#new_post');
form.find('input#post_submit').bind('click', function(){
var data = form.serializeArray();
$.ajax({url: '/posts', type: 'POST', data: data});
return false
});
}
And now it's working correctly. Shouldn't something like this be included in rails.js if this is in fact a problem with Rails, and not something that I've somehow done?
In our Rails 3 app the form tagged as data-remote wasn't turned into an AJAX form any longer after we had upgraded to jquery-rails 1.0.19. IE7 wasn't able to load the jquery.js - there seems to be a problem with version 1.7.1 of jQuery currently. After downgrading to jquery-rails 1.0.18 the problem disappeared again.