I'm working on a little something that will be part of an e-commerce website for an assignment. You will probably look at it and think I should just do it with JS, but we're told to use hardly any JS, and instead favor PHP especially when querying the SQL tables.
I'm building something where when a user mouseOvers() any of the images in the catalogue, a general iFrame refreshes with information based on the image that has the current focus - it does this by querying the database using a variable upon being loaded. This is where I've used JS to submit the form that refreshes an iFrame and, as PHP is parsed server side, upon being refreshed the information can be loaded seemingly dynamically to the user.
It all seems to be working except from the fact the target iframe does not get updated, but instead the page is loaded in a new tab or window in my browser (Firefox). NOTE: This code is a rough draft!
<div class="contentpane">
<div class="image1" onMouseOver="jsFunction();" onMouseOut="jsFunction2();">
<img src="http://t0.gstatic.com/images?q=tbn:ANd9GcStRUHQMqvpCvdCyEwkO9DFxy0IY9fg1CP3uePBktHRMz8QznlQ" width=100 height=100/>
</div>
<div class="image2">
</div>
<div class="image3">
</div>
<script>
function jsFunction(){
document.forms['testform'].elements['i1'].value = "mouseOver";
document.forms["testform"].submit();
// force refresh on Mouse Over
/*var f = document.getElementById('testiframe');
f.contentWindow.location.reload(true);*/
}
function jsFunction2(){
document.forms['testform'].elements['i1'].value = "mouseOut";
document.forms["testform"].submit();
}
</script>
<iframe src="iframetest.php" id='testiframe' width="200" height="200">
<!-- using this roundabout way with iframes so that all interaction with SQL is via PHP and not JS-->
</iframe>
<!-- hidden form that has a target of the iframe, submitted by the js functions-->
<form id="testform" method="GET" target="testiframe" action="iframetest.php" >
<input type="hidden" id="i1" name="i1" value="hey"> <!-- retrieved in php file by $_GET-->
</form>
And the code for iframetest.php is:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="style.css" />
<title>Home</title>
</head>
<body>
Dynamic content, will be pulled from SQL via PHP <br/> <br/>
<?php
if(isset($_GET)){
echo $_GET["i1"];
}
?>
Thanks for your help guys!
This task is screaming for ajax from miles away , but anyway here it goes:
The content is getting displayed in a new page/tab is becouse you didn't specified the iframe name so you're code should look like this :
<iframe src="iframetest.php" name="testiframe" width="200" height="200">
<!-- using this roundabout way with iframes so that all interaction with SQL is via PHP and not JS-->
</iframe>
<!-- hidden form that has a target of the iframe, submitted by the js functions-->
<form id="testform" method="GET" target="testiframe" action="iframetest.php" >
<input type="hidden" id="i1" name="i1" value="hey"> <!-- retrieved in php file by $_GET-->
</form>
p.s. notice the change in on the iframe tag from id='testiframe' into name="testiframe"
Related
I am learning about XSS .However , most of the things that I see online are more theory and I just wanted to see it in action . So I have a form like below :
<?php
$input_xss=$_POST['input_xss'];
?>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>The HTML5 Herald</title>
<meta name="description" content="The HTML5 Herald">
<meta name="author" content="SitePoint">
<link rel="stylesheet" href="css/styles.css?v=1.0">
</head>
<body>
<form action ="." method="POST">
<label for ="input_xss">Enter Text Here </label>
<input type="text" id="input_xss" name="input_xss" ><br/>
<?php echo $input_xss;?>
<input type="submit" value="SUBMIT">
</form>
</body>
</html>
I am not intentionally sanitizing the input to see how XSS actually work . So , if I input something like
<b> This is bold </b>
I see the output to be in bold and thus input to be not escaped . However , if I enter something like
<script>alert('hi');</script>
I do not see the Javascript alert window all though I see <script>alert("hi") ; </script> when I see the source code in the browser . Could somebody tell me why the JS alert window doesnt pop up ?
Such trivial xss is sometimes prevented by the browser. Chrome is I think a little better at this than others.
Your example is easy for the browser, because javascript from a page parameter gets echoed back in the page body so it just won't be run. You should get a console log message about it if I remember correctly.
Note that only a small number of XSS attacks will be prevented by this, only the trivial ones.
You can disable this feature with an X-XSS-Protection: 0 response header, but you should only do so for learning purposes.
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 testing send and receive data to php file with jQuery and I have an issue with IE(Im using IE9 but I checked with IE8 and IE7)
when I click in on of my div I send to the server an "ID" and the PHP file return the answer back, its work and the jQuery is showing the result in other Div and in alert msg.
The issue start when i change the code in the received php file, if I click again in one of my divs, the jQuery showing the same msg even I change the code and the replay msg is different now.
This problem solved when I close and reopen the IE.
This issue doesn't happen with firefox and chrome, does anyone have any idea ?
html file:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('.user').click(function(){
var id_value = $(this).data('friendid');
$.get('test1.php', {id: id_value}, function(data) {
$('#show').html(data);
alert(data);
});
})
})
</script>
</head>
<body>
<div class="user" data-friendid="1">
<img src='webimgs/nopf.jpg' alt="test" />
<h4> fullname</h4>
<br />
</div>
<div class="user" data-friendid="2">
<img src='webimgs/nopf.jpg' alt="test2"/>
<h4> fullname</h4>
<br />
</div>
<div id="show" style="color:red">
</div>
</body>
</html>
and the PHP file:
<?php
if ($_GET["id"]==1) { echo "you choose number is " . $_GET["id"].", thanks." ; }
?>
Thank to "Boaz" I use $.ajaxSetup({cache: false}) and its fix the issue
jQuery .get method can be cached depending on browser setup. If you use the .post method it will prevent caching of data on the browser side.
Referenced from http://www.sitepoint.com/key-differences-post/
Characteristics of GET:
Use GET for safe actions and POST for unsafe actions.
GET requests can be cached
GET requests can remain in the browser history
GET requests can be bookmarked
GET requests can be distributed & shared
GET requests can be hacked
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.
I newly tried to use TinyMCE in my website but the problem was that by very simple implementation of it in very basic page mentioned in the TinyMCE website I got unexpected result. With the following code the browser only display the large blank area with only a save button.
<!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" dir="ltr">
<head>
<title>TinyMCE Test</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<!-- OF COURSE YOU NEED TO ADAPT NEXT LINE TO YOUR tiny_mce.js PATH -->
<script type="text/javascript" src="../jscripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
tinyMCE.init({
mode : "textareas"
});
</script>
</head>
<body>
<!-- OF COURSE YOU NEED TO ADAPT ACTION TO WHAT PAGE YOU WANT TO LOAD WHEN HITTING
"SAVE" -->
<form method="post" action="show.php">
<p>
<textarea name="content" cols="50" rows="15">This is some content that will
be editable with TinyMCE.</textarea>
<input type="submit" value="Save" />
</p>
</form>
</body>
</html>
Could anyone help me what the problem is with the code and the page showed in browser. I can say that I got the same result with different browsers.
Please put all tiny mce library files
it will work when all files are there.
please download latest tiny mce here
http://www.tinymce.com/tryit/full.php