After submit a reply by Ajax Its display a blank data space - javascript

After submit a reply without 1st post Its display a blank data space and after refresh page its show reply.
What is problem here please.
..............................................................................
This is my script
var inputAuthor = $("#author");
var inputComment = $("#comment");
var inputReplycom = $(".replycom");
var inputImg = $("#img");
var inputUrl = $("#url");
var inputTutid = $("#tutid");
var inputparent_id = $("#parent_id");
var replyList = $("#replynext");
function updateReplybox() {
var tutid = inputTutid.attr("value");
$.ajax({
type: "POST",
url: "reply.php",
data: "action=update&tutid=" + tutid,
complete: function (data) {
replyList.append(data.responseText);
replyList.fadeIn(2000);
}
});
}
$(".repfrm").click(function () {
error.fadeOut();
if (checkForm()) {
var author = inputAuthor.attr("value");
var url = inputUrl.attr("value");
var img = inputImg.attr("value");
var replycom = inputReplycom.attr("value");
var parent_id = inputparent_id.attr("value");
var tutid = inputTutid.attr("value");
$('.reply_here').hide();
$("#loader").fadeIn(400).html('<br><img src="loaders.gif" align="absmiddle"> <span class="loading">Loading Update...</span>');
//send the post to submit.php
$.ajax({
type: "POST",
url: "reply.php",
data: "action=insert&author=" + author + "&replycom=" + replycom + "&url=" + url + "&img=" + img + "&parent_id=" + parent_id + "&tutid=" + tutid,
complete: function (data) {
error.fadeOut();
$("#loader").hide();
replyList.append(data.responseText);
updateReplybox();
$("#repfrm").each(function () {
this.reset();
});
}
});
} else //alert("Please fill all fields!");
error_message();
});

Probably all this code should be inside a $(document).ready({ ... });
To debug: Open chrome inspector and put a brakepoint at this line: var tutid = inputTutid.attr("value"); and check for what is inside inputTutid variable.
Also you can try
inputTutid.val();
instead of
inputTutid.attr("value");

Related

How to take JavaScript url link to my index.php page

var feedback = function (res) {
if (res.success === true) {
var get_link = res.data.link.replace(/^http:\/\//i, 'https://');
document.querySelector('.status').classList.add('bg-success');
document.querySelector('.status').innerHTML =
'Image : ' + '<br><input class="image-url" value=\"' + get_link + '\"/>' + '<img class="img" alt="Imgur-Upload" src=\"' + get_link + '\"/>';
}
};
The second portion is:
new Imgur({
clientid: '3527680b6690575', //You can change this ClientID
callback: feedback
});
How to get_link to php variable in a index.php page?
The solution is like this:
function notifvanish() {
var data = 0;
var dataset = 'set=' + data;
$.ajax({
type: "POST",
url: "notifvanish.php",
data: dataset,
cache: false,
success: function (html) {
//alert("Success");
}
});
}

Posting data and retrieving with JSON and Javascript in one script

How do I combine script 1 and script 2 to achieve my objective of sending data as well as one script.
The idea is to have the fresh content anytime a post is sent. I am using this with Framework7. Both scripts already work well in their roles to post or retrieve data.
This is the script that is getting/fetching data from the back-end.
SCRIPT 1
<script type="text/javascript">
$(document).ready(function() {
var url = "http://localhost/integration/json.php";
$.getJSON(url, function(result) {
console.log(result);
$.each(result, function(i, field) {
var comment = field.comment;
var user = field.user;
var post_time = field.post_time;
$("#listview").append("<tr class='even gradeA' width = '30px'><td>"+comment+"</td><td>"+user+"-"+post_time+"</td></tr>");
});
});
});
</script>
SCRIPT 2
The role of script 2 is to post data to the server.
<script type="text/javascript">
$(document).ready(function() {
$("#insert").click(function() {
var comment = $("#comment").val();
var user = $("#user").val();
var ip = $("#ip").val();
var dataString = "comment=" + comment + "&user=" + user + "&ip=" + ip + "&insert=";
if ($.trim(comment).length > 0 & $.trim(user).length > 0 & $.trim(ip).length > 0) {
$.ajax({
type: "POST",
url: "http://localhost/integration/insert.php",
data: dataString,
crossDomain: true,
cache: false,
beforeSend: function() {
$("#insert").val('Connecting...');
},
success: function(data) {
if (data == "success") {
alert("Successfully submitted");
$("#insert").val('submit');
} else if (data == "error") {
alert("error");
}
}
});
}
return false;
});
});
</script>
Both scripts are working independently.
Try this below code:
Here is what I have done. I have converted it into a function which you can call once your insertion code has been completed and also can be called when the page is refreshed.
function getUpdatedData() {
var url = "http://localhost/integration/json.php";
$.getJSON(url, function(result) {
console.log(result);
$.each(result, function(i, field) {
var comment = field.comment;
var user = field.user;
var post_time = field.post_time;
$("#listview").append("<tr class='even gradeA' width = '30px'><td>" + comment + "</td><td>" + user + "-" + post_time + "</td></tr>");
});
});
}
$(document).ready(function() {
getUpdatedData();
$("#insert").on('click', function() {
var comment = $("#comment").val();
var user = $("#user").val();
var ip = $("#ip").val();
var dataString = "comment=" + comment + "&user=" + user + "&ip=" + ip + "&insert=";
if ($.trim(comment).length > 0 & $.trim(user).length > 0 & $.trim(ip).length > 0) {
$.ajax({
type: "POST",
url: "http://localhost/integration/insert.php",
data: dataString,
crossDomain: true,
cache: false,
beforeSend: function() {
$("#insert").val('Connecting...');
},
success: function(data) {
if (data == "success") {
alert("Successfully submitted");
$("#insert").val('submit');
getUpdatedData();
} else if (data == "error") {
alert("error");
}
}
});
}
return false;
});
});

jQuery ajax is calling infinily , showing too much recursion error in console

I am using jQuery.validationEngine plugin .I have a below ajax function to check duplicate unique value for a field.
function _is_unique(caller) {
var value = jQuery(caller).val();
var field_id = jQuery(caller).attr('id');
var field_name = jQuery(caller).attr('placeholder');
if (value != '') {
var uniqueObject = new Object();
uniqueObject.field_id = field_id;
uniqueObject.value = value;
var uniqueString = JSON.stringify(uniqueObject);
var getUrl = window.location;
//console.log(getUrl);
var baseUrl = getUrl.protocol + "//" + getUrl.host + "/" + getUrl.pathname.split('/')[1];
jQuery.ajax({
type: "POST",
url: baseUrl + "/dashboard/check_unique",
data: uniqueObject,
async: false,
cache: false,
dataType: "text",
success: function(msg) {
if (msg == "exist") {
isError = true;
promptText += " This " + field_name + settings.allrules["is_unique"].alertText + "<br />";
}
}
});
}
}
if the field value is present in server then from server I am returnning "exist" else I am returning "notexist".
Now while running my ajax script is calling infinitely . Can any please tell me what should I do to stop infinite loop of my ajax call.
Edited
This is the form Submit function . its also showing
too much recursion
error in console. By any chance am I having problem here ?
$('#searchform').on('submit', function(e){
var validateError ='';
var id='';
var fieldError = [];
$('#searchform :input:text').each(function(){
id = $(this).attr('id');
validateError = jQuery.fn.validationEngine.loadValidation(document.getElementById(id));
if(validateError)
{ fieldError.push(id);
}
});
if(fieldError.length!=0)
{
return false;
}
else{
$("form#searchform" ).submit();
return true;
}
});
});

ajax is not passing data

I dont know why this is not working. Im trying to pass data through ajax. Iv used this many times but for some reason its not working. Its returning nothing.
here is the js
$('#contactformbtn').click(function(){
var fullname = $('#fullname').val();
var youremail = $('#youremail').val();
var subject = $('#subject').val();
var yourmessage = $('#yourmessage').val();
var datastring = 'fullname=' + fullname + '&youremail=' + youremail + '&subject=' + subject + '&yourmessage=' + yourmessage;
$.ajax({
type: "POST",
url: "ajax-contact.php",
data: datastring,
success: function(status){
alert(status);
}
});
//alert(datastring);
return false;
});
and this is the php
<?php
require 'core/init.php';
if(isset($_POST)){
$fullname = $_POST['fullname'];
$youremail = $_POST['youremail'];
$subject = $_POST['subject'];
$message = $_POST['message'];
echo $fullname;
}
?>
in chrome im checking the console and im getting 2 errors
Uncaught TypeError: Cannot read property '1' of null
Uncaught TypeError: Cannot read property '3' of null
My full js is this, (just incase the error is not the contact function)
$(document).ready(function(){
$("#download-btn").bind("click", downloadfile);
$(".download-link").hide();
function downloadfile()
{
var dl = $("#dl").val();
var counter = 10;
var interval = setInterval(function(e) {
counter--;
if(counter > 0){
$("#download-btn").html("Your Download will begin in " + counter + " Seconds");
$("#download-btn").attr("disabled", "disabled");
} else {
window.location.href="http://www.forwardfiles.com/get_file.php?i="+dl;
$("#download-btn").hide();
$(".download-status").html("<h3 class='center'>Download is complete</h3>");
clearInterval(interval);
}
}, 1000);
}
$('#contactformbtn').click(function(){
var fullname = $('#fullname').val();
var youremail = $('#youremail').val();
var subject = $('#subject').val();
var yourmessage = $('#yourmessage').val();
var datastring = 'fullname=' + fullname + '&youremail=' + youremail + '&subject=' + subject + '&yourmessage=' + yourmessage;
$.ajax({
type: "POST",
url: "ajax-contact.php",
data: datastring,
success: function(status){
alert(status);
}
});
//alert(datastring);
return false;
});
});
Did you try .serialize?
$('#contactformbtn').click(function(){
$.ajax({
type: "POST",
url: "ajax-contact.php",
data: $("form").serialize(),
success: function(status){
alert(status);
}
});
//alert(datastring);
return false;
});
Check in your HTML code if these values
var fullname = $('#fullname').val();
var youremail = $('#youremail').val();
var subject = $('#subject').val();
var yourmessage = $('#yourmessage').val();
Have defined their id's and not only "name" tags
I got it working, the code i had was fine. the problem was i wasnt running php version 5.3, so i updated it and its working :D. Thanks for you help anyway

Create a function to send mail from a div

I've several divs with a email icon.
<div class="icon-send-mail" id="test1#email.com"></div>
<div class="icon-send-mail" id="test2#email.com"></div>
<div class="icon-send-mail" id="test3#email.com"></div>
I want to send an email when the user clicks on that icon.
$( document ).ready( function() {
$('.icon-send-mail').click(function(email) {
var mailto_link = 'mailto:'+email;
var win = window.open(mailto_link,'emailWindow');
});
});
How can this be done?
The input to a click handler is an event object. Within that event object you can get the element that was clicked on and therefore it's id, which in your case holds the email address
$('.icon-send-mail').click(function(event) {
var mailto_link = 'mailto:'+event.target.id;
var win = window.open(mailto_link,'emailWindow');
});
Edit the first line within your function:
/* You were passing the event object! */
var mailto_link = 'mailto:'+this.id;
Custom JQuery vs JavaScript performance benchmark
JavaScript/JQuery
$(document).ready(function(){
$('.icon-send-mail').click(function(event) {
var mailto_link = 'mailto:'+this.id;
var win = window.open(mailto_link,'emailWindow');
});
});
Pure Javascript
window.onload = function () {
var elems = document.getElementsByClassName('icon-send-mail');
for (var i in elems) {
if (elems[i].nodeType == 1) elems[i].addEventListener('click', function (event) {
var mailto_link = 'mailto:' + this.id;
var win = window.open(mailto_link, 'emailWindow');
});
}
};
Bonus CSS
.icon-send-mail {
cursor: pointer;
}
Live Demo
You're on the right track:
$( document ).ready( function() {
$('.icon-send-mail').on('click', function(e) {
var mailto_link = 'mailto:' + $(this).attr('id');
var win = window.open(mailto_link, 'emailWindow');
});
});
You should replace your this line:
var mailto_link = 'mailto:'+email;
with the following line:
var mailto_link = 'mailto:'+($(this).attr('id'));
Hi Call below code inside you Click event
$.ajax({
type: "POST",
url: "Mail.aspx/SendMail",
cache: false,
contentType: "application/json; charset=utf-8",
data: "{ 'body':'" + messageBody + "'," +
"'to': '" + msgTo + "'," +
"'from': '" + msgFrom + "'," +
"'subject': " + msgSubject + "'" +
"}",
dataType: "json",
complete: function (transport) { if (transport.status == 200) $("#formcontainer").html("Success"); else alert("Please try again later"); }
});
and write the mailing code on Code behind
MailMessage mail = new MailMessage();
SmtpClient SmtpServer = new SmtpClient("smtp.gmail.com");
mail.From = new MailAddress("me#mydomain.com");
mail.To.Add("u#urdomain.com");
mail.Subject = filename;
mail.Body = "Report";
Attachment attachment = new Attachment(filename);
mail.Attachments.Add(attachment);
SmtpServer.Port = 25;
SmtpServer.Credentials = new System.Net.NetworkCredential("me", "password");
SmtpServer.EnableSsl = true;
SmtpServer.Send(mail);

Categories

Resources