I'm using JEditable and trying to populate a select based on a variable. I need a way to pass a variable from my page back through the JQuery to dynamically create the select.
JQuery:
$(".dblclick_district").editable('miscfreqs.php?mode=save_edit&module=miscfreqs&type=district',
{
type: 'select',
loadurl: 'tools.php?mode=get_districts_json',
submit: 'OK',
event: 'dblclick'
});
The HTML that I use is generated by PHP:
<div class="dblclick_province" id="freq_id">Province</div>
<div class="dblclick_district" id="freq_id">District</div>
I'd like to be able to somehow pass the value of province through the dblclick event of District, since the Districts available depend on which Province is selected.
First thing two elements on the same page cannot have same id.
In your case both div are having same id ie freq_id so it should be changed.
You can have html as below -
<div class="dblclick_province" id="province_id">Province</div>
<div class="dblclick_district" id="district_id">District</div>
Then write the below code in your js file.
It uses jquery's dbclick event.
$('document').ready(function(){
$('#district_id').dblclick(function() {
var province_value = $('#province_id').html();
// write you code here in which you want to process province value.
});
});
Related
I am trying to trigger a file input using javascript. I am using Django formset and I have obtained the id of the input fields current my Javascript functions looks like:
$(document).ready(function(){
$("#show-image-upload-inputs").click(function(){
$("#image-upload-div").toggle();
});
function open_input (id,input_id) {
$(this.id).on("click", function () {
$(this.input_id).trigger("click");
});
}
});
And in my HTML I am passing them to the function, using onclick:
<div id="file-0-selector" class="add-image" onclick="open_input(this.id,document.getElementById('id_form-0-image'))"><i class="mt-2 fas fa-plus fa-5x"></i></div>
However, when I click on it I do not see the upload box opening, I was wondering how I can achieve this. I have acquired the image input fields form my formset and the id seems to be correct.
Thanks in advance.
Your open_input function is just binding another click handler, you should remove this and to select an element by id in jQuery you need to prefix the id with # and you don't need to access variables using this.
function open_input(input_id) {
$("#" + input_id).trigger("click");
}
Now your onclick becomes a little more simple as you don't need to select the element you only need to pass it's id
onclick="open_input('id_form-0-image')"
I have an html button with an onclick attribute which runs a jQuery AJAX function pointing to php code.
The php code writes HTML in an output HTML <select> element(the element remains hidden until the javascript runs.)
This is working great to populate the <select> when an "add another" button is clicked.
The problem is it adds one and only one. I want to be able to have a new <select> tag populate with each click of the "add another" button up to a max of 2.
The JS in question:
var genre_dropdown = function genre_dropdown() {
$('.genre_output').css('display', 'block');
$.ajax({
url:'../includes/functions/genre_dropdown.php',
complete: function (response) {
$('.genre_output').html(response.responseText);
},
error: function () {
$('.genre_output').html('Bummer: there was an error!');
}
});
return false;
}
The HTML in question:
<select name="genre_id[]" autocomplete="off" class="genre_output"></select>
<select name="genre_id[]" autocomplete="off" class="genre_output"></select>
<div class="button add-genre-button" onclick="return genre_dropdown();">+ Add Existing Genre</div>
I thought I could include 2 html <select> elements for the php to populate into, the code would execute from one to the next. I see why this is not correct, the code is running in both at the same time. I'm at a place where I'm considering have 2 buttons ("add one", "add another") but that seems redundant and not correct, especially considering I want a scale-able technique (the max may not always be 2.) I need help.
Your php request is fine.
I simply mean define a variable as your using javascript i.e.:
var sel = '<select name="genre_id[]" autocomplete="off" class="genre_output">' + response + "</select>';
and then each time you do a request it will include the response as the value of the element. This would allow you to append the parent div as many times as you want. Finally, use a simple if counter to decide whether to keep appending or not:
if ($(".genre_output").length <= 2){
$("PARENT_DIV_ID").append(sel);
};
Is this clearer? #kaari
Assuming you want to keep previous values in dropdown then you can try append() instead of html()
$('.genre_output').append(response.responseText);
How to get the values from jQuery and assign it for hidden field and save it into the DB?
Actually I am developing a project, where there is some jQuery code for a button:
$(document).ready(function () {
$("#btnYes").click(function () {
$("#btnYes").html("Counted");
$("#<%= hdnYesNoAnswer.ClientID %>").val("Yes");
$('#txtComment').focus();
});
});
When I clicked the #btnYes, it changes to "Clicked". In that page I added one hidden field called #hdnYesNoAnswer. So now what I want is to get the value ("Yes") from that jQuery function and assign it to hidden field #hdnYesNoAnswer and save that hidden field value to the SQL Server database.
#Maris is right. Ajax is a defacto technic for these actions. Here are some links. I hope they help
http://api.jquery.com/jquery.ajax/
http://en.wikipedia.org/wiki/Ajax_(programming)
https://developer.mozilla.org/en/docs/AJAX
I have a dynamic form that you can add elements. Like, you type a name, and then if you have to write a new name, you click on 'Add Name', and another textbox appears.
Their names are names[]. I can process those inputs with PHP on the server-side. However, I want to make a calculation with those inputs, like writing all of them on the page as the user types.
However, because those inputs, those textboxes are created dynamically, Javascript only selects the first textbox with the name name[].
Let me make it clear. This way it'll be better. I got a textbox. I input age in there. If I want to enter a new age, I click 'Add Age' button, and a new input box pops out. I write the new age value. And as I type, on a 3rd textbox, the average of those age values get printed. But because of those input boxes, with names ages[] are created on the execution time (not the compile time, I'm not sure these are the appropriate words for those. Probably not, because nothing is compiling? - or is it?), I can't process them.
What must I do to solve this problem?
I used both
$('input[name=ages\\[\\]]').change(function(){
console.log('1');
});
and
$('input[name=ages\\[\\]]').on('input', function() {
console.log('2');
});
but it didn't work.
Thanks in advance.
There's no need to escape the square brackets (though you should enclose the whole field name in double quotes). This works for me:
$('input[name="names[]"]').on('change', function(){
console.log($(this).val());
});
Here's a jsfiddle demonstrating: http://jsfiddle.net/t7J5t/
Your problem is actually probably related to the fact that you're adding the fields dynamically. The way you're using your selector will only work on the fields that already exist. Fields that are added after that selector will not be picked up. What you want to do, then, is put the selector inside the .on, like this:
$('.container').on('change', 'input[name="names[]"]', function(){
console.log($(this).val());
});
This will bind the listener to the container, not the fields (just make sure your fields get added inside of the container; you can call it whatever you want).
Incidentally, there's no reason you have to restrict yourself from using the name attribute of fields when using jQuery selectors. For example, you could use a class:
<div class="container">
<input class="age" name="ages[]">
<input class="age" name="ages[]">
<!-- ... as many more as needed, added dynamically is OK ... -->
</div>
<script>
$(document).ready(function(){
$('.container').on('change', 'input.age', function(){
console.log($(this).val());
});
});
</script>
Here's a sample of it in action, where you can dynamically add fields, and it calculates the average:
http://jsfiddle.net/t7J5t/1/
Try to use:
$(document).on('change', 'input[name=ages\\[\\]]', function() {
console.log('2');
});
Forgive me if this is already 'somewhere' on StackOverflow, but I don't 100% know exactly what it would come under...
I'm trying to retrieve information from a WebService, store this in an array, and then for each <select> within my ASP.Net Datalist, populate it with the array AND have binding attached to an OnChange event.
In other words, I have an array which contains "Yes, No, Maybe"
I've an ASP.Net Datalist with ten items, therefore I'd have 10 <Select>s each one having "Yes, No, Maybe" as a selectable item.
When the user changes one of those <Select>s, an event is fired for me to write back to the database.
I know I can use the [ID=^ but don't know how to:
a) Get the page to populate the <Select> as it's created with the array
b) Assign a Change function per <Select> so I can write back (the writing back I can do easy, it's just binding the event).
Any thoughts on this?
I have built a simple example that demonstrates, I think, what you are attempting to accomplish. I don't have an ASP.Net server for building examples, so I have instead used Yahoo's YQL to simulate the remote datasource you would be getting from your server.
Example page => http://mikegrace.s3.amazonaws.com/forums/stack-overflow/example-multiple-selects-from-datasource.html
Example steps:
query datasource to get array of select questions
build HTML of selects
append HTML to page
attach change event listener to selects
on select value change submit value
Example jQuery:
// get list of questions
$.ajax({
url: url,
dataType: "jsonp",
success: function(data) {
// build string of HTML of selects to append to page
var selectHtml = "";
$(data.query.results.p).each(function(index, element) {
selectHtml += '<select class="auto" name="question'+index+'"><option value="Yes">Yes</option><option value="No">No</option><option value="Maybe">Maybe</option></select> '+element+'<br/>';
});
// append HTML to page
$(document.body).append(selectHtml);
// bind change event to submit data
$("select.auto").change(function() {
var name = $(this).attr("name");
var val = $(this).val();
// replace the following with real submit code
$(document.body).append("<p>Submitting "+name+" with value of "+val+"</p>");
});
}
});
Example datasource => http://mikegrace.s3.amazonaws.com/forums/stack-overflow/example-multiple-selects-from-datasource-datasource.html
Example loaded:
Example select value changed: