I am in the process of creating a mobile dynamic search that works . It is works just a little too well because it is displaying the search box again after the results appear
Sad to say my knowledge of JavaScript is only Cut & Paste. When things go not according to plan I am at a loss as to how to debug
https://johns-jokes.com/downloads/sp-i/dasabooks/
How can I prevent this duplication?
Edit:
PHP & JavaScript Source Code
Ah, no, strike the previous reply. I think the issue is that you include the _dbresults.php code, the search itself, but then call index.php (by leaving the url blank) from Ajax inside index.php.
When you call the code from Ajax, it calls the same page (as thereâs no separate URL) in the background, which then causes the search to be performed (because _dbresults.php will see a $_POST
variable), the results displayed, and then the rest of the original index.php to continue execution, which includes the display of the search box, all the CSS and so on. Because you called that via Ajax, all that output is grabbed, returned to the calling code as responseText
, which you then stick in the livesearch
div.
I think what you need to do is to not include _dbresults.php
in your index.php file, just call it explicitly as in the commented-out line. Iâm trying to learn JS, so this might be incorrect.
1 Like
I am afraid I do not understand your post.
Edit:
Which particular line? There are many lines remmed out trying to get it to work correctly.
The Ajax finds the correct âlivesearchâ id, fills the div and then also loads the previous page. Most confusing
Hi @John_Betong, if you look at the network tab in your browser and check the response of your AJAX search request, youâll find that after the search results, the whole page HTML is returned again and hence you get the duplication. You will probably need a conditional to check for the GET parameter âqâ and based on that being set return just the results or the whole page. In my apps I go further and set a special parameter for AJAX requests and if that is set then I know the PHP needs to do some special handling for that request. In that case you probably just need to exit();
after you print the results.
Hope that helpsâŚ
1 Like
When I am back on the desktop I will try adding the exit(); in the Ajax script and let you know the results.
1 Like
Many thanks, that worked a treat
I thought it was to be used in the AJAX script and later realised it was immediately after displaying the database table results.
I also optimised the search routine to return a count of the total number of records and limiting the results to eight. The limit defined and using eight makes the search virtually instant.
It tests OK using FireFox, Opera, Vivaldi and Chrome both for mobiles and desktops.
I would be grateful if someone can test the performance, etc using Explorer, any other suggestions, etc?
1 Like
This line:
// xmlhttp.open("GET","/dbResults.php?q="+str,true);
Instead of calling index.php (by default, by leaving the url blank) and having it include _dbresults.php
and exit and so on, just call _dbresults.php
directly and stick the output into the appropriate div when it comes back as responseText
.
Youâve sorted it another way now, but to my mind itâs still a bit of a waste to do it via index.php. Just an opinion, and I have no JS experience.
PS - works OK in IE11 from desktop too.
2 Likes
You can do things in many ways, none is necessarily more or less wasteful, it just depends in the particular application. In my application there is a generic AJAX GET parameter which is set via javascript through an ajax navigation handler. That may specify that it only needs the output of one particular component or section in a page, so then the app would just return the output for that component and then the ajax handler would update the contents of that component via JavaScript. Anyways⌠if you really want to optimise the search @John_Betong you could have the search return you just the data in JSON format, as there would be less text in the response and less work for the server⌠and have JavaScript build the list of results. Just a thoughtâŚ
2 Likes
Yes, poor choice of words perhaps. It just seems that weâre calling a script that includes another script which has to be modified to exit to stop the âmotherâ script from duplicating output, when the âchildâ script could just be called directly, and not be included in the mother script at all. I know the difference in execution time and network bandwidth is so small as to be negligible, though one of the voices in my head is shouting about that, too.
But Iâm certainly not trying to suggest my way is âbetterâ, I have no experience in this stuff. Far from it. Just trying to clarify what I was talking about yesterday.
1 Like
Yeah I agree with what you say. Iâm thinking more towards being able to have the same URL return a static fully working HTML page with all the results or just the HTML list or just even a JSON object all configurable through GET parameters. That way it works without JavaScript and it is more accessible and it can be progressively enhanced via AJAX and JS. But then again that can be done in many ways. I hope we havenât confused him a lot
I look forward to trying your suggestions tomorrow.
Very confused and open to options for the best script to pass from an input box, back to the server database and send the results back to the browser.
Many thanks.
Your suggestions worked a treat and I can now understand what is happening. Modifications uploaded.
I managed to create a Standalone Static Page using $_GET['q']=Andres
without any JavaScript - only 3 results
I do not understand the reason to use JSON, etc and would be grateful for a fuller, preferably simpler explanation.
1 Like
Hi @John_Betong, the reason is that JSON data will be a lot less heavy for the server to produce than full fledged HTML. Printing the HTML is quite an expensive operation for the server when there is a lot of it. So if you have a lot of search results and if each search result consists of simple JSON like this:
[{"result" : "some search result","link" : "/some-link"}, ...]
instead of full HTML like this:
<li id="someid" class="someclass">
<a href="/someurl" class="somelink">
some search result
</a>
</li>
You save a lot of work for the server by delegating that task to the client and building the HTML with JavaScript. Then your AJAX request will be a lot faster depending of course on the amount of results that you are returning.
But this will only be useful for very busy servers with a lot of traffic and/or searches with a lot of results.
Please let me know if this is still unclear, youâre most welcome.
2 Likes
Hi @John_Betong how is your live search working so far? I was meant to ask you⌠Are you interested in performing searches on input key up or does pressing the enter key or clicking submit suffice?
I created an input text search that uses AJAX to search a database table. Whenever a single character is entered, AJAX calls a PHP file which creates a query and displays the results.
@SamA74 posted about combining and simplifying queries⌠I have since optimised the query so that two queries are joined, one to COUNT()* and the other to LIMIT 0, 5 the amount of returned results.
Clicking on the above page title calls the search routine page which queries over 21,000 books and returns five records. Each record shows the idRef, title, author, price, type and also the total number of queries.
I have since added the PHP microtime() function and the elapsed time for a query is only tenths of a millisecond. I donât think that adding JSON will improve the results but I have been wrong beforeâŚ
The server is based in California, USA and curious to know how fast the search is in other parts of the world.
I pressed the letter âtâ for a search, and it said: "0.032 mSecs " from the UK. Surely that will always be around the same, though, because if the time is coming from PHP, then itâs the time it takes to execute the query on the server in California. What might change would be the time taken to retrieve the results from the PHP code back into the JavaScript on my local machine, that (and the initial transmission of the search term) is the only thing that has to contend with variable paths.
1 Like
Whereabouts do you live?
I am alos curious to know if the query requires anything extra to prevent SQL injection.
Sorry, I added that (and the rest) afterwards. UK.
1 Like