Jquery binding seems to fail - javascript

I'm currently working on a jQuery script which is giving me alot of trouble. I'm no expert on the framework, but I've used it successfully in a number of occassions in the past.
I'm trying to setup what amounts to be a subform of a subform. I.e. the user is filling out a questionnaire, based on user input additional form fields show and in this case, based on that input more fields can show.
So in this case I load in a script which searches for the controling elements and binds something to their change event. This approach works on the first form field, but not on another. The content is loaded with the rest of the html, not via ajax. The really weird part is that using a debugger and watching the console I can tell that the script below is finding the elements I want, and tries to call change(), but then the event never fires!
$('td.subFormYesControl input.CodebtorParentQuestion').each(function() {
console.log("Hit");
//alert($(this).prop('class'));
$(this).on("change", function() {
if ($(this).val() == "1") {
$(this).parents('tbody').eq(0).children('tr.subFormRow').show();
$(this).parents('tbody').eq(0).siblings('tbody.CodebtorSubForm').show();
} else {
$(this).parents('tbody').eq(0).children('tr.subFormRow').hide();
$(this).parents('tbody').eq(0).siblings('tbody.CodebtorSubForm').hide();
}
});
});​
I've been doing some trial and error testing with very little luck. If I change this from being wrapped in $(document).ready() to $(window).load() it works in FF, but not IE.
Does anyone have any idea what might be going on???
EDIT: Thanks for all the help! There is alot of generated html in the implementation I'm using, so here is the parent element of the control I'm trying to work with. Let me know if more would be helpful!
<td class="subFormYesControl"><input type="radio" value="1" id="c1_CodebtorsParent[0]0" class="CodebtorParentQuestion" name="c1_CodebtorsParent[0]"><label for="c1_CodebtorsParent[0]0">Yes</label><br><input type="radio" checked="checked" value="0" id="c1_CodebtorsParent[0]1" class="CodebtorParentQuestion" name="c1_CodebtorsParent[0]"><label for="c1_CodebtorsParent[0]1">No</label><br></td>
EDIT 2: It seems to get more strange, but I think I've found a clue. If I add a simple alert as shown below:
alert($(this).prop('class'));
$('td.subFormYesControl input.CodebtorParentQuestion').each(function() {
$(this).on("change", function() {
console.log($(this).length);
if($(this).val() == "1") {
$(this).parents('tbody').eq(0).children('tr.subFormRow').show();
$(this).parents('tbody').eq(0).siblings('tbody.CodebtorSubForm').show();
} else {
$(this).parents('tbody').eq(0).children('tr.subFormRow').hide();
$(this).parents('tbody').eq(0).siblings('tbody.CodebtorSubForm').hide();
}
});
});
The code seems to work! Remove the alert, it stops working!!! Any ideas????
Thank you for all the help everyone. I was preparing the jsfiddle and removing a few seemingly unrelated plugins. when I removed one of them, an intellitext tool, the code began working just fine in all browsers. I've gone through testing and was even able to push the code back to document.ready, so I think I'm going to mark it answered and chalk it up to a plugin compatibility issue/bug.
Thanks again everyone

I have tested your HTML sample and jQuery codes. Interestingly, you have used two radio inputs, those two input changes simultaneously or any of them toggles with the change of other one. Simple if you change one's value to 1 then it will automatically changes the other one's value to 0
Also you have used if ($(this).val() == "1") so if one's value changes to 1 and the other changes to 0 as well. So both changes does actually first show then hide, which makes to seem no event fired.

Comment out or remove the console.log() line. IE will choke on it unless the developer tools are open when running the script.

How about using the following?
$(this).live ("change", function() {
//...
});

Related

Click on div to focus on input

I'm working on a small coding game project where the user has to search the page by hovering for clues in order to advance to the following level.
For this specific example, the clue is 1+1 (can be found by hovering around the bottom 2/3 of the page) and the answer is to type number '2' (keycode 50).
When the page loads I autofocus the input field where the script is looking for '2' to be pressed, but my issue is if the user clicks on any of the letters inside "#search" or "#math" it removes the focus from the input.
If the user clicks anything inside either "#search" or "#math", I need the focus to still be thrown to the "text" input. I've looked on stackoverflow for the solution and found this article (Click on <div> to focus <input>), but I can't seem to make it work with my code. I'm assuming it's some stupid simple incorrect syntax, but I need some fresh eyes to look over it because I've got nothing!
Here is a JSFiddle: http://jsfiddle.net/ncx54y3r/2/
Here is the JS I'm using to attempt to accomplish this:
$('#search').click(function() {
$('text').focus();
});
$('#math').click(function() {
$('text').focus();
});
All other code can be seen in the JSFiddle. To check if the script works correctly, just click on any of the letters and type "2". If it redirects to an error page, that means it worked correctly!
Thanks guys! I appreciate it.
You are not including the class indicator "." in the jquery
$('text').focus();
should be
$('.text').focus();
Any errors on the console? Is that all the code ? Its not working for me because Jquery is not loaded.
ReferenceError: $ is not defined

Disable Selectize Input Shiny

I have another problem with my shiny app. The goal is to disable some inputs in my app when the user presses an actionButton. I found this solution, which works fine for the textinputs and the numeric inputs, but oddly not for selectinput or selectizeinput. I know the solution contains somehow using javascript, but I don't know how.
Thanks in advance for the help!
Edit:
Perhaps I haven't made it clear enough. Sorry guys! I'll add the necessary code chunks.
This is the disablefunction from the link. It works fine with actionButtons and numeric Inputs, but not with select or selectize Input.
disableActionButton <- function(id,session) {
session$sendCustomMessage(type="jsCode",
list(code= paste("$('#",id,"').prop('disabled',true)"
,sep="")))
disableselectButton <- function(id,session) {
session$sendCustomMessage(type="jsCode",
list(code= paste("$('#",id,"').prop('select',false)"
,sep="")))
disableselectButton <- function(id,session) {
session$sendCustomMessage(type="jsCode",
list(code= paste("$('#",id,"').prop('hide',false)"
,sep="")))
This is an example of the Inputs which don't get disabled. As I said the solution lies, probably, in javascript, but I don't even know the fundamentals to be honest. I've tried different probs like hide=true oder select=false, which didn't work (you can see the functions that did not work above as well).
selectInput("algorithmicMethod1",
label=h5("Berechnungsalgorithmus erster Wahl"),
c("RoT","Pickands"),
selected="RoT"),
conditionalPanel(condition="input.algorithmicMethod1 =='RoT'",
selectInput("algorithmicMethod2",
label=h5("Berechnungsalgorithmus zweiter Wahl"),
"Pickands",
selected="Pickands")),
conditionalPanel(condition="input.algorithmicMethod1 =='Pickands'",
selectInput("algorithmicMethod2",
label=h5("Berechnungsalgorithmus zweiter Wahl"),
"RoT",
selected="RoT"))
So, is there any other way to disable the select/selectize-Inputs?
Thanks again.:)
Solution: you can use my package shinyjs for that - you just call shinyjs::disable(id) and it will work.
Explanation why it's not super simple: the problem is that when you use selectize, it creates another select box that is just pretty HTML but it's not a real HTML input element, so it doesn't respond to the disabled property like real HTML tags do. Disabling a selectize can be done using JS if you look at the selectize.js documentation, but it's not very convenient with shiny. :(
If you don't use selectize (selectInput(selectize = FALSE)), disabling will work just fine.

Trying to use JavaScript (no jQuery), to show a div (2 classes) in the html when checkbox is selected

basically I have a form and it has 2 different expansions depending on whether a single or multi day trip is selected (not coded yet, once I get this working I can sort that out properly). I have looked at a lot of similar questions but unfortunately, many of them use jQuery.
I've been working on it for 2 days now, Googled, looked here and got this far on my tutor's suggestion but it isn't quite there yet and I don't understand enough to fix it. I'm hoping it's something simple and I'm just a bit too inexperienced at this point to recognize it.
Right now, I'm just trying to make a div with 2 different classes show depending on which is clicked. The classes being hard coded into the function doesn't matter at the moment. Eventually I will want the div's to appear (still depending on the check box selected) when the submit button is clicked, but that can be a future endeavor (would assume it's just some if/else statements.
If anyone can help, or even just point me in the right direction (keeping in mind I started learning this around 3 weeks ago and haven't even used it in the last 2) I would greatly appreciate your help.
I have attached a JSFiddle of current code, and a picture of the final result from photoshop. (everything below the horizontal white line will initially be hidden until a checkbox is selected).
http://imgur.com/8mY2ZVH
First of all under Frameworks & Extensions, set the select box to No Wrap - in body instead of onLoad. (In the top left).
Second, you have multiple syntax errors.
Multi day<input type="checkbox" name="multi-day" value="multi-day" onclick=""ShowExtraForm1('multiBooking')"">
Remove one set of "" around the ShowExtraForm1.
document.getElementById('singleBooking')style.display="none";
document.getElementById('multiBooking')style.display="none";
Add a . before the 'style' attribute, it's currently a syntax error.
And also, where are the actual forms you are trying to hide?
I have edited your jsfiddle link
think its not working there but this is the function you want
function ShowExtraForm1()
{
var singlechecksts;
var multichecksts;
singlechecksts= document.getElementById('singlecheck');
multichecksts= document.getElementById('multicheck');
if(singlechecksts.checked)
{
document.getElementById('singleBooking').style.display="block";
document.getElementById('multiBooking').style.display="none";
}
if(multichecksts.checked)
{
document.getElementById('singleBooking').style.display="block";
document.getElementById('multiBooking').style.display="block";
}
}
where singlecheck and multicheck are id's of your checkboxs

function to submit forms one after the other

Can someone help me please.
I have the following (simplified) code.
function save_all_des(){
document.getElementById("form_zoom1").submit();
document.getElementById("form_zoom2").submit();
}
I am submitting two forms, which have input of the same names but with different values. Individually they submit ok. Also in IE9 they submit correctly when called as shown. However in FF only the second works.
It appears that the second is submitting over the first. I've tried using separate functions but they too seem to run at the same time. How do I make sure the code behind the form submittal is fininshed before the second submission? I have used jquery a little but I don't know how to use callback and ajax (yet).
Any help appreciated.
Thanks
I have found an article relating to you problem: Article:
it is possible to submit multiple forms, as long as the target for each form is different
I have not tested this tho.
The jquery way would look like this:
$('#id-of-mouseover-object').mouseover (function () {
$('#form_zoom1').submit(function() {
$('#form_zoom2').submit ();
});
});
Referenced from the jquery docs.

Use checkbox to set val() for field

Total N00b here, I have a long form wizard that needs one step to be dynamically shown/hidden dependant on a radio button. All is cool with the code thus far.
function checkRb () {
if($(this).is(":checked")){
//yes
$("#do_frick").val("step5");
//alert ("yeah");
}else {
//no
$("#do_frick").val("submit_step");
//alert ("no");
}
}
The issue is that the hidden field "#do_frick" is several steps further down the page. If I place it in the same div as the checkbox, values change no problem. Place "#do_frick" further down the form and it doesnt change.
I expect that $(this) is only looking inside the current div and not the entire document. I got this far with the help of a very good programmer and dont want to annoy him further with N00b questions, any help greatly appreciated :)
It appears that if I put the "#do_frick" inside a div that is further down the page the form wizard sets the to display:none and anything inside the div cannot be set... would this be correct ?
Please view source of your page to check what is ID of hidden field when it is several steps down. If ID is same then position should not be a problem.
this is not current div. In event handlers it means the object that raised the event. You should check jquery.com for more information on this.
PS:- try setting value of hidden field like this
$("#do_frick").attr("value","submit_step");
look for the id in generated html as suggested above.
Also look for any duplicate id shared by any other element, this will mess up things.
SO after much noodle scratching the answer is a little bug/hiccup in jQuery
Whenever the field is in a div that has the rule "dsiaply: none;" applied jQuery cant reach inside and change it. Checking with firebug, the field has an additional value "disabled=''". Using the command
$('#do_frick').get(0).disabled = false
Sorts it out.. finally:)
Final code:
function checkRb () {
if($(this).is(":checked")){
//yes
$('#do_frick').get(0).disabled = false //The important bit
$("#do_frick").val("step5");
//alert ("yeah");
}else {
//no
$("#do_frick").val("submit_step");
//alert ("no");
}
}

Categories

Resources