I've come across a strange problem with jQuery mobile - If i have an anchor link to the same page, then the javascript on the page is not run after clicking the link and returning to the same page.
For example (test.html):
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.1/jquery.mobile.structure-1.4.1.min.css" />
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<script type="text/javascript">
alert('hello');
</script>
</head>
<body>
<div style="height: 1000px">
test
</div>
</body>
</html>
... "hello" alert is shown the first time, but after clicking the "test" link (to go back to the same page), the alert doesn't happen.
If I remove the reference to jquery mobile js then it does work as expected, showing "hello".
Does anyone know what's going on here?
jQuery mobile loads internal links via AJAX.
Try changing your anchor to:
<a data-ajax="false" href="test.html?dosomething=1">test</a>
Documentation - Linking Pages:
Default link behavior: Ajax
To enable animated page transitions, all links that point to an external page (ex. products.html) will be loaded via Ajax. To do this unobtrusively, the framework parses the link's href to formulate an Ajax request (Hijax) and displays the loading spinner. All this happens automatically by jQuery Mobile.
If the Ajax request is successful, the new page content is added to the DOM, all mobile widgets are auto-initialized, then the new page is animated into view with a page transition.
Related
I am developing a website from scratch and I realized that instead of having the header (banner+horizontal navigation menu) code in each html page, it would be more efficient to have it in a separate HTML file and use the JS load function in every page's body, so I can modify the header in only one file to apply changes to the whole website instead of wasting time modifying it on every page.
problem is since I made that change using :
<script>
$("#header").load("header_eng.html");
</script>
in every page's body (where header_eng is an html file containing my header code), my website started to "blink" between each page. Now when I navigate the website, the banner image, for example, blinks/flickers between pages instead of just staying there.
I did not have this problem when my header code was in every page's code.
here is the example of the website with the header code in every page file :
https://cbrieuc.github.io/index.html
(only the two first pages are up for the first example so just spam the link "About Me" or "News" to check for blinking)
and here with the "load" function instead :
https://cbrieuc.github.io/index_eng.html
here is what the code looks like for a page using the "load function"
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<title>BRIEUC COUILLEROT</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="header"></div></br>
<div id=corps>
<pre>
test
</pre>
</div>
<!--loading header from header.html-->
<script>
$("#header").load("header_eng.html");
</script>
</body>
</html>
Any idea what occured?
by the way i'm quite new to web development!
It is because the javascript is being executed after page load. You need to include your header file using a server side language like php
I am trying to open an external url "https://stackoverflow.com/" on a new tab on opening a page in internet explorer. I have the code for it but when I try to open the page it gives me this dialog box screenshot below. Once I click on Allow Blocked Content then it opens my page in a new tab :
I do not want the user to make any changes to his Internet explorer settings. Is there any changes I can make my code open the "https://stackoverflow.com/" url without the above dialog box ?
<html>
<head>
<script>
function LoadF() {
window.open('https://stackoverflow.com/')
}
</script>
</head>
<body>
<body onload = "LoadF()">
<center><a target="_blank" href="https://stackoverflow.com/">Stack Overflow</a></center>
</body>
</html>
As a shameless copy-paster, It is my duty to notify you that this question was already answered.
To summarize, there are two major points to note:
This bar will only appear when running the page locally, and should not therefore appear when loading the page from a web server.
You can add a line at the top of your code to tell IE that the local file is safe: <!-- saved from url=(0014)about:internet -->
So I have a winforms(windows) application and it has a form that reloads a datagrid every 30secs, this form has a few other controls in it as well.
I am trying to convert this application to the web(ASP.NET MVC5) and I trying to figure out a way to do the reload portion of my application.
I have the page created and I have a button on the page that reloads the data on the table(partialview is returned). How can I make that partial view auto reload itself? Without using javascript or jquery?
You mentioned a div specifically, but I don't think that's possible. You could however use an iframe, maybe.
You could use a refresh header on a page embedded in an iframe.
So, we'll call the file that goes in the iframe refreshing_form.html and here's its structure:
<html>
<head>
<META http-equiv="refresh" content="5;URL=refreshing_form.html">
</head>
<body>
<!-- Your content here -->
</body>
</html>
And then in the main page, we have the iframe...
<iframe src="refreshing_form.html"></iframe>
The refreshing_form.html will reload itself in a loop forever. The containing page with the iframe will not reload (though the content of the iframe will). Poor man's ajax.
However, this seems like a lot of cludge to do something that javascript is really good at. Are you sure you can't use it?
In the examples offered by the official site
http://www.jacklmoore.com/colorbox/example2/
This website http://threadless.com opens in a popup window successfully.
I successfully implemented this example, but I couldn't load any other page.
For example
<link rel="stylesheet" href="colorbox.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="jquery.colorbox.js"></script>
<script>
$(document).ready(function(){
$(".iframe").colorbox({iframe:true, width:"80%", height:"80%"});
});
</script>
<body>
<p><a class='iframe' href="http://threadless.com">Outside Webpage (Iframe)</a></p>
</body>
This code works perfectly, but when I replace threadless.com with google.com, facebook.com, or any other website a blank popup appears. Could anyone help me please?
Thanks very much.
You could possibly create a simple page with a google search box and whatever else you need, then open that in the iFrame instead of google.com...
Do you want the results of the search to show in the iFrame or a new window though?
I created an index.html page that have 3 different tabs. With the function tabs() of jQuery UI I want to load an html page with Ajax. Every HTML page use jQuery library, so every page have this code:
<link type="text/css" href="css/redmond/jquery-ui-1.8.5.custom.css" rel="stylesheet" /> <script type="text/javascript" src="js/jquery-1.4.3.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.5.custom.min.js"></script>
If I click on a tab the page is loaded but the JavaScript function of the page doesn't work!
So can I load in a tab a new complete HTML page (HTML+JS)?
two possibilities:
1) if you need jquery-ui in each tab, it's better to load it when initalizing your tabs.
2) use following to load your javascript files:
$.getScript("js/jquery-ui-1.8.5.custom.min.js");
and for css:
$.get("css/redmond/jquery-ui-1.8.5.custom.css", function(css) {
$("head").append(""+css+"");
});
Edit: You never load a complete new html page with ajax tabs - you only load a code snippet which is included in your existing html page. Use Firebug for Mozilla Firefox to see what happens ;o)
Ok, the problem is to understand what the tabs do. With Ajax I can load some content in a tab.
If I declare a <div> for a tab, Ajax loads the content in that <div> so I can't load a new complete HTML page becouse the DOM after the load have two open <html><head> ecc.
So now I understand the function of the Ajax in the tab, and the load of complete HTML page is a big mistake!
Thanks Tobias.