jQuery - Ajax with PHP
AbdullaScript • منذ 8 سنوات
Alsalam alikum
I'm having a problem with ajax php, it works fine but mybox div disappear after executing ajax, so i have to use location.reload() which it will reload the page if .load() function completed, this is not I'm looking for, i don't want to refresh the page
Here's the code - head
<script type="text/javascript">
$(document).ready(function() {
$('#ajaxload').click( function() {
var href = $(this).attr('href');
$('#mybox').load( href , function() {
location.reload();
});
return false;
});
});
</script>
HTML - PHP
<div id='mybox'>
<a class='waves-effect waves-light btn modal-trigger grey' href='#modal1' style='width:auto;'><i class='material-icons'>account_circle</i> Seller Info</a>
<a href='folder/file.php?delete=$ID' id='ajaxload' class='waves-effect waves-light btn red' style='width:auto;'><i class='material-icons'>favorite_border</i></a>
</div>
ساعد بالإجابة
"إن في قضاء حوائج الناس لذة لا يَعرفها إلا من جربها، فافعل الخير مهما استصغرته فإنك لا تدري أي حسنة تدخلك الجنة."
الإجابات (6)
Ali Majrashi • منذ 8 سنوات
<script type="text/javascript">
$(document).ready(function() {
$('#ajaxload').click( function(e) {
e.preventDefault();
var href = $(this).attr('href');
$('#mybox').load( href , function() {
// location.reload();
});
return false;
});
});
</script>if you wish to prevent the default behaviour of loading the page with ajax request always use the
preventDefault();function on the requested event
AbdullaScript • منذ 8 سنوات
I've done that, but still not working probably, the mybox div disappear after executing ajax
AbdullaScript • منذ 8 سنوات
This is my project which is under-development , sign up then try (add to wish - like ) button of any product.
link: http://bh-bay.com/product_details.php?product_details=303/باندات
Ali Majrashi • منذ 8 سنوات
Loged in and tested it your issue with load method this function will fetch HTML from a url
so in your response make sure you return valid HTML to be used to generate the desired element
The
.load()method is unique among jQuery’s Ajax methods in that it is called on a selection. The.load()method fetches HTML from a URL, and uses the returned HTML to populate the selected element(s). In addition to providing a URL to the method, you can optionally provide a selector; jQuery will fetch only the matching content from the returned HTML.
it's much better to use the ajax method $.ajax and on success response from server target the button and change it's style
and the same thing on failure
<!DOCTYPE html>
<html>
<head>
<title>Q6 Help</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<div id='mybox'>
<a class='waves-effect waves-light btn modal-trigger grey' href='#modal1' style='width:auto;'><i class='material-icons'>account_circle</i> Seller Info</a>
<a href='folder/file.php?delete=$ID' id='ajaxload' class='waves-effect waves-light btn red' style='width:auto;'><i class='material-icons'>favorite_border</i></a>
</div>
<div id="message-card">
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#ajaxload').click( function(e) {
e.preventDefault();
var href = $(this).attr('href');
$.ajax({
url: href,
data: {
id: 1
},
success: function( data ) {
$( "#message-card" ).html( "<strong> success </strong>" );
},
// Code to run if the request fails; the raw request and
// status codes are passed to the function
error: function( data ) {
$( "#message-card" ).html( "<strong> error </strong>" );
},
});
return false;
});
});
</script>
</body>
</html>or in your method just make sure to return HTML code to replace the targeted element
لايوجد لديك حساب في عالم البرمجة؟
تحب تنضم لعالم البرمجة؟ وتنشئ عالمك الخاص، تنشر المقالات، الدورات، تشارك المبرمجين وتساعد الآخرين، اشترك الآن بخطوات يسيرة !