We Keep Coding

Changing type on element is not possible twice?

I'm relying on another plugins javascript that has code for a specific submit event that submits the form after some validation.
I'm not able to change that validation without hacking into that code.
Therefore I've came up with a hack without hacking into that plugin's code.
I'm changing the input type from submit to button type so I can do my own validation without having to take in account for action that is triggered upon submit.
There are two radiobuttons with class .give-gateway. Basically I'm doing this.
HTML (element in form):
<input type="submit" class="give-submit give-btn" id="give-purchase-button"
name="give-purchase" value="Donate Now" data-before-validation-label="Donate
Now">
jQuery:
$('body').on('click', '.give-gateway', check_gateway);
function check_gateway(id) {
//Value from which radiobutton is selected
if (current_gateway == 'swish') {
alert('changing button from ORIGINAL to new. NOW IT SHOULD BE
TYPE BUTTON!!!');
$('#give-purchase-button').prop('id', 'give-purchase-button-
new').prop('type','button');
$('body').on('click touchend', '#give-purchase-button-new', function
(e) {
alert('NEW give purchase button clicked');
//some code...
});
}
else {
alert('changing button from NEW to original. NOW IT SHOULD BE TYPE
SUBMIT!!!');
$('#give-purchase-button-new').attr('id', 'give-purchase-
button').prop('type','submit');
}
}
This works the first time:
From Submit to button
From Button to Submit
From Submit to Button
Step 3 (NOT WORKING (first click on swish gateway work but second time it does not change from submit to button)!? **Why?) **
I've also tried to programmatically add onsubmit to form but the issue there is that other plugins jquery code has a listener for click event on the actual submit - button which means that that code are executed first anyway. I don't want that to happen.
I've figured it out why now. When I click on another gateway the form is loaded with other content. When I go from swish to paypal. It loads content that is dependent of paypal stuff and creates a new submit - button. If I just change from type submit to button it does not affect anything because that change is made before the actual content is loaded (through ajax) and therefore creates a new submit button.

JQuery Modal Trigger for Unique Elements

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.

Prevent text field from blurring on button click

Let's say I have a field and a button. The button submits the field and triggers some AJAX request which returns data to the same page. Every time the button is clicked, the field is deselected/blurred. This can be partially fixed by making the button focus the text field upon its click. However, during the click, there is a brief moment where the field blurs. The way I have my page set up this does not look good. I would like to completely prevent the field from blurring throughout the click. What is the easiest way to do this? Thanks!
Code:
<input type="text" id="f" autofocus/><span id="btn" onclick="document.getElementById('f').focus()"></span>

Instead of handling button click you can move the focus on button focus with a very small timeout:
jQuery:
$('#btn').focus(function (event) {
setTimeout(function () {
$('#f').focus();
}, 5);
});
JavaScript:
document.getElementById('btn').onfocus = function (event) {
setTimeout(function (event) {
document.getElementById('f').focus();
}, 5);
};

test whether button being clicked before running function on element.blur()

I have a function called showHide() that alternately shows and hides a text input field and a button (button2) when another button (button1) is clicked. The text input field is automatically focused when it opens, and this works great.
The HTML looks roughly thus:
<button1>Show/Hide</button>
<form>
<input class="hidden" type="text" />
<button2 type="submit">Submit</button>
</form>
<script type="text/javascript">
$("button1.someSelectors").click(function() {showHide();});
$("input.someSelectors").blur(function() {showHide();})
</script>
I would like to extend the function such that when the input field loses focus it and button1 disappear, unless it loses focus because button1 is being clicked. As it reads now I'm only testing whether the input field has focus or not. How can I also check whether button2 is being clicked or not?
I tried:
$("input.someSelectors").blur(function() {
if (!$("button2.someSelectors").is(":focus")) {
showHide();
}
});
but it hid the form elements even when I tried clicking button2.
An alternative would be to test whether button2 is being clicked or not in the "hide" part of the function, but when I added
if(!$("button2.someSelectors").click()) {do the hide part of the function}
to showHide(), the form got submitted when I clicked button1 or button2. Here is an example of my problem. Can anyone help?
--Edit:
var showHide=function(item, category) {
if($("input."+item+"."+category).hasClass("hidden")) {
$("input."+item+"."+category).show("fast").focus().removeClass("hidden");
$("button.buy."+item+"."+category).show("fast");
$("button.purchase."+item+"."+category).text("Never mind!");
} else {
$("input."+item).hide("fast").addClass("hidden");
$("button.buy."+item).hide("fast");
$("button.purchase."+item).text("Purchase");
}
}

blur event on textbox is triggered before the click event fires on the button. In order to avoid that you can use mousedown event instead of click event which will be triggered before click event. Try this
$("button1.someSelectors").mousedown(function() {showHide();});
$("input.someSelectors").blur(function() {showHide();})

How to save text to a div using JavaScript onmouseout

I have a div that I'm able to save text to when I click a save button but what I would like is if the text would just automatically save on an onmouseout event. For example:
I have a div and two buttons (Save and Cancel). The user is currently able to mouse over the current text data inside the div, click on the text and they can then edit said text. The only way they can save this text is by clicking the save button. Is there a way to use onmouseout to save the text so that the user simply has to click and edit the text, then click away and have it saved?
The code below is what I have thus far but it just doesn't seem to work. I'm not worried about the save code because I already have that elsewhere. I'm just trying to get it to where I can type in the text, get onBlur to fire, and have the HTML revert back to what it looked like before I clicked the text. As of right now I can click it and the textbox within the div appears but when I click outside of the div, the textbox stays visible. Any ideas?
function setClickable() {
$('#editInPlace').click(function() {
var textarea = '<div onBlur="saveChanges()><textarea rows="3" cols="30">' + $(this).html() + '</textarea>';
//var button = '<div><input type="button" value="SAVE" class="saveButton" /> OR <input type="button" value="CANCEL" class="cancelButton" /></div></div>';
var revert = $(this).html();
$(this).after(textarea).remove();
})
.mouseover(function() {
$(this).addClass("editable");
})
.mouseout(function() {
$(this).removeClass("editable");
saveChanges(this, revert);
});
};
function saveChanges(obj, cancel) {
if (!cancel) {
var t = $(obj).parent().siblings(0).val();
//need some post code for saves
}
else {
var t = cancel;
}
if (t == '') t = '(click to add text)';
$(obj).parent().parent().after('<div id="editInPlace">' + t + '</div>').remove();
setClickable();
}

I think you want the onblur event as you mentioned clicking outside of the div (not just moving the mouse out):
<div contenteditable="true" onblur="saveContent()">
Edit me and then click or tab out to save.
</div>
Whatever you have for your Save button's onclick event will go in the onblur event of the div. This will just save the content when the element loses focus - it defeats the point of having a cancel button though.