We have a form within a modal window.
I have a submit button, which saves to db. And I would like to simultaneously close the modal window.
The function for close is correct, just not my usage lol.
<input type="submit" name="upload_thumbnail" value="Save Thumbnail" id="save_thumb" onclick="$.lightbox().close();" />
The modal window , contains iframe with php / html within it, this form is part of that iframed html code.
Any suggestions ?
To close the dialog when the element with ID save_thumb is clicked:
$('#save_thumb').click(function ()
{
$.lightbox().close();
});
You might want to bind to its parent form's submit event, however, since keyboard events won't trigger the click handler:
$('#my_form_id').submit(function ()
{
$.lightbox().close();
});
Whichever you decide on, make sure to wrap it up in a document ready handler.
Add this javascript to your file and remove the onclick attribute on your button. Make sure the javascript is added inside tags.
$(document).ready(function(){
$('#save_thumb').click(function (){
$.lightbox().close();
});
});
Use the bind function,
$(function() {
$("#save_thumb").bind("click", function() {
$.lightbox().close();
});
});
Related
My code for jquery is: (this will trigger on modal button click)
$(document).on('click', '.js-modal-remove-button', function () {
$('#code-output').attr('da-url',"1111");
});
My code for html is:
<input type="hidden" name="problemCode" id="code-output" da-url=2/>
problem is that there is a button in my page, on this button click modal opens and in the modal there is also a button contains class
js-modal-remove-button
on the action of that i need to set the my main page(on which where modal opening button present) da-url value
Just and another class to your button and use this jquery
HTML
<button class="js-modal-remove-button model_button_class"></button>
Jquery
$(document).on('click', '.js-modal-remove-button .model_button_class', function () {
$('#code-output').attr('da-url',"1111");
});
Here .model_button_class is the another class .
I thing it will help you.
Try this:
$('.js-modal-remove-button .model_button_class').on('click',function(){
$('#code-output').attr('da-url',"1111"); });
Im having a problem attaching an event to a dynamically generated button. However after some research most of the solutions claim this error is usually generated from a form control. However in my case the error "invalid form control with name='answer'" is being generated and triggered when a button i have dynamically generated is pressed :
$("#BoxInner").append($("<button id='dynamicButton' class='btn btn-success' onclick='clickEvent()'>"+ "Button"+"</button>"));
I have appended a button to an existing div and call an onclick function that removed this element when it is clicked like this :
function clickEvent()
{
$(this).remove();
}
After running this in chrome this method works only on the first button added. After the first button is removed as expected it begins to generate the error "clickEvent" and adding a number count on each click and after reading many posts here about the error being attributed to a form i remain unsure how to solve the issue as the button is completely unrelated to the form on my HTML document and subsequently setting the form to not require validation does not solve the issue with the "novalidate" property. But note, if i remove the attached onclick event the error is not triggered.
Any help would be appreciated :)
$("#BoxInner").append($("<button id='dynamicButton' class='btn btn-success' onclick='clickEvent(this)'>"+ "Button"+"</button>")); // pass this to clickEvent function
function clickEvent(obj)
{
$(obj).remove(); // remove button like this
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="BoxInner"></div>
This is because the event listener is created on page load.
You should do something like this
$(wrapper_that_always_exists).on('click', the_freshly_added_element, function() {
...
});
So in your example it would be something like
$('#BoxInner').on('click', '#dynamicButton', function() {
...
});
When you do this, the BoxInner element will always listen for all clicks on any element inside, initially created or not, that has the id dynamicButton
Let's say I have a collection containing 3 elements.
Each element has a corresponding remove button that I would like to initiate a POST to my server. Right now I have it setup so that when "Remove" button is pressed, a confirmation modal pops up with "yes" and "no" buttons. I am using the same modal for each element.
Problem is, when I click "yes" in modal, how can I have it know which remove button I clicked that launched the modal?
Here is a link to a gist containing the problematic code
https://gist.github.com/anonymous/85481507a1171467cae5
I have tried using a suggestion below that implements the following:
$('#hingle_dingle_0').on('click', function(e){
$('#confirmRemoveNetwork').modal('toggle', $(this));
});
$('#confirmRemoveNetwork').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) // Button that triggered the modal
console.log(button);
});
However this returns an empty set. I can't for goodness sake figure out why it doesn't find the event.
Thanks for any help!
The modal is autoposting because you are opening it with a <button> inside a form with an input. Unless you tell it not to, this will cause a form submit. Simply set the type to button (instead of submit which is default): <button type="button">
You can capture the calling button by tapping into the event thrown when the modal is opened:
$('#confirmRemoveNetwork').on('shown.bs.modal', function (e) {
console.log(e.relatedTarget.id);
});
Finally, be sure your IDs are unique. You cannot have both "remove network" buttons using the same id of removenetworkbtn.
i am trying to submit my page using jquery with different actions, but below code seems not working
adding user
$("#createBtn").click(function() {
$("#formname").submit(function(event){
$(this).attr('action', 'addUser.html');
});
});
updating user
$("#updateBtn").click(function() {
$("#formname").submit(function(event){
$(this).attr('action', 'updateUser.html');
});
});
EDIT :-
<form:form name="formname" commandName="comandNamd">
i didnt give action name, since i want to change actions.
on click of button, the page is not getting submitted.
You are writing submit handler inside the click handler. This should work.
$("#createBtn").click(function() {
$("#formname").attr('action', 'addUser.html');
$("#formname").submit();
});
Change for update button also.
"i have place my script inside the tag in top of the page"
In that case your script won't actually bind event handlers to your buttons, because the script will run before the form and buttons have been parsed. $("#createBtn") will find no matching element. You can correct this either by putting your script at the end of the page, just before the closing </body> tag, or by wrapping your code in a document ready handler.
Also, the code inside your .click() handler is binding a submit handler to the form, which doesn't really make sense. You just want to set the action:
$(document).ready(function() {
$("#createBtn").click(function() {
$("#formIdHere").attr('action', 'addUser.html');
// OR
$(this).closest("form").attr('action', 'addUser.html');
});
$("#updateBtn").click(function() {
$("#formIdHere").attr('action', 'updateUser.html');
});
});
You said in a comment that the "buttons are inside the form" - if they are submit buttons then the above code should work. The click will run the code shown to set the action, after which the default behaviour (form submission) will continue.
i have fixed the issue, and thanks for your help, since i am using spring form tag,
<form:form name="formName" commandName="command">
but in jquery i was using above form name attribute value, but actually spring form tag generates form id value and final html looks like
<form:form id="formid" name="formName" commandName="command">
after changing the code to have formid, it worked thanks
$("#formid").attr('action', 'addUser.html');
I have found lots of messages about simulating an anchor click with javascript. Most using the "location" function, which doesn't work for me because I do not want to redirect anywhere. My anchor has href="tel:..." to invoke the iphone's phone function.
I can't have an anchor for clicking, so I wanted to have javascript/jquery simulate that click when a user presses a button, for example. How could I do this (if, indeed, it is even possible)?
Thanks
You can trigger the click event for the anchor on on the click of the button
$('#button1').on('click', function() {
$('#anchor1').click(); // triggering the click event on click of the button
});
Check this FIDDLE
$(function() {
$('a').on('click' , function() {
alert('Fired using button !!')
});
$('#button1').on('click' , function() {
$('a').click();
alert('Button Clicked !!')
});
});
Try this:
$(your_button).trigger('click')
You could just trigger the click event...
$("a.phonenumber").click();
Here is a simple example of how to accomplish this -
$(function(){
$("#b1").on('click',function(){
alert("pressed b1!");
});
$("#b2").on('click',function(){
$("#b1").trigger('click');
alert("pressed b2!");
});
});
Clicking on the first b1 button will trigger an alert. When clicking the second b2 button, first we "trigger" a click event on the first button (which will execute it's alert), and then alert the second value.
DEMO
I know the questions asks not to use the location function, but please try this out:
HTML:
<button class="click-to-call" data-phone="2125551234">call</button>
jQuery:
(could easily be written with only javascript too if you wanted to)
$('.click-to-call').on('click',function(){
window.location.assign('tel:'+ $(this).data('phone'));
});