jquery html() changes not visible after calling another function - javascript

A function used to insert bbcodes into a textfield breaks a jquery click function that makes use of the html() method.
If the jq click function gets called after the tag function, changes made by html() won't display on the view page. In Firebug I can see that changes are applied they just won't get rendered.
jquery function that breaks:
$('.ev').on("click", function(){
$(this).val() ?
$('#replytext').load("/quote.php",{ "id" : $(this).val() }) :
$('#replytext').html('');
});
the tag function that breaks the jquery function is here.
Any hints/suggestions?
Think like that: Click the quotebutton -> click the tag button. Now if you click the quote or no-quote button again the content should change to quote or empty but it remains like:
quote[tag][/tag].
Firebug shows the reseted content.
Something freezed. If I load a quote and insert a tag and load the quote again to reset the tags and try to use the insert tag function again the insert tag function still inserts tags but this time the newly inserted tags have no effect on the html displayed in Firebug. The insert function breaks the viewed textarea (if the jquery function is called after the tag function) and after breaking it it uses the "death textarea" but without changing the html viewed in Firebug.
Link to a HTML pasty:
index.html
Edit: .val() works but .load() doesn't.

To change what's in a textarea, try using val() instead of html():
$('.ev').on("click", function(){
$(this).val() ?
$('#replytext').load("/quote.php",{ "id" : $(this).val() }) :
$('#replytext').val('');
});

Related

Why isn't my jQuery updating the DOM?

Ok, so I'm making a login screen for an application with a button that says "Not You?" which, when clicked, brings up a text-box to update the username on the screen. The issue I'm having is: the username updates once, but when tried again doesn't work. What's wrong with my jQuery?
Here's my jQuery:
var main = function(){
$('.not').click(function(){
$('.login-wrap').fadeOut(300, function(){
$('.not-you').fadeIn(300);
});
});
$('.enter').click(function(){
$('.name').replaceWith($('.new-input').val());
$('.not-you').fadeOut(300, function(){
$('.login-wrap').fadeIn(300);
});
});
}
$(document).ready(main);
And HERE'S a link to the CodePen.
Thanks!
From the docs, The .replaceWith() method removes content from the DOM and inserts new content in its place with a single call,so for first time it is working fine but when first time .replaceWith() is used it replaces whole '.new-input' with class 'name',that is why afterwards it is creates problems.
Instead of
$('.name').replaceWith($('.new-input').val());
Try
$('.name').html($('.new-input').val());
OR
$('.name').text($('.new-input').val());
see here.
When you are doing replaceWith(), you are actually removing the whole tag with class '.name'.
So in the next time the code is unable to find any object with class 'name'.
Use '.html()' to make it work.
You can change your replaceWith() line with the following:
$('.name').replaceWith("<span class='name'>"+$('.new-input').val()+"</span>");
replaceWith() actually replaces the whole DOM element that has the class of name.
.replaceWith() | jQuery API Documentation

Add text to field loaded from external JS

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).

Change Text using jQuery

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

Let a user copy the source code... of an element with jquery

I can understand basic javascript and jquery but I'm having a hard time understanding how to allow a user to see the source code of an element for example.
If I have an element on a webpage like this
`<p>Hi I'm an element</p>`
every body knows it will be displayed as this
Hi I'm an element
but I want a user to see this in its source code form
`<p>Hi I'm an element</p>`
How on earth is this done??
The basic idea is to get the HTML of an element, then show it somewhere as plain-text. We can use .html() to get the HTML and then .text() to output the same HTML as plain-text:
//on the click of a link
​$('a')​.on('click', function () {
//append a container with the plain-text HTML of an element
$('body').append($('<div />').text($('form').html()));
});​​
Here is the demo: http://jsfiddle.net/YbJfs/
Note that this does not get the actual <form> tag, but you could place the form in a container, select the container, and then use the .html() if that container and you'll have the <form> tag as well.
Also, if you want to add the HTML to a form input or text-area, you can use .val() rather than .text().
Here is a demo: http://jsfiddle.net/YbJfs/1/
You can use...
element.outerHTML;
...though it isn't technically the "source code". It's the HTML rendered by the browser, which may have some differences.
Also, you need a shim for Firefox 10 and lower.
function outerHTML(el) {
return el.outerHMTL || document.createElement('div')
.appendChild(el.cloneNode(true))
.parentNode
.innerHTML;
}
to grab the html of an element either use native javascripts innerHTML, or if you want to use jQuery use html() method. Examples ...
javascript:
var html = document.getElementById('myOb').innerHTML;
jQuery:
var html = $('#myOb').html();

Syntax Highlighter Around A Div Element

I am using the syntax highlighter plugin and I want to always have it applied to a specific div area. The div's content will change based on a on-click hyperlink. How can I enclose the syntax highlighter script tag around the "mydiv" element at all times?
<script>
function viewCode() {
$('#mydiv').load('euler/_48.py');
}
</script>
View Code
<div id="mydiv">
my div's initial content
</div>
<script type="syntaxhighlighter" class="brush: js"><![CDATA[
//always apply this script to mydiv
]]></script>
With syntaxHighlighter, you cannot highlight arbitrary elements on the page, so we will stick to the script method instead.
First, give the script and anchor tag an id, like
Show Code
<script type="syntaxhighlighter" class="brush: js" id="highlighted"></script>
Then, use this to load the contents when the user clicks on the link
$('#show_code').click(function(){
$.get('euler/_48.py', function(data){
$('#highlighted').html('<![CDATA[' + data + ']]>');
SyntaxHighligher.highlight();
});
});
Remember that the usual method to use syntexhighlighter.js would not work here because the SyntaxHighlighter.all() function only binds the highlight() function to the onload event, so you will have to call that function yourself every time the page updates, by adding a call to the SyntaxHighligher.highlight() function everytime you update the page.
Alternatively, I'd usually recommend the pre method. Its almost the same as above, but we use the pre element instead and use the text() jQuery function to get the escaping done correctly. Using the pre element:
<pre class="brush: js" id="highlighted"></pre>
With this piece of Javascript
$.get('euler/_48.py', function(data){
$('#highlighted').text(data);
SyntaxHighligher.highlight();
});
I think you can call HighlightAll method
Example:
dp.SyntaxHighlighter.HighlightAll('code');
Sultan

Categories