Question 230577 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – variable value not being increased prior to the ajax call

I have a url string being compiled based on existing PHP array values.
The URL is fine however after each time the AJAX call is made I want the variable last
increased by 100.
The console log is showing the correct value yet the URL string has NULL after the offset value
Here is the URL string shown in console log

basictest.php?base=accountancy-jobs&cat=accountancy&kw=&loc=London&distance=10&cattitle=Accountancy&offset=200NULL

The value is being increased yet its adding NULL after it for some reason

Here is my code

let last = 100;
let vars = '<?php foreach($passedVars as $vars=>$key){ if($vars == 'base'){ echo $vars.'='.$key;$pv++;} if($pv < $pvcount){ echo '&'.$vars.'='.$key;$pv++;} else {echo '&'.$vars.'='.$key;}}?><?php echo "&offset=100";?>'; 
 
$('#next').click(function(e){
           e.preventDefault();
    vars = '<?php foreach($passedVars as $vars=>$key){ if($vars == 'base'){ echo $vars.'='.$key;$pv++;} if($pv < $pvcount){ echo '&'.$vars.'='.$key;$pv++;} else {echo '&'.$vars.'='.$key;}}?><?php echo "&offset=";?>'+last;
   $.ajax({
                   dataType: 'html',
                   url: 'basictest.php?'+vars,
                   type: 'get',
                   success: function(html)
                   {
                       $("#more").append(html);
                       last += 100;
                       console.log(html);
                       console.log(last);
                   }
           });
       });
Tags:

2

Answers


  1. 0

    Do not use PHP because you are using AJAX so the vars are not updated since you are not supposed to reload the page…

    Use URL and URL.searchParams to update the offset and $.get to get a new page

    let last = 0;
let url = new URL(`https://yourserver.com/basictest.php?base=accountancy-jobs&cat=accountancy&kw=&loc=London&distance=10&cattitle=Accountancy&offset=0`)

$('#next').on('click', (e) => {
  url.searchParams.set('offset',last)
console.log(url.toString())
//  $.get(url.toString(), (html) => {
//    $("#more").append(html);
    last += 100;
//  }));

})
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="next" type="button">Next</button>
    Login or Signup to reply.
  2. 0 
    $passedVars = array(
    'base' => 'accountancy-jobs',
    'cat' => 'accountancy',
    'kw' => '',
    'loc' => 'London',
    'distance' => '10',
    'cattitle' => 'Accountancy',
    'offset' => '200'
);

    <button id="next">Next</button>
<div id="more"></div>

    It might be easier to introduce your PHP array into Javascript using json_encode. Use parseInt to add last to your offset and param $.param(vars) to add the query string to your URL

    let last = 100;
let vars = <?php echo json_encode($passedVars)?>; 
 
$('#next').click(function(e){
    vars['offset'] = parseInt(vars['offset']) + last;

    $.ajax({
        url: 'basictest.php?' + $.param(vars),
        dataType: 'html',
        type: 'get'
    }).done(function(html){
        $("#more").append(html);
        console.log(html);
        console.log(vars['offset']);
    });

    return false;
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search