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
Related
I'm using cefsharp and vb.net to put some code together to move to the next page of this site:
https://www.recommendedagencies.com/search#{}
The idea is to read the list of company names on each page and store to a csv file. This part I can do.
The problem I have is that I can't find the name of the 'Next' button - presumably if I had that I could execute some javascript on the browser to press the button.
I've inspected the page in Firefox, but can't see any name I can use - I'm not really familiar enough with html/page design to know why not or how it works.
Could anyone tell me a good method to get button names from a web page? - I've done some searching and even asked a similar question myself before, but I can't find anything which helps, given my patchy knowledge.
Thanks
Inspect the DOM for the 'Next' button.
Look for id's or classes that you can use to identify it.
use document.querySelector() to find the element by the css selector
call the element.click() function to programatically press next
const nextButton = document.querySelector('.sp-pages-nav_next')
nextButton.addEventListener('click', (event) => {
console.log('something clicked next')
})
nextButton.click()
<div class="sp-pages-nav sp-pages-nav_next" data-reactid=".1.3.4.1">Next</div>
In the above snippet on load you can see the code nextButton.click() invokes the console log. You can click the word Next manually to the same effect.
in cefsharp perhaps something like:
browser.ExecuteJavaScriptAsync("(function(){ document.querySelector('.sp-pages-nav_next').click(); })();");
A very similar example can be found here :
https://github.com/cefsharp/CefSharp/wiki/General-Usage#1-how-do-you-call-a-javascript-method-from-net
// When executing multiple statements, group them together in an IIFE
// https://developer.mozilla.org/en-US/docs/Glossary/IIFE
// For Google.com pre-populate the search text box and click the search button
browser.ExecuteJavaScriptAsync("(function(){ document.getElementsByName('q')[0].value = 'CefSharp Was Here!'; document.getElementsByName('btnK')[0].click(); })();");
I have images appearing in a repeating region — each region is a recordset of an item in an auction.
Clicking the images loads a featherlight gallery. However, in each item's region, there is a form that the user can submit to make a bid on the item.
As soon as I click inside the input field before even entering a dollar amount with the form as of yet unsubmitted, somehow featherlight interferes and throws an error : "Featherlight: no content filter found (no target specified)".
To be clear : the form doesn't pop up in a modal window... and there is no connection between the form and featherlight apart from the fact that the form is inside the section that contains this : data-featherlight-gallery data-featherlight-filter="a.gallery".
I'm not sure why there is this interference in the first place.
I've searched online and some people have mentioned that using id may be the problem, so I have removed the text input's id and left only the name, but the error persists.
I found a page on github "forms with dynamic content impossible in featherlight?" at https://github.com/noelboss/featherlight/issues/122
but while the title sounds promising, the comments are mostly beyond me and don't seem to be relevant to my situation.
<form id="encanform<?=$cordre?>" name="encanform<?=$cordre?>" action="encan.php" method="post" onSubmit="storeValues(this);miseNote(<?=$latestbid+10;?>,'<?=$lang?>',this.form.miseamount.value)" class="encanclass">
<input type="text" required class="frmess" name="miseamount" title="This field is required." value="" />
var cordre = 'section#<?=$cordre?> a.gallery';
$(document).ready(function(){
$(cordre).featherlightGallery();
});
Any time I click the field, that error happens :
Featherlight: no content filter found (no target specified)
Even though featherlight is supposed to be bound only to a.gallery, the input field/form is catching its attention.
Thanks in advance for your time!
OK I finally managed to work it out. I had to remove the data-featherlight string that bound everything, even if I specified only links with class of gallery.
But removing it from the HTML and only apply the class to the image links and then specifying the correct selector in jQuery fixed it for me.
Thanks anyway!
I am asking for the following thing...enter image description here
when we type anything in the searchbox...
You can see that when we type anything in the textbox in homepage..it automatically converts as header.
Please tell me the code using css,html and javascript(no jquery please..i dont know)
To change current window title (current tab text) you can use this JS code:
document.title = 'Hallo Varold!';
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() {
//...
});
I have a SharePoint list with the following single line of text fields: Title, Year and Type or Location. I want to be able to hide the Type or Location table row in the default display form. I know that I should create a JavaScript script and put it in Content Editor web part inside DispForm.aspx.
I am not fluent with jQuery syntax, thus I need help with the code, i.e. I don't know how to reference the table row which contains Type or Location field and its value. Here's what I've done so far, but it doesn't work:
jQuery(document).ready(function($) {
$("input[title='Type or Location']").closest("tr").hide();
});
I know that the "input[title='Type or Location']" part is incorrect; at least I think it's that. Could anyone help me out? Thank you.
Try:
jQuery(document).ready(function($) {
$("h3.ms-standardheader:contains('Type or Location')").closest("tr").hide();
});
I am not sure why you want to use jQuery for that. In SharePoint, you can choose to make a field required, optional or hidden. In most cases, just switching to hidden will address your issue.
For the record, I would also try to avoid as much as possible the use of jQuery(document).ready, it might conflict with the SharePoint out of the box onload event. In your case it is not needed.
Update: here is a way to do this with jQuery:
$("td.ms-formlabel:contains('Type or Location')").parent().hide();
Try it this way:
jQuery(document).ready(function($) {
$("input[title='Type'],input[title='Location']").closest("tr").hide();
});
It depends what type of column Type ior Location is. If it's a Single line of text, then you're close. You should use a DOM inspector like IE's Developer Tools or Firebug to see what the actual title of the input element is.
If the column is a different type, then it's likely not an input element. Using the DOM inspector again, you can look at what elements make up the field control and decide on your selector from that.
Finally, remember that hiding things in script is not secure. A savvy user can turn off the script or otherwise change the script so that they can edit it. It all depends on your requirements.
// UPDATE //
Ah, you said DispForm. As was pointed out in another answer, there aren't any input elements in a DispForm. You need to correct your selector.
If its just the Default Display Form, How about just creating a view and making it default?
The syntax should be like this:
$("input[title='Type']").closest("tr").hide();
$("input[title='Location']").closest("tr").hide();
It will work.