JavaScript not working in JQuery Load - javascript

I wan to display a code with JavaScript then load it using jQuery load.
Here is my codes :
<div class="noti"><span name="creator">::creator::</span></div>
<script type="text/javascript"> creators=document.getElementsByName('creator'); for(i=0;i<creators.length;i++){creator=document.getElementsByName('creator')[i].innerHTML; :userstats:d=ru,o=dl,s=1,l=50::if(creator=='%name%'){document.getElementsByName('avatar')[i].innerHTML='<img src="%urlpicture%" width="40" height="43" style="background: url(http://wapkaimage.com/400207/400207380_d4c2093a7f.PNG);" width: 40; height: 43;"/>';}:: :/userstats:}</script>
Then in another url, load with this :
<div class="title">NOTIFICATION</div><div id="noti">Loading notification...</div>
<script type="text/javascript"> $('#noti').load('/popup_0.xhtml .noti',function(data){$(this).find('.noti').css({"width":"96%","margin":"auto"}); }); </script>
The problem is the result of span name creator is not displayed in the JQuery load but it displays in the 1st url.

That because the changes made by your javascript doesn't affect source/original file popup_0.xhtml, but still affected just the DOM loaded in the browser, when the load() function get the code inside the source file.
Hope this helps.

Related

Bootstrap popover works on second load

I have made a webpage on Sharepoint with bootstrap and the content is populated with javascript. I am using popover in a table. The table is generated via javascript. The strange thing is that the popover works only after I made a refresh of the page/reloaded it with F5.
A popover outside of the table works fine and by first load. As well as the code runs fine without problems on my local machine, but on sharepoint it breaks down.
Here some code - initialization:
<script src="jquery-3.5.1.slim.min.js"></script>
<script src="popper.min.js"></script>
<script src="bootstrap.min.js"></script>
then the function for generating the table is called:
<body onload="javascript: GenerateTable();">
followed by the popper call:
$(function () {
$('.example-popover').popover({
})
})
The result is a table which contains the following line with the popper:
<td>Here is a question which needs a popper as info!
<div class="row justify-content-end">
Info
</div>
</td>
It seems to me like it an issue with the loading order - but can't figure out why it works locally but not on Sharepoint.
I import js from CDN, it works well in my environment.
Test code for your reference:
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<body >
<td>Here is a question which needs a popper as info!
<div class="row justify-content-end">
Info
</div>
</td>
</body>
<script>
$(function () {
$('.badge').popover();
})
</script>
Test result:
If you need further assistance,please share the full code.
The problem was the order of the javascript execution. As the code is loaded from an external javascript file the order how the code is loaded is not known.
Thus it is recommended to put the javascript function from the html file into an explicit function into the javascript file. Then the function has to be called explicitly.
Javascript File:
function PopperCall(){
$('.example-popover').popover({});
$('.popover-dismiss').popover({trigger: 'focus'});
$('[data-toggle="popover"]').popover();
}
In the HTML the loading is done by:
<body onload="javascript: GenerateTable(); PopperCall();">

js code is not working in an external file, but works file when placed in the same html page

I have this code in the footer of my html page
<script type="text/javascript">
// using jQuery
$('video,audio').mediaelementplayer();
</script>
the above code is adding video player on the html page.
Now I have created a separate js file in which I have already have some line of code which is creating owl sliders, tooltips, number counters etc.
When I add the above code into that separate js file it does not work, instead when I keep it in the footer of the html page it works fine.
Try placing your code within $(function(){ ... }. This will execute when the DOM is loaded (currently your code is being executed before jQuery is loaded, if you check the JavaScript console, you will see an error something like $ is not defined)
$(function(){
$('video,audio').mediaelementplayer();
});
or
$( document ).ready(function() {
$('video,audio').mediaelementplayer();
});
You can read about what that is doing here. $(function() is the same as $( document ).ready()
your html(basically) should look like this:
<html>
<head>
</head>
<body>
<!-- html code here -->
<!-- add jquery lib -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- your script -->
<script src="you/file/path.js"></script>
</body>
</html>
and your jquery file:
jQuery(function($) {
// your functions here
$('video,audio').mediaelementplayer();
});
Do you have a proper link to the separate js file in your page, generally at the bottom of the body? It should look something like this:
<script type="text/javascript" src="/joyride_odoo_models/static/js/scripts.js"/>
If you've done that properly, have you tried clearing your browser cache? You may need to do that to detect new javascript files.
How do you call your external js file ?
You must add your references js before your external js file.
you must add your function on document.ready.
You may wait until jQuery is full loaded or ready.
Ex.
$(document).ready(function($) {
// Your code goes here
$('video,audio').mediaelementplayer();
});
This code goes in external js file, then you need to include the file in the HTML
<script type="text/javascript" src="path/to/your/js/file"></script>

run jQuery when HTML is loaded

jQuery:
$(document).ready(function(){
var url='http://query.yahooapis.com/v1/public/yql?q=select * from html where url=\'http://stackoverflow.com/\' and xpath=\'//div[#id="question-mini-list"]//h3//a \'&format=json&callback=?';
$.getJSON( url, function(data){
$.each(data.query.results.a, function(){
$('#stack').append('<div>'+this.content+'</div>')
})
})
});
HTML
<section id="stack">
</section>
The jQuery code is borrowed from an earlier post (Thanks!), but my question is: Shouldn't the jQuery code run when the page loads, the way it's displayed here? Im using coda 2. The jQuery is saved as .js-file, and the html is saved as .html. Both files are located in the same directory.
Thanks for any and all help!
Make sure you define a link to your javascript file in the <head> of your index.html page.
<script rel="javascript" type="text/javascript" src="path/to/javascript.js"></script>

Javascript: load AddThis upon clicking

I have been puzzling with this for quite a while and can't get it to work. Here is the situation. I want a SOCIAL MEDIA bar to ONLY appear if people click some DIV. It should not be loaded unless people click the div. For Social Media I have ADD THIS, and the GOOGLE+1 icon. But I can not get them to load by such an external call. Here is the code so far:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=ISO-8859-1" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#socialmedia").live('click',function(){
$("#loadhere").load('html-part.html');
$.getScript('js-part.js');
});
});
</script>
</head>
<body>
<div id="socialmedia">
Show the Social Media
</div>
<div id="loadhere">
</div>
</body>
</html>
In the HTML part I have the HTML info that needs to be loaded:
html-part.html:
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
<a class="addthis_button_tweet"></a>
<a class="addthis_counter addthis_pill_style"></a>
</div>
<!-- AddThis Button END -->
<g:plusone size="medium" id="gg"></g:plusone>
</div>
For the JS part I am struggling. Here is what needs to be loaded:
<script type="text/javascript">var addthis_config = {"data_track_clickback":true};</script>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ID"></script>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
I have tried to call them one by one:
$.getScript('http://s7.addthis.com/js/250/addthis_widget.js#pubid=ID');
$.getScript('https://apis.google.com/js/plusone.js');
But I guess this is a crossdomain problem...?
If I use PHP to obtain the content, and load a local PHP file, it still does not work. Before spending one more day on this... is this possible to achieve?
The problem here is that addthis code fires on dom ready event. When you load it with jQuery the dom has already been loaded so the code is not executed. The fix is to use addthis.init() method to force the code execution after you load the code. There is no cross domain problem or anything.
Note that according to addthis documentation it should be possible by just passing a get variable through the widget url like this http://s7.addthis.com/js/250/addthis_widget.js#pubid=[PROFILE ID]&domready=1 but it didn't work for me.
I would also recommend you store the html in a string variable, that way you don't have to do unnecesary requests for a little static html.
See working demo here: http://jsfiddle.net/z7zrK/3/
$("#socialmedia").click(function(){
var add_this_html =
'<div class="addthis_toolbox addthis_default_style ">'+
'<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>'+
'<a class="addthis_button_tweet"></a>'+
'<a class="addthis_counter addthis_pill_style">'+
'</a>'+
'</div>'+
'<g:plusone size="medium" id="gg"></g:plusone>';
$("#loadhere").html(add_this_html);
$.getScript('http://s7.addthis.com/js/250/addthis_widget.js#pubid=xxx',
function(){
addthis.init(); //callback function for script loading
});
$.getScript('https://apis.google.com/js/plusone.js');
});
Just used amosrivera's answer (huge kiss to you btw :) and ran into another issue :
Addthis object can only be loaded once, so when you have multiple addthis toolboxes on the same page it may only work for the first clicked toolbox.
The workaround is to do :
if (window.addthis){ window.addthis = null; }
before calling
addthis.init();
Here's what I've just done to start loading the buttons only when an article is hovered long enough :
HTML:
<article data-url="someUrl" data-title="someTitle" data-description="someDesc">
.....
<div class="sharing">
<div class="spinner"></div>
<div class="content"></div>
</div>
</article>
JS :
// Only throw AJAX call if user hovered on article for more than 800ms
// Then show the spinner while loading buttons in a hidden div
// Then replace the spinner with the loaded buttons
$(function() {
var t;
$("article").hover(function() {
var that = this;
window.clearTimeout(t);
t = window.setTimeout(function () {
sharing_div = $('.sharing', that);
add_this_html =
'<div class="addthis_toolbox addthis_default_style "> \
<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a> \
<a class="addthis_button_google_plusone" g:plusone:size="medium"></a> \
</div>';
if (sharing_div.find('.content div').length == 0) {
sharing_div.find('.spinner').show();
sharing_div.find('.content').html(add_this_html);
sharing_div.find('addthis_toolbox').attr({
'addthis:url': $(that).attr('data-url'),
'addthis:title': $(that).attr('data-title'),
'addthis:description': $(that).attr('data-description'),
})
if (window.addthis){ window.addthis = null; } // Forces addthis to reload
$.getScript('http://s7.addthis.com/js/250/addthis_widget.js#pubid=xxx&async=1',
function(){
addthis.init();
setTimeout(function() {
sharing_div.find('.spinner').hide();
sharing_div.find('.content').show();
}, 2500);
});
}
}, 800);
});
});
To answer your official question, yes, I believe this is possible to achieve.
But, to further elaborate on this, I believe what you may want to try working with is the order in which your external scripts and external markup are loaded. An interesting situation we find when dealing with asynchronous actions such as these, is that they don't always complete, load, or execute in the order you would like unless you specifically say so. jQuery lets you do this through some callbacks you can pass to the getScript and load methods.
There also should not be a "cross-domain" problem with javascript files on other domains, though there certainly is when loading HTML.
I'm not sure if this will exactly solve the problem you're having, but it certainly feels like this is worth a try. You could try making sure the markup loads before the scripts do:
$(function(){
$("#socialmedia").live('click',function(){
$("#loadhere").load('html-part.html', function() {
// this waits until the "html-part.html" has finished loading...
$.getScript('js-part.js');
});
});
});
Now, we should also ask about how you are building your "js-part.js" file. (You only showed what you wanted, not what you've built.) If this is truly a JS file, you can't just use some HTML <script> tags to load other JS files. (You would instead want to continue calling getScript in this file, or use one of several other approaches to get your other JS stuff loaded, such as manually appending script elements to the document's head, or using another library, etc...)
Good luck!

Run javascript after page load

setup_account ui-mobile-viewport ui-overlay-c
When a page i make loads like this:
var location = location.href+"&rndm="+2*Math.random()+" #updatecomment0>*"
$("#updatecomment0").load(location, function(){});
I have multiple scripts running on the updatecomment0 div:
<div id="updatecomment0">
<div id="javascript1">hi</div>
<div style="float:right;" class="javascript2">delete</div>
</div>
I don't know how to make this other JavaScripts run after page load.
Can someone please tell me how to with this.
Thank you
Use $(document).ready().
Use jQuery, you can do this very easily.
jQuery(document).ready(function(){
alert('Your DOM is ready.Now below this u can run all ur javascript');
});
Here is a sample layout for you
<script type="text/javascript">
$(document).ready(function(){
/// here you can put all the code that you want to run after page load
function Javascript1(){
//code here
}
function Javascript2(){
// code here
}
$("#btnOK").live('click',function(){
// some codes here
Javascript1();
Javascript2();
});
});
</script>
<div id="MyDiv">
<input type="button" id="btnOK" value="OK"/>
</div>
write code inside ready
jQuery(document).ready(function(){
// write here
});
suggestion : use live or bind
Unless you need javascript to do something before the page is loaded, add your scripts to the bottom om the html document, just before the body end tag.
The page will load faster, and you can do whatever you need to, right in the js file, without the document ready functions.
If the scripts is the last to load, the DOM is already guaranteed to be "ready".
$(window).load(function() {
// code here
});
$(document).ready() is all you needed.
You can make JavaScript wait for a specified time using the setTimeout method:
.setTimeout("name_of_function()",time_in_millis);
I hope this can help you too, I had a similar issue and I fixed it by calling the following just after loading the content in the page (like after an AJAX request for a page to be shown inside a div):
(function($) {
$(document).ready(function() {
// your pretty function call, or generic code
});
}(jQuery));
Remember to not call this in the document you load, but in the function that load it, after it as been loaded.
Using vanilla Javascript, this can done thusly:
<html>
<head>
<script type="text/javascript">
// other javascript here
function onAfterLoad() { /*...*/ }
// other javascript here
</script>
</head>
<body>
<!-- HTML content here -->
<!-- onAfterLoad event handling -->
<div style="display:none;"><iframe onload="onAfterLoad();"></iframe></div>
</body>
</html>

Categories