jQuery - Ajax with PHP

AbdullaScript • منذ 4 سنوات

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 • منذ 4 سنوات
<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 • منذ 4 سنوات

I've done that, but still not working probably, the mybox div disappear after executing ajax 

AbdullaScript • منذ 4 سنوات

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 • منذ 4 سنوات

can you give me any test login info to test the issue my self 

AbdullaScript • منذ 4 سنوات

Sure.

 

User: abdulla

Pass: 12345678

Ali Majrashi • منذ 4 سنوات

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 

لايوجد لديك حساب في عالم البرمجة؟

تحب تنضم لعالم البرمجة؟ وتنشئ عالمك الخاص، تنشر المقالات، الدورات، تشارك المبرمجين وتساعد الآخرين، اشترك الآن بخطوات يسيرة !