We Keep Coding

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 :)

Redirecting to site from an existing button being clicked

I'm quite new to coding. I have a button with the ID='test'. I want to run a line of code in javascript or HTML to redirect users to a site when that button is clicked.
Button:
<button id="test" type="submit" onclick="setNick(document.getElementById('nick').value); return false; return false" class="btn btn-play-guest btn-success btn-needs-server primaryButton" data-itr="play_as_guest">
I tried running this:
<script>
document.getElementById("test").onclick = window.location='http://www.google.com/'
</script>
However, this would redirect straight away. I want it to redirect only when the button is clicked. Please help me fix this.
Many thanks.

You are assigning the redirect to the button where you need to assign it to a function.
You can try something like this:
document.getElementById("test").onclick = function(){
window.location='http://www.google.com/';
}

I would suggest use onclick on button, for example
your button will look like this
<button id="test" onclick="redirect()">Redirect</button>
Now in the script write the redirect function as
<script>
function redirect() {
window.location.href = "http://www.google.com/";
}
</script>

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>

Return to the previous page with inputs

Really unsure about the title question. Feel free to suggest. :)
Hi guys! I created a very simple code, that would represent my web.
Here is my home page:
<html>
<script type="text/javascript">
function getPage(linkPage,variables,divName){
$.get(linkPage + "?" + variables,function(data){$(divName).html(data);});
}
function show(){
//functionName("path","data","idName");
getPage("AjaxPages/hi.php","","#container");
}
</script>
<body>
<div id="container">
First Name<input type="text" />
<input type="button" value="next" onClick="show();"/>
</div>
</body>
</html>
Basically, it ask for information, Name for example. When the button NEXT is click it will call a javascript function that will call a certain page or the NEXT PAGE that will load on the div with the Id Container.
NEXT PAGE
On the next page, it will then ask another question, like Last Name for example. But then, I want to go back to the previous page to make same changes.
HERE is the code:
<script type="text/javascript">
function show(){
ajaxgetdata("index.php","","#container1");
}
</script>
<div id="container">
Last Name<input type="text" />
what to make changes on the previous page?<input type="button" value="back" onClick="show();"/>
</div>
When button back is clicked, it will just call the previous page, but will not include the text that you input on the textbox.
I know that it happens because it just call the page..
Is there a way? that when back button is clicked, it will reload the previous page, with all the contents/inputs.
:) :( :'( :/ :|

Don't load any additional pages. Do everything with AJAX.
If you don't want, some server-side script may help :D

If you can use HTML5 in your site, you can take a look at the History API which can handle navigation and fires a "popstate" event, to which you can pass data.
There's a good example here:
http://diveintohtml5.info/history.html
You could do something like this:
window.addEventListener("popstate", function(e) {
if(!e.state || !e.state.firstName) {
return;
}
document.getElementById('firstName').value = e.state.firstName;
});
That even will trigger everytime you go back or forward, and you could just organize some function or array with the information you need.
Hope it helps.

Display confirmation popup with JavaScript upon clicking on a link

How do I make one of those hyperlinks where when you click it, it will display a popup asking "are you sure?"
<INPUT TYPE="Button" NAME="confirm" VALUE="???" onClick="message()">
I already have a message() function working. I just need to know what the input type for a hyperlink would be.

<a href="http://somewhere_else" onclick="return confirm()">
When the user clicks the link, the confirm function will be called. If the confirm function returns false, the link traversal is cancelled, if true is returned, the link is traversed.

try to click, I dare you
with the function
function confirmAction(){
var confirmed = confirm("Are you sure? This will remove this entry forever.");
return confirmed;
}
(you can also return the confirm right away, I separated it for the sake of readability)
Tested in FF, Chrome and IE

As Nahom said, except I would put the javascript:message() call directly in the href part (no need for onclik then).
Note: leaving the JavaScript call in the onClick has a benefit: in the href attribute, you can put a URL to go to if the user doesn't have JavaScript enabled. That way, if they do have JS, your code gets run. If they don't, they go somewhere where they are instructed to enable it (perhaps).
Now, your message routine must not only ask the question, but also use the answer: if positive, it must call submit() on the form to post the form. You can pass this in the call to ease the fetching of the form.
Personally, I would go for a button (input tag as you show) instead of a simple link to do the process: it would use a more familiar paradigm for the users.
[EDIT] Since I prefer to verify answers I give, I wrote a simple test:
<script type="text/javascript" language="JavaScript">
function AskAndSubmit(t)
{
var answer = confirm("Are you sure you want to do this?");
if (answer)
{
t.form.submit();
}
}
</script>
<form action="Tests/Test.html" method="GET" name="subscriberAddForm">
<input type="hidden" name="locationId" value="2721"/>
<input type="text" name="text" value="3.1415926535897732384"/>
<input type="button" name="Confirm" value="Submit this form" onclick="AskAndSubmit(this)"/>
</form>
Yes, the submit just reload the page here... Tested only in FF3.
[EDIT] Followed suggestion in the comments... :-)

???
This answer would be OK only when the click need NOT navigate the user to another page.