Load html with javascript issue in safari browser - javascript

I'm struggling on this question for whole day, so maybe someone could help.
I want to load settings.php page, which includes javascript/jquery code with usual html, into index.php on button click.
Here are the code snippets:
Index.php
<head>
<script type="text/javascript">
function loadSettingsPage (){
$('#myResults').load('settings.php', function (){ });
}
</script>
</head>
Settings.php
<div class="tabsWrapper">
<ul class="tabs">
<li data="sections" onclick="setTab('sections')">Product categories</li>
<li data="suppliers" onclick="setTab('suppliers')">Suppliers</li>
</ul>
</div>
...
<script type="text/javascript">
function setTab(currentTab = "sections"){
//some code goes here
};
$(document).ready(function (){
//document ready code goes here with click events
}
</script>
The question is, how to load/include Settings.php file into index.php file so that all javascript code included click events in $(document).ready function is executed in safari browser as well. Now it works perfectly with all browsers but safari.

You're trying to use the EcmaScript 6 feature of default parameters. This isn't yet implemented in Safari, Opera, or Internet Explorer, according to MDN.
Use an explicit check for whether the argument is set:
function setTab(currentTab) {
currentTab = currentTab || "sections";
// some code goes here
}
You need to be very careful about using new ES6 features, many of them are not yet implemented in Safari, and they'll never be implemented in old IE versions.

Related

JS source not visible in Chrome/Firefox debuggers, but correctly loaded in the page

I have a web page which does navigation using templates and filling / showing them depending of user interactions.
It works quite well, but the templates contains some JS included with them. This JS code is correctly loaded (in the example below, it provides an alert saying "Hi") when the page is just loaded. However, I don't see the code within the debugger console, either in Chrome or Firefox.
I've provided a minimal example below, where I see in the console > Source, under localhost, only my HTML page and jquery.min.js in the asset/js sub-folder.
Here is my HTML :
<script src="assets/js/jquery.min.js"></script>
<template id="my_screen">
Hello
<script type="application/javascript" src="assets/js/testouille.js"></script>
</template>
<section class="container">
<div class="my_screen hide"></div>
</section>
<script type="application/javascript">
function useTemplate(elem) {
var myTemplate = $('#' + elem),
normalContent = $('.' + elem),
clonedTemplate = myTemplate.html();
normalContent.empty();
normalContent.append(clonedTemplate);
}
$(document).ready(function() {
useTemplate('my_screen');
}
)
</script>
And here is my Javascript :
alert("Hi");
Any idea?
Since testouille.js is in a <template>, it's not loaded automatically by the browser when the page is loaded.
When you clone the template and append it to a regular DIV, jQuery emulates loading the file using $.getScript(). In the Chrome debugger, code that's loaded this way will be shown in a VM:#### filename (where #### is an arbitrary number) in Sources, rather than with its actual filename.
You can make the debugger give this a filename by putting the following comment in testouille.js:
//# sourceURL=testouille.js

how to execute JS after the page fully shown on safari

I got a JS problem, I want to excute a JS function after the whole page shown,the struct of the page such as:
<iframe id="i_frame" src="xxx.jsp"></iframe>
and the JS included in the xx.jsp:
...
<head>
...
<script type="text/javascript" src="yy.js"></script>
</head>
yy.js:
$(document).ready(function() {
var i_fram = $(window.parent.document).find('[id="i_frame"]');
$(i_fram).load(function() {
alert('trigger!');
});
});
this works well on PC(chrome), but on Iphone4s(IOS8.1, Safari), the alert trigger befor the page completely shown, even it alert befor the bottom-half of the page shown.I'd tried:"http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_ev_onpageshow", it still has this problem.
Is there something different between Safari's renderer and other browsers?

Foundation4: Joyride firing postRideCallback on page load

I'm using Foundation4 in tandem with CakePhp2.4 and, until now, have had no problem with this. No matter what I do, joyRide's postRide callback is being called when the page finishes loading (and won't call again when Joyride has completed).
Also, since my goal is just to fire initialize() (a custom function) as soon as Joyride ends, as an alternative I've tried binding event listeners to the .joyride-close-tip class and even custom element id's within the joyride pane, all of which are also being called at page load.
I've tried so many different variations on this that I can't adequately post everything I've tried, but here's my current code:
Notes:1) I'm using jQuery in noConflict mode because this all being controlled by CakePhp2.4, hence, the $j prefix instead of the usual $ for jquery, 2) I am not able to use zepto in this app (though I don't know why; nothing works if I load it, however).
My HTML:
<ol class="joyride-list" data-joyride>
<li data-id="module-name">
<h4>Welcome!</h4>
<p>You're about to start the module. But first, we'll make sure you understand the interface.</p>
</li>
<!--- several more <li> pairs ---->
<li data-button="begin">
<h4>All Set?</h4>
<p>Click "Begin" to get started on this module!</p>
</li>
</ol>
My JS:
<script type="text/javascript" src="appname/js/vendor/jquery.js"></script>
<script type="text/javascript" src="appname/js/foundation.min.js"></script>
<script type="text/javascript" src="appname/js/app.js"></script> <!-- custom js functions that reply on jquery and have no collisions with Foundation -->
<script>
$j(document).foundation('joyride',
'start',
{ postRideCallback: initialize() }
);
// have also tried:
// $j(document).foundation().foundation('joyride','start',{postRideCallback: initialize()});
</script>
For everyone's reference, the problem was that I was handing an actual function to postRideCallBack, instead of an a function definition—ie. simply wrapping initialize() in function() { initialize(); } solved the problem.

Sometimes jQuery plugin is not loaded

I am using jQuery a lot, but sometimes I get stuck because my browser cannot see the jQuery library, or maybe loads the library after running the my JavaScript code.
Pseudo-code to explain my question:
<html>
<head>
I always load CSS here
I always load jquery here
</head>
<body>
<p class="link-style3"><span id="my_tag"><span>Bize Hemen Yazın</span></span></p>
<script>
$(function() {
$('#my_tag').click(function(e) {
alert('tesrt');
});
});
</script>
</body>
</html>
I always put my stuff in the order like below, but this doesn't work now. When I click the <span id="my_tag">, it doesn't do anything, and doesn't return any error.
what should I do?
Here is the entire code jsfiddle
Try to avoid some syntax errors like(suggestable only)
<script type="text/javascript">
$(function() {
$('#my_tag').click(function() {
alert('tesrt');
});
})
</script>
and put your code at the top after you load the js files
A few things you can do:
inspect your document (network pane in devtools) to see if everything
is loading correctly
Move your scripts to the bottom of the page
use $(document).ready(function(){ ... });

pjax still does full page reload

I have tried pjax examples in chrome and firefox, i took the sample code and placed it into my own app but it still does a full page reload. The AJAX request happens then the page moves on without updating the #main div
<html>
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery-1.8.0.min.js"></script>
<script src="http://localhost:8888/jul/js/jquery.pjax.js"></script>
<script type="text/javascript">
// $(document).ready(function(){
// $('a[data-pjax]').pjax();
// })
// $(document).ready(function(){
// $('a').pjax({
// container: '#main'
// })
$('document').ready(function(){
$('ul a').pjax('#main')
});
</script>
</head>
<body>
11:59:36 <div id="main">
<div class='loader' style='display:none'><img src='http://localhost:8888/jul/imgs/spinner.gif'></div><ul>
<li><a data-pjax='#main' href="/jul/stats/pjax_stats/index/">Index</a></li>
<li><a data-pjax='#main' href="/jul/stats/pjax_stats/total_posts/">total_posts</a></li>
<li><a data-pjax='#main' href="http://localhost:8888/jul/stats/pjax_stats/index">Index</a></li>
<li><a data-pjax='#main' href="http://localhost:8888/jul/stats/pjax_stats/total_posts">total_posts</a></li>
<li>total_graph</li>
<li>twitter_graph</li>
<li>facebook_graph</li>
</ul>index files
</div>
</body>
</html>
I have tried multiple methods to invoke pjax and maybe someone else could point out where i am going wrong? The Ajax/GET seems to return fine in firebug console- this is an example of my php that produces the pjax response
public function total_posts(){
// print_r($_SERVER);
if (!isset($_SERVER["X_PJAX"])) {
$this->load->view('stats/pjax_stats/header');
$this->load->view('stats/pjax_stats/links');
}else{
echo "pjax";//add in for debug
}
echo "total posts";
if (!isset($_SERVER['X-PJAX'])) {
$this->load->view('stats/pjax_stats/footer');
}
}
A bug?
There seems to be a bug in the latest version where the append variable to the end of the url where the ajax request is made to is _pjax=container instead of _pjax=true
Have you tried setting the timeout higher (default < 1s )?
For example:
$('document').ready(function(){
$('ul a').pjax({
container: '#main',
timeout: 5000 #ms
});
});
I thought I would add an answer since I got this problem today and this was the first Google result.
Before you go changing the timeout make sure your container exists. This may sound obvious but if your using a framework, say Yii2 (PHP), you will find that your container ID may no longer exist between refreshes, hence pjax is refreshing the whole page.
So as a note: make sure your container exists before you tweak with timeouts.

Categories

Resources