I'm working on a Symfony application in which I have a table and each row in that table have a select to select a value and a button to launch an event with Jquery to save the data in the database.
The click event would be the next:
$(document).on('click',"#contenedor_registro_Ngrupos button",function(event){
// Here some checks are made (with ajax request) and if you can not change the value is added to select a class to indicate the error.
});
If I change the value of a select and click-on button, everything is done correctly. the data is saved or error is shown by the added class.
The problem I have to want to make a change at all and save all automatically. To do this I have created a select that to change, change the value to select all of the table, and also a button that should run all the buttons of the table.
I used "Trigger" to simulate click on all buttons of the table as follows:
$(document).on('click',"#button_all",function(event){
$("contenedor_registro_Ngrupos select[class='modified']").each(function(){
$(this).closest("tr").find("button").trigger("click");
});
});
But the problem I have is when running trigger and simulate the click, only adds the error to the last item to be displayed with the error, but the above will not be added. I tried with alert (); within the function to follow the process and standing execution to display alerts if added the wrong class, so I guess that will be problems implementing the Trigger in each, which does not give time for the simulation function is performed the click button.
I would like to know how I can solve this problem or if there is another way to run the click event of the buttons automatically without having to manually clicking on all buttons.
*HTML:
<div id="contenedor_registro_Ngrupos" class="derecha contenedor_registro">
<div>
<div id="cabecera_lista">
<h2>Educación Infantil</h2>
</div>
<div>
<table class="records_list">
<thead>
<tr>
<th></th>
<th>Curso</th>
<th>Nivel</th>
<th>Nº Grupos</th>
<th></th>
</tr>
</thead>
</table>
<div class="inner_table">
<table>
<tbody>
<tr>
<td>
<span class="oculto">*</span>
</td>
<td>3 años</td>
<td>Infantil</td>
<td>
<select id="Ngrupo">
<option value="1" selected="selected">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
<td>
<button>Guardar</button>
</td>
</tr>
<tr>
<tr>
<td>
<span class="oculto">*</span>
</td>
<td>4 años</td>
<td>Infantil</td>
<td>
<select id="Ngrupo">
<option value="1" selected="selected">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
<td>
<button>Guardar</button>
</td>
</tr>
<tr> //The same above code
<tr> //The same above code
<tr> //The same above code
<tr> //The same above code
</tbody>
</table>
</div>
</div>
</div>
*Images:
When selecting (Where you see a "3" should show a "1" to select that value, but inadvertently change before making image capture.And the three values "1" are in orange, previously had another value, and to change them is added the modified class that color.)
When I click Save All("Guardar Todo" Button)
When I click on save each button ("Guardar" Button)
The problem is not in the functions or selectors, the problem I have on how to call automatically to simulate a click on all buttons with the modified class, which is added previously in other functions.
jQuery.ajax():- Perform an asynchronous HTTP (Ajax) request. Ajax settings are A set of key/value pairs that configure the Ajax request.
Ajax setting option -
async (default: true) :
By default, all requests are sent asynchronously (i.e. this is set to true by default). If you need synchronous requests, set this option
to false.
Note that synchronous requests may temporarily lock the browser, disabling any actions while the request is active.
In your case you're trying to hit multiple request at time through trigger event. And due to this you are getting proper response from server to handle it.
Related
In Aurelia (latest beta version), has anyone tried binding a select element inside of a table where the rows are bound to an array? I don't think it works on the initial load (activate() event).
Here's the example code:
<tbody>
<tr repeat.for="item of variations">
<td>
<input type="text" class="form-control input-sm" value.bind="item.name" />
</td>
<td>
<select class="form-control input-sm" value.bind="item.controlId">
<option>Select...</option>
<option value="1">DropdownList</option>
<option value="2">RadioList</option>
<option value="3">Checkboxes</option>
</select>
</td>
</tr>
</tbody>
In the viewmodel, the list of variations is built something like this in the activate() event:
this.variations.forEach(v => {
let variation = new Variation();
variation.value = v.value;
variation.text = v.text;
variation.control = v.displayType;
self.variations.push(variation);
});
The rest of the properties, ie. text input, show up fine on load. And the same view has regular selects outside of this table and they all bind correctly on load (ie. show the proper select option based on the value that is set programatically).
Is item.controlId a number? If so, what's probably happening is the number value is being compared using === with the string values of the option elements. You'll need to make sure the option values are numbers:
Instead of <option value="1"> use <option model.bind="1">
I am absolutly new in JQuery development and I have to do the following thing.
Into a form I have something like this:
<tr>
..........................
..........................
<td>
<s:select list="kmProjectInfoStatusList" id="selectStatus" headerKey="0"
listValue="status"
listKey="idProjectInfoStatus"
headerValue="-- Please Select --"
name="kmProjectInfo.status.idProjectInfoStatus"
/>
</td>
</tr>
..........................
..........................
<tr id="datePickerRow" style="display:none">
<td>
<sj:datepicker name="kmProjectInfo.startingDate" id="since" maxlength="10"
displayFormat="dd/mm/yy" showOn="button" duration="slow"
showAnim="slideDown" readonly="true" changeMonth="true"
changeYear="true"
/>
</td>
</tr>
As you can see the form contains a table that contains itself a row having id="datePickerRow" and that for default it is not shown (infact it have the display:none CSS settings).
Upper this hidden row there is a td element that contains:
<s:select list="kmProjectInfoStatusList" id="selectStatus" headerKey="0"
listValue="status"
listKey="idProjectInfoStatus"
headerValue="-- Please Select --"
name="kmProjectInfo.status.idProjectInfoStatus"
/>
This is only a Struts 2 tag that wrap this standard HTML input tag of type select, infact in the generated html code I have:
<select id="selectStatus" name="kmProjectInfo.status.idProjectInfoStatus">
<option value="0">-- Please Select --</option>
<option value="1">Closed</option>
<option value="2">Active</option>
<option value="3">Testing</option>
<option value="4">Starting</option>
</select>
So what I need to do is create a JQuery script that if the selected value is:
<option value="4">Starting</option>
then show the hidden row having id="datePickerRow".
I am thinking that maybe I can do something like this:
$(document).ready(function () {
$("#selectStatus").bind("SELECT AN OPTION VALUE", function (event, data) {
if (data.rslt.obj.attr("value") == 4) {
$('#datePickerRow').show();
}
else {
$('#datePickerRow').hide();
}
})
});
Can be a good idea or is it wrong and I can do this thing in some other way?
If my idea is ok I can't achieve it because I know that the .bind() method is used for attaching an event handler directly to elements (and in my case the event handler is the function that show or hide the row having id=datePickerRow) but I can't understand what is the propper event to put inside bind("SELECT AN OPTION VALUE"
What is the right binded event for the selection of a value into a select input tag ?
My second doubt is related about how to correctly extract the selected value of this select input tag.
I have wrote:
data.rslt.obj.attr("value")
but maybe it is wrong because I think that this is not an attribute.
How ca I fix my script to correctly work?
Tnx
I am making a small project with MVC4, C#, Razor Engine and jQuery. In my code I have a drop list, and every time an item is selected in that drop list I want to send an Ajax request with the information selected, plus the id of an order that is in the HTML:
<input type="hidden" id="materialRequestId" value=#myId />
To achieve this, when a user selects an item in my drop list, I try to get the closest/sibling/find HTML tag by using its id, but I am failing because $(this) seems to have only a class of select2-offscreen and thus everytime I use one of the previous jQuery functions, I get undefined.
$('#OfficeId').change(function () {
alert($(this).closest("div").siblings("#materialRequestId").value;);
});
This is my HTML:
<td>
<input type="hidden" id="materialRequestId" value=4 />
<div class="hide officeList">
<select id="OfficeId" name="OfficeId">
<option value="18">AMAALB</option>
<option value="19">AMABGR</option>
<option value="20">AMACRO</option>
</select>
</div>
</td>
What am I missing here? Why is this not working?
If you get the value direct
$("#materialRequestId").attr("value");
And make sure that only 1 element per page has that unique id it should work
I have an HTML table which is typically 10-30 rows long with a column for "item name". The drop down itself has around 75 products to choose from. To make the page size smaller, I wanted to reuse a single drop down list for every row.
That is, when I click a row, jQuery should
Read the item name in the TD
Load the drop down list into the TD
Select the active value as the previous text value
On row exit, reverse the process
The items in the drop down are populated from a database on page load. I'm thinking the best way is to keep the list hidden and only make it appear in that spot as needed. But I'm not sure how to accomplish step 2 and 3
Edit
Not sure what code you're looking for since that's what my question is. But if I had something like below, I need to put that hidden select list into the active row and make it select to the value already in the table cell.
<table>
<tr>
<td>Item Name</td>
<td>Item Value</td>
</tr>
<tr>
<td>Product A</td>
<td>166.22</td>
</tr>
<tr>
<td>Product B</td>
<td>166.22</td>
</tr>
</table>
<select id="itemname" style="display:none;">
<option value="2231A22">Product A</option>
<option value="2231A21">Product B</option>
<option value="2231A20">Product B</option>
</select>
Edit 2- Probable Solution
Based off one of the responses below, I poked around a bit and was able to create this script which works. Not sure if I can make it more efficient, but it does what I was looking for. The function takes "e" as a TD
function addItem(e) {
if ($(e).find('select').length) {
var input = $(e).find('select').eq(0);
$(e).text($(input).val());
$(input).appendTo($('.promotion-header'));
}
else {
var text = $(e).text();
$(e).text('');
$('#itemname').appendTo(e).val(text).show();
};
}
Try copying all elements of the main div to all other div using by setting and getting html from .html() method. Here in the demo, all elements in myDropDownListDiv is copied to anotherDiv.
HTML :
<div id="myDropDownListDiv"><select id="itemname">
<option value="2231A22">Product A</option>
<option value="2231A21">Product B</option>
<option value="2231A20">Product B</option>
</select>
</div>
<div id="anotherDiv">
</div>
jQuery :
$(document).ready(function(){
//copies all contents of myDropDownListDiv into anotherDiv
$("#anotherDiv").html($("#myDropDownListDiv").html());
});
Demo
I'm struggling with the following and I'm not even sure if it's possible at all.
I have, at start, two pull down menus. Menu one with suppliers and (currently) a second pull down with all size of photos that are in the database. Where I want to go to is that when selecting a supplier, the second pull down menu changes with the option this supplier provides. So far nothing difficult using Jquery and use the output to update the second pull down menu.
Now comes the difficult part. I use the second drop down to insert their information. So the second pull down menu, could be be dozen of them, are all the same. I use a JS script to copy the table row of the form. Since an ID should be unique, these pull downs don't have an ID.
Is it still possible to update all of these 'second' pull down menu's on change of the first pull down menu? And if so, how is it possible?
The first pulldown that should trigger the update of the dropdowns below:
<select name="leverancier" id="leveranciers">
<option value="1">Supplier 1</option>
<option value="2">Supplier 2</option>
</select>
This part gets duplicated:
<tr>
<td>
<select name="type[]" class="test">
<option value="1">9x13</option>
<option value="2">10x15</option>
<option value="3">11x14</option>
</select>
</td>
<td><input type="text" name="min_euro[]"></td>
<td><input type="text" name="max_euro[]"></td>
</tr>
<tr>
<td>
<select name="type[]" class="test">
<option value="1">9x13</option>
<option value="2">10x15</option>
<option value="3">11x14</option>
</select>
</td>
<td><input type="text" name="min_euro[]"></td>
<td><input type="text" name="max_euro[]"></td>
</tr>
Thanks
Ralf
Give each secondary SELECT the same class.
Then, define an event handler on the primary SELECT that updates secondary SELECTs by targeting that class.
E.g.:
jQuery('#leveranciers').bind('change', function(event) {
// somehow determine the new set of options for all secondary SELECTs
jQuery('SELECT.secondary').each(function(i, e) {
jQuery(e).html(newOptionsMarkup);
});
return true;
});
(Please ignore the terrible .html()-based approach. The important piece is the way updates are targeted.)