ajax load different page div into a div - javascript

i am trying to load a div from another page into a div
the issue is that the other page div is loaded via js as well
this is the code i use
$.ajax({
url: 'https://mywebsite.com/pageiwantoload',
type: 'GET',
success: function(res) {
var data = $.parseHTML(res);
$(data).find('#ajap').each(function(){
$('#here').append($(this).html());
});
}
});
so https://mywebsite.com/pageiwantoload div id ajap is loaded via js as well
is there any way to make the page fully loaded then get the div id ajap ? or any other solution
<span class="woocommerce-Price-amount amount" id="ajap">'+c+"</span>
this is what i am trying to get this is inside a js file

I have a question. Is '#here' div inside https://mywebsite.com/pageiwantoload request? In this case you aren't loading html just parsing it. Always use $(document).ready to wait for a full-loaded page. If you have dependencies between AJAX calls use $.done instead of callbacks.
for example :
$ajax(urlwholoads#here).done($ajax.pageiwanttolad).done(parserequestandLoad#HereDiv).

Related

How to use afterRender and rebuild from fullpage.js

I've read the documentation regarding afterRender from the fullpage.js github page. In my site I have content that is generated by AJAX in a particular div.
Example below
$("#fullpage").fullpage({
afterRender: {
// I don't know what to put here
}
});
$("#btn-generate-content").on("click", function() {
// Target the div
$.ajax({
url: "get_topic_content.php",
dataType: "json",
success: function(data) {
// Place the data in the div
}
});
});
With the code above, I'm generating a long paragraph and placing it into a div. Now I want my site to resize accordingly to the generated paragraph. How can I use reBuild() on the afterRender to target this particular div when it has finished rendering the content.
After get ajax content you should use $.fn.fullpage.rebuild() in a callback.
I don't see an action of placing html content.
It should be done in success function, and then you should call rebuild function.

HTML fetched using an ajax service call is getting distorted for some time before js and css gets applied

I am making a service call using ajax and loading an HTML content on my page. This HTML has got content, some external script calls and css inside it. But when this HTML gets loaded, it gets distorted for a while (3-4 sec) and then js and css gets applied which are inside that HTML. Is there any solution where I can get the HTML with js and css applied and then append it in my div or wherever I want to put it.
$.ajax({
type: 'POST',
url: service-URL,
crossDomain : _crossDomain,
contentType : 'text/plain',
data:JSON.stringify(objReq),
error:function (xhr, ajaxOptions, thrownError){
},
success: function(outputHTML){
$("#contentDiv").html(outputHTML);
}
});
to avoid this simply you can load css and javascripts in your main document.
in any case and for any reason if you dont want to load them before ajax call in main document( for example to boost up first page loading) you can use
nested ajax call like this :
$.get(resource.url, {cache:true}, function(css) {
//cache : true will handle browser cache , it will load instantly:
$("head").append($("<link>",{
rel: "stylesheet",
type: "text/css",
href: resource.url
}));
}).then(function(){
//You can now call your AJAX here
});
When using html() or innerHTML= you are writing only the code into your site. The interpreter then has to understand that afterwards, which causes a delay.
What you can do instead, is apply the content as DOM already, by either not passing it as text/plain, or by creating a documentFragment first document.createDocumentFragment() , which is like an empty Node you can append child nodes to, and afterwards append this fragment to the main DOM.

PHP Ajax load file with jQuery inside file

I am loading a PHP file using Ajax below which works great except I want to be able to load some javascrip/jQuery items within that file to function on the main index page.
prices();
function prices()
{
$.ajax({
type: "GET",
url: "inc/load_prices.php",
cache: false,
success: function(response){
$("#prices").hide().html(response).fadeIn(500);
}
});
}
setInterval(prices, 600000);
Inside load_prices.php I have some stock ticker type output which works fine outside the AJAX call using the below. However when loading the contact via AJAX it wont trigger the webticker.min.js file and wont render properly.
<!-- If loading this without AJAX the ticker works fine -->
<script src="js/jquery.webticker.min.js"></script>
<script>
$("#ticker").webTicker({
duplicate:true,
hoverpause:false,
});
</script>
How do I allow the contents of the prices() AJAX function to render properly when needed to reference jQuery?
Not sure but in load_prices.php
src="../js/jquery.webticker.min.js"
as both are in different directory
If interpret Question correctly, use $.getScript() to load webticker.min.js once. Not certain what purpose is of calling .webTicker() every 600000 ms?
$.getScript("js/jquery.webticker.min.js")
.then(function() {
$("#ticker")
.webTicker({
duplicate:true,
hoverpause:false
});
});

Running jQuery's $(document).ready(function() {...}); inside an Ajax response

I have an application that builds page content from multiple page fragments comprising the template page. One or more of these fragments need to run JavaScript when the document has loaded, and it does not make sense to put fragment specific code in the template page comprising the fragments. While this approach has worked out for me quite well, I have a problem when attempting to update a fragment via Ajax based on the user's interaction with the page.
I am using jQuery and $(document).ready(function() {...}); rather liberally, both in the template page (for globally scoped code) and the fragments (for fragment specific code). Problem is, when a fragment is updated using jQuery's .html(HTML code from Ajax response) on the jQuery enriched version of the HTML element and the Ajax response itself contains $(document).ready(function() {...}); code, the HTML content gets updated nicely but the JS does not execute.
Some suggest use of eval() on the JS fragments inside the Ajax response while others forbid it. I am hoping someone will push me in the right direction with this.
$.ajax({
type: 'POST',
url: $(formObj).attr('action'),
data: $(formObj).serialize(),
})
.done(function(data, textStatus, jqXHR) {
$response = $(data.replace(/<body(.*?)>/,'<body$1><div id="ajaxResBody">').replace('</body>','</div></body>'));
$('#fragmentContent').html($response.find('#fragmentContent').html());
});
<div id="fragmentContent">...</div> is one of the fragments updated using partial content extracted from the Ajax response. When the page is initially loaded, the fragment's content DOM looks approximately like this:
<div id="fragmentContent">
<p>...</p>
<div>...</div>
<script type="text/javascript">
$(document).ready(function() {
// JS code
});
</script>
</div>
But when the same fragment's content is replaced via Ajax, the DOM looks like this:
<div id="fragmentContent">
<p>...</p>
<div>...</div>
</div>
So it is quite apparent scripts are stripped. I verified that by using the following code:
if (data.indexOf('accordion(') >= 0) {
console.log('scripts found in Ajax response');
if ($response.find('#fragmentContent').html().indexOf('accordion(') >= 0) {
console.log('scripts inserted into fragment');
}
else {
console.log('scripts stripped before content inserted into fragment!');
}
}
else {
console.log('scripts did not even make it in the Ajax response!');
}
and the following log output was yielded:
scripts found in Ajax response
scripts stripped before content inserted into fragment!

Insert text into a div with jquery load

I'm trying to get jquery to load the text from a text file into a div for a blog, but it's not working at all. any help?
this is what I'm using (what I've seen other's use). Also, I'm not testing it locally.
$("#content").load("articlename.txt");
update:
is there any way for it to keep the enters as breaks?
There is a no direct way to get data from external file in jquery.
But via ajax its possible.
$(document).ready(function() {
$("#loadData").click(function() {
$.ajax({
url : "articlename.txt",
dataType: "text",
success : function (data) {
$("#content").html(data);
}
});
});
});
$(document).ready(function() {
$("#content").load("articlename.txt");
});
Wrap your call inside document.ready.

Categories