Showing progress bar after search query

[MrXortex]

G'day,

 

I have a created a search engine which allows users to search for files uploaded on my site. But I have created a progress bar as well and I want that progress bar to show after a user hits the search button.

 

My Search engine code:

 

<div class="searchBox">
    <form id="searchbox" method="get" action="search.php" name="s">
        <input id="searchField" type="text" name="search" placeholder="What are you looking for?" />
        <input id="searchBtn" type="submit" name="submit" value="Search" />
    </form>
</div>

 

My Progres Bar code:

 

<div class="progress-bar green stripes">
    <span style="width: 1%"></span>
</div>

 

If you guys beed any CSS style sheet for it, let me know.

 

I just want that progress bar to be visible when a user hits search button.

 

Like when the user hits the button, the search field and the button hides and the progress bar comes up.

 

Thanks.

[cpd]

Have you attempted it already or your looking for code on how to do it?

 

I assume your trying to do a search with JavaScript?

[MrXortex]

No, I used PHP functions, if, else, echo, MySQL statements.

[cpd]

You wont be able to update a search progress bar with just PHP; you'll need to use JavaScript. More specifically you'll need to go into AJAX and possibly implement web sockets although support isn't great at the moment.

[ZulfadlyAshBurn]

Just wondering, why would you want to use a progress bar? If it's to "alert" people that their results are loading, you might want to just use a loading gif.

[MrXortex]

Zulfadly, do you know how to do it? with a loading gif? That will be just fine too.

[ZulfadlyAshBurn]

Yeah sure. why not? But the forum is not to help people do their codes. More on helping people with problems on their code. You could put your idea on the freelancing section and people could help you out with a little bit of payment. You can PM me if you need my help. My pricing are flexible

[creata.physics]

I show loading images for my javascript codes that request data using the ajax function provided.

This is how I'd show a progress bar on a simple click function that makes an ajax call:

$(document).ready(function () {
    // Once the item with the id, div_id_that_triggers_function is clicked, we'll start running the function
$('body').on('click','#div_id_that_triggers_function',function () {
        // Show the normally hidden loading bar
	$("#loading").fadeIn("slow");
	$.ajax({
		url: "index.php",
                        // This can also be GET, depending on how your script is set up
		type: "POST",
		data: {
                value: 1
		},
		cache: false,
		success: function (data) {
                                 // Once the function is successfully ran, finish up by removing loading bar
			$("#loading").fadeOut("slow");
		}
	});
	return false;
});
});

 

First thing I do is start showing the loading bar when the function starts. Loading is just an empty div, <div id="loading"></div>. The css has the display property set to none so it isn't shown unless I have it fadeIn() with jquery.

 

You'll of course need to change the data values to fit your script, and load, append, prepend, etc whatever you need upon completion.

Know that I'm very new to javascript so my method may not be the best or practical, but it does work as is quite simple.