I have an Ajax Datatable in Rails, and a column with a Select_all checkbox.
<th class="check_box">
<input type="checkbox" name="people-datatable-select_all" id="people-datatable-select_all" value="1" title="Tout cocher/Tout décocher" />
</th>
But when the user click on the select all, it briefly select all the rows, then trigger a reload of the table, how can I prevent the reload from happening, so I can collect all the checked boxes and trigger a custom action please?
My JS Script look as :
$("#people-datatable-select_all").change(function() {
if(this.checked) {
$("input:checkbox").prop("checked", this.checked);
} else {
$(".input:checkbox").prop("checked", false);
}
});
What is the best way to stop that reload please ?
It sounds like your check all function is calling a datatable reload. You might try adding table.ajax.reload( null, false ); in your JS script with table being the datatable variable.
https://datatables.net/reference/api/ajax.reload()
Related
I have inherited some code using the jquerymobile datebox. The code so far concentrates on making the application look correct. I need to make it work so that when a date is selected, the server is called with the date and a new page loaded. Most examples just change the date in the page.
The code so far is :-
$('#daycal').live('click', function() {
$('#catchdate').datebox('open');
});
$( "#catchdate" ).bind( "change", function(event, ui) {
$("#test1").val("xyz");
});
And
<div data-role="fieldcontain">
<label for="catchdate">Some Date</label>
<input name="catchdate" type="date" data-role="datebox" id="catchdate" data-options='{"mode":"calbox", "useNewStyle":true, "theme":true, "themeHeader":"f", "themeDateHigh":"f", "themeDatePick":"e", "themeDate":"f", "centerHoriz":true}' />
<input id="test1" type="text"/> <!-- Later changed to a function call -->
</div>
In my simple test I expected the text in the input to change when a date was selected.
I have seen an example using the bind to change event, but I cannot get it to work. In the example I was just changing the value in an input element, later this will be changed to a function call.
I also saw somewhere in my search for an answer, a comment that 'live' was deprecated.
Finally, I thought I could use closeCallback ('Callbacks ('openCallback' and 'closeCallback') are simple to work with...') but could not find any examples of how it should be used.
What changes do I need to make to obtain the functionality I need?
You could try using the close function of the date box, so that when user changes the date selection he makes and closes the date box you can call the server method with the selected date:
$('#DateSelectorId').bind('datebox', function (e, passed) {
if ( passed.method === 'close' ) {
// selected date
var date = $('#DateSelectorId').val();
// make your service method and change page to another page
}
});
think this can fix it
$('#catchdate').on('datebox', function(e, p) {
if ( p.method === 'close' ) {
alert('DO SOMETHING');
}
});
u can go and test it on Fiddle
**i think u need some validation check for input box empty or not
I need to display a number of text box in a gsp. The number of text box displayed is picked in a select tag.
I think of something like
<g:select name="select" from="${1..10}>
<g:each in="${1..select}">
Is there any way I can "pass" the number selected in the select to use it in the for below?
GSP is working on server-side. Value of select tag is available only on client side.
So, the answer: No, you can't use <g:each for selected value.
You have use Javascript instead, like:
<g:javascript>
function setupTextboxes() {
var count = Number($('select[name="select"]').val());
........
put your text boxes into DOM
........
}
$(function() {
$('select[name="select"]').on('change', setupTextboxes)
})
</g:javascript>
I faced a problem when user clicks on "Add New Row" needs to add a Row in the bottom of the web grid using MVC3 Razor.I have done this requirement by showing the Modal PopUp Dialog and adding the record in DB adding the new record at the last when pagination is enabled.But client requires to add a row at the bottom of the table and give privelege to enter data in the input fields and save.
Can we do this when the paging the enabled in a Web grid?Do we have any inbuilt property to add a Row?
I found in an article that we can't create a Row in WebGrid.So I have done using jQuery like this
$('#btnCreateUser').click(function () {
var newRow = "<tr> <td></td> <td><input type='text' id='tbNameDyn'/></td> <td> <input type='text' id='tbAgeDyn'/></td> <td><input type='checkbox' id='tbResultDyn'/></td><td><input type='submit' name='submitButton' value='Save Row' id='btnSaveRowDyn' onclick='DynButtonClick();'> </td></tr>";
// $('#webgrid > tbody:last').
$('#webgrid tbody:last').append(newRow);
$('#btnSaveRow').removeAttr('disabled');
});
I have a list of objects. Each object has its own values. On webpage they are presented as rows. What I want to do is to add JQuery dialog that pops up when a link on a specific row is clicked. What is the best way to do that? Is is better to define a dialog in every row or just use one? Problem is I can't reach elements inside dialog to fill them with row data. Is there any good example concerning this? Thank you
Just use one dialog, it should be initially hidden anyway:
<div id="rowDialog" style="display:none">
<div id="rowDialogDiv">in here we are
</div>
<button id="rowDialogButton>Custom button</div>
</div>
initialize dialog, not showing it at first:
$('#rowDialog').dialog({ autoOpen: false });
put in an event handler for the row:
$("tr").click(function(){
var rowClicked = $(this);
$('#rowDialogDiv).text('In the dialog, show we clicked row:' + rowClicked.index());
$('#rowDialog").dialog("open");
});
Strongly suggest you give the table and ID and then access the table rows from that for speed and, just in case you have multiple tables etc.
You can also have event handlers for the dialogs elements:
$('#rowDialogButton').click(function(){
//do button stuff
});
something like this maybe?
<div id="myDialog">
<input id="myElementThatICanAccess" />
</div>
The jQuery Code:
$("#myDialog").dialog({
options:....
});
$("tr").click(function(){
$("#myElementThatICanAccess","#myDialog").val($(this).val()); // or whatever value you want
$("#myDialog").dialog('open');
});
I need to change the background color of a given row in a table based on a value of a model (boolean) property which is used in the #Html.CheckBox. The model is updated with the new checkbox value in the PostExampleCompleted action method.
<table>
<thead>
<tr>
<th>Item name</th>
<th>Comments</th>
<th>User</th>
<th>Complete</th>
</tr>
</thead>
<tbody>
<tr id="FooRow">
<td>Foo</td>
<td>#Model.FooComments</td>
<td>#Model.FooUserName</td>
<td>
#using (Ajax.BeginForm("PostFooCompleted", "Home", new AjaxOptions { OnBegin = "ShowProcessingMsg", OnComplete = "HideProcessingMsg" }))
{
#Html.CheckBox("FooItemComplete", Model.FooComplete, new { onClick = "$(this).parent('form:first').submit();" })
}
</td>
</tr>
<tr id="WidgetRow">
<td>Widget</td>
<td>#Model.WidgetComments</td>
<td>#Model.WidgetUserName</td>
#using (Ajax.BeginForm("PostWidgetCompleted", "Home", new AjaxOptions { OnBegin = "ShowProcessingMsg", OnComplete = "HideProcessingMsg" }))
{
#Html.CheckBox("WidgetItemComplete", Model.WidgetComplete, new { onClick = "$(this).parent('form:first').submit();" })
}
</td>
</tr>
</tbody>
</table>
What would be the best way to achieve this? Code examples would be appreciated :).
Thanks.
Something like this should do the trick, given that I've understood what you're trying to do correctly.
First here's a css class which I've used to colour a row if a checkbox is checked.
.redBackground
{
background-color: Red;
}
Next, here is some JQuery code to colour the row where the check-box resides if it is checked. I've also added a 'change' handler to each check-box so if any of them are updated, the row colour is updated appropriately (I've just used red for a row where a check-box is checked and no colour where a check-box is not checked).
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(function () {
$('input[type=checkbox]').each(function () {
var checkbox = $(this);
// if the checkbox is already checked, colour its row
CheckStatus(checkbox);
//Every time a check-box status changes we
//want to re-evaluate the row colour
checkbox.change(function () {
CheckStatus(checkbox);
});
});
//Method which checks if the check-box is checked. If it's checked
//the row is given the 'redBackground' class, otherwise it is taken away
function CheckStatus(checkbox) {
if (checkbox.attr('checked') == 'checked') {
checkbox.parent().parent().addClass('redBackground');
}
else {
checkbox.parent().parent().removeClass('redBackground');
}
}
});
</script>
Hopefully this makes sense... :)
The code is a little to small to exactly get what your settings are.
From the fact that you have a Element I deduce that you have multiple rows in a table.
Personally I'd object to having a AjaxForm in each of the rows. That seems like a lot of overhead.
You could very easy have a single construct of jQuery code to handle all rows and perform the neccessary tasks by itself.
If you use the live function of jQuery you are even independent of rows being added.
The checkbox or the row need to have an identifier with which you can send the ajax call back to your controller. On success you can evaluate the state of the checkbox and color the row appropriately.
I would have to see more of the code, to really help you with that.
Maybe I'm missing something. This seems like a job for html or css. As far as I can make out, there are several ways to approach this depending on your requirements.
On a row by row basis (i.e., you will never know what the colours are until they are defined somewhere by the app or in a database where storing their value statically is not an option), assign the html style property <tr style='background-color: #Model.Colour'> on the row to set the background-color to the colour you want.
On a type/state basis (i.e., you know what the colours are going to be ahead of time, but not what rows they are going to be assigned to), I'd define a class for each row: <tr class='#Model.Type'> and then assign the background-color in your CSS class with the same name as the value in Model.Type.
To get that colour/type itself, you are going to want to pass it in using your model. You might already have that property on your model, I don't know.
For simple alternating pattens, simply use this technique or the :nth-child(odd) and :nth-child(even) css selectors.
Sometimes the simplest solutions are the best solutions.