We Keep Coding

Close Tab not working properly using jquery

I am working on MCV core with the Dapper project. On one of my pages, I have a Grid that contains records and ACTION,
No Name Address Mobile UPDATE VIEW
1 XYZ XYZ 123 UPDATE VIEW
2 XYZ XYZ 456 UPDATE VIEW
When I click on the UPDATE Link from a specific row I am opening my new PAGE
updareUserRecord.cshtml IN NEW TAB.
When I click on UPDATE BUTTON after updating the record in updareUserRecord.cshtml, record gets updated. On the SAME page, I have CLOSE BUTTON. I want to close the updareUserRecord.cshtml. Only.
Using Jquery and Javascript I have tried but some times below code work sometimes not. Can Anyone give me the perfect solution?
Like no matter, I want to close the PAGE.
This is the code I have tried.
#*<button type="button" class="btn btn-primary" id="btnClose" onclick="javascript:window.open('','_self').close();">Close</button>*#
<button type="button" class="btn btn-primary" id="btnClose" onclick="window.top.close();">Close</button>
<button type="button" class="btn btn-primary" id="btnClose" onclick="window.close();">Close</button>

You can add simply click function using jQuery
$('#btnClose').click(function () {
window.close(); //through writing this statement working also in browser
console
});
I think helps this solution Thank you :)

Trigger event when toggling between div and textfield

Ok, so Im building an application in Laravel, but my problem is with jQuery. I am creating a comment section for some posts. Adding the comments work fine. Under each post all the comments for the particular post are listed. If the comment is made by you, an edit button is shown. If you press the edit button a few things will happen:
the p-tag containing the comment is replaced with a textarea (maintaining the same content/text)
the edit button changes text to "Save" (instead of "Edit")
the button also changes some classes and therefore styling
the button gets a class of "save-mode"
Im trying to make so that when the button has the class of save-mode, an event should get triggered, thus updating the comment in the database.
Now, almost all the pieces work fine separately but the Ajax call is not fired when the button is pressed. And I just cant see why. Its worth mentioning that the Ajax call does work. But the if-statement that is supposed to trigger it doesn't.
There must be something wrong with my logic.
Ive included a snippet, and Im guessing theres something wrong in the editComment function. Ive removed the blade syntax, styling and surrounding markup. But you can see the same problem in this snippet.
I really appreciate any help I can get to illuminate my own stupidity.
Thank you.
$("#edit-save-btn").on('click', function(e){
e.preventDefault();
editComment($(this));
});
function editComment(btn){
const id = btn.attr('value');
const comment = btn.closest('.col-md-3').prev().find('.comment-text');
const commentHTML = $.trim(comment.text());
if(btn.hasClass('save-mode')){
console.log('this need to get triggered');
//updateComment(id, commentHTML);
return;
}
btn.toggleClass('save-mode');
const editable = $('<textarea />').css({'width': '100%'});
editable.val(commentHTML);
comment.replaceWith(editable);
editable.focus();
btn.removeClass('btn-primary').addClass('btn-success').html('<i class="fa fa-floppy-o" aria-hidden="true"></i> Lagre');
editable.blur(editableTextBlured);
}
function editableTextBlured() {
$("#edit-save-btn").removeClass('btn-success save-mode').addClass('btn-primary').html('<i class="fa fa-pencil-square-o" aria-hidden="true"></i> Rediger');
var text = $(this).val();
viewableText = $('<p class="comment-text">');
viewableText.html(text);
$(this).replaceWith(viewableText);
$(viewableText).click(editComment);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="comment-post clearfix">
<div class="col-md-9">
<p class="comment-text">
comment
</p>
</div>
<div class="col-md-3">
<form class="pull-right right-margin" action="" method="post">
<button value="{{$comment->id}}" class="btn edit-comment btn-primary btn-xs" id="edit-save-btn"><i class="fa fa-edit"></i> Edit</button>
</form>
</div>
</div>

Click the button will trigger the blur event of textarea.
At the function editableTextBlured, your removed the class save-mode, so btn.hasClass('save-mode') is return false, it can't trigger save.
It's like this:
blur -> remove className save-mode -> btn.hasClass('save-mode') -> false, can't trigger save.
Wish it can help for you :)

Disable a button where the Id that starts with

My buttons (it's inside a for loop) get a name from the database using .getName()
I'm trying to disable a button in javascript based on that name. But I can't seem to find the right way. Any help please?
HTML
<button class="btn btn-success btn-sm startDocker" id="start-<%=environment.getName()%>" name="<%=environment.getName()%>">Start</button>
This code is wrong.Now I wanted to disable the button with a the container.containerName
$('start-' + container.containerName).prop('disabled', true);

HTML5 Javascript function not getting called on button click

I have an html page, thats intended to take user's email and password. I defined "login()" method in one of js file but the function doesn't get executed after button click.
HTML file:
http://pastie.org/10276940

Ok,
first, you should be careful about quotes and double quotes... there is already a mistake in your onclick code.
Then, I would not use onclick. I would do it by adding an eventListener (click) on the button, like this :
document.getElementById('myButton').addEventListener('click',function(){
//do something
});
Here is an example on this way to do it.
There are several other ways to do this, like you did with onClick, but here is just the way I would do the job.
http://jsfiddle.net/tz4bnu0m/4/
Problem is also that when you call login in your onclick event, function is just not defined (yet), here is a way to do it with your onclick event, just add function definition before you call it in onclick event :
http://jsfiddle.net/tz4bnu0m/5/
Hope it helps!
(since it is not an input type submit, you don't have to handle default action, click will not submit the form by default)

The problem is on the button.
<button class="btn btn-lg btn-primary btn-block btn-signin" type="submit" onclick="login(document.getElementById("inputEmail").value,
document.getElementById("inputPassword").value)">Sign in</button>
You are mixing double quotes. Change it by single quotes an it works
<button class="btn btn-lg btn-primary btn-block btn-signin" type="submit" onclick="login(document.getElementById('inputEmail').value,
document.getElementById('inputPassword').value)">Sign in</button>
This works but...
I don't recommend to you to make this events in HTML directly. You can separate this code and make it more reusable:
<button id="myID"></button>
<script>
document.getElementById("myID").onclick = function() {
// good stuff
};
//other way:
document.getElementById("myID").addEventListener('click', function() {
// good stuff
});
</script>
Good luck

Disabling a button when clicked

I have a form which users can use to send an ecard.
This is an example URL:
http://jimpix.co.uk/ecards/normal-ecard.asp?id=5480
At the bottom of the form there is this HTML (covering the send buttons):
<div class="col-lg-6">
<legend>Next bit...</legend>
<button type="button" id="BtnPrev" class="btn btn-info" onclick="return valFormPrev(theForm,'preview');"/>Preview Your Ecard</button>
<button type="button" id="BtnGo" class="btn btn-success" class="preview" onclick="return valFormGo(theForm,'process');"/>Send Now</button>
<p class="top10">Reset buttons so you can use them again</p>
</div>
Because the page can take a while to process when users click on a button, I added this to the end of the JS used to validate the forms (located at http://jimpix.co.uk/dist/js/ecard.js)
Say a user clicks the "Send Now" button, it calls the "valFormGo" function.
That contains this code near the end:
document.getElementById("BtnGo").disabled = 'true';
That disables the button if the user click on it, so they can't click it many times and send the same ecard many times.
That seems to work okay, but if, once they have sent the ecard, they press the back button to e.g. send again to someone else, the button remains disabled, even if the page is refreshed.
I had to set up a function to allow them to make the buttons active again via:
function ResetBtns()
{
document.getElementById('BtnPrev').removeAttribute("disabled");
document.getElementById('BtnGo').removeAttribute("disabled");
}
That works, but it is clunky.
I just wondered if anyone knows of a more elegant solution I might be able to follow to disable the button when pressed, or maybe have the button change the text to say "processing..." when it is waiting for the next page to process the data.
Basically I have made a hack job of this and it would be much appreciated if anyone might be able to advise please on possible alternatives.
Any advice would be much appreciated.
Thanks

Why not process the ecard on the same page using ajax method, then on success you can un-disable the submit button.
Can't really offer any code at this time as not sure of your current flow / method being used.

Try this:
//to disable buttons
$('BtnPrev').click(function(){
this.prop('disabled', true);
});
$('BtnGo').click(function(){
this.prop('disabled', true);
});
//to enable buttons
function ResetBtns() {
$('BtnPrev').prop('disabled', false);
$('BtnGo').prop('disabled', false);
}

Just make the function run like this:
<button onclick="myfunction()" id="activate"></button>
<script>
function myfunction(){if(unrun==true){unrun=false;
document.getElementById("activate").innerHTML="Processing....";
code goes here;}}
</script>