This jQuery ajax request is not working. The form submit just reloads the page, there are no alerts, nothing. Where am I going wrong?
$("#newfolder").submit(function() {
alert("1")
$.ajax({
type : "POST",
url : "<?php echo $cfg->wwwroot ?>/pages/media/async/newfolder.php",
data : $(this).serializeArray(),
success: function(data) {
alert(data)
//$.fancybox(data);
}
});
return false;
});
This can have several causes.
Ensure that you've included jQuery as one of first <script>s in HTML <head>.
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
Ensure that you're calling this function when the document is ready loading.
<script>
$(document).ready(function() {
// Here.
});
</script>
Ensure that the element with id="newFolder" is present in HTML DOM tree and supports the submit event.
<form id="newFolder">
Related
i have this script that does ajax using jquery but i want to update with specific content, when I did it return undefined..
<script type="text/javascript">
$(document).ready(function(e) {
$.ajax({
url:'n.php',
cache:false,
type:"GET",
success: function(data){
$('.list-ball').html($(data).find(".count").html());
console.log($(data).find(".count").html());
}
});
});
</script>
Start with console.log(data);
This way you can see the returned data.
From there you can populate an element like so:
$("#myElement").html(data);
You can use $(selector).load() function that will replace content:
$(document).ready(function() {
// [url] [any valid css selector]
$('.list-ball').load('n.php .count > *'); // Find `.count` content and place it instead of `.list-ball` content
});
If .list-ball element is not presented in DOM, than no ajax will be executed.
i have created a textarea & i wanna send the values of my textarea with ajax to the database, but it sends it to database without any value and with reloading, where is my problem ?
html codes :
<form>
<textarea></textarea>
<button type="submit">ارسال</button>
</form>
ajax codes :
$(document).ready(function(e){
var text=$('textarea').val();
$('button').click(function(e){
$('.loading').css('display','block');
$.ajax({
url:'insertText.php',
type:'POST',
data:{'text':text},
beforeSend : function(){
$('.loading').html('فرستادن ...');
},
error : function(request) {
alert(request);
},
success:function(data){
alert(data);
}
});
});
});
and this is my pdo and mvc for informations , i put last layer :
$obj=new Get;
$obj->InsertText($_POST['text']);
Place the line var text=$('textarea').val(); inside click event of the button, Otherwise it will take only the initial value at the time of dom ready.
$(document).ready(function(e) {
$('button').click(function(e) {
var text = $('textarea').val();
$('.loading').css('display', 'block');
$.ajax({
url: 'insertText.php',
type: 'POST',
data: {
'text': text
},
beforeSend: function() {
$('.loading').html('فرستادن ...');
},
error: function(request) {
alert(request);
},
success: function(data) {
alert(data);
}
});
});
});
You have two problems:
You are getting the value from the textarea at the wrong time
You are submitting the form
Your line of code:
var text=$('textarea').val();
Is inside the ready handler but outside the click hander. This means you get the value at the time the DOM becomes ready and not at the time the button is clicked.
Move it inside the click handler.
To stop the form submitting, you need to tell the browser not to perform the default action for clicking a submit button:
$('button').click(function(e){
e.preventDefault();
Note that, in general, it is better to react for the form being submitted rather than a specific submit button being clicked:
$('form').submit(function(e){
e.preventDefault();
It is also preferred that the form should still work when the JavaScript fails (for whatever reason):
<form action="insertText.php" method="POST">
and
<textarea name="text">
I have this jquery on every page:
$(window).load(function(){
// PAGE IS FULLY LOADED
// FADE OUT YOUR OVERLAYING DIV
$('#overlay').fadeOut();
});
which fades out a div when the page is fully loaded.
On all pages i have a form and this Jquery code:
<script type="text/javascript">
$(document).ready(function() {
$("#message").hide();
$("#please_wait_box").hide();
$("#reviewtickets").submit(function(e) {
$("#message").hide();
$("#please_wait_box").show();
e.preventDefault();
dataString = $("#reviewtickets").serialize();
$.ajax({
type: "POST",
url: "reviewtickets_go.php",
cache: false,
data: dataString,
success: function(res) {
$("#please_wait_box").hide();
$("#message").html(res);
$('#message').fadeIn('slow');
if (res.indexOf("success") != -1) {
window.location.href = res.substr(8);
}
}
});
});
});
</script>
so it basically calls another page to submit the form without moving away from the page.
When the forms are submitted, the page is called to save the data in the above jquery code but my jquery load function doesnt fade out because it cannot see that the page has fully loaded
how can i stop the loading function if the form submit code is used?
the div had an id and class both of overlay
the jquery needed to be the class and not the id as the css was on the class
call it inside the success callback of ajax . success function callback is called when the ajax request is successfully made and datas are returned from the server.
success: function(res){
$("#please_wait_box").hide();
$("#message").html(res);
$('#message').fadeIn('slow');
$('#overlay').fadeOut(); //<---here
if (res.indexOf("success") != -1) {
window.location.href = res.substr(8);
}
}
I'm still working on my multi-stage form (http://jsfiddle.net/xSkgH/93/) and have incorporated the following solution to assist in ajax submit:
<script type="text/javascript">
$(document).ready(function() {
$("#postData").click(function() {
$("#last-step").hide(600);
$("#task5_booking").submit(function() {
$.post('resources/process2.php', function(data) {
$("#result").html(data);
});
});
return false;
});
});
</script>
It fades out the last step well but when it comes to loading up the content ot process2.php which is simply an array of all the form fields:
<?php
print_r($_POST);
?>
Nothing seems to happen at all. The div remains blank. Would really appreciate any help guys. Thanks in advance.
if you call a resource via ajax you should also pass the serialized form along the call. So assuming $("#task5_booking") is your form element
$("#task5_booking").submit(function(evt) {
evt.preventDefault();
$.post('resources/process2.php', { data: $("#task5_booking").serialize() }, function(data) {
$("#result").html(data);
});
});
When you submit the form
stop the default event (submit) otherwise the form submission stops immediately the subsequent code and the ajax call never starts - this is done using preventDefault() method;
make a post call, passing the form serialized with serialize() method (see http://api.jquery.com/serialize/).
Please also note that as pointed out by Jack your form in the fiddle has camperapplicationForm id and not task5_booking
I think you should remove your submit function:
<script type="text/javascript">
$(document).ready(function() {
$("#postData").click(function() {
$("#last-step").hide(600);
$.post('resources/process2.php', function(data) {
$("#result").html(data);
});
return false;
});
});
</script>
$(document).ready(function() {
$("#postData").click(function(e) {
e.preventDefault();
$("#last-step").hide(600);
$("#task5_booking").submit(function() {
$.post('resources/process2.php', $(this).serialize(), function(data) {
$("#result").html(data);
});
});
});
});
I have a PHP file, Test.php, and it has two functions:
<?php
echo displayInfo();
echo displayDetails();
?>
JavaScript:
<html>
...
<script type="text/javascript">
$.ajax({
type:'POST',
url: 'display.php',
data:'id='+id ,
success: function(data){
$("#response").html(data);
}
});
</script>
...
<div id="response">
</div>
</html>
It returns the response from jQuery. The response shows as <a href=Another.php?>Link</a>. When I click the Another.php link in test.php, it loads in another window. But I need it to load the same <div> </div> area without changing the content of test.php, since it has displayInfo(), displayDetails(). Or is it possible to load a PHP page inside <div> </div> elements?
How can I tackle this problem?
If I understand correctly, you'd like for the a link to cancel navigation, but fire the AJAX function?
In that case:
$("#mylink").click(function() {
$.ajax({ type: "POST", url: "another.php", data: {id: "somedata"}, function(data) {
$("#response").html(data);
});
return false;
});
Krof is correct,
One possible unwanted behavior of this however is that it will query the data every time the link is clicked. You can set the event to only call the ajax query once by using one.
$("#mylink").one('click', function() {
// ajax call
return false;
});
Don't forget to set href="javascript:{}" in your link so after the event is fired once the link wont do anything;
You could just use MooTools and class Request.HTML.