I am trying to get JQuery Ajax to work but not getting a success alert.
Here is the code:
<script type="text/javascript">
$(document).ready(function(
$('button').click(function() {
$.ajax({
url: 'testing123.php',
success: function(){
alert('this worked');
}
});
return false;
});
));
</script>
<button>Click Here</button>
...then the testing123.php file:
<?php
echo 'Hello there';
?>
I DO have JQuery library added too.
When I click the button I should be getting an alert saying "this worked" right?
I don't understand why it's not happening...
Any ideas why?
Incorrect use of parantheses. Corrected code:
$(document).ready(function() {
$('button').click(function() {
$.ajax({
url: 'testing123.php',
success: function(){
alert('this worked');
}
});
return false;
});
});
you need to put hash along with button id ('#button').click
$(document).ready(function() {
$('#button').click(function() {
$.ajax({
url: 'testing123.php',
success: function(){
alert('test echo');
}
});
return false;
});
});
Related
I am using ajax validation in URL field, I getting correct message (after a check from database), but still form is submitting
I want if I getting an invalid message then the form should not submit, how can I do this ?
<script>
$(document).ready(function(){
$("#Url").blur(function() {
var element = $(this).val();
$.ajax
({
url: "<?php echo site_url('Welcome/check_user_status'); ?>",
type: 'POST',
data: "url="+element,
success: function(data){
alert(data);
$('#emailInfo').html(data);
if(jQuery.trim(data) === "Emailvalid")
{
alert("Emailvalid");
}
else
{
alert("Email Invalid");
}
console.log(data);
}
});
});
// return false;
});
</script>
<form name="myForm" id="myForm">
<script>
$(document).ready(function(){
$("#Url").blur(function() {
var element = $(this).val();
$.ajax
({
url: "<?php echo site_url('Welcome/check_user_status'); ?>",
type: 'POST',
data: "url="+element,
success: function(data){
alert(data);
$('#emailInfo').html(data);
if(jQuery.trim(data) === "Emailvalid")
{
alert("Emailvalid");
}
else
{
alert("Email Invalid");
$("form").submit(function(e){
e.preventDefault();
});
}
console.log(data);
}
});
});
// return false;
});
</script>
Your tests are placed in the success callback, which is fired after the $.ajax() call has successfully POSTed data and received a response. No matter what you put in there, it is only ever going to happen after the form has been submitted.
If you are trying to do validation before your POST, you need to add that separately. Depending on what kind of validation you need, you could write your own simple tests, or use a plugin - jQuery Validation is a great option.
add this in your footer file
<script>
var burl="<?php echo base_url('') ?>";
var surl="<?php echo site_url('') ?>";
</script>
and then use this surl on ajax url...
like this
<script>
$(document).ready(function(){
$("#Url").blur(function(e) { // add e
e.preventDefault();// prevent other events
var element = $(this).val();
$.ajax
({
url: surl+"Welcome/check_user_status",
type: 'POST',
data: {"url":element}, // check the change
success: function(data){
if($.trim(data) === "Emailvalid"){ // instead of jQuery use $
alert("Emailvalid");
$('#emailInfo').html(data); // put here
}else{ // remove the space between if and else
alert("Email Invalid");
return false; // add here
}
console.log(data);
}
});
});
});
</script>
I use this code to submit a form
<script type="text/javascript">
var frm = $('#blogform');
frm.submit(function (ev) {
$.ajax({
type: frm.attr('method'),
url: frm.attr('action'),
data: frm.serialize(),
success: function (data) {
alert(data);
},
error: function (jXHR, textStatus, errorThrown) {
alert(errorThrown);
}
});
ev.preventDefault();
});
</script>
<form id="blogform" action="/my_url" method="post">
...
</form>
My problem is that if the submission is successful I want to be able to empty the form field.
var frm = $('#blogform'); must be var frm = $('#myform'); according to the form sample you provide in the question. And in order to reset your form, Use trigger or reset before alert(data):
$('#myform').trigger("reset");
or
$('#myform')[0].reset();
In your php code you can check whether the submission is successful or not and process that data the jquery like below:
if(data){
$('#myform')[0].reset();
alert(data);
}else{
return false;
}
Hope this may help you.
You can use JavaScript reset() method.
I am looking to pass the value of cityField in ajax to $_POST['cityField']. Everything looks in order but the variable is not passing to php on nextpage.php
<script type="text/javascript">
$('#city').blur(function() {
var cityField=$('#city').val();
$.ajax({
type:"post",
url:"nextpage.php",
data:{'cityField':cityField },
dataType:"html",
success:function(data) {
alert("You typed:"+cityField);
}
});
});
</script>
Do not use 'cityField' as object. Because data contains paramaters in the format data{ object: value}.
Use this:
<script type="text/javascript">
$('#city').blur(function() {
var cityField=$('#city').val();
$.ajax({
type:"post",
url:"nextpage.php",
data:{myobj:cityField },
dataType:"html",
success:function(data) {
alert("You typed:"+cityField);
});
</script>
and then retrieve myobj in server side.
In your success function you'll get the data send by nextpage.php in the var named data. You are alerting the cityfield variable.
So change your success function to resemble something like this:
....
success: function (data) {
console.log('This is the answer of nextpage.php : '+ data;
}
...
Besides that, maybe it's a good idea to strip the data to an object outside of your $.ajax call:
var myPostData = {};
myPostData.cityField = $('#city').val();
....
data: myPostData,
....
it's simple.change to :
...
data:$('#city').serialize()
...
or use this fully :
<script type="text/javascript">
$('#city').blur(function() {
var $this=this;
$.ajax({
type:"post",
url:"nextpage.php",
data:$($this).serialize(),
dataType:"html",
success:function(data) {
alert("You typed:"+cityField);
}
});
});
</script>
for more see this : http://api.jquery.com/serialize/
Hello i want to redirect to an url with a parameter recived from ajax response. Here is my script:
<script>
$(function() {
$("button#submit").click(function(){
$.ajax({
type: "POST",
url: "engine/app/insert_user.php",
data: $(\'form#inregistrare\').serialize(),
success: function(data){
if (data == "succes") {
window.location=\'profil.php?user=data\';
}
else {
alert("You have something wrong in your form.");
}
},
error: function(){
alert("failure");
}
});
});
});
</script>
Nvm i managed to fix it myself
window.location=\'profil.php?user=\'+data;
I'm trying to getElementById from a div that loaded with ajax, but I can't. Let's explain:
In 'example.php' I have this js code:
<script type= "text/javascript">
var page=document.getElementById("table_page").value;
$(document).ready(function() {
function update() {
$.ajax({
type: 'GET',
url: "show_class_entrys.php?q="+page,
timeout: 1000,
success: function(data) {
$("#show_class_entrys_js").html(data);
window.setTimeout(update, 3000);
},
});
}
update();
});
</script>
But the input with id='table_page' loading with ajax file 'loaded.php'. The file 'loaded.php' contains this:
<?php echo " <input type='hidden' id='table_page' value='7' /> "; ?>
This printed somewhere in my 'example.php'. The problem is that I can't get the value from this div in my js code. Please help me.
Try this:
$(document).ready(function () {
var page = '';
$('#divLoadedID').load('loaded.php', function () {
page = $("#table_page").val();
update();
});
function update() {
$.ajax({
type: 'GET',
url: "show_class_entrys.php?q=" + page,
timeout: 1000,
success: function (data) {
$("#show_class_entrys_js").html(data);
window.setTimeout(update, 3000);
},
});
}
});
This is a simple fix. All you need to do is overwrite page in your success function as it will get the new value.
$(document).ready(function() {
var page=$("#table_page").val();
function update() {
$.ajax({
type: 'GET',
url: "show_class_entrys.php?q="+page,
timeout: 1000,
success: function(data) {
$("#show_class_entrys_js").html(data);
window.setTimeout(update, 3000);
page=$("#table_page").val();
},
});
}
update();
});
The problem is page is getting set before the DOM changes, the success part of the ajax call happens after the DOM changes so it can account for new elements/data