Keypress evnt() is not firing in Firefox but in Chrome - javascript

I want to post some data to controller using ajax, when someone press enter a textbox. My code working fine on Chrome but not in firefox. I have tried several solution but it did not work for me.Here is my code:
<input type="text" id="txtbox_#cmt.StoryActivityId" onkeypress="Reply(this)"/>
and
<script>
function Reply(e){
var id;
id = e.id;
var keycode = (event.keyCode ? event.keyCode : event.which);
if (event.keyCode == '13') {
//var txt1 = "\"";
//var txt2 = txt1.concat(id);
//var txt3 = "\"";
//var ActivityId = txt2.concat(txt3);
var storyActivityId = id.replace("txtbox_", "");
var liId = '#' + "liPartial_" + storyActivityId;
var txtId='#'+id;
//event.stopPropagation();
$.ajax({
url: '#Url.Action("PostReply", "Feed")',
type: 'post',
cache: false,
async: true,
InsertionMode: 'InsertionMode.InsertAfter',
data: { id:e.id,status:$(txtId).val()},
success: function (data) {
$(liId).append("<br>" + data);
$(txtId).val('');
}
})
}
}

You need to pass the event to that function,
<input type="text" id="txtbox_#cmt.StoryActivityId" onkeypress="Reply(event)"/>
Script
function Reply(event) {
var id;
id = this.id;
var keycode = (event.keyCode ? event.keyCode : event.which);
alert(keycode);
if (event.keyCode == '13') {
//var txt1 = "\"";
//var txt2 = txt1.concat(id);
//var txt3 = "\"";
//var ActivityId = txt2.concat(txt3);
var storyActivityId = id.replace("txtbox_", "");
var liId = '#' + "liPartial_" + storyActivityId;
var txtId = '#' + id;
//event.stopPropagation();
$.ajax({
url: '#Url.Action("PostReply", "Feed")',
type: 'post',
cache: false,
async: true,
InsertionMode: 'InsertionMode.InsertAfter',
data: {
id: e.id,
status: $(txtId).val()
},
success: function (data) {
$(liId).append("<br>" + data);
$(txtId).val('');
}
})
}
}
Demo

Change this:
onkeypress="Reply(this)"
To this:
onkeypress="Reply(event, this)"
Pass event as a first arguement.

Related

Jquery, Why last function in script not work?

please tell me where I am making a mistake in this code, all functions except the last one are being processed, I can not understand why. The first 3 functions correctly submit the form and receive a response, the latter also submits the form, but for some reason the response opens on a new page.
jQuery(document).submit(function(e){
var form = jQuery(e.target);
var id = form.attr("action");
var ret = id.replace('/changepswd/','');
if(form.is("#changepswd")){
e.preventDefault();
jQuery.ajax({
type: "POST",
url: form.attr("action"),
data: form.serialize(),
success: function(data) {
console.log(data);
document.getElementById("changepswdbtn" + ret).value = '';
alertTimeout(data,1000);
}
});
}
});
jQuery(document).submit(function(n){
var form = jQuery(n.target);
var id = form.attr("action");
var ret = id.replace('/changeemailpass/','');
if(form.is("#changeemailpass")){
n.preventDefault();
jQuery.ajax({
type: "POST",
url: form.attr("action"),
data: form.serialize(),
success: function(data) {
console.log(data);
document.getElementById("changeemailpassbtn" + ret).value = '';
alertTimeout(data,1000);
}
});
}
});
jQuery(document).submit(function(q){
var form = jQuery(q.target);
var id = form.attr("action");
var ret = id.replace('/changename/','');
var btns = document.getElementById("changenamebtn" + ret).value;
if(form.is("#changename")){
q.preventDefault();
jQuery.ajax({
type: "POST",
url: form.attr("action"),
data: form.serialize(),
success: function(data) {
console.log(data);
if (data == "Имя Успешно Изменено!"){
document.getElementById("changenamelbl" + ret).innerText = btns;
document.getElementById("changenamebtn" + ret).value = '';
alertTimeout(data,1000);
}
else{
alertTimeout(data,1000);
}
}
});
}
});
jQuery(document).submit(function(o){
var form = jQuery(o.target);
var id = form.attr("action");
var ret = id.replace('/changeemail/','');
var btns = document.getElementById("changeemailbtn" + ret).value;
if(form.is("#changeemail")){
o.preventDefault();
jQuery.ajax({
type: "POST",
url: form.attr("action"),
data: form.serialize(),
success: function(data) {
console.log(data);
if (data == "Email Успешно Изменен!"){
document.getElementById("changeemaillbl" + ret).innerText = btns;
document.getElementById("changeemailbtn" + ret).value = '';
alertTimeout(data,1000);
}
else{
alertTimeout(data,1000);
}
}
});
}
});

Trim dots from email address

How do I trim any dots before #mail.com? I am doing jQuery email validation and need to get rid of all the dots from username.
$('document').ready(function(){
var email_state = false;
$('#email').on('keyup', function(){
var email = $('#email').val();
if (email == '') {
email_state = false;
return;
}
$.ajax({
url: 'index.php',
type: 'post',
data: {
'email_check' : 1,
'email' : email,
},
success: function(response){.....
Use .replace(/\./g, "") for the part before #
function removeDots(email){
var email_s = email.split("#");
return email_s[0].replace(/\./g, "")+"#"+email_s[1];
}
var email = "some.emai.l#mail.com";
console.log(removeDots(email));
In your code's context
function removeDots(email) {
var email_s = email.split("#");
return email_s[0].replace(/\./g, "") + "#" + email_s[1];
}
var email = "some.emai.l#mail.com";
console.log(removeDots(email));
$('document').ready(function() {
var email_state = false;
$('#email').on('keyup', function() {
var email = $('#email').val();
email = removeDots(email); // call function here to remove dots
if (email == '') {
email_state = false;
return;
}
// Rest of your code
});
// Rest of your code
});
Regex: \.(?![^#]+$)
One line code: email.replace(/\.(?![^#]+$)/gy, '')
function myFunction() {
console.clear()
var s = document.getElementById("input").value;
console.log(s.replace(/\.(?![^#]+$)/g, ''));
}
<form action="javascript:myFunction()">
<input id="input" type="text" value="bla.bla.bla.#mail.net.com"><br><br>
<input type="submit" value="Submit">
</form>
First get the username of email using String.prototype.split() then remove all the . using .replace() and /\./g. Below is an example:
var email = "abc.d.e#mail.com";
var splitted = email.split("#");
console.log(splitted[0].replace(/\./g,"") + "#" + splitted[1]);
For updated question:
var email_state = false;
$('#email').on('keyup', function(){
var email = $('#email').val();
if (email == '') {
email_state = false;
var splitted = email.split("#");
email = splitted[0].replace(/\./g,"") + "#" + splitted[1];
}
}

filter by a key/value from json Array

here is my code, and i would like to only display items which has "assistance" as tag and no the other. I really don't know how can i do that.
function displayall(newid){
$.ajax({
url: "https://cubber.zendesk.com/api/v2/users/"+newid+"/tickets/requested.json",
type: 'GET',
cors: true,
dataType: 'json',
contentType:'application/json',
secure: true,
beforeSend: function (xhr) {
xhr.setRequestHeader ("Authorization", "Basic " + btoa(""));
},
success: function (data){
var sortbydate = data.tickets.sort(function(a,b){ return new Date(b.created_at)- new Date(a.created_at); });
for (i = 0; i < data.tickets.length; i++) {
var myticket = data.tickets[i];
var mydate = data.tickets[i].created_at;
var created = moment(mydate).format("MM-DD-YY");
var mytitle = data.tickets[i].subject;
var description = data.tickets[i].description;
var status = data.tickets[i].status;
var ticketid = data.tickets[i].id;
var tag = data.tickets[i].tags[0];
$("#mylist").append('<li class="row col-md-12 listing" id="newlist" value="'+ticketid+'" onclick="ticketcontent('+ticketid+","+newid+')">'+ '<span class="class_'+status+' otherClasses">' + status + '</span>'+'<div class="identifiant fixed col-md-2">'+" #"+ ticketid +'</div>'+'<div class="identifiant col-md-2">'+tag+'</div>'+'<div class="identifiant col-md-4">'+mytitle +'</div>'+'<div class="identifiant datefixed col-md-2">'+created+'</div>'+'</li>');
}
}
})
}
and if i do console.log(data.ticket[i]) this is what i get:
What you're looking for is:
var filteredTickets = data.tickets.filter(function(ticket) {
return ticket.tags.indexOf('assistance') >= 0;
});
Try using data.tickets.filter():
data.tickets = data.tickets.filter(function(ticket){
return ticket.tags[0] === 'assistance';
});

How to nested ajax call?

Here is my code.
Currently here every time inner ajax method will call when outer method mark as done.
var folderpath = encodeURIComponent('Recording' + new Date().getTime());
var ajaxWorking = true;
function uploadAudio(mp3Data) {
var reader = new FileReader();
reader.onload = function (event) {
var fd = new FormData();
var mp3Name = encodeURIComponent('audio_recording_' + new Date().getTime() + '.mp3');
console.log("mp3name = " + mp3Name);
fd.append('fname', mp3Name);
fd.append('data', event.target.result);
//Costin testing
fd.append('studentId', '1');
fd.append('folderpath', folderpath);
fd.append('recording', stopRecording)
$.ajax({
type: 'POST',
url: '/api/ClientApi/PostRecordedStream',
data: fd,
processData: false,
contentType: false,
success: function (data) {
console.log(data + " : AjaxDone");
ajaxWorking = false;
}
}).done(function (data) {
console.log(data);
//setTimeout(this, 5000);
console.log(stopRecording + " : " + ajaxWorking);
if (stopRecording == true && ajaxWorking == false) {
console.log(stopRecording + " : " + ajaxWorking + "LoadMP3");
$.ajax({
type: 'GET',
url: '/api/ClientApi/GetAudio',
data: { folderpath: folderpath },
success: function (data) {
console.log(data);
}
}).done(function (data) {
var url = 'data:audio/mp3;base64,' + data;
var li = document.createElement('li');
var au = document.createElement('audio');
var hf = document.createElement('a');
au.controls = true;
au.src = url;
hf.href = url;
hf.download = 'audio_recording_' + new Date().getTime() + '.mp3';
hf.innerHTML = hf.download;
li.appendChild(au);
li.appendChild(hf);
recordingslist.appendChild(li);
});
}
});
};
reader.readAsDataURL(mp3Data);
}
Outer ajax will call multiple time from UI. But I want to call only when all outer ajax call are done.

Multiple Javascript functions, need confirm dialog before executing any

I have three separate javascript/jquery functions, all of which fire off after the user clicks a button. One function posts to a form handler. Another function creates a new tab. And the third function grabs the id of the new tab and posts sends new information into the tab via an ajax call. They all work together and depend on one another.
I have tried many different configurations, and I cannot figure out how to properly get a confirmation dialog (e.g., "Do you want to perform this action?) to work with all three of these simultaneously. If the user clicks "yes," the process should fire. If the user clicks "no," the process should die. Any help is greatly appreciated.
Edit: I've posted my code below. I'm sure it's really noobish, which is why I didn't post it the begin with. Trying to learn though. Thanks!
jQuery(".update_form").click(function(e) { // changed
e.preventDefault();
jQuery.ajax({
type: "POST",
url: "/eemcontrolpanel/process.cshtml",
data: jQuery(this).parent().serialize() // changed
});
return false; // avoid to execute the actual submit of the form.
});
jQuery(".update_form").click(function () {
var form = jQuery(this).parents('form:first');
title = jQuery("input[name='process']", form).val();
$('#tt').tabs('add',{
title:title,
content:'Script starting',
closable:true
});
$('div.panel-body:last').attr("id","tab" + panelIds[panelIds.length - 1] + 1);
panelIds.push(panelIds[panelIds.length - 1] + 1);
});
jQuery(".update_form").click(function (e) {
e.preventDefault();
//var j = jQuery.noConflict();
var form = jQuery(this).parents('form:first');
var fileName = jQuery("input[name='process']", form).val();
jQuery(document).ready(function () {
var XHR;
var stopMe = 1;
var isSame = 0;
var oldhtml;
var tabID = "tab" + panelIds[panelIds.length - 1];
jQuery("#"+ tabID).everyTime(1000, function (i) {
if (stopMe != 2){
XHR = jQuery.ajax({
url: "/eemcontrolpanel/jobs/" + fileName + ".txt",
cache: false,
success: function (html){
if (html === oldhtml){
isSame++;
if (isSame === 10){
stopMe = 2;
}
}
jQuery("#"+ tabID).html("<pre>" + html + "</pre>").scrollHeight;
oldhtml = html;
}
});
} else {
jQuery("#"+ tabID).stopTime();
}
jQuery("#"+ tabID).css({ color: "white" });
});
});
});
This is what I ended up doing. I basically combined all the functions into one big function.
var panelIds = new Array();
panelIds.push('0');
jQuery(".update_form").click(function (e) {
if (confirm('Are you sure?')) {
e.preventDefault();
jQuery.ajax({
type: "POST",
url: "/eemcontrolpanel/process.cshtml",
data: jQuery(this).parent().serialize() // changed
});
var form = jQuery(this).parents('form:first');
var title = jQuery("input[name='process']", form).val();
$('#tt').tabs('add',{
title:title,
content:'Script starting',
closable:true
});
$('div.panel-body:last').attr("id","tab" + panelIds[panelIds.length - 1] + 1);
panelIds.push(panelIds[panelIds.length - 1] + 1);
//var j = jQuery.noConflict();
var fileName = jQuery("input[name='process']", form).val();
var XHR;
var stopMe = 1;
var isSame = 0;
var oldhtml;
var tabID = "tab" + panelIds[panelIds.length - 1];
//alert(tabID);
jQuery("#"+ tabID).everyTime(1000, function (i) {
//alert(stopMe);
//add also if stopme=false else quit/end/whatever
if (stopMe != 2){
//alert(stopMe);
XHR = jQuery.ajax({
url: "/eemcontrolpanel/jobs/" + fileName + ".txt",
cache: false,
success: function (html){
//alert(html);
if (html === oldhtml){
isSame++;
//alert(isSame);
if (isSame === 10){
stopMe = 2;
//alert(stopMe);
}
}
jQuery("#"+ tabID).html("<pre>" + html + "</pre>").scrollHeight;
oldhtml = html;
//alert(oldhtml);
}
});
} else {
jQuery("#"+ tabID).stopTime();
}
jQuery("#"+ tabID).css({ color: "white" });
});
} else {
return false;
}
});
Have you tried this:
Function onButtonPush(){
if(confirm('confirm message')){
function1();
function2();
function3();
}
}

Categories