Phoenix.HTML.Link provide a button helper which will generate a html code below:
button("hello", to: "/world", method: :get, class: "btn")
#=> <button class="btn" data-method="get" data-to="/world">hello</button>
The data-to will navigate to the new page when clicking the button. How is it work? I suspected it should have some js code to handle this action but I couldn't found in documentation or source code.
The reason I want to find it is because it generates the new URL with _csrf_token=&_method=get and I want to remove it.
I have found the answer.
The button action is handled by the phoenix_html.js, which generates a form object and submit the form.
Related
I am trying to add a confirmation box before submitting a form in apex. Any ideas of how i can achieve that?
<script type="text/javascript">
response = response2();
function response2(){
apex.confirm("Are you sure you want to submit?)}
</script>
This could be achieved without any custom JavaScript code...
1) Set the button which submits the form to action "Defined by Dynamic Action" and give the button a static id
2) Define a new Dynamic Action which executes when this Button is pressed
3) This DA then have to native actions:
- Confirm
- Submit (Request / Button Name: The static id of your button)
Suppose that you're submitting a form by pushing the P1_BTN_SUBMIT button.
Set its action to Redirect to URL whose contents is
javascript:if(confirm('Are you sure??')){doSubmit('P1_BTN_SUBMIT');}
One option is to define the behavior of the submit button to "Redirect to URL". Then in the Target URL place the following javascript code;
javascript:apex.confirm('Are you sure?','REQUEST');
For example, this is the default behavior of the delete button:
I have a page when you click a button, it opens a Bootrstap 3 modal. This modal's function loads an Ajax call and returns a HTML on a DIV. This HTML has the fields to be used in x-editable. I declared all fields before:
$(document).ready(function() {
$('#Make').editable();
$('#Address').editable();
...
});
The Ajax response have all fields previously defined, but don't open the edit box.
Used console log with no errors. Seems it's not calling the function.
Thanks
solved my own problem. The element name has space on it. Removed and worked fine.
I am using mvc 6 and I would like to "open" component view by using some button onClick.
I can display it by using
<div id="DialogDiv">
#Component.Invoke("MyComponent");
</div>
but I would like to do it so that some button onclick method would call that invoke method and give that div as a reference. Is that possible?
I assume that you want to render component by using ajax request. Since MVC6-beta7 you can do this by utilising View Component Action Result:
See:
https://github.com/aspnet/Mvc/issues/2338
https://github.com/aspnet/Mvc/releases/tag/6.0.0-beta7
The idea for your scenario will be to use JavaScript and call action in controller which will return ViewComponentResult and then render result of that action into your page. You can do this by using jQuery, so it will look like:
$.get("/YourController/YourAction",function(data){
$("#DialogDiv").html(data);
});
I am using recapcha gem in my create users form. The form is submitting by ajax using data-remote=true attribute and then a create.js.erb template is rendered.
The idea is after, submitting the form:
if the user creation is successful to render a proper message
if the user creation is not successful to render the form again
with the corresponding errors
The issue is that, when a error appears (wrong recaptcha code for example) - the recaptcha input field is not rendered.
For now, in the create.js.erb file I have only the following line:
$('#b-register').html('<%=j render partial: 'security_users/sign_in' %>');
Why the #securirty_user object is automatically passed back to the partial when I am not using locals?
When I am rendering the same partial on error that I used initially, why the recaptcha input is missing?
If you want to have a "sign in" form with recapthca which is using ajax, you should not re-rendered the form.
What you should do is the following:
Make create.js.erb view to handle ajax request and in the controller add format.js.
In the new view instantiate JavaScript object which is holding the errors like this:
var current_errors = <%= raw #security_user.errors.to_json %>;
Then you are free to handle the errors as you want - add new elements displaying the error text or other, but if there is only one error:
Clear the password fields
Reload the recaptcha like this:
Recaptcha.reload();
I have a page that collects a set of user comments on the contents of that page. New comments are added to the page by clicking a button and filling out a form that appears via a Bootstrap modal. The results are then inserted into the page via ajax. This is all working fine.
The "results" that are added to the page include another Bootstrap button/link, which looks something like this:
<a tabindex='-1' href='#' class='ajax-modal btn btn-small'
data-target='modal_my-modal' data-backdrop='true'
data-controls-modal='res-modal' data-keyboard='true'
url='/somewhere'>Click me</a>
The link looks and behaves like a button (thanks, Bootstrap!), but, when clicked, doesn't trigger the modal like it's supposed to. However, if I refresh the page in the browser so that this comment, along with the others on the page, are redrawn, the button/link now works fine.
Since the button works when the page is redrawn, I'm assuming that there is some Bootstrap initialization code that runs when the page loads and sets up all the links to do their stuff, and that I need to call this after adding my new button to the page. Is this correct, and, if so, what should I be calling to get the link properly initialized? Thanks!
Short answer: There is indeed a function that gets called when the page is drawn and that sets up the click handlers -- it's my own function that's responsible for setting up the modals. I added a call to that function after the html containing the button/link, and all's well. I'm sure there is a Bootstrap init function that gets called, but calling my own is what was needed.