There aren't many websites which give such fine tutorials on how to use coffee script to show or hide a div. The thing I want to do is:
I have a div which is shaped like a button, linked_to a user_registration path with Devise.
I want to show a div right besides the button where the user can sign up and do their stuff.
So basically I'm interested if you have any idea on how to make for example, this show up besides the ?
use toogle
$('#target').toggle -> alert 'First handler for .toggle() called.', -> alert 'Second handler for .toggle() called.
Related
I have an Angular JS app with a bootstrap ui modal dialogue hosting a simple edit form.
The form can be for a new "thing" or a populated "thing".
I find that when I cancel out of the modal with the form populated, submit is being called.
Any help appreciated.
Plunkr here... http://plnkr.co/edit/XhQCqlGUfcmQOhqLDeXR?p=preview
I forked your plunk and got it working here: http://plnkr.co/edit/jgg5pDQOH46XgrbW3Mvh?p=preview I think the cancel button was participating in the form submit event since it was inside the form element. Moving it outside of the form seems to have fixed the problem. I also set up the submit event to fire the modalInstance close event and the cancel event to fire the modalInstance dismiss event. This gives you the opportunity to handle things appropriately in the parent controller (ModalDemoCtrl).
EDIT
You could also stop the click event from propagating in the cancel event and still use the save as an input element inside the form tag. See this plunk for example: http://plnkr.co/edit/A81KkUUQEL3IBbOSnHQb?p=preview
I was having a similar problem. My problem was that when I clicked in the button to open the modal, my form was submited. I was using a "button" html tag, without specifying the "type" attribute. So, I found your problem and I went to the W3C documentation. I found that:
Tip: Always specify the type attribute for a button element. Different browsers use different default types for the button element. (http://www.w3schools.com/tags/tag_button.asp)
I wasn't defining the type of my button, so the default type of my browser was submit. I defined the type to "button" and everything is ok now.
I have a jQuery mobile button hooked up to an ajax POST. If the POST fails, the jQuery mobile button stays pressed instead of ``popping up". Any ideas?
It can be done easily.
Here a jsFiddle example made for one of my previous answers: http://jsfiddle.net/3PhKZ/7/
If you take a look there's this line of code:
$.mobile.activePage.find('.ui-btn-active').removeClass('ui-btn-active ui-focus');
It will try to find pressed button on a current active page, if it succeed it will remove 2 classes responsible for a button pressed state. Unfortunately pure CSS solution is impossible here. You can test this example, just comment top line and see what will happen.
One last thing selector $.mobile.activePage can only be used during the pagebeforeshow, pageshow, pagebeforechange, pagechange, pagebeforehide and pagehide page event so takes this into account.
In case you cant use this selector just replace it with a page id, like this:
$('#pageID').find('.ui-btn-active').removeClass('ui-btn-active ui-focus');
So your final code would look like this:
$.ajax( "example.php" )
.success(function() { doStuff(); })
.error(function() {
$('#pageID').find('.ui-btn-active').removeClass('ui-btn-active ui-focus');
})
Add an error clause to your AJAX handling which pops the button back.
$.ajax( "example.php" )
.success(function() { doStuff(); })
.error(function() { /*code to unpress button here*/ })
For those folks out there using "input" and not "anchors" as buttons. When using for instance "submit" and "reset" buttons and pressing them they remain as active, which is sometimes undesired depending on the actions performed when the buttons is clicked.
I am not sure if it is the expected behaviour, I have read that is a jQuery mobile bug, but the behavior is still present at least in jQM 1.3.2
An yes the trick is to remove the active class as stated however those get tricky because the class is not added to the input tag, i*t is added to a parent DIV* that is created by all of the ugly stuff around the "input" to style the button, that is why removing the active class when selecting the input doesn´t work.
By analyzing the HTML produced by jquery mobile a workaround is to:
remove the active class on the input parent instead of the actual input element.
$('.mybutton_class_or_ID').parent().removeClass('ui-btn-active');
I prefer this approach instead of clearing all the active classes across the whole page in case you want to be more selective with the class removal.
I have a form with radio buttons on a page.
I also have a helper method called vanish that adds
raw' style="display: none;" '.
In my view I would like to be able to call a boolean value based on which radio button is selected to activate/deactivate the helper method. The goal would look something like this
<p <%= vanish unless x %> > Stuff that only shows when a certain radio button is selected </p>
I am trying to do this without JavaScript. I am using Ruby on Rails 3.2.13
If you need anything else let me know.
Edit. I have seen this done in rails 2.3 where x would be params[:name] != 'value. This however does not dynamically change the page in rails 3.2
If you need this stuff to change after the page loads, you must use JavaScript. All your Ruby code is going to be executed before the user sees the page.
If this only has to do with the initial view of the page, then you're fine - all you need to do is have a variable that determines which button starts out selected, and use it for both the conditional (x, in your code), and elsewhere in the view where you display the radio buttons - see Rails - How to make a conditional Radio Button checked? for details on setting a default selected radio button like this.
I have 3 different partials, each representing a different step of this process: "_overview.slim", "_setup.slim", and "_submit.slim". I want to show these 3 different partials all in "show.slim" only one at a time, and one after another as the user clicks on "Go to next step". How can I accomplish this in the show action of my controller?
Let say in your show,have a 'Next' button to trigger the next partial.
In the 'Next' button, I can pass a param[:page1] and all the necessary param when click.
In the 'Show', if there is param[:page1] ,then display _partial1.html.erb
its goes all the same.
So if I were you, I would put render all three partials in your show view, and use Javascript, and CSS to manage when each one was shown. If you drop each of those partials in a div, its easy to use JQuery's hide and show methods, linked to the click event of the "Go To Next Step" button. To do it this way you wouldn't have to touch your Controller at all.
I am developing a application in phonegap. In the app, there is a page which contains two textfields and a image. No submit button because I don't want to submit the form. the desired working is as follow..
the user taps the text fields, the keyboard appears.
clicking on the image below calls a javascript(jquery method-> $.post()) function which picks the data from the textfields and send it to server(json). that means I m not submitting the form.
and the go button on the virtual keyboard is supposed to submit the form. But in my case as I m not submitting the form so go button doesn't work and it doesn't look appropriate.
I want to get rid of the button..either it may dismiss the keyboard or call the jquery function which it is not supporting.
I searched a lot over the net. I came to know that if i remove the form tag the go button changes to return button which really worked then the return button again looks dumb.
So please help me to get rid of either of the button(preferably the return button).
I don't think you will be able to get rid off the button. What you could do instead, is to have the input field in form with and onsubmit event. This event should perform the jquery $.post method and return false to prevent standard form submission. This way your go button would actually work the way user expects and you don't have to disable it.