I'm trying to add text to a textarea on a form using jQuery. The form loads via JS from an external site.
Fiddle Here
The textarea is the 'When would you like a demo?' field. I believe it is this field.
<textarea name="Demo" class="k_textarea k_required" id="Question_1"/>
I've tried referencing the field directly by ID (see fiddle) and used a delay in case this was a resource loading order issue. Suggestions?
Use $(document).ready event instead of window.load.
jsFiddle Demo
$(document).ready(function(){
var input = $( '#Question_1');
input.val( input.val() + "Contribution to a certain fund");
});
Fiddle already does a window.onload if I recall correctly, that's why your example isn't working.
Change it to a jQuerys dom ready callback.
Btw, since Javascript is synchronous, loading order issue isn't a problem (as long as you don't introduce ajax ofc).
Related
So I've got this little piece of HTML that I have zero access to, and I need to change the URL of where it's linking, to somewhere else.
Now I've looked around, and I've tried different approaches and non seem to work so I must be doing something wrong.
the Html code:
<div class="manageable-content" data-container="edit_register_ind_container">
<a class="entry-text-link secondary-step step-button" id="register_ind_container" href="oldurl">Register</a>
</div>
First I wanted to try something that seemed easier, which was to change the displayed text "Register" to "Start a Fundraiser"
This is what I have got for that part:
// url manipulation
$(document).ready(function(){
$("#register_ind_container").click(function(){
$("#manageable-content a").text('Start a Fundraiser');
});
$("#register_ind_container").attr("href", "http://google.ca");
});
No luck so far for any of it.
a little background information:
I am using a platform called Luminate/Blackbaud, its a CMS with a weird set up. header tags and stuff like that go in a different place than the html body and the css is somewhere else as well (but I'm just using ftp to reference it in the header).
How I'm referencing the javascript code.
<script type="text/javascript" src="../mResonsive/js/urlmanipulation.js"></script>
My css works so I'm certain this should to, but I just don't know why it isn't.
All suggestions welcome (except for asking for the html access because I have, 3 weeks ago lol)
Thank you for your time!
I saw your both code :
$("#register_ind_container").attr("href", "http://google.ca");
This line will execute on page load so href should be changed on load
$("#register_ind_container").click(function(){
But when you performing this click on Id
it wont work because at that instance this id associated with an hyperlink
so hyperlink having the default subset rules
for Overriding this you can try
$("#register_ind_container").click(function(e){
// custom handling here
e.preventDefault();
$(this).text('Start a Fundraiser');
});
But this is also not a Good Practice. Hope this helps !
$(document).ready(function(){
$("#register_ind_container").click(function(){
$(this).text('Start a Fundraiser');
$(this).attr("href", "http://google.ca");
});
});
You are changing the URL outside the click event.. Wrap it inside the click event.. Also make use of $(this)
// url manipulation
$(document).ready(function(){
$("#register_ind_container").click(function(){
$(this).text('Start a Fundraiser').attr("href", "http://google.ca");
});
});
I have a script that is pulling in news from Yahoo on a certain subject. It renders the title of the news feed like this:
<div class="header-title">subject - Yahoo! News Search Results</div>
I would like to change this to read differently. Since this is inserted via JS I thought I could change this with jQuery.
I attempted this:
$('.header-title').text('Subject News');
that did not work, I then attempted this:
$('.header-title').empty();
$('.header-title').text('Subject News');
that also did not work.
Both of the above methods look as if they had no effect on the text.
I am not sure what to do to remove the old text and replace with my text.
Note: All of my code is inside jQuery's Document Ready IE:
$(function(){
//Code Here
});
Don't forget to put your code in DOM ready:
$(function() {
$(".header-title").text("Subject News");
});
Otherwise the code should work fine.
This solution assumes you have no access to the other script that creates the feed widget
WIthout knowing more about other script it sounds like it is asynchronous, and creates the title elements also. You could have a timed interval loop that checks for the element to exist and once it exists do the update:
function changeYahooTitle(){
var $yhooTitle=$('.header-title');
if($yhooTitle.length){
$yhooTitle.text('My New Title');
}else{
/* doesn't exist so check again in 1/10th second, will loop recursively until found*/
setTimeout(changeYahooTitle, 100);
}
}
Then on page load:
$(function(){
changeYahooTitle()
})
If you do have access to the other script it can be modified to accommodate your needs, or you can still use this solution
Try using html() instead of empty() and text()
$(document).ready(function(){
$(".header-title").html("Subject News");
});
What's probably happening:
First you're setting the text: $('.header-title').text('Subject News');
THEN ... after the data finishes the load of the Yahoo or whatever content your text gets replaced actually with the new fetched data
Change the text inside the load callback (after data is loaded) and it will work.
It doesn't work because you call the function before the element is created. If you put your function inside <script> tag after the <div> element it should work
Below is the div that I want to alter
<div id="#page.Page" class="pageMessages" data-messages='#Html.Raw(new System.Web.Script.Serialization.JavaScriptSerializer().Serialize(#page.Messages))'></div>
I want to change the value of the message when a javascipt function is called from an external .js file. What is the correct way to do this?
Like So...
// This Performs the Change
$('#changeme').attr('data-messages', 'New Value');
// Show the Change
$('#changeme').html( $('#changeme').attr('data-messages') );
Here is a Working Fiddle
The one problem I see is the id='#page.Page' , this doesnt work.
I hope i get what you're trying to do, you can use jquery's change attribute for that
JQUERY
<script>
$(document).ready(function(){
$(".pageMessages").attr("data-messages","your-new-value-here");
});
</script>
DOC: http://api.jquery.com/attr/
I have a one textarea's on my page which is located on the left. On the right side I have a simple div.
The textarea will later become CKeditor. Now I would like to have it so that when I type something in the textarea, that it immediately displays the text I'm typing in the div.
I just notices that Stackoverflow uses exactly what I wish to have. While I write this question I get to see what it will look like below.
How exactly is this done? I've searched on Google and followed AJAX tutorials but I'm not getting tutorials that get me closer.
Thanks!
There's no AJAX in this situation. Just JavaScript processing. You set up a change event handler on the input item (textarea or other) and with JS you format that text and put the formated content inside another container.
AJAX would require server requests, while this is done entirely on the client side.
This does not relate to ajax. It's just a javascript challenge. First, you have to have a js function that handle the keydown event of the textarea, then you will change the text value (or html value) in the right div in responding to the keydown event. I think that you should learn more about javascript then jquery for easily solving this problem.
$('#text-area-id').keypress(function() { $('#div-id').html($(this).value()); });
this can probably help:)
if you are not using jquery then you can do this
create method which will be called on key press
function onChange(el)
{
document.getElementById('#div-id').innerHTML = el.innerText;
}
then attach event on your textarea
<textarea onkeyup="onChange(el);"></textarea>
Here is code from a recent quesiton that needed something similar. I'm guessing you know enough JS to modify it as per your needs.
$('#names').bind('keyup', function(){
var text = $(this).val();
var tokens = text.split(" ");
var output = "";
for(int i=0; i<tokens.length; i++){
output+= "<span>"+tokens[i]+"</span>&nbps;"; //note extra space at the end
}
$('#preview').innerHTML=output;
});
The original post is here.
Using jQuery
$(function(){
$("textarea").keyup(function(){
$("div").html($(this).val());
});
});
http://jsfiddle.net/bxf8x/
When I store a jQuery object in a variable, like this:
var $myObject = $("div#comments");
...I can't use the object $myObject!
This is what I'm doing to change the html of div#comments:
$myObject.html(data);
It does nothing. I already tried this way too, this time to select an element inside div#comments:
$("div.comment", $myObject);
It doesn't work.
I just want to be able to save an element in a variable and then use it!
Note: some people don't put $ before the variable name, like this: myObject.
Are you calling it after the document is loaded?
// This will ensure that the code doesn't run until
// the document has loaded
$(function() {
var $myObject = $("div#comments");
});
(This is a shortcut for jQuery's .ready() method.)
http://api.jquery.com/ready/
As long as the document is loaded, and you have a <div> with the ID comments on the page when it loads, it should work.
Also remember that there can only be one element on the page with any given ID. Because of this, it is actually a little better (quicker) to do $("#comments"); instead of $("div#comments");.
You've only provided snippits of your code, so it is impossible to tell for sure, but the odds are that you are running the code in a <script> element that appears before the <div> element and don't do anything (such as use the ready event) to delay the execution of the code until the div exists.
The result is that you get a jQuery object which found no elements. Move the script element so it is after the div. Just before the end tag for the body is a good place.
The syntax is perfectly valid and should work. Are you dynamically appending the comments div? You should alert( $myObject.length ) to see if it's 0 or 1, if its 0 that means it's never picked up.
You may need to bind the var statement until after dom ready, window load, or your ajax callback.
Well, that syntax is perfectly fine so something else is going on. Can you show your markup? And what do you get if you add an alert($myObject.length)? And one last thing to check... are you running this inside an on-ready handler?
Ok, thanks everyone for that.
I got the solution.
I thought about the order the things were loaded in the DOM and found the solution.
The problem (with the markup) was:
<div id="comments">
<script type="text/javascript">
loadComments(params);
</script>
</div>
The code above was written by PHP!
So it executed the function as soon as the browser read the code.
I already tried to put the script on the end of the page, after the function was called. The funcion was not defined yet.
So, the funcion loadComments should be executed after the div was ready AND after the function was defined.
I wrapped the code between the tags with a .ready(), like this:
<script type="text/javascript">
$(function() {
loadComments(params);
});
</script>
It was a distraction.
Sorry everyone!
Thanks a lot.
If you have the same problem and you didn't understand what I did, ask me. XD