I have an AJAX contact form with Bootstrap theme.
Here I have to tried to add alert box like this
$('#contact-form').find('.sashikanta').html(alertBox);
But the selector cannot able to find the class .sashikanta. In the place of the above simple alert is working fine and the email form working.
Below is my JS code.
$(function () {
$('#contact-form').validator();
$('#contact-form').on('submit', function (e) {
if (!e.isDefaultPrevented()) {
var url = "mail.php";
$.ajax({
type: "POST",
url: url,
data: $(this).serialize(),
success: function (data)
{
var messageAlert = 'alert-' + data.type;
var messageText = data.message;
var alertBox = '<div class="alert ' + messageAlert + ' alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>' + messageText + '</div>';
if (messageAlert && messageText) {
$('#contact-form').find('.sashikanta').html(alertBox);
$('#contact-form')[0].reset();
}
}
});
return false;
}
})
});
Please suggest I did not find anything through Firebug.
Related
In case that chosen attributes are the same, after clicking "Save button" - button disappears.
(it disappears from code, got deleted)
[Image before clicking][1]
[Image after clicking][2]
Most confusing thing is that, add button was coded the same but it works well...
I've got no clue what might be the case here.
Button:
<input type="button" height="20" class="btn btn-warning" onclick="return saveEdit()" value="Save" />
function saveEdit() {
var elem = $('#Domain_Edit');
$.ajax({
url: "/Domain/DomainEdit",
type: "post",
data: elem.serialize(),
cache: false,
success: function (result) {
if (result.redirectTo) {
alert(window.location.href = result.redirectTo + '?siteMessage=' + result.siteMessage);
}
else
{
$(elem).html(result);
}
},
error: function (xhr, status, error) {
$(elem).html('<div class="alert alert-danger" role="alert">' + xhr.status + " " + xhr.statusText + '</div>');
}
});
}
Code of button on page:
<input type="button" height="20" class="btn btn-warning" onclick="return btnSave('89515a0b-a671-4eff-a0eb-61c1d268f696')" value="Save">
function btnSave(id) {
var elem = $("." + id).closest('#DomainTrust_Edit');
$.ajax({
url: "/Domain/DomainTrustEdit",
type: "post",
data: $("." + id).closest('#DomainTrust_Edit').serialize(),
cache: false,
success: function (result) {
if (result.redirectTo) {
// The controller action returned a JSON object with the redirectTo property
window.location.href = result.redirectTo + '?siteMessage=' + result.siteMessage;
} else {
// The controller action returned a partial view with the form and the errors so update of the containing FORM with it is needed.
$(elem).html(result);
}
},
error: function (xhr, status, error) {
$(elem).html('<div class="alert alert-danger" role="alert">' + xhr.status + " " + xhr.statusText + '</div>');
}
});
}
Is your button located inside the #Domain_Edit element?
Since .html(result) replaces all html inside #Domain_Edit so if your button is inside that element, that would explain why it got removed.
That's error ; When I followed the console screen while the page was loading it gave the error "SCRIPT438: SCRIPT438: Object doesn't support property or method 'validator'". It is showing the error in the contact.js file.
I could not solve the problem. Can you help me ?
My code in contact.js :
$(function () {
$('.contact-form').validator();
$('.contact-form').on('submit', function (e) {
if (!e.isDefaultPrevented()) {
var url = "vendor/contact/contact.php";
$.ajax({
type: "POST",
url: url,
data: $(this).serialize(),
success: function (data)
{
var messageAlert = 'alert-' + data.type;
var messageText = data.message;
var alertBox = '<div class="alert ' + messageAlert + ' alert-dismissable">' + messageText + '</div>';
if (messageAlert && messageText) {
$('.contact-form').find('.messages').html(alertBox);
$('.contact-form')[0].reset();
}
}
});
return false;
}
})
});
There's no such method called 'validator'.
Assuming you're using the typical jquery validator plugin, what you're looking for is just 'validate()'
I'm trying to get that Contact Form to Work:
https://bootstrapious.com/p/how-to-build-a-working-bootstrap-contact-form
but the confirmation Text opens in a new site instead of the div "messages".
contact.php
<form id="contact-form" method="post" action="contactaction.php" role="form" data-toggle="validator">
<div class="messages"></div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/1000hz-bootstrap-validator/0.11.9/validator.min.js"></script>
<script src="contact.js"></script>
contact.js
$(function () {
// init the validator
$('#contact-form').validator();
// when the form is submitted
$('#contact-form').on('submit', function (e) {
// if the validator does not prevent form submit
if (!e.isDefaultPrevented()) {
var url = "contact.php";
// POST values in the background the the script URL
$.ajax({
type: "POST",
url: url,
data: $(this).serialize(),
success: function (data)
{
// data = JSON object that contact.php returns
// we recieve the type of the message: success x danger and apply it to the
var messageAlert = 'alert-' + data.type;
var messageText = data.message;
// let's compose Bootstrap alert box HTML
var alertBox = '<div class="alert ' + messageAlert + ' alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>' + messageText + '</div>';
// If we have messageAlert and messageText
if (messageAlert && messageText) {
// inject the alert to .messages div in our form
$('#contact-form').find('.messages').html(alertBox);
// empty the form
$('#contact-form')[0].reset();
}
}
});
return false;
}
})
});
Just use e.preventDefault(); as the first step of the onsubmit function:
// when the form is submitted
$(function () {
// init the validator
$('#contact-form').validator();
// when the form is submitted
$('#contact-form').on('submit', function (e) {
e.preventDefault();
// if the validator does not prevent form submit
var url = "contact.php";
// POST values in the background the the script URL
$.ajax({
type: "POST",
url: url,
data: $(this).serialize(),
success: function (data)
{
// data = JSON object that contact.php returns
// we recieve the type of the message: success x danger and apply it to the
var messageAlert = 'alert-' + data.type;
var messageText = data.message;
// let's compose Bootstrap alert box HTML
var alertBox = '<div class="alert ' + messageAlert + ' alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>' + messageText + '</div>';
// If we have messageAlert and messageText
if (messageAlert && messageText) {
// inject the alert to .messages div in our form
$('#contact-form').find('.messages').html(alertBox);
// empty the form
$('#contact-form')[0].reset();
}
}
});
return false;
})
});
I use ajax to sent data (a form form html) to php, php would process the data and return result from php to ajax again. I checked php did its job. And php also gets the right result.
$responseArray = array("type" => "success", "message" => $okMessage);
if (!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
header('Content-Type: application/json; charset=utf8', true);
$encoded = json_encode($responseArray);
echo $encoded;
}
and the following code is really called,
But the data ajax received is
2017-10-05 23:18:04 CLIENT -> SERVER: EHLO localhost
2017-10-05 23:18:04 SERVER -> CLIENT: 250-smtp.gmail.com at your service, bla...bla...
{"type":"success","message":"Contact form successfully submitted. Thank you, I will get back to you soon!"}
In this case I only need the last line. I tried to stop it to print the log information. One solution is to change /etc/php.ini. But I do not have this file.
Here is the .js code clip.
$.ajax({
type: "POST",
url: url,
// dataType:"json", /*can not get data back from php but the output of php is right */
data: $(this).serialize(),
success: function(data) {
// we recieve the type of the message: success x danger and apply it to the
var messageAlert = 'alert-' + data.type;
var messageText = data.message;
// let's compose Bootstrap alert box HTML
var alertBox = '<div class="alert ' + messageAlert + ' alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>' + messageText + '</div>';
$('#main-contact-form').find('.messages').html(alertBox);
// empty the form
$('#main-contact-form')[0].reset();
// If we have messageAlert and messageText
if (messageAlert && messageText) {
// inject the alert to .messages div in our form
$('#main-contact-form').find('.messages').html(alertBox);
// empty the form
$('#main-contact-form')[0].reset();
}
}
});
php file
hide the header function (not mandatory) //header('Content-Type: application/json; charset=utf8', true); the json encoded is correct.
$responseArray = array("type" => "success", "message" => $okMessage);
if (!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
//header('Content-Type: application/json; charset=utf8', true);
$encoded = json_encode($responseArray);
echo $encoded;
}
.js code
datatype added json and used data['type'] and data['message']
$.ajax({
type: "POST",
url: url,
dataType:"json",
data: $(this).serialize(),
success: function(data) {
// we recieve the type of the message: success x danger and apply it to the
var messageAlert = 'alert-' + data['type'];
var messageText = data['message'];
// let's compose Bootstrap alert box HTML
var alertBox = '<div class="alert ' + messageAlert + ' alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>' + messageText + '</div>';
$('#main-contact-form').find('.messages').html(alertBox);
// empty the form
$('#main-contact-form')[0].reset();
// If we have messageAlert and messageText
if (messageAlert && messageText) {
// inject the alert to .messages div in our form
$('#main-contact-form').find('.messages').html(alertBox);
// empty the form
$('#main-contact-form')[0].reset();
}
}
});
Note: I didnt tested the above code.
I'm facing with this problem : I have made a button report on every comment in a website to let people to report comment. I want if someone click on the button to be redirected to the popup window to let the people to login or register. I want after login/register is done this request(count) is send to database.
My problem is how can I perform this inside jQuery code :
if(isset($_SESSION['session_user'])) { /*do something*/ }.
Here is the code of what I already do :
return this.each(function (i) {
var count = 0;
$(this).append("<button class='" + parametres.button + " report" + i + "''><span class='glyphicon glyphicon-alert'> </span>" + parametres.textBtn + "</button>").on('click', function () {
// if ("<%php !$_SESSION['user_session'] %>") {
// Popup window
$('#myModal').modal('show');
// pane register
$('.btnReg').on('click', function () {
$.ajax({
url: 'includes/register.php',
data: {name: $('#nameReg').val(), email: $('#emailReg').val(), password: $('#passwordReg').val()},
type: 'POST',
beforeSend: function () {
//$('#error').fadeOut();
$("#error").html('<div class="alert alert-info"> <span class="glyphicon glyphicon-transfer">Envoi en Cours ...</span></div>');
},
success: function (data) {
if (data == 'exist') {
$("#error").html('<div class="alert alert-danger"> <span class="glyphicon glyphicon-info-sign"></span>Ce mail n\'est pas disponible !</div>');
} else if (data == 'success') {
$("#error").html('<div class="alert alert-success"> <span class="glyphicon glyphicon-info-sign"></span>Inscripton effectuée !</div>');
} else {
$("#error").fadeIn(1000, function () {
$("#error").html('<div class="alert alert-danger"><span class="glyphicon glyphicon-info-sign"></span>' + data + ' !</div>');
});
}
}
});
});
// pane login
$('.btnLog').on('click', function (elem, i) {
//event.preventDefault();
$.ajax({
url: 'includes/login.php',
data: {email: $('#emailLog').val(), password: $('#passwordLog').val()},
type: 'POST',
success: function (data) {
if (data == 'success') {
$("#error").html('<div class="alert alert-info"> <span class="glyphicon glyphicon-transfer">Connexion en Cours...</span></div>');
setTimeout(' window.location.href = "index.php"; ', 4000);
} else { //alert(data);
$("#error").fadeIn(1000, function () {
$("#error").html('<div class="alert alert-danger"> <span class="glyphicon glyphicon-info-sign"></span>' + data + ' !</div>');
});
}
}
});
});
//}
//This is the thing to be done after login, where to put it ?
count = count + 1;
if (count >= parametres.juge) {
var content = $(this).text();
var click = count;
var tag = "<button class='" + parametres.button + " report" + i + "''>" + parametres.textBtn + "</button>";
$.ajax({
url: 'includes/controller.php',
data: {content: content,
click: click,
tag: tag},
type: 'POST',
success: function (data) {
if (!data.error) {
//alert(data);
alert('Success!');
}
}
});
$(this).animate({'opacity': 0}, 1000, function () {
$(this).text(parametres.textReplace).css('color', parametres.colorTex);
}).animate({'opacity': 1}, 1000);
}
});
});
You can use php to determine whether or not the user is logged in, and if they are print their id into a hidden input variable.
<?php isset($_SESSION['session_user']): ?>
<input type="hidden" id="session_user_id" value="<?php echo $_SESSION['session_user_id']; ?>">
<?php endif; ?>
Then in js when you need the id, you can use jquery to find it:
var session_user_id = $('#session_user_id').val();
Have you tried like this
if( <?php isset($_SESSION['session_user']) ?>) { do something }.