How can I insert a div into another div using jquery? I'm trying to replace contents of my div with a loading div until the ajax call returns.
<div id="content1>foo</div>
<div id="content2>bar</div>
<div id="loadingDiv" class="loading-indicator"></div>
I have a common ajax requester that takes a div id and request url, which populates the div contents when the request is complete -
MyCommon.GetAjaxCall(fetchUrl, data)
.done(function (responseData) {
// On success, put content
$(responseContainer).html(responseData.View);
})
Ideally, I just want to populate the contents of the responseContainer when I enter my function call to show the loading animation in the div and replace it with the response contents when the ajax completes.
I tried adding $(responseContainer).html($("#loadingDiv").show()); (+some variations) and also tried appendChild to precede the GetAjaxCall above but none of those worked. I'm trying to have a dashboard style page layout with the data being populated in each div independent of each other and still show the same loading animation. Am I thinking about this the right way?
The following should do it:
$('#content1').append($('#loadingDiv'));
If you want to do it via .html then make sure you do
$('#content1').html($('#loadingDiv').html())
Related
I have this code that updates the contents of a div every 5 seconds:
<script type="text/javascript">
$(document).ready(function(){
setInterval(sensor,5000);
});
function sensor(){
$("#ex2").load("http://localhost:8050/ss2");
}
</script>
The content is a table that shows the data of a database and it is constantly updated, the information is updated but at the moment these updates start it brings me the whole page inside the div in this way:
Does anyone know how I can solve this problem?
As for what I can see http://localhost:8050/ss2 is also the URL of your page to visit? You should create another page that only gives you the html of the table, then you can replace the original contents.
Or you should extract the table html from the data you have (not sure what it's code is to be able do this for you). Then create a node from that text and add it to you r DOM
I am trying to change the content of the yellow area when the user clicks on 'Dashboard', 'customers' etc: Here is the template I used
First I tried to change index.js I gave an id to div area:
$('.icon-dashboard').on('click', function() {
$("#area").load("secondpage.html #area > *");
});
This didn't work for me. Any suggestions to change the content between main tags?
Your selector for the load command is wrong. Your HTML shows a <main> tag with <div class="helper"> so you would want to use $("main .helper").load(...) to load content into "helper". Or, if you want to replace the "helper" div with whatever comes back from .load, just do $("main").load(...).
Also, passing "secondpage.html" to .load() is only going to work in the local browser. I'm assuming you're only doing that because you're testing? Ultimately, you'll need some backend script at an URL to return your content.
I have a page with headers, images, etc. I'd like to replace a "page" div with another file of HTML, JavaScript, etc using Ajax and execute JavaScript on that page after it is loaded. How do I do this and also handle < , ", and other tags in the file and pass the page some parameters?
Is the other "page" content owned by you? If so, you can have javascript methods on your main "container" page, then once you fire the method to pull the contents of the new "page" div, fire the corresponding javascript method you need, since any necessary DOM elements will have been added to the page at this time.
To do it the way you mentioned, you can follow the steps seen here to use the dynamic script pattern: Executing <script> inside <div> retrieved by AJAX
Basically, you host your javascript externally, then once the page has loaded, add the "src" tag to a script element and it will execute.
As for handling special characters, you can follow steps with jQuery's ajax call to inject HTML from the other page into your current one, such as here: How to get the html of a div on another page with jQuery ajax?
$.ajax({
url:'http://www.example.com/',
type:'GET',
success: function(data){
$('#ajaxcontent').html($(data).find('body').html());
}
});
(Instead of targeting a specific div on the external page, you would target the body or parent container div)
given an html page
<html>
...
<body>
<div class="page">
some html content...
</div>
</body>
</html>
you can replace the content of the div via the jQuery function load()
$("div.page").load("an-http-resource.html");
Use an AJAX request to get the HTML file as a response.
Replace the "page" div innerHTML with the response.
If the HTML page has a bunch of headers and such and you only want a certain portion of that HTML file, you may want to use getElementById or some other method of selecting the portion of the HTML file.
The HTML entities will appear as they normally would in a browser, if that is what you mean by handling < and " and other tags.
You can send parameters by editing the endpoint:
index.html?date=today&car=yours
Having searched the site, I think the issue I'm having may relate to using innerHTML to populate a <div> but I can't quite find a solution that I can map onto my specific issue. Hope someone can help. Basically, I have an HTML page that contains a form with a text field. The page also contains an empty <div> which will be populated with a table-of-contents in a moment. The <div> is defined as:
<div id="toc_menu" class="menu_list">
I've set the onkeyup attribute of the form text field to run a Javascript function (defined in the HTML <head>) which defines a XMLHttpRequest and sends the value entered in the text input field (str) to a PHP page using xmlhttp.open("GET","toc_items.php?filter="+str,true). The PHP page GETS the value of 'filter' and runs a MySQL query. It then produces some results which are echoed back to the empty as a table-of-contents with main headings and subheadings using:
document.getElementById("toc_menu").innerHTML=xmlhttp.responseText;
This works more-or-less as expected. The length of the returned table-of-contents changes as text is entered into the text field. There is, however, a problem. This table-of-contents is supposed to have an accordion effect created using a script which is defined in the HTML <head>. The script was developed by Roshan Bhattarai and works beautifully when the table-of-contents list is hard-coded into the HTML page. The script is as follows:
<script type="text/javascript">
<!--
//---------------------------------+
// Developed by Roshan Bhattarai
// Visit http://roshanbh.com.np for this script and more.
// This notice MUST stay intact for legal use
// --------------------------------->
$(document).ready(function()
{
//slides the element with class "menu_body" when paragraph with class "menu_head" is clicked
$("#toc_menu p.menu_head").click(function()
{
$(this).css({backgroundImage:"url(down.png)"}).next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");
$(this).siblings().css({backgroundImage:"url(left.png)"});
});
});
</script>
The table-of-contents items that are formatted as follows:
<p class="menu_head">HEADING</p>;
<div class="menu_body">;
SubHeading';
</div>;
It appears that the table-of-contents items that are inserted into the <div> don't trigger the Javascript in the HTML page <head> (although the text is formatted correctly using CSS files also defined in <head>). I can manually copy the output from the PHP page and paste it into the <div> and the accordion effect works perfectly.
Any suggestions would be greatly appreciated.
It appears that the code block:
<p class="menu_head">HEADING</p>;
<div class="menu_body">;
SubHeading';
</div>;
is echoed back by PHP from the ajax call. Correct me if I'm wrong on that. If the ajax call builds this html and echos it to the screen, the above script will not work. The ajax call is made via the keyup event on the form as you stated above. However, the script above is run on
$(document).ready. If what I'm understanding is true, the content is placed in the innerhtml of the div when the ajax call is made not when the page loads. Because there are no "p" elements with the class "menu_head" when the page loads on $(document).ready, jquery cannot bind the .click event properly. The script needs to be executed after the ajax call returns and the DOM has been updated with the new elements.
In other words on successful return from the ajax call, run the above script, not on $(document).ready. Once the elements are in the DOM, jquery can find them and bind to them the .click event. The script execution should then complete successfully.
Hope this helps.
I haven't studied your code in detail, but did notice your empty div element has no close tag (unless you've omitted this detail). You should always have a close tag (for div elements) to ensure the DOM doesn't make an invalid assumption as to where this should be inserted, use:
<div id="toc_menu" class="menu_list"></div>
I'm trying to put a piece of jquery together to show a hidden div and at the same time, refresh the parent div so that the javascript can amend and display the new height.
This is what i have so far but after some research have found than to refresh a div you have to use ajax and was wondering if anyone could lend a hand.
var $r = jQuery.noConflict();
$r(document).ready(function() {
$r('#open').click(function () {
$r('#expandable-2').show('slow');
$r(this).load(location.href + '.panel > *');
});
$r('#close').click(function () {
$r('#expandable-2').hide('1000');
$r(this).load(location.href + '.panel > *');
});
});
So far I have this,
a link with the id's of open and close
once clicked they give the css property of display block and display none to a div expandable-2
the part I'm stuck on is the refreshing of the parent div .panel in order to show the displayed div correctly.
Reason being is that I'm currently using the CodaSlider script in my page and the height is dynamically brought in depending on how much content is in the container. Now in order for the new content to be displayed when clicked open, the container needs to be refreshed thus showing the new content with a new height.
Hope that makes sense but any help would be awesome.
to "refresh" a div you just need to do:
document.getElementById("myDiv").innerHTML = new_content;
new_content may be the html returned by your ajax call but you definitely DON'T need an ajax call to "refresh" a div.
You can change html of a div with html method of jQuery.
$r(".content-div").html("Hello world");
If you want to load an html from server with ajax, you should use load function as below:
$r(".content-div").load("ajax/users.html");
There is a clear mess with your code. Just a few tips:
If your parent div contains #expandable-2, then you won't be able to do the ajax call and show the animation at once, because the ajax call is gonna destroy the #expandable-2 element while it is appearing/disappearing.
The proper way of loading external code through ajax into a div is:
$r('.panel').load('/path/to/url');
This will load the response of '/path/to/url' into the '.panel' div. Make sure that '/path/to/url' only returns the new content of the div, otherwise you cannot use $r('.panel').load, but an indirect approach must be used instead (i.e.: $r.ajax)