I have a simple comment system when I can dynamically add replies and I am trying to add a UJS way of allowing the user to cancel the reply. I have a text field with id="comment_reply_content" and followed with an
<input id="cancel_reply" data-remote="true" class="btn btn-mini" type="button" value="Cancel">
In my application.js file I added:
$('#cancel_reply').live('ajax:success', function() {
alert('hello');
// $('#comment_reply_content').val('');
});
No matter what I do I can't get this to work. I commented out the actual functional javascript that clears the form etc. but now I have resorted to a simple alert for testing. Placing the alert alone in my application.js works fine. I have *.js files in my controllers which are working to create the new reply forms etc. so I know that UJS is working. I am pretty sure I am just missing something easy here. I have tried changing the live to bind with no success.
Related
When I navigate to a form using vue-router by adding a link with a <router-link> element, the form does not work. When I hit submit I get a 404 response.
However, if I navigate to it using an <a> tag (triggering a page reload) then it works perfectly.
I suspect that this has to do with the page rendering as a SPA and for some reason not loading an important part of the form for Netlify unless the form page is reloaded? Why is this happening and is there an elegant solution to the problem? I could just replace all links to forms with tags but I'm sure that there is a better solution, I just don't understand the problem well enough to find it.
For context, I am using Nuxt. The forms are recognized by Netlify on the backend and can accept submission with the tag link so that is not the problem.
Since you're using Nuxt, you probably should go SSG/full static with target: 'static' (hostable on Netlify-like platforms) or with target: 'server' (hostable on Heroku-like platforms) but at any point, you should have ssr: true (default value). When you do have this, the biggest part is done.
In Nuxt, you should use <nuxt-link> rather than <router-link>, it works exactly the same (takes the same params etc) but it's more specific to Nuxt and SSR/SSG compatible while <router-link> is not. More details here: https://nuxtjs.org/docs/2.x/features/nuxt-components#the-nuxtlink-component
So, with all of this it should already work great. If it's not, I will gladly help you spot the issue if you have a github repo.
An alternative solution can be to use some form without any SSR dependency like Formspree: https://formspree.io/ (works fine with any SPA)
It works great, really simple. But I'd rather invite you to make a proper SSR form since you're using Nuxt.
PS: use <a> tags only for external links aka the ones which do not start with your domain name, nothing else. A follow of this kind of link is like a hard refresh and should be avoided at all costs.
EDIT: how to deploy by cleaning the cache.
EDIT on how to achieve a working form:
<template>
<div>
<form
netlify
action="/"
method="POST"
name="Contact"
>
<input type="hidden" name="form-name" value="Contact" />
<!-- ... -->
</form>
</div>
</template>
As told in the docs:
[...] inject a hidden input named form-name [...] and the hidden form-name input’s value matches the name attribute of form
Working fine. Could add a honeypot to it to make it even more secure!
bear with me, you don't need to watch the video, nor read the github project, just for completeness:
from the laracasts about vue js and form submit
see github project here
<form #submit.prevent="doSubmit()" #keydown="form.errors.clear($event.target.name)">
this will clear the error of an element in case of "keydown" event. Now this won't work for <select> as users usually click or change for sure
so what I want to do is something like
<form #submit.prevent="doSubmit()" #keydown#change="form.errors.clear($event.target.name)">
but vue js does not seem to have syntax to do the same thing for multiple events
so only solution is:
<form #submit.prevent="doSubmit()" #change="form.errors.clear($event.target.name)" #keydown="form.errors.clear($event.target.name)">
I repeat the question:
how to do the same thing for 2 different events?
#scroll#click any 2 events
the actual solution to my problem is secondary
Instead of
#keydown#change="form.errors.clear($event.target.name)"
use
#input="form.errors.clear($event.target.name)"
It will work for any input event occurs.
For whatever reason, whenever I build my project, any changes I've made to a view that are not html do not get displayed. Instead it pulls all the info from the partial view (which in our application doesn't get updated when I make a change in the view). So every time I build my project, the application serves me the partial view and I have to go into each view that I made changes in and make some sort of html change in order for the changes I made prior to the build display. Eventually, this functionality will change, but right now my boss doesn't want to mess with it just yet. I've tried disabling cache in chrome's dom (f12) as well as downloading an extension to force the page to not display any chached versions of pages but that doesn't seem to help. What else can I do until we get the partial views removed properly?
UPDATE:
I kinda goofed on the title. Whats happening is the generated files are what are being served to me from my localhost rather than any changes I made to a view (html or otherwise), if I made those changes prior to a build.
so in the view I'd have this:
<body>
<div>Hello World!</div
<div><h2>Sample Text</h2></div>
</body>
<script>
$(document).ready(function () {
//Some Javascript code
});
Which is the way the page was originally created by someone else. They also manually made a partial generated file and that file doesn't rre-generate when I make changes to the view.
So if I made these changes:
<body>
<div>Hello World again!</div
<div><h2>Sample Text</h2></div>
</body>
<script>
$(document).ready(function () {
//Some Javascript code
});
and then built the project, it would not serve me these changes, it would grab the generated file (which didn't get updated with my changes) and serve that to me unless AFTER I do the build, I go into that specific view and make an HTML Change (for some reason making a change with Javascript doesn't help). Then I can see my changes. AND it will stay that way until I do another build at which point, everything reverts back to the partial generated views until I make an HTML change in the view.
Deleting the Generated files is the only way I can see to fix the problem I just wasn't sure if it would break the application and it doesn't.
Where exactly do you add jquery code to rails 3.1.3? New to rails and I want to use masonry.js /http://masonry.desandro.com/ to my rails app.
I added jquery.masonry.min.js to app/assets/javascript and put //= require jquery.masonry.min in application.js but not sure where to put the masonry javascript code below. I thought it would go in the application.js but there is a comment that says it's not recommended to put code there. Any help?
$(function(){
$('#container').masonry({
// options
itemSelector : '.item',
columnWidth : 240
});
});
Rails is just trying to encourage you to keep your javascript organized, so that the main javascript file doesn't get massive and messy. You can put it in application.js while you are playing around and then move it to a page-specific javascript file later if you want, it won't actually hurt anything.
Rails will automatically make you an empty javascript file for each model, so if know you'll be using this in a model called posts, you would put it in app/assets/javacsripts/posts.js.
More on how the asset pipeline works here.
I have a modal window using jqmodal. I need a button within that modal to load a different page in the modal. I have this functioning in all browsers except safari.
JS
<script language="javascript">
function shipCalc() {
$('.jqmWindow').load("/ash/shop/shipping.php");
}
</script>
HTML
<form name="form9" id="form9" method="post">
Zip: <input type="text" size="5" name="zip">
<a href="#" id="submitbtn" onclick= "shipCalc();" >zip</a>
</form>
KEEP IN MIND! The class .jqmWindow is a modal window using the jqmodal jquery plugin. It is NOT just a div on a page. I am using the method .load() to change what has been loaded in the modal window after it has popped up. The html shown above is inside the page that is originally loaded in the modal. I am having trouble understanding why this works in all browsers besides safari. I posted earlier and got some responses that weren't quite addressing the real problem here, which is that I can not use the .load() method to load anything into my modal window in safari. (Ive stripped some non-important information regarding future modifications I will make to further make this suite the needs of the site, just to keep this nice and simple to understand...)
function shipCalc() needed to be on both the initial page AND the page that gets loaded into the modal for safari to load everything properly. All other browsers did not require that. All is working now, so I figured I would post my own answer in case anyone was ever searching for something similar!