I am using a link from a page where I use Jquery Mobile to a page where I do not. For some reason the Jquery Mobile styling persist onto the page that I link to UNTIL I refresh the page, in which case the page loads correctly. I am pretty baffled at what might cause this issue, and I have tested it on both Firefox and Chrome. I have tried disabling caching all with no luck.
Does anyone have an idea what could cause this?
Thanks in advance.
hello_world.php:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
Create
</body>
</html>
create2.php:
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<form>
Title: <input type="text" name="title" value="">
submit: <input type="submit" value="submit">
</form>
</body>
</html>
refer this page to understand how jquerymobile's link works
put this attributes to anchor rel="external", data-ajax="false"
http://demos.jquerymobile.com/1.2.0/docs/pages/page-links.html
Links that point to other domains or that have rel="external",
data-ajax="false" or target attributes will not be loaded with Ajax
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 is
done automatically by jQuery Mobile.
Related
I am new to css & bootsrap. I developed a small website,that has six pages, I separated header and footer in two different php files in order to make life easy. Then I call header & footer in the top and bottom of each page respectively. Based on my requirement I customize some elements design (override bootsrap design) in a separate css file called "custom.css". each time when I bring changes in that file I have to close and re open the text editor in order to see the changes. First I thought it was be due to text editor so I changed my text editor from "Sublime Text to Php Storm";however, the issue has not yet been solved.
below are code snippets of my project:
header.php
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>My Website</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/custom.css">
<script src="js/respond.js"></script>
</head>
footer.php
<!-- Footer -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-
KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd
/popper.min.js" integrity="sha384-
b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4"
crossorigin="anonymous">
</script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
I call the above files into my pages as below:
<? include ("header.php")?>
<body>
<div class="container">
.
.
.
.
</div> <!-- end container -->
<?include ("footer.php");?>
But if I do not separate header and footer, and write them in one page I can see changes immediately, I don't have to close and re open my text editor in order to see changes.
Could you please help me
As determined in the comments, it's a problem with your browser cache.
You either
need to refresh the page with CTRL+F5 (but this depends on your OS and browser) or
you instruct your local server to forbid browser caching in your development environment (don't do this on production!).
To prevent browser caching, instruct your webserver to send the appropriate headers. There is a nice answer here: How to control web page caching, across all browsers?
You'll need to know how to configure your webserver - I don't know OpenServer.
Note that it is not enough to add the headers in your PHP script because you need the headers to be sent with the static CSS file.
Below code works perfectly
<?php include_once('header.php');?>
<body>
:
:
:
some code
<?php include_once('footer.php');?>
I have made a simple HTML Polymer login page:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport"
content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<script src="./components/webcomponentsjs/webcomponents.js">
</script>
*All the import*
*All the style*
</head>
<body unresolved>
<paper-shadow class="card" z="2">Login ECG Quizz
<paper-input-decorator label="Mail">
<input id="Mail" is="core-input" name="Mail"/>
</paper-input-decorator>
<paper-input-decorator label="Mots de passe">
<input id="password" is="core-input" name="j_password" type="password"/>
</paper-input-decorator>
<paper-button raised id="register" class="register">S'enregistrer</paper-button>
<paper-fab mini icon="done" class="button" title="done"></paper-fab>
</paper-shadow>
<script>
</script>
</body>
</html
I've no idea how to send the data and check the data with a simple php script...?
I've read the documentation of core-ajax, but I don't understand it very well...
What is the best practice to make this login without refreshing pages? Can you help me and if possible show me a little example?
I know how to make a simple login page with PHP. But I've no idea of the best practices with Polymer.
you can look at my project completely made with polymer, it's in github and here's the URL https://github.com/josestrk/PersonalQR
in the page
https://github.com/josestrk/PersonalQR/blob/master/pages/login-page.html
as you can see i have user_field and password_field and they have some event listeners that onblur or on keydow do some checks, i hope it will be usefull your you ;)
in any case i think you should componentize a little bit more your app, if you read the page and u stilll have no clue comment here and i'll try to make you a little jsbin
I have a php-file called loginscreen.php. For now it contains two JqueryMobile pages and a form on the first page to login. The login process is working just fine. The whole thing is hosted with xampp (Version: 5.6.3-0) on my Mac.
When I change the file extension of my loginscreen.php file to .html (so --> loginscreen.html) and open it in the htdocs folder in finder, the loginscreen page opens just fine in Safari in correct jquery mobile style after my custom theme, the login process works and gets me to my second page.
However, if I access the loginscreen.php in my browser with localhost/loginscreen.php the file renders wrongly. I get double buttons (usual html button within jQuery button). Double input fields (same as buttons). My second page is being displayed as well and when login in I get a page load error!
What's my problem here? Since it works when opening the file as an html via finder I suppose the problem is my xampp hosting. What could the problem be so that my files don't render correctly when hosted via xampp?
My code (The loginscreen.php file)(There's also a javascript and another php file being responsible for the login via ajax and php to access my database (also hosted with xampp) everything working properly when being opened via finder as html but not when accessed through browser as php)
<!doctype html>
<html><head>
<title>Prototyplogin</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- <meta name="viewport" content="initial-scale=1, maximum-scale=1"> -->
<link rel="stylesheet" href="themes/mensa1.min.css" />
<link rel="stylesheet" href="themes/jquery.mobile.icons.min.css" />
<link rel="stylesheet" href="jquery/jquery.mobile.structure-1.4.5.min.css" />
<link rel="stylesheet" type="text/css" href="loginscreen.css" />
<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="jquery.mobile-1.4.5.js"></script>
<script type="text/javascript" src="loginscreen.js"></script>
</head>
<body>
<div data-role="page" data-theme="c" id="loginscreen">
<div data-role="main" class="ui-content">
<br />
<div id="titel">
<p>Logo</p>
</div>
<br />
<form action="test.php" method="post" id="loginformular">
<label for="username">Benutzername:</label>
<input type="text" name="username" id="username">
<br/>
<label for="password">Passwort:</label>
<input type="password" name="password" id="password">
<br/>
<input type="button" value="Anmelden" id="submit" data-role="button">
</form>
<div id="notificationdiv"><h3 id="notification"></h3></div>
</div>
</div>
<div data-role="page" id="firstpage">
<div data-role="header">
</div>
<div data-role="main" class="ui-content">
<h1>Secondpage</h1>
</div>
<div data-role="footer">
</div>
</div>
</body>
</html>
Searched the whole internet for this issue, would be awesome to receive some help! :-)
Thanks for your help in advance! :-)
I figured out the problem myself. The problem didn't have anything to do with my XAMPP installation. I figured out the two actual problems:
My PHP file didn't have the header('Content-Type: text/html; charset=utf-8'); and there for I ran into errors and misbehavior of my code, because my index.php file was set to utf-8 with a meta tag, but without the header('Content-Type') my PHP code wasn't.
My Jquery-Mobile CSS wasn't wrongly imported. I only imported the Jquery-Mobile-Strucutre.css after my theme instead of the normal Jquery-Mobile.css. This was responsible for the double renderings and wrong displays as well as for the wrong page display behavior, because some crucial page elements are missing when not importing the standard Jquery-Mobile.css.
Hope this helps some other people running into these issues, took me quite a while to figure out the encoding issue with utf-8.
I use jQuery mobile to make a mobile form and then submit it.
On the main page I import the jQuery libraries.
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<title>Waiter Menu</title>
<link rel="stylesheet" href="js1.0/jquery.mobile-1.0.min.css" />
<script type="text/javascript" src="js1.0/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="js1.0/jquery.mobile-1.0.min.js"></script>
</head>
When submit the form from the first page and linked to the second, the libraries have pre-import and I don't want that.
Because at the second page I want to use custom JavaScript.
Is there any way not to stop jQuery at linked file?
Thanks in advance!!
---edit----
I found the solution here: How To Disable Ajax In jQuery Mobile Before Page Load?
i put this into form header
<script type="text/javascript">
$(document).bind("mobileinit", function () {
$.mobile.ajaxEnabled = false;
});
</script>
and I set new header at second file!
I have a html page like this:
<div>
some html tags here
</div>
<script> some javascript for rendering calender</script>
<link> some css </link>
I have a calender in this html page which is rendering by some javascript. I want to display this page content inside a php page.I have tried this:
include(location of html page);
I have include it in the middle of my php page but it render calender in the top of the php page which I do not want.
I also tried this:
echo file_get_contents(location of my html page);
It shows html page content in the right place where I added this line but calender is not rendering.
I need to render calender and html page content in right place. Any suggestion will be helpful for me.
hmm, a simple html page:
<html>
<head>
<title>Page title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" rel="stylesheet" href="your-style-file.css" media="all" />
<script type="text/javascript" src="your-javascript-file.js"></script>
</head>
<body>
<div id="div-tag">A div tag</div>
<script type="text/javascript" src="another-javascript-file.js"></script>
</body>
</html>
You can load external html file via javascript (or jquery load()). like this:
$('#div-tag').load('external-file.html');
Or via php, like this:
$external-html = file_get_contents('external-file.html');
print $external-html;
Check your javascript, maybe you must place it on page bottom after calender code.