I have the following HTML:
<div id="mydiv">
</div>
I would like to load content using jQuery so it appears after my DIV.
I've tried this:
$("#mydiv").load("/path/to/content.html");
However, this ends up with this result:
<div id="mydiv">
<p>content from file</p>
</div>
How do I get this result?
<div id="mydiv">
</div>
<p>content from file<p>
Anyone still looking for solution, I would suggest using jQuery.get() instead of .load() to load AJAX content. Then use .after() function to specify the preceding element.
Here's an example:
$.get('url.html', function(data){ // Loads content into the 'data' variable.
$('#mydiv').after(data); // Injects 'data' after the #mydiv element.
});
Use the after function.
I have one interesting but rather hard and difficult for understanding method, but using .load function. So, code:
$('#div_after').remove();
$('#mydiv').after($('<div>').load('/path/to/content.html #div_after', {
data: data, //variables to send. Useless in your case
}, function () {
$(this).children().unwrap();}
));
See, I put .remove() method to remove previously created div if you use this code more than once. You can delete first line if it will be used just once.
The idea is .after($'') creates noname div element on the page after #mydiv and .load() the html into it with callback-function
$(this).children().unwrap();
which is logically will unwrap into our noname div and "rename" it to our #div_after from loading html. It is also unnecessary if you wish using just noname div.
Cheers!
P.S. It took me a while in a project to combine all this stuff together :) I wish it would be useful.
with the after(content) function
Related
My site has a one <div> for the header, one for navigation-panel and one for the content.
For the navigation-links i use
<p class="blue"><label onclick="goFor('test')"> -> TEST! <- </label> </p>
and my JS:
function goFor(destination)
{
document.getElementById("content").load(destination+'.php');
}
in this case, the content-div should change to the file "test.php".
but Firebug says: document.getElementById(...).load is not a function
what am i doing wrong?
Use $("#content").load(something) instead of document.getElementById.
Or... make an ajax request and load answer in that div.
For an ajax request with no lib, you can check my script here (first answer): Insert external page html into a page html. Note the success handle as you want it... with document.getElementById.
I'd like the content inside <div class="tcw-content"> to change, when another div is clicked, however I have never used Ajax (maybe it doesn't have to be done in Ajax, but I can't think of a JS/CSS way, examples appreciated :) ), would anyone have any examples for me please? For example, the user will click onto <li id="tab-tab_700964" class="grp"><a>Group A</a></li> and as soon as the hotspot is clicked, the content inside the above mentioned div will change.
How can I achieve this?
You can use jQuery, example:
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#tab-tab_700964 a').on('click', function(){
$('.tcw-content').html('hey');
});
});
</script>
<li id="tab-tab_700964" class="grp"><a>Group A</a></li>
<div class="tcw-content">
hello
</div>
Go take a look at jQuery. It makes this pretty easy. Your example would look like this:
$('.grp a').click(function(e) {
e.preventDefault();
$('.tcw-content').html('new content goes here');
});
To explain, $ is the jQuery object. When you use it as a function with a string, it finds all elements matching that selector, almost exactly the same way CSS selectors work. Then, there are a variety of functions you can call on these matched elements. In this case, we call click() and pass it a function that will be run when the link is clicked on. Inside of that function, we find the div using $('.tcw-content') and update its contents by using the html() function.
jQuery's documentation is quite good. Start playing with it, maybe using jsFiddle as a sandbox.
Maybe you are looking for a content slider.
HTML Content Slider
:: Featured Content Slider v2.5
Examples
40 examples
do it with jquery. Include the jquery library, and then add a new javascript file with a document.ready event. Inside the document ready, just add something to listen for when your div is clicked. Read here:
http://www.w3schools.com/jquery/event_click.asp
http://api.jquery.com/click/
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
Everything i have read, leads more to event handlers being added using .live(), .on(), .bind(), .delegate(), etc..
I asked a question earlier that may not be coming across correctly, so i voted to delete that one and re-ask a much simpler one, from which i can do the rest i believe.
Is there a way to clear the innerhtml of an HTML element with a predefined class, including those loaded dynamically via AJAX, etc.
So every time an ajax call puts
<div class="triggerElement">something here...</div>
or similar on the page, i need it to be emptied. I think i have explained that correctly. Just let me know if not.
EDIT
Seems to be a lot of confusion. .empty & others like it will not work. If you call
$(".omButton").empty();
from the index, then some other module loads something later via AJAX with that same class, it WILL NOT empty that. If i have the element on the page first, then call it, yes it will work....
I need something along the lines of .live or .delegate that will work for any content loaded after the fact, as i have tried .empty and .html and neither work for the content that is loaded with AJAX.
Not sure how else to explain this. Thought it was pretty simple. Sorry!
EDIT 2...
index contains empty function
$(function(){
$('.omButton').empty();
$ajax... to load "loadedContent"
});
<div class="omButton"></div>
<div id="loadedContent"></div>
ajax returns
json_encode(array('test' => '<div class="omButton">Button Text</div>'));
So now the HTML on the index is
<div id="loadedContent"><div class="omButton">Button Text</div></div>
However since the inner div was not there when the page loaded, the .empty does not effect it. I need something that i can put on the page load that "monitors" for any occurance (static or dynamic) of it and empties it.
Hopefully that helps?
Try using $.ajaxComplete() - as this is triggered after every ajax request completes
$('body').ajaxComplete(function() {
$('.triggerElement').empty();
});
Try this. .empty
$.ajax({
...
complete: function(){
$(elementSelectorForWhatYouWantEmptied).empty();
}
})
or if the element that is loaded is dynamically placed in the DOM, then you can use .live().
$(elementThatIsInDOM).on(event, elementSelectorThatIsDynamicallyAdded, function(){
$(elementSelectorForWhatYouWantEmptied).empty();
})
If you're loading content using ajax, and that content is a full on tag with content
<div class="triggerElement">something here...</div>
And you want to empty that element after it is loaded, you need to do that within the callback which gets executed when the data is loaded.
$.ajax(
....
success: function(data){
$(".omButton").empty();
});
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