I want to show my users data from my mysql database without reloading the page.
I am using Codeigniter. I have a dropdown menu like the following, - when the page loads I want it to show all data by default. But when any user selects any name it will query to database and show results immediately without having the page reloaded.
I already have a controller, model and view to display all data from database but I don't know how to get the dropdown menu work after a person has selected a value, to fetch data from database and show immediately without reloading the page.
I have some basic knowledge of PHP but I have no idea about AJAX. Would you please kindly give me an example or idea on how to do this?
I am not expecting you to write the code for me, I am just asking for an example or a guideline. :)
Thanks in Advance.
<form>
<select name="info">
<option value="">Select a person:</option>
<option value="11080101">John</option>
<option value="11080102">Bon Jovi</option>
</select>
</form>
It sounds like with what you are aiming to achieve this isn't really a codeigniter related question but more a HTML, JQUERY question.
Using jQuery To Manipulate and Filter Data over at Net-tuts shows a jquery solution to sorting and filtering data. Their solution is based on a table but the principals are there so a modification can get it to do what you want it to do.
well i can give you the flow of how can you try it
trigger a jquery event on selecting an dropdown menu item. if you don't have any idea how to do it try reading the documentation of jquery for using selectors .
once you have the selected element , extract its value and send an ajax call to your path
like this (for jquery ajax visit jqapi it has all the documentation for jquery ajax functions and its derivatives)
$.post('/user/data/' + id , function(response) {
console.log(response)
})
or
$.post('/user/data/', 'id=' + id , function(response) {
console.log(response)
})
and now you have your data in reponse so you can do whatever you wish to do with it
Related
I have a form based on selects for a search with filters (picture attached below).
When i pressed the search button, the page reloads and it reset all the selects.
I try to use the old helper, but it does not work properly, it just takes the first option of the select( and it gets rid of the default option as you can see in the pictures below)
Things to know:
it is a form with a get action, it is not intended to store or edit something, only for search. So, how can i properly get the old data when refresh or after pressing the search button?
This is my first attempt and it did not work
same for this one too.
as you can see in this image, it deletes the default option, and it shows the first option
The old() function will get data by specific key from the flash data. That means you must set the data as a flash before using the old().
Source: https://github.com/laravel/framework/blob/e6c8aa0e39d8f91068ad1c299546536e9f25ef63/src/Illuminate/Http/Concerns/InteractsWithFlashData.php
Documentation: https://laravel.com/docs/5.8/requests#old-input
In the case, if you want to refresh and keep the input, I suggest using the front-end handling way: When you change the input of drop-down list, push the new query string param into the URL by javascript (How can I add or update a query string parameter?) . Until the user tries to refresh the page, the URL was kept your old value. In the blade form, you can use the function to get the param from GET request with a priority higher than the old() function, I don't actually remember the function to get param from URL, but it will seem like:
{{ Request::get('yourInput') ?? old('yourInput') ?? $realEntity->yourInput }}
Use the following in your blade files. You can check if the name exists in the url (query string). Hope this helps :)
{{ Request::get('name') }}
I think, that old() function should work just fine, but you should compare the value of option in foreach.
<select name="tipo_propiedad">
#foreach ($tipos_propiedades as $tipo_propiedad)
<option value="{{$tipo_propiedad->id}}" #if($tipo_propiedad->id == old('tipo_propiedad') selected #endif(>{{$tipo_propiedad->name}}</option>
#endforeach
</select>
I'm having problems visualizing the solution that I need here. I have a select menu on the site that I'm working on and the client would like to be able to select an option called "Create New Origin", which would then have a JS window pop up with a blank field for the user to type in that new origin.
Upon submitting this form the database would be updated and the select menu would now feature this item without an entire refresh of the page.
The database side of things is all set up and ready to go, as is 99% of the Coldfusion.
Here's a snippet of the form field in question:
<p class="_30NP" align="right">
<label>Origin </label>
</p>
<p class="_20NP">
<cfselect
name="Origin"
id="Origin"
query="Origin"
display="description"
value="code"
required="yes">
<option value="new">New Origin</option>
</cfselect>
</p>
Here's the CFQUERY:
<CFQUERY DBTYPE="Query" NAME="Origin">
SELECT Code, [Description]
FROM ZCODES WHERE CODE = 0
UNION ALL
SELECT Code, [Description]
FROM ZCODES
WHERE FieldName = 'Origin'
ORDER BY 1
</CFQUERY>
This is a very simple question with probably a very simple answer, I just have little exposure to AJAX.
How do I submit a form (pop up window) and refresh the select list without completely refreshing the page?
I would use a javascript library like jQuery to handle your ajax.
Once the button is clicked use $.get(), $.post(), or $.ajax() to communicate with the server. Each will provide a response. The response type is up to you. You could return JSON and parse it out, or you could return straight HTML. I might simply return html to be quick and easy.
<cfoutput query = "...">
<option value = "...">...</option>
</cfoutput>
Once you have the result, use $.html() to update the select's options.
Michael, I personally dislike a completely jQuery ajax solution. I really like CFAJAXPROXY. I hear it has downsides, but I haven't found any.
Your question is very similar to another question on a stackexchange.com site. I think you can find some good info here.
https://softwareengineering.stackexchange.com/questions/133759/where-can-i-find-a-simple-jquery-ajax-coldfusion-tutorial
I managed to get jquery datatables plugin to work with asp.net mvc 3 so it posts back json, and with a search function.
Problem now I that I need to move the search box and add a "language" filter outside it's "normal" position next to a custom made menu.
Is there a way that I can integrate:
Language: <select name="languageid">
<option value="SV">Swedish</option>
<option value="EN">English</option>
</select>
Keywords: <input type="text" name="keywords">
To refresh datatables when languageid or keywords change? and still have sorting, paging working?
My brain is only firing at half power today, but the short answer is that this can be done; it's just my suggestions that are kind of vague...sorry!
There are a whole set of language options in oLanguage; it was a bit "Too Long, Didn't Read" for me to sort through, but perhaps something there will help you identify where to set up a language switcher
You can remove the search box from the main table and set up your own, using the fnFilter method to trigger the search
Depending on how your other options are configured (server-side, for example), there are methods to trigger a refresh of the table. You would bind a listener for the languageid or keyword change action (.on('change', '#languageid', function(e) { /* ... */ })) which would fire the appropriate refresh action (in my instance which uses server-side, I use fnDraw())
I'm sorry about the directionless advice, but I wanted you to know at least that this is possible. Posting the question on the datatables.net forums directly might get you the best possible answer.
I have a problem with the Mootools get method and IE8. This is the thing.
I have a select combo that loads dynamically the options with a Request.HTML
HTML:
<select name="model" id="model" class="customSelectModel">
<option>Modelo</option>
</select>
Javascript:
var req = new Request.HTML({
method: 'get',
url: loadModels,
data: "model="+model,
update: $('model'),
}).send();
Also, the select has a custom style, with this: http://vault.hanover.edu/~stilson/simpleselectstyle/
The problem is when I load the content of model, IE throw me an error:
Object doesn't support this property or method.
I don't know why, but
span.addEvent('change',function(){
span.set('text',this.options[this.options.selectedIndex].get('text'));
});
does not work with IE8 (as usually, it works perfectly with the other browsers) . I'm using Mootools 1.3.2
Any ideas? Thanks a lot.
you cannot update <select> elements content via innerHTML in a cross-browser fashion, which the update: $("model") will try to do.
I would suggest refactoring via an onComplete: function() {} where you:
delete all child elements of model
iterate through options elements sent via HTML and inject them into the model
call whatever method your custom styling provides (if it has any) to freshen object members for model and fireEvent("change") to highlight your new selected choice for scripting, if you need it.
for your second question.
this.options.get("value") returns selected value.
if its a multiple select, it can have more than 1 value.
mootools provides selectel.getSelected() which returns an array of options you can iterate to get text from. hence:
selectel.getSelected().get("text") will return ["sometext"] or ["sometext1", "sometext2"] on a multiple select.
I'm currently working on a project in Django and currently I'm working on a form that includes several elements. Each element is dynamic and needs to have it's options updated when the element above it changes value. I know I can use AJAX to update the elements contents whenever another one is changed in value, but I was wondering if there was a more Django way, or anyway to do this server side? My main goal is to do it without reloading the entire page each time, any feedback is appreciated. Thanks!
Update: My question is very similar to Django ajax form, choicefields dependancy But I don't fully understand what's going on in the answer. If someone could explain it in a little more detail, that would solve all of my problems for now. I'm trying what that answer says, but I'm getting 500 and 403 errors when I try to load it.
Follow Up: Apparently all of my issues were coming from an outdated jQuery library, once I updated it, everything worked again!
AFAIK there isn't a canonical Django way of doing Ajax… But it's fairy straight forward to do yourself:
First you've got to create a view which returns whatever JSON data will be needed to update the view. For example, the list of cities in a province:
from django.utils import simplejson as json
def list_cities(request):
cities = city_names_in_province(request.GET["province"])
return json.dumps(cities)
Second you've got to call that view from the HTML (assuming jQuery):
<select id="provinces">
…
</select>
<select id="cities" disabled="true">
<option>---</option>
</select>
<script>
$("#provinces").change(function() {
var province = $(this).val();
$.getJSON("{% url list_cities %}", { province: province }, function(cities) {
var cities_select = $("#cities");
… put the `cities` list into the `cities_select` …
});
});
</script>
And, apart from the “prettying up” and error checking (eg, what happens if the call to list_cities fails?), that's basically all there is to it.