I have an asp.net mvc application where I want to hide/display part of form based on selected line in a dropdown list. This is done by jQuery script:
<script type="text/javascript" >
$(document).ready(function() {
$('#owners').change(function() {
$("select option:selected").each(function() {
$('.location').css("display", "none");
$('#canDeleteUsers').css("display", "none");
});
if (($("option:selected").attr("value")) == "") {
$("select option:selected").each(function() {
$('.location').css("display", "block");
$('#canDeleteUsers').css("display", "block");
});
}
});
});
</script>
Now the problem is that when a user violates some of the logic and I return the View again to be validated, if the dropdown list was selected to the variant, which is supposed to hide the form part, it still appears.
Any ideas about it? Thanks in advance.
Sure; the page is reloaded and the visibility will reset.
One option would be to move the logic that determines whether to hide the form part into a separate (named) function, and call that function once on document.ready as well as on the change event of the dropdown.
Extract your logic for hiding showing the form out into a function on it's own. Call this function on the change event and also call it on document ready.
Related
I want to have a reset/clear button for all the filters in use, but I can't figure out what to fire off on on-click event tied to that button... for example:
What would I have to fire off and/or attach & pass to what in order to reset all these select2, select and input fields and restore all the filters to null/empty values?
On click of your button, all you need is to reset the value of select2.
See this programmatic way to reset it https://select2.github.io/examples.html#programmatic
All you need for your button to reset all the select2 inputs instead of 1 as shown in the example.
$('#yourButton').on('click', function() {
$('#yourfirstSelect2').val(null).trigger("change");
$('#yourSecondSelect2').val(null).trigger("change");
....
});
Just in case, you're using 3.5.x version, then there's small change as seen here http://select2.github.io/select2/#programmatic
$('#yourButton').on('click', function() {
$('#yourfirstSelect2').select2("val", "");
$('#yourSecondSelect2').select2("val", "");
....
});
For resetting other values in x-editable you can follow this x-editable resetting fields.
There's always a jQuery way to clearing everything in a form -
$('#formName')[0].reset();
This worked for me
It will reset all the select2 selected options when form is reset you can initiate this on click button event or any other event according to your requirements.
$("#id").val(null).trigger("change");
try this below code to reset everything. found it on https://vitalets.github.io/x-editable/docs.html#newrecord
<button id="reset-btn" class="btn pull-right">Reset</button>
<script>
$('#reset-btn').click(function() {
$('.myeditable').editable('setValue', null) //clear values
.editable('option', 'pk', null) //clear pk
.removeClass('editable-unsaved'); //remove bold css
$('#save-btn').show();
$('#msg').hide();
});
<script>
As per your screenshot, i assume that all your filter are dynamically generated. To reset the all the field you can use the following jQuery code.
$( document ).ready(function() {
$('body').on('click','#resetButtonSelector', function() {
$("body select").select2("val", "");
$("body input").val("");
$('body select').val("")
});
});
If you have form then you can use this code :
$( document ).ready(function() {
$('body').on('click','#resetButtonSelector', function() {
$("body select").select2("val", "");
$('#formId')[0].reset();
});
});
Here is some more details that may work for you,
$(':input','#formId')
.not(':button, :submit, :reset, :hidden')
.val('')
.removeAttr('checked')
.removeAttr('selected');
Please see this post for: Resetting a multi-stage form with jQuery
the best way is to remove the select.
That works as follows:
$('.select2-search-choice').remove();
To remove the selector, I accessed the name of the selector.
I've got a table with different columns identified with different classes.
I've also a checkbox binded to every column.
I created a function which is called on the click of any checkbox. In this function I hide/show the column which is linked to this.
It doesn't have any javascript error, and the code is the following:
$(document).ready(function(){
$('ul input').click(function(){
//alert('yooo');
if ($(this).is(':checked')) {
//alert('checked');
$("td."+replaceAll(" ","_",$(this).val())).show();
$("th."+replaceAll(" ","_",$(this).val())).show();
//alert($("td").length);
}
else{
//alert('unselected');
$("td."+replaceAll(" ","_",$(this).val())).hide();
$("th."+replaceAll(" ","_",$(this).val())).hide();
}
});
});
However, after every click, the action has a lag (after many clicks it becomes tooooooo slow, many seconds).
I tried also with .css instead of hide-show, but it doesn't make any change.
I understood that the problem was linked only to checkbox, not on callback or on jquery function. I solved the problem simply by working with radio input, adding a "true" and a "false" radio input for every checkbox that was in the page.
Instead of running the jQuery selector on every click like below:
$("td."+replaceAll(" ","_",$(this).val()))
You could set up some sort of caching like:
var cache = {} //<-- declare this outside your click handler
//add the code below inside your click handler
className = replaceAll(" ","_",$(this).val())
if(!cache[className])
cache[className ] = $("td."+className + ", th."+className); //select all the elements once and store in the cache object
$el = cache[className];
if ($(this).is(':checked'))
$el.show();
else
$el.hide();
I have the following code:
<script>
$('#advert').live('change', function () {
if ($(this).is(':checked')) {
$(":text").show();
} else {
$(":text").hide();
}
});
</script>
This code shows and hides text fields when the checkbox is checked. It works perfectly but I want the text field to be hidden when the page opens.
Hide the text fields on document ready.
The document ready event, says "When I'm finished loading, execute this code". So on page load it fires .hide() on your text fields. It's very powerful!
$(document).ready( function () {
$(":text").hide();
});
Another approach is to set the style to "display: none;" on each of these. Then they start out hidden
<script>
$(function() {
$('#advert').live('change', function(){
if($(this).is(':checked')){
$(":text").show();
} else {
$(":text").hide();
}
}).trigger('change');
});
</script>
This will also handle the case when the user clicks the box, goes to another page, clicks the back button, and has the box checked by the browser automatically.
give your text fields a class of maybe .text
and then use css like so:
.text{
display: none;
}
or jquery like so:
$(document).ready( function () {
$(":text").hide();
});
Exchange
.show();
and
.hide();
im building a search engine with php/sphinx/jquery and i have most of it working except for the filtering the search results. the search results aren't filter submitted rather, all the results are displayed then im trying to use jquery to hide the unmatched results when a checkbox is clicked on.
i created a fiddle for it here http://jsfiddle.net/LEZAh/
what works:
checking a box and have the corresponding element show, and when another box is checked add it to the allowed boxes to show.
what doesn't work:
when you have more than one checkbox checked and you uncheck one of them, the corresponding element does not show.
sorry for the bad explanation but the fillde will speak for its self thanks!
Just as an addition to the excellent post above (mrtsherman, ahren), the last line of your else statement was causing the problem. A quick and dirty solution would be:
//$(".ni-search"+checks).show(); //this was the offending line
$("#cat_"+$(this).attr('id')).hide(); //instead of showing everything just hide what was clicked
I've run this in your fiddle successfully as well.
I've simplified your click function.
$(document).ready( function () {
$('.search-option input').click(function(){
var inputs = $(".search-option input");
var products = $(".ni-search");
products.each(function(i){
if(inputs.eq(i).is(":checked")){
$(this).show();
}else{
$(this).hide();
}
});
if(products.length == inputs.not(":checked").length){
products.show();
}
});
});
This assumes your results will all be in the same wrapper, and your checkboxes will also all be in the same wrapper.
Link to updated jsFiddle
Here is another simplified version of your script.
http://jsfiddle.net/LEZAh/4/
$('input').change(function() {
//all checkboxes are unchecked, so show all
if ($('input:checked').length == 0) {
$('.ni-search').show();
}
else {
//otherwise only show checked
$('.ni-search').hide();
$('input:checked').each(function(index) {
$('.ni-search').eq(index).show();
});
}
});
I am using ColorBox inline functionality and I have created a button which I've set to close the window when clicked:
$('.closebutton').live('click', function(){
$.fn.colorbox.close();
});
I have another function which I want to run when the button is clicked, so I've used:
<button class="closebutton" onclick="myFunction();">Close</button>
Problem is the myFunction is not working above.
Any ideas please?
UPDATE:
Here is where the code is:
<script type="text/javascript">
jQuery(document).ready(function() {
$(".inline").colorbox({inline:true, width:"50%"}); //for colorbox inline
$('#cboxClose').remove(); //remove popup window close button
$('.closebutton').live('click', function(){
$.fn.colorbox.close();
myFunction();
});
Adding myFunction(); before or after $.fn.colorbox.close(); is not working
myFunction code: (This goes after the code above on the page)
<script type="text/javascript">
function myFunction() {
$("#ajax-form").submit(function(){
$.post("update.php",
$("#ajax-form").serialize(),
function(data){
$('#jqm').attr('src',
$('#jqm').attr('src'));
}
);
return false;
});
}
</script>
UPDATE 2:
I'll try to explain better: I have a form and input on the main page that works find, so when you add some text to the input box and submit then form then the value of the input is submitted.
Now, when I put that same input in the inline area of colorBox so that it appears inside the popup window the value is not submitted. I've tried grabbing JS errors on firebag but cannot see anything there.
Hope this helps.
Why not just add myFunction() before $.fn.colorbox.close();? That way you can be sure what order things are handled in.
Instead of using inline javascript, you could simply do something like this :
$('.closebutton').live('click', function(){
$.fn.colorbox.close();
myFunction();
});
I believe the problem is that myFunction() (the onClick attribute) is being overridden by jQuery. If you want your function to execute whenever a .closebutton is clicked just use:
$('.closebutton').live('click', function(){
$.fn.colorbox.close();
myFunction();
});
If its only for that button, try adding an id to that button and:
$('.closebutton').live('click', function(){
$.fn.colorbox.close();
if($(this).attr('id') == 'exampleID')){
myFunction();
}
});
Ok so, after reading your update #2, I understand that actually your problem is not that the myFunction code doesn't execute right.
The problem is that you moved your input inside the colorbox, so its value doesn't submit with the form, wich is normal because the input is now outside the form.
You could either simply move your whole form inside the colorbox, or use javascript to copy the value of the input you moved outside of your form in a hidden input.