Results 1 to 6 of 6

Thread: [RESOLVED] Problem with Ajax

  1. #1

    Thread Starter
    Member
    Join Date
    Oct 2021
    Posts
    38

    Resolved [RESOLVED] Problem with Ajax

    So I am using ajax to get data from my php file like so below and it works for DIV element using the but if I change it to Input tag element, it gets the whole innerHTML data.

    FOR DIV TAG
    Code:
                    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    		<script>
    		$(document).ready(function(){
    		  $("button").click(function(){
    			$.ajax({url: "curlphp.php", async: false, success: function(result){
    			  $('#DIV1').html(result);
    			}});
    		  });
    		});
    		</script>
    This gets the result just fine for example result is 100.

    FOR INPUT TAG
    Code:
                    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    		<script>
    		$(document).ready(function(){
    		  $("button").click(function(){
    			$.ajax({url: "curlphp.php", async: false, success: function(result){
    			  $('#input1').val(result);
    			}});
    		  });
    		});
    		</script>
    This gets the whole innerHTML data. I just need the output 100 just like in DIV tag.


    UPDATE: I found the issue. the data in curlphp.php is in div tag so I need pass the value first to DIV1 tag and get the value from DIV1 and pass to INPUT1. That would be my solution. But maybe there is other correct approach of doing it. I would like to know the other way. Thanks.
    Last edited by UserBee; Nov 4th, 2021 at 06:36 PM.

  2. #2
    Super Moderator dday9's Avatar
    Join Date
    Mar 2011
    Location
    South Louisiana
    Posts
    11,147

    Re: Problem with Ajax

    You don't need to use jQuery just to submit an AJAX request. In fact, I'd highly discourage it because that is the equivalent of buying a computer business (jQuery library) so that you have access to a keyboard (GET request).

    It's also highly discouraged to set async to false. AJAX is designed to work asynchronously (hence the first "A" in AJAX).

    Take a look at this option instead:
    Code:
    const element = document.getElementById('input1');
    fetch('curlphp.php')
      .then((data) => {
        data.text()
          .then((text) => {
            element.value = text;
            console.log(JSON.parse(text));
          });
      })
      .catch((error) => {
        element.value = error;
      });
    Fiddle: https://jsfiddle.net/gpzayw84/
    "Code is like humor. When you have to explain it, itís bad." - Cory House
    VbLessons | Code Tags | Sword of Fury - Jameram

  3. #3

    Thread Starter
    Member
    Join Date
    Oct 2021
    Posts
    38

    Re: Problem with Ajax

    may I ask, what is that (data) and (text) ?
    Last edited by UserBee; Nov 4th, 2021 at 07:48 PM.

  4. #4
    Super Moderator dday9's Avatar
    Join Date
    Mar 2011
    Location
    South Louisiana
    Posts
    11,147

    Re: Problem with Ajax

    MDN is my go to for any documentation related to HTML or JavaScript. Here is the specific documentation for fetch: https://developer.mozilla.org/en-US/.../API/Fetch_API
    "Code is like humor. When you have to explain it, itís bad." - Cory House
    VbLessons | Code Tags | Sword of Fury - Jameram

  5. #5

    Thread Starter
    Member
    Join Date
    Oct 2021
    Posts
    38

    Re: Problem with Ajax

    Quote Originally Posted by dday9 View Post
    MDN is my go to for any documentation related to HTML or JavaScript. Here is the specific documentation for fetch: https://developer.mozilla.org/en-US/.../API/Fetch_API
    may I ask, what is that (data) and (text) ?

  6. #6
    Super Moderator dday9's Avatar
    Join Date
    Mar 2011
    Location
    South Louisiana
    Posts
    11,147

    Re: Problem with Ajax

    Those are function definitions with one argument each (data and text respectively).

    They can be described as such too if you do not like the arrow function syntax:
    Code:
    function(data) {
        ...
    }
    "Code is like humor. When you have to explain it, itís bad." - Cory House
    VbLessons | Code Tags | Sword of Fury - Jameram

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Click Here to Expand Forum to Full Width