Cannot return the searched data after filtering

[KSI]

I have a table that shows the redirect from and redirect to columns from my database. By default, all the records are shown, but there is a from and to filter I'm using to search by a particular redirect. Now there are a lot of times that after I input the filters, it gives me a Undefined variable: redirects error, but sometimes it works. Here is my code:

View Class:

<?php if ($redirects): ?>
  <form name="redirectform" action="admin/redirects" method="post">
      <div>    
                <input list="search-from-list" id="search-from" name="search-from" style="width:100%;"/>
                <datalist id="search-from-list">
                    <?php foreach ($allredirects as $allredirect){ ?>
                      <option value="<?php echo $allredirect->from; ?>" id="<?php echo $allredirect->id; ?>" />
                    <?php } ?>
                </datalist>
            </div>

            <input type="hidden" name="linkid" id="linkid" />
            <input type="hidden" name="linkidto" id="linkidto" />

            <input type="hidden" name="<?php echo $this->security->get_csrf_token_name();?>" value="<?php echo $this->security->get_csrf_hash();?>">
      </div>
      
          <input list="search-to-list" id="search-to" name="search-to" style="width:100%;" />
          <datalist id="search-to-list">
              <?php foreach ($allredirects as $allredirect){ ?>
                <option value="<?php echo $allredirect->to; ?>" id="<?php echo $allredirect->id; ?>" />
              <?php } ?>
          </datalist>
      </div>
  </form>
    <table>
        <?php foreach ($redirects as $redirect): ?>
        <tr>
          <td><?php echo $from=str_replace('%', '*', $redirect->from);?></td>
          <td><?php echo $redirect->to;?></td>
        </tr>
        <?php endforeach ?>
    </table>
    <?php echo form_close() ?> </div>
<?php else: ?>
    <div class="no_data">No Data</div>
<?php endif ?>
<script type="text/javascript">
  $("#search-from").select(function(e){
    var g = $('#search-from').val();
    var id = $('#search-from-list').find("option[value='"+g+"']").attr('id');
    $('#linkid').val(id);
  });
  $("#search-to").select(function(e){
    var g = $('#search-to').val();
    var id = $('#search-to-list').find("option[value='"+g+"']").attr('id');
    $('#linkidto').val(id);
  });
</script>

Controller Class:

public function index()
    {
        
        if(isset($_POST["search-from"]) && !empty($_POST["search-from"])){      
            if(isset($_POST["linkid"]) && !empty($_POST["linkid"])){
                $from_id = $_POST["linkid"];
                $this->template->redirects = $this->redirect_m->order_by('`from`')->get_by_id($from_id);
            }
        }else if(isset($_POST["search-to"]) && !empty($_POST["search-to"])){        
            if(isset($_POST["linkidto"]) && !empty($_POST["linkidto"])){
                $to_id = $_POST["linkidto"];
                $this->template->redirects = $this->redirect_m->order_by('`to`')->get_by_id($to_id);
            }
        }else{
            $this->template->redirects = $this->redirect_m->order_by('`from`')->limit($this->template->pagination['limit'], $this->template->pagination['offset'])->get_all();
        }
        $this->template->allredirects = $this->redirect_m->order_by('`from`')->get_all();
        $this->template->build('admin/index');
    }

Here basically what I'm doing is that the input with the ids search-from and search-to hold an autocomplete function for the redirect links. I have other 2 input fields linkid and linkidto which are hidden. Now I did some debugging and found out that the reason for my error is because the AJAX call is taking too long.

Basically what the ajax call does is convert whatever text that is there in the input field of search-from and fetches the id for that from the database and then returns the value according to that id. So I changed the hidden fields to text and manually inserted the ids for the search fields I entered and it worked everytime.

So now what I think the problem is that the AJAX call is taking too long to convert the selected options to their respective ids and this ends up giving me an error. So maybe what I want here is a delay timer to the page until the AJAX call has been made?

[NotionCommotion]

I expect that the issue isn't your Ajax (AKA XMLHttpRequest) is taking too long. Try using browser tools available from all such as the following.  Typically, it is F12 to show.

 

On a side note, consider a template engine such as twig.  At a minimum, try to separate the PHP logic from HTML doing something like the following (untested and can be made much better). See <<< if you don't know what it means.

<?php

private function getHtml($redirects)
{
	$options = $this->getOptions($redirects)
	return <<<EOT
  <form name="redirectform" action="admin/redirects" method="post">
      <div>    
                <input list="search-from-list" id="search-from" name="search-from" style="width:100%;"/>
                <datalist id="search-from-list">
                    $options
                </datalist>
            </div>
            <input type="hidden" name="linkid" id="linkid" />
            <input type="hidden" name="linkidto" id="linkidto" />

            <input type="hidden" name="$xyz" value="$xyz">
      </div>
      
          <input list="search-to-list" id="search-to" name="search-to" style="width:100%;" />
          <datalist id="search-to-list">
              $allRedirects
          </datalist>
      </div>
  </form>
    <table>
        $otherStuff
    </table>
EOT;
}

private function getJs()
{
	return <<<EOT
<script type="text/javascript">
  $("#search-from").select(function(e){
    var g = $('#search-from').val();
    var id = $('#search-from-list').find("option[value='"+g+"']").attr('id');
    $('#linkid').val(id);
  });
  $("#search-to").select(function(e){
    var g = $('#search-to').val();
    var id = $('#search-to-list').find("option[value='"+g+"']").attr('id');
    $('#linkidto').val(id);
  });
</script>
EOT;
}

$html = $redirects?$this->getRedirectHtml():'<div class="no_data">No Data</div>';
echo($this->getHtml($redirects).$this->getJs();

 

[maxxd]

What is redirect_m? I don't recall it from codeigniter and don't see any references to it in the docs. You're treating it like a db abstraction layer which is confusing given the name.

[KSI]

4 hours ago, maxxd said:

What is redirect_m? I don't recall it from codeigniter and don't see any references to it in the docs. You're treating it like a db abstraction layer which is confusing given the name.

redirect_m is the name of my model class.

[requinix]

Why aren't you using <select>s?

[KSI]

4 hours ago, requinix said:

Why aren't you using <select>s?

The input field lets you autocomplete because the data is large.

[maxxd]

There's no AJAX calls in the code you've posted. If you think the error is there, perhaps post it for us to take a look. If you're using the index method for your AJAX calls (again, we don't know as we can't see the call) then it could be that it's borking because you're trying to render the entire template file instead of returning the pertinent data from the query.