Jquery detect textbox programmatic change - javascript

Long story short I am cowboying some code in which a custom framework I am using allows me to insert a script to manipulate the page to do what I want.
I want to fire a function, but only after the textbox I want to use has been populated from the webservice that gets called.
In Jquery/Javascript is there anyway to call a function like the jquery change function, but one that can detect when the textbox has been changed from javascript, and not by the user in the browser.
I currently just have:
$("#mytexbox").on('input propertychange paste change',function() {
doSomething();
});
But this does not fire when the original function in locked code sets the value of the textbox.
Note: I can not just overload the original function as most of it is built up from dynamic server side code that I can't mimic in Javascript.
I also want to avoid having to use setTimeout() as this is unreliable and not really a nice solution.
Thanks in advance!

Maybe you can use a hidden div or input and check the changes on this instead of changes on #mytextbox. Obviously, the user can not change the hidden div, but the script can. You get the trick? ;)

Related

Making a textbox appear/exist - javascript or jquery?

If the user enters a certain word into a text box I would like a second text box to appear on the screen (for them to enter new information). Does anyone know how to do this in javascript or jquery (and if in JQuery what library must I include?)
You can do it using JavaScript keyUp event, if you would like to make it using jQuery, this page is a good place to start.
What you want to do is add a onkeyup function to the textbox and inspect the value of the textbox everytime your method is called, based on this value you can then do whatever else is necessary
I will program it up in javascript (which I know quite well but haven't used in a while) using the onkeyup event - I didn't want to reinvent the wheel so thought I'd ask as surely someone has done this before but I realise now from being voted down that stackoverflow is not open to this kind of approach - i.e. you need to put in the time and only if failing ask a question.
I was hoping also for some advice about using jquery which I haven't used much but of course it can be done in javascript

Using Javascript/jQuery to trigger event when textarea rendered

I have a JSF page where I'm trying to tie the text in specific paragraphs to the contents of a set of textareas.
Getting the content to change when a textarea changes is dirt simple using onchange and onkeyup events:
onchange="$('dynamicParagraphId').text($(this).val());"
Unfortunately, I'm having some trouble initializing the paragraphs so that their text matches the textareas when the page is initially loaded.
Because of how the page is implemented, editing the underlying HTML is bloody difficult; I'm not sure how to implement an obvious solution like a script that triggers when the page loads, because it's going to take some real work for me to get a hold of the textareas' IDs. Is there some way to insert Javascript/jQuery code into the textarea definition that will trigger when the page loads so that I can make use of the this object and not have to figure out the textarea ID? Is there some feature of jQuery I can leverage that spares me needing to know the IDs?
Trigger the keyup event for all textareas, but you can probably come up with a more specific selector:
$(document).ready(function(){
$("textarea").keyup();
});
Or if you can only attach functions through inline markup for some reason you can add it to the <body>:
<body onload='$("textarea").keyup()'>
If you know how many textareas there are and which you want (i.e. the 5th on the page), you could easily query for all textareas:
document.getElementsByTagName("textarea");
and select the one you want. Another solution is to hand over the control to JS and render the textarea on the clientside.
http://jsfiddle.net/FExQy/

Get HTML from a hidden portion of code in a page

The title is a little confusing so let me explain better what the problem I'm having is.
I need to extract a certain portion of HTML out of a page. This portion of code is inside of a div that "on page load" is hidden by default. You have to click on that div in order to make that portion of code appear.
Now, I need to get this code with a javascript/jquery script with either pure AJAX request to the page or YQL but the problem is: How do I "simulate" the click on that div?
How can I make that div toggle just with the code in order to access the code inside of it?
By the way, the request is from the same domain so there's no problem with cross-domain AJAX.
Thank you!
You can use Jquery .click
$("#Id_Of_the_Div_you_want_to_click").click();
As far as my understanding is if you do
$('#hiddenElementID').html() will return the contents of it or even $('#hiddenElementID').text() if its hidden or not.
But if you really must simulate a click then do $('#hiddenElementID').click()
And to toggle use your own function and do $('#hiddenElementID').hide() and $('#hiddenElementID').show()
Or use $('#hiddenElementID').toggle()
http://api.jquery.com/toggle/
Maybe you should try on Ajax success:event
function(data){
//Convert Data to jQuery Object
var element = $(data);
element.find('#HiddenDiv').show();
}
Because manipulating DOM Element's triggering Fake Event's is a bad idea.
You can simulate click events like so:
$("#div").click()
It sounds to me like you're trying to get data from another page. The data is compiled after a click event. You could try the following:
AJAX get the page with the required data
Render the page into a hidded iframe within your page
Simulate click events on the nested page to produce data
Access the bits you want and discard the iframe contents.
If I get some time later I'll try it out for myself and see if it can be done.

How to simulate typing into a textarea using Javascript/Jquery?

I have a textarea which uses a jquery plugin to resize itself while the user types in it.
The problem is, I want users to be able to edit things they've already typed. However since the textarea starts with 35 cols, 1 row, if the user had a long message he typed, then it doesn't completely show, only one line shows which cuts off.
Is there a way to simulate a keypress event in that textarea, so that the text resizing will fire up and resize the textarea?
There's no way to programatically call the text resize function.
Just trigger the keypress event on that textarea:
$(function(){
$('textarea').trigger('keypress');
}).
if there are multiple textareas, and you want to trigger the event on a specific textarea that has an id, of course the syntax becomes:
$(function(){
$('#myTextarea').trigger('keypress');
}).
If this is your own code, then you can just call your function
Your text area likely already has some function that gets called on each keystroke. The simplest way for you is then to call this same function when your page loads and that's it.
<textarea onkeypress="someFunc();" />
just call this someFunc when page loads and it should do the same thing as if you pressed a key.
Not written by you? Using third party plugins then
If you're using some sort of a jQuery plugin (not your own) then you should check whether it provides this functionality to initially set text area's size. If it doesn't then I suggest you switch to a different plugin that does that. Or write your own if you know how.

Setting the textbox to read only on submit

Can anyone suggest me a javascript function to set the text box to readonly on pressing the submit button. So that the contents cannot be modified.
To disable an input you'll want to set its disabled attribute. If you can use jQuery then something like this would be what you're looking for:
$('#idOfYourInput').attr('disabled', true);
If jQuery isn't an option, then you'll want to use the setAttribute function. Take a look at the MDN documentation for it. Something like this:
var d = document.getElementById('idOfYourInput');
d.setAttribute('disabled', 'true');
(Both of these code samples assume that you're identifying your input by its id attribute. If that's not the case, these would need to change. The jQuery one would be trivial to change, you'd just need to update your selector to identify the target attribute. The latter code sample would need to use some other DOM navigation/selection functions to find your input element.)
You'd want to include this within the handler for your submit button. Understand, however, that this will only matter on the current context of the page. So I'm assuming your submit button is being used to perform a submit via AJAX and not actually POST the whole page, correct? Because if you're POSTing the whole page then, when the page refreshes, you'll be on an entirely new page context. (Which means any code associated with a button click event will not yet have run.)

Categories

Resources