Photos of Problem [Please refer to this if my below explanation is confusing)
http://imgur.com/a/t2nkD
I'm attempting to get values (answers) from a page and inject those values (answers) into text-areas on the same page. So far this script is able to do exactly that, however even though the correct values (answers) are entered into the text-area, checking the answer results in the page telling me its incorrect.
However, if I type, let's say a 'space' in each text-area after all the correct values (answers) are injected and then re-check the answers the answer returns correct.
Additionally, physically clicking into the text-area and pressing enter results in it being incorrect, however clicking enter in the same text-area a second time then changes the answer to correct.
I'm not very experienced with jquery, or javascript in fact this is the first time I've used jquery.
However, some possible problems that came to my mind were:
The page uses some other way other than html form-validation(?) to check values entered in the text-area
The text-area does not get updated until the user clicks in the text-area and types something into the box
2a. I've attempted to use .focus, .sendkeys and keypress events to simulate the user typing in the box. (didn't work)
Eventually, I intend to make it so that it automatically submits all answers, which shouldn't be too difficult.
So I guess my main question is, how do I update the text-area's value even though the text-area's values have already been changed by
$( txtArea ).eq(h).val(ansTrim);.
chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse)
{
if( request.message === "clicked_browser_action" )
{
//Amount of text-area elements on page (found by class)
var n = $(
'.ember-view.ember-text-area.question-answer-textarea.min-width-text-area'
).length;
for (var i = n; i >= 0; i--)
//click "Show Answer" for the amount of text-area elements there are
{
//The page requires you click Show Answer twice to confirm that you
//want to see the answer
$( ".ember-view.question-answer-show-button" ).eq(i).click();
$( ".ember-view.question-answer-show-button" ).eq(i).click();
for (var h = 0; h <= n; h++)\
{
//save all elements with the class
var txtArea = $(
".ember-view.ember-text-area.question-answer-textarea.min-width-text-area"
);
//after answer is revealed stores the answer's text in firstAnswer
var firstAnswer = $( ".question-answer" ).eq(h).text();
//Orange check button stored in submitBTN for later functionality
var submitBTN = $(".ember-view.question-answer-check-button")
//Originally I thought that the answers weren't going through because
//the string saved in firstAnswer had an additional space
//in front and on the end
var ansTrim = $.trim(firstAnswer);
//store keypress event in var press
var press = jQuery.Event("keypress");
press.ctrlKey = false;
press.which = 32;
console.log(ansTrim);
//Fill each text area with the respective answer
$( txtArea ).eq(h).val(ansTrim);
/*
$(submitBTN).click(function() {
$(txtArea).change();
});
*/
//Above is my attempt at updating the textboxes with the values
//in them (didn't work)
}
}
}
}
);
Related
I have a select with options that have values that are populated with jQuery based on data attributes from divs. When a user select an option, the div with the data attribute that matches the value of the option is displayed. Now I'm trying to create a deep linking option, so when I have a url like https://my-site.com/page/#option-2 the option-2 is preselected in the select and the div with data attribute option-2 is displayed. So far I have this javascript:
$(window).on('load', function() {
let urlHash = window.location.hash.replace('#','');
console.log(urlHash);
if ( urlHash ) {
$('.dropdown').val(urlHash);
$('body').find('.location').removeClass('is-active');
$('body').find(`.location[data-location-hash=${urlHash}]`).addClass('is-active');
}
});
If I enter the url https://my-site.com/page/#option-2 the site goes in infinite loop and never loads without displaying any error in the console.. If I refresh the page while loading, the console.log is displayed with the correct string that I'm expecting, but the .location[data-location-hash=option-2] is not displayed and the option is not selected... I'm using the same code for the change function of the dropdown and is working, but it's not working in the load function.. Is there anything I'm missing?
JSFiddle, if it's of any help:
https://jsfiddle.net/tsvetkokrastev/b0epz1mL/4/
Your site is looping because you are doing a window.location.replace To get the urlHash you should use
$(window).on('load', function() {
var href = location.href; // get the url
var split = href.split("#"); // split the string
let urlHash = split[1]; // get the value after the hash
if ( urlHash ) {
$('.dropdown').val(urlHash);
$('body').find('.location').removeClass('is-active');
$('body').find('.location[data-location-hash='+urlHash+']').addClass('is-active');
}
});
https://codepen.io/darkinfore/pen/MWXWEvM?editors=1111#europe
Solved it by using a function instead of $(window).on('load').. Also added $( window ).on( 'hashchange', function( ) {}); to assure that the js will run again after the hash is changed.
Here is an updated jsfiddle: https://jsfiddle.net/tsvetkokrastev/b0epz1mL/5/
here is the function from inside a script
function dosubmit()
{
if (getObj("Frm_Username").value == "")
{
getObj("errmsg").innerHTML = "Username cannot be empty.";
getObj("myLayer").style.visibility = "visible" ;
return;
}
else
{
getObj("LoginId").disabled = true;
getObj("Frm_Logintoken").value = "3";
document.fLogin.submit();
}
}
i want to get the value of getObj("Frm_Logintoken")
as i can't pull the value from #Frm_Logintoken
using document.getElementById("#Frm_Logintoken")
this gives me null
because Frm_Logintoken only gets it's value when i click submit .
<input type="hidden" name="Frm_Logintoken" id="Frm_Logintoken" value="">
full page code
i found this online /getObj\("Frm_Logintoken"\).value = "(.*)";/g
but when i run it ... it gives me the same line again !
it's full code
https://hastebin.com/gurosatuna.xml
First:
Your checking if a value is empty with JS. However this is NOT needed as HTML does this for you. Add a attribute required and the form will not submit as long this value is empty
Documentation: https://www.w3schools.com/tags/att_input_required.asp
Second:
You could use the event handler 'on submit'. The code is not complete enough to know if u did this but I suppose you just added a Click handler on the button.
Documentation: https://www.w3schools.com/jsref/event_onsubmit.asp
When combining these two, you always have a username filled in and the code only executes when submitted. I hope this helps, if not please leave a comment and I will edit this answer.
EDIT: the answer on this SO will also help (not the checked on but the one below)
How can I listen to the form submit event in javascript?
I've read all the posts here about textareas - and, yes, I too feel that it's been beat-to-death... but I've got a situation which I can't find a post about and it's driven me crazy for 5 days now.
Situation:
Multiple (hundreds of) textareas with a normal state of display:none which become visible as needed.
I save work in process via a database... and re-open the form to continue entering data. (yes, there's code to change the display state if the textareas have data in them - but that's not relevant to the situation.
I currently have a very good widget for expanding my textareas AS I ENTER the data - my problem is that when I re-open the form the textareas go back to their initial height.
I've attempted creating a function which processes ALL textareas when the form loads by triggering the keyup event in all of the textareas - but it doesn't make them expand... however, if I simply click into the field and then use an arrow key they open right up. Unfortunately this is NOT an option... like I said HUNDREDS of textareas.
Here's the code I've got for the keyup event / trigger:
$("textarea").each(function() {
$(this).keyup(function() {
var target = $(this).attr("id");
var tElement = document.getElementById(target);
GrowUP(tElement);
});
});
$("textarea").trigger('keyup');
and the code for my expansion of textareas:
function GrowUP(oTextArea){
var nMaxChars = 2000;
var nTextLength = oTextArea.value.length;
setTextAreaHeightWidth(oTextArea);
if (nTextLength >= nMaxChars){
oTextArea.value = oTextArea.value.substring(0, nMaxChars);
return;
}
}
function setTextAreaHeightWidth(oTextArea){
var nTA5Height = 20;
var nTextLength = oTextArea.value.length;
var sTextAreaType = oTextArea.className;
var nHeight;
var nWidth;
if (sTextAreaType.indexOf("long") >= 0){
nHeight = nTA5Height;
}
// setting default height for the text area
oTextArea.style.height = nHeight + "px";
if (nTextLength > 0 && oTextArea.scrollHeight >= nHeight){
oTextArea.style.height = oTextArea.scrollHeight + "px";
if (navigator.userAgent.indexOf("Firefox") > 0){
oTextArea.style.height = oTextArea.scrollHeight + 20 +"px";
}
}
}
I'm open to any suggestions.
OK - update:
I've found a way to fool JSFiddle into having the data already entered in the field... Just select the 2nd checkbox to get it to show the textarea.
The textarea opens in the initial height - which I need to be the EXPANDED height (and it SHOULD if the code I wrote actually worked!)
P.S. In JSFIDDLE, under "Frameworks & Extension" you have to make sure it says "No wrap - in " ... it's been automatically changing this to "On DOM ready" which doesn't work! Here's the link: http://jsfiddle.net/MitchinThailand/fqcppux8/6/
For a quick and simple fix, instead of triggering the keyup event in your afterOnLoad() function, trigger it after the switch statement in your Summary(obj) function.
Here is a working fiddle: https://jsfiddle.net/uwzo25fs/1/
In general, just trigger the event(s) that modify element heights AFTER you have stopped hiding the corresponding element(s).
I have created a server control for a login panel.
On this panel I have a textbox for the username and a textbox for the password.
Below that there is the button for login.
I want the button to be disabled if either or both textboxes are empty.
For that I created a function that checks the length of the contents of the textboxes.
function doCheck()
{
var lngth1 = document.getElementById('pnLogin_txtUserName').value.length;
var lngth2 = document.getElementById('pnLogin_txtPassword').value.length;
if (lngth1 > 0 && lngth2 > 0)
{
$('#pnLogin_btLogin').removeAttr('disabled');
} else {
$('#pnLogin_btLogin').attr('disabled','disabled');
}
}
I run this function at the start and on every keyup event.
That works great.
The problem is when the browser starts with the page. It fills in the username and password if they are stored.
When the function is then run, it still disables the button even though there is information in the textboxes.
I tried this:
setTimeout( function()
{
doCheck();
}, 2000);
But after 2 seconds I see the button disabling while seeing my credentials filled in.
If I inspect the element in Chrome, I don't see my credentials in the html code.
So where is it stored? How can I detect this?
You will not see the values in the html as they are not actually in the DOM.
You may access their values using $("#pnLogin_txtUserName").val() and
$("#pnLogin_txtPassword").val().
I would simplify your function and use jQuery specific syntax rather than native javascript.
function doCheck() {
var lngth1 = $("#pnLogin_txtUserName").val().length;
var lngth2 = $("#pnLogin_txtPassword").val().length;
if (lngth1 > 0 && lngth2 > 0) {
$('#pnLogin_btLogin').prop('disabled', false);
} else {
$('#pnLogin_btLogin').prop('disabled', true);
}
}
I also changed your code from .attr to .prop for disabling the input. Find more information with this stackoverflow question
The problem is when the browser starts with the page. It fills in the username and password if they are stored. When the function is then run, it still disables the button even though there is information in the textboxes.
Your code is being executed the moment it is loaded and parsed by the browser. The proper jQuery method is to use whats called .ready() which will execute after jQuery detects the page has finished loading.
$(document).ready( function() {
doCheck();
});
Or more simplified to:
$(function() {
doCheck();
});
detecting change
We can detect when the values get changed by bind an event listener:
$("pnLogin_txtUserName").change(function() {
console.log( 'pnLogin_txtUserName has changed', $(this).val() );
});
If we add a class to your inputs, say .loginElements, then we do things a bit easier and detect several different events:
$(".loginElements").on( 'change keypress', function() {
doCheck();
});
Good afternoon all
Here is my scenario:
I have user controls within a master page and within a user control, I may have an update panel. I have the following bit of code I place within a usercontrol that maintains various control styling during partial postback i.e. those controls affected within by an asp update panel.
function pageLoad(sender, args) {
if (args.get_isPartialLoad()) {
$("select, span, input").uniform();
Indeed, when an update panel does its thing, the Fancy Dan styling is maintained.
However, I have one gripe - when a 'large' partial postback occurs, occassionally you'll see the default, generic control styling reappear breifly and then the uniform kicks in to reapply the new fancy styles.
Is there any way I can avoid seeing the nasty old, default, bland stylings?
Any suggestions greatly appreciated.
Check out working with PageManagerRequests: MSDN Working With PageRequestManager
Sys.WebForms.PageLoadingEventArgs Class
Sys.WebForms.PageRequestManager pageLoading Event
$(function() {
Sys.WebForms.PageRequestManager.getInstance().add_pageLoading(beautify);
});
function beautify(sender, eventArgs) {
// If we have event args
if (eventArgs != null) {
// for each panel that is being updated, update the html by adding color red
// to select, span, input elements
// must remember to call .html() to put html back into the panelsUpdating[i], otherwise it puts in the jQuery Object
for (var i = 0; i < eventArgs.get_panelsUpdating().length; i++) {
//My test code
//var content = eventArgs._panelsUpdating[i].outerHTML;
//var jContent = $(content);
//$("input", jContent).css("color", "red");
//jContent = $('<div>').append(jContent)
//var jContentToContent = jContent.html();
//alert(jContentToContent);
//eventArgs._panelsUpdating[i].outerHTML = jContentToContent;
//Cleaned up
var jContent = $(eventArgs._panelsUpdating[i].outerHTML);
$("select, span, input", jContent).uniform();
jContent = $('<div>').append(jContent);
eventArgs._panelsUpdating[i].outerHTML = jContent.html();
}
}
}
Edit: I think you understood that the issue was the elements were being placed into the DOM (and therefore painted) before your javascript had a chance to make them uniform(). This intercepts the UpdatePanel and uniform()'s the code prior to it inserted into the DOM
Edit 2 Alright, I've updated it a bunch, I tested this with my test code there and then included the code you're likely to add. Also, I took a short cut in eventArgs._panelsUpdating - i should really be using the get and set functions, but this works.