We Keep Coding

Alert confirmation issue

I have a button on which when the user clicks to delete project on the site a confirmation pops up , I am using alertify.js for this I have the button etc working however when clicking delete the confirmation box appears and automatically deletes project and vanishes before I can either click ok to confirm or cancel.. ?
here is the html
<button type="submit" class="btn btn-link btn-sm" Onclick="return ConfirmDelete();" style="margin:5px;"></button>
here is javascript code
function ConfirmDelete()
{
alertify.confirm("This is a confirm dialog", function (ev) {
ev.preventDefault();
alertify.success("You've clicked OK");
}, function(ev) {
ev.preventDefault();
alertify.error("You've clicked Cancel");
});
}
how can I prevent this from happening ?

You can't prevent form submission in this case because custom confirmation is non-blocking asynchronous dialog. You can stop it however by always returning false and submitting form manually (programmatically) in case of Ok button press:
function ConfirmDelete(button) {
alertify.confirm("This is a confirm dialog", function() {
button.form.submit()
// alertify.success("You've clicked OK", function() {
// button.form.submit()
// });
}, function() {
alertify.error("You've clicked Cancel");
});
return false;
}
For this make sure to pass button reference to your function:
<button type="submit" onclick="return ConfirmDelete(this)">ConfirmDelete</button>

Click but stay on anchor

I have a navabar that uses anchors instead of links. I am making a chat feature and every time the user enters something into the chat, followed by enter, they are redirected to the first anchor. I know I need to probably use AJAX but I can't seem to figure it out. Here is the code.
<div id="tab3">
<h2>Chat Room</h2>
<div id="chatboxlog">
<div id="chatlog">
Loading chat please wait...
</div>
</div>
<div id="chatinput">
<form name="chatbox" class="userchat">
<input class="userchat" name="message" type="text" onkeydown="if (event.keyCode == 13) document.getElementById('chatbutton').click()"/><br>
<input class="userchat" id="chatbutton" name="submitmsg" type="button" onclick="submitChat()" value="Send" />
</form>
</div>
</div>
<script>
function submitChat() {
if(chatbox.message.value == '') {
alert('Error: Missing Fields.');
return;
}
var message = chatbox.message.value;
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if(xmlhttp.readyState==4&&xmlhttp.status==100) {
document.getElementById('chatlog').innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open('GET','chat.php?message='+message, true);
xmlhttp.send();
chatbox.reset();
}
$(document).ready(function(e) {
$.ajaxSetup({cache:false});
setInterval(function() {$('#chatlog').load('logs.php');}, 200);
});
</script>

It seems to me you simply have an issue with your form being submitted (typically happens when user hits "Enter" while focus is on a form child element, other than a textarea) and it automatically reloads your page.
This happens for example when no action is specified on your form: the latter tries reloading what is currently in the browser navigation bar ("location"). In your case, if the location has a fragment (hash) to another anchor, the page will simply scroll to that anchor.
You can prevent the form submit action by using event.preventDefault(), either in your text input, or better on the form itself, by attaching a callback on the submit event.
// NOTE: try using id's rather than names.
// Select the appropriate form.
var form = document.querySelector('form[name="chatbox"]');
form.addEventListener("submit", function (event) {
// Prevent the form from reloading the page.
event.preventDefault();
});
Demo: http://jsfiddle.net/8odryt5p/1/

Use preventDefault() to prevent form or page from reloading.
See Examples below
Click on Specific ID
$('#myId').click(function(e){
event.preventDefault();
});
For click on any class
$('.myClass').click(function(e){
event.preventDefault();
});
For click on Any Anchor inside page
$('a').click(function(e){
event.preventDefault();
});
To Prevent Page reload after click on any anchor inside a div or section
$('.myClass a').click(function(e){
event.preventDefault();
});

Is it possible to manipulate the target window of a form using Jquery

I got this question regarding the forms target and its target window.. lets say we have this Html.BeginForm
#using (Html.BeginForm("TestHtmlRedirect", "Home", FormMethod.Post, new {#target="_blank", #id = "tagging_frm", #class = "form-horizontal row-border" }))
{
<input type="submit" value="Html PsBk Click" />
}
normally upon clicking the submit button it will trigger a new tab, my question is
How, or is it Possible to append something to the newly created tab of this form?
for example i want to append a loading gif on that newly created tab by the parent tab.

Assuming the actions and scripts are all from the same server/origin, you can do this:
$(function() {
$("#tagging_frm").on("submit",function(e) {
e.preventDefault(); // cancel submit
var w=window.open("",this.target);
w.document.write('<div id="container"><img src="loading.gif"/></div>');
w.document.close();
$.post(this.action,function(data) {
w.document.getElementById("container").innerHTML=data;
});
});
});
To load a csv or pdf try this alternative
$(function() {
$("#tagging_frm").on("submit",function(e) {
e.preventDefault(); // cancel submit
var w=window.open("",this.target);
w.document.write('<form id="myForm" action="'+this.action+'" target="myframe" method="post"></form><img id="loading" src="loading.gif"/><iframe name="myframe" onload="document.getElementById(\'loading\').style.display=\'none\'"></iframe>');
w.document.close();
w.document.getElementById("myForm").submit();
});
});

Postback from jQuery Modal Dialog by invoking ASP.NET Button Click

I have a ASP.NET web forms application. I am trying to show a Modal Dialog for confirmation when user clicks on Submit button. I am using OnClientClick of the Button to call a JavaScript function. The function opens the modal dialog if Page Validation is successful. When the user clicks on Yes button of modal dialog, I want the form to be submitted. I tried _doPostback(btn, 'OnClick'), btn.trigger('click') and btn.click(). I can see the modal dialog and the Cancel button works. But when I click on Yes, Page is not Posting. Please see the below code and help me. Thanks!
ASPX:
<asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClick="btnSubmit_Click"
OnClientClick="clientValidate();return false;"/>
<div id="alert" style="display: none">
Are you sure you want to submit?
</div>
JavaScript:
$(document).ready(function () {
$('#alert').dialog({
title: 'Confirm',
modal: true,
autoOpen: false,
buttons: {
Yes: function () {
var btn = document.getElementById('<%=btnSubmit.ClientID%>');
//_doPostback(btn, 'OnClick');
//btn.trigger('click');
//btn.click();
// Above three didn't work! :(
},
Cancel: function () {
$(this).dialog('close');
}
}
});
});
function clientValidate() {
var btnsubmit = document.getElementById(<%=btnSubmit.ClientID%>);
if (Page_ClientValidate()) {
$('#alert').dialog('open');
}
}
UPDATE:
Corrected _doPostBack() to __doPostBack(). The page posts now. But btnSubmit_Click in not getting called.

Your doPostBack call is wrong. It should be __doPostBack() not _doPostBack() - there are supposed to be two underscores, you have one. Which is probably why it failed to begin with.
Try this instead:
buttons: {
Yes: function () {
var btn = document.getElementById('<%=btnSubmit.ClientID%>');
__doPostback(btn, 'OnClick');
},
UPDATE
Try this:
In your code behind add this in your page load function
if (Page.IsPostBack)
{
var param = Request["__EVENTARGUMENT"];
if (target == "Submit")
btnSubmit_Click(sender, e);
}
In your Javascript you would do
__doPostBack(btn, 'Submit');
That should do it.

jquery modal dialog before form submit

I have a form on a page, and I am trapping the click action on two submit buttons. There is another submit button that is not trapped (i.e. I dont need to show a modal for this button).
So, my obvious problem is that I need to block the submit action when the modal first opens, and I then need to force the submit when the user actually clicks the OK button in the modal. However, because each button has a specific name and value associated with it (which the back-end script needs to know), a $('#myform').submit() method will therefore not work.
function something(msg) {
var $dialog = $('<div></div>').html(msg).dialog({
autoOpen: false,
title: 'Please confirm...',
modal: true,
buttons: {
"OK": function () {
$dialog.dialog('close');
//submit needs to happen here
},
Cancel: function () {
$(this).dialog("close");
}
}
});
$dialog.dialog('open');
event.preventDefault();
return false;
}

I would include a hidden field to take on the name and value of the submit button clicked:
<input type="hidden" name="subName" value="" />
$("#submit_button_one").function() {
$("input[name='subName']").attr("name", $(this).attr("name")).val(($(this).val());
something("message");
return false;
});
$("#submit_button_two").function() {
$("input[name='subName']").attr("name", $(this).attr("name")).val(($(this).val());
something("message");
return false;
});
function something(msg, act) {
// ...
//submit needs to happen here
$('#myform').submit()
}