jQuery mobile + php post problems - javascript

Dears I've got a very strange problem with jQuery Mobile and PHP, I need do something very simple, I've a form with two inputs values (name and pass), and the form is submitted to "questions.php" but when I print the post (print_r($_POST)) this is empty, but if I erase some script of jQuery mobile, the post come with the information that I need and I don't know why it Doesn't work with the 3 scripts.
inicio.php
<?php include("header.php");?>
<?php include("conexion.php");?>
<?php
$query = "select * from usuario, categoria where usuario.id_categoria = categoria.categoria_id";
$result = $conn->query($query);
?>
<body>
<!-- Pagina Inicio (login) -->
<div data-role="page" id="home">
<div data-role="main" class="ui-content">
<div id="inicio">
<div id="logo"><img src="images/logo.png" alt="logo" width="100%" height="" /></div>
<form method="post" action="preguntas.php" data-ajax="false">
<label for="user">Selecciona tu usuario Pop Up Info</label>
<!-- Pop Up Usuario-->
<div data-role="popup" id="usuario">
Close
<p>Seleciona tu nombre e ingresa tu </p>
<p>contraseña para registrar tu puntaje</p>
</div>
<!-- FIN Pop Up Usuario-->
<select name="user" id="user">
<?php while($row = $result->fetch_assoc()){ ?>
<optgroup label="<?=$row['categoria']?>">
<option value="<?=$row['id']?>"><?=$row['nombre']?> <?=$row['apellido']?></option>
</optgroup>
<?php }?>
</select>
<br><br>
<label for="pswd">Ingresa tu contraseña</label>
<input type="password" name="passw" id="pswd" data-clear-btn="true">
<button type="submit" class="ui-btn ui-icon-home ui-btn-icon-left" id="home" data-transition="slide" value="Ingresar">Ingresar</button>
</form>
</div>
</div>
<div data-role="footer" style="text-align:center; background: transparent; border: 0;" data-position="fixed">
<div data-role="controlgroup" data-type="horizontal" style="margin:0">
Juego
Ranking
Videos
</div>
</div>
</div>
questions.php
<?php
include "conexion.php";
$id = $_POST['user'];
$query = "SELECT * FROM categoria, preguntas,usuario where usuario.id_categoria = categoria.categoria_id and categoria.categoria_id = preguntas.id_categoria and usuario.id = '$id' order by rand()";
$result = $conn->query($query);
?>
<!DOCTYPE html>
<html lang="es">
<head>
<title>Sky Icargo - El Juego</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="mobile/addtohomescreen.css">
<script src="//use.typekit.net/eev7vgf.js"></script>
<script>try{Typekit.load();}catch(e){}</script>
<script src="mobile/addtohomescreen.js"></script>
<script>
addToHomescreen();
</script>
<meta name="apple-mobile-web-app-capable" content="yes" />
<link rel="apple-touch-icon" href="images/custom_icon.png">
<meta name="apple-mobile-web-app-title" content="Sky iCargo">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
</head>
<body>
<div data-role="page" id="pagetwo">
<div data-role="header">
<div data-role="header">
Home
<h1 id="loguito"><img src="images/loguito.png" alt="logo" width="100%" height="" /></h1>
</div>
</div>
<div data-role="main" class="ui-content">
<?php while($row = $result->fetch_assoc()){ ?>
<form method="post" action="puntaje">
<div>
<?php echo $row['pregunta'];?>
<?php }?>
</div>
</form>
</div>
<div data-role="footer" style="text-align:center;">
<div data-role="controlgroup" data-type="horizontal">
Juego
Ranking
Videos
</div>
</div>
</div>
if I erase <script src="mobile/jquery.mobile-1.4.5.min.js"></script> in questions.php or another of the three works, but if I leave the three doesn't work, If someone can help me please.

Related

Return page issue when click back button in Chrome browser

I am making a portal of games where different games are showing on index page.
There are two procedures of playing games:
When user opens the index page and clicks on any game, if he is not logged-in already, then login form is showing on play.php; when user logs in then game will start
When user opens the index page and if he/she is already logged-in then login form will not appear. He can directly play a game.
Issue is that when a game is running on play.php, after playing user clicks back button in browser to return to the index page. But browser is showing play.php first and user has to click back button again to see index.php
Is there any way when click on back button then directly show index.php not show play.php again
index.php
<?php
$i=0;
$Res_games=mysqli_query($con, "SELECT * from tbl_games where
category_id=".$Row_Cat['id']);
while($Row_games = mysqli_fetch_array($Res_games)){
$img = $Row_games['icon_large'];
$game_url = $Row_games['url'];
$game_name = $Row_games['title'];
$formid=$Row_Cat['prefix'].$i;
?>
<div class="productCarousel-slide">
<article class="card ">
<figure class="card-figure">
<form id="<?php echo $formid; ?>" method="post" action="play.php">
<input type="hidden" name="url" value="<?php echo $game_url; ?>">
</form>
<a href="#" onclick="document.forms['<?php echo $formid; ?>'].submit();" title="<?php echo $game_name1; ?>">
<img class="card-image" src="<?php echo $img; ?>" alt="<?php echo $game_name;?>" title="<?php echo $game_name;?>">
</a>
<figcaption class="card-figcaption">
<div class="card-figcaption-body">
<div class="card-buttons">
</div>
<div class="card-buttons card-buttons--alt">
</div>
</div>
</figcaption>
</figure>
<div class="card-body">
<h4 class="card-title" style="text-align: center !important;">
<?php echo $game_name;?>
</h4>
</div>
</article>
</div>
<?php
$i++;
}
?>
Play.php
<?php
include('assets/db_connect.php');
$url1 = urlencode($_REQUEST['url']);
header("Cache-Control: no cache");
session_cache_limiter("private_no_expire");
if(isset($_SESSION['loginid'])){
?>
<html>
<head>
<style>
.resp-iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}}
</style>
</head>
<body>
<div class="resp-container">
<iframe class="resp-iframe" src="page1.php?url=<?php echo $url1;?>" gesture="media" allow="encrypted-media" allowfullscreen></iframe>
</div>
</body>
</html>
<?php } else { ?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="assets/images/blue_logo.ico" type="image/x-icon" />
<link rel="stylesheet" type="text/css" href="assets/vendor/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="assets/fonts/font-awesome-4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="assets/fonts/iconic/css/material-design-iconic-font.min.css">
<link rel="stylesheet" type="text/css" href="assets/vendor/animate/animate.css">
<link rel="stylesheet" type="text/css" href="assets/vendor/css-hamburgers/hamburgers.min.css">
<link rel="stylesheet" type="text/css" href="assets/vendor/animsition/css/animsition.min.css">
<link rel="stylesheet" type="text/css" href="assets/vendor/select2/select2.min.css">
<link rel="stylesheet" type="text/css" href="assets/vendor/daterangepicker/daterangepicker.css">
<link rel="stylesheet" type="text/css" href="assets/css/util.css">
<link rel="stylesheet" type="text/css" href="assets/css/main.css">
</head>
<body>
<?php
if($_SESSION['loginid']!='' && !isset($_REQUEST['login'])){ ?>
<script>location.replace("index.php");</script>
<?php
}
if(isset($_POST['login'])){
$msisdn = $_REQUEST['msisdn'];
//Check Mobile No.
$chk_Zero= substr($msisdn, 0, 1);
$chk_92= substr($msisdn, 0, 3);
if ($chk_Zero==0){
$msisdn = substr($msisdn, 1);
$msisdn = '92'.$msisdn;
}
if($chk_92=='923'){
$msisdn = $msisdn;
}
$cdate = date("Y-m-d H:i:s");
$rows=0;
$SQL1="SELECT * FROM tbl_useraccount where msisdn='$msisdn' and status=1";
$result = mysqli_query($con,$SQL1);
$GetRows=mysqli_fetch_array($result);
if($GetRows['msisdn']==$msisdn)
{
$ID=$GetRows['id'];
//Store OTP
/* $otp= rand(1000,9999);
$OTP_Insert=mysqli_query($con,"Update tbl_usersotp set otp='$otp', modify_date='$cdate' where userid='$ID' and msisdn = '$msisdn' and sms_status=1");
$Message="Dear User,\n\nYour Verification Code is $otp. \n\nTelenor Games";
file_get_contents("http://115.186.146.246:13013/cgi-bin/sendsms?username=tester&password=foobar&to=".$msisdn."&text=".urlencode($Message));
*/
$_SESSION['loginid']=$ID;
$_SESSION['msisdn']=$msisdn;
//Login Attempt Information
$userid=$ID;
$localIP = getHostByName(getHostName());
$server_ip=$_SERVER['REMOTE_ADDR'];
$session_id = session_id(); $_SESSION['session_id'] = $session_id;
$CInsert=mysqli_query($con,"INSERT INTO tbl_login_attempt (userid, date_time, local_ip, server_ip, login_status, session_id) VALUES ('$userid', '$cdate', '$localIP', '$server_ip', '1', '$session_id')");
if(isset($_REQUEST['game_url'])){
?>
<form id="frm_url1" action="play.php" method="post">
<input type="hidden" name="url" value="<?php echo $_REQUEST['game_url'];?>" />
</form>
<script type="text/javascript">
document.getElementById("frm_url1").submit();
</script>
<?php } ?>
<?php }else{$message = "<font color='#bb0000'>Invalid Mobile Number. Please re-enter the details and login again.</font>";}
}
?>
<div class="limiter">
<div class="container-login100" style="background-color:#000000">
<!-- background-image: url('assets/images/bg-01.jpg'); -->
<div class="wrap-login100 p-l-55 p-r-55 p-t-65 p-b-54">
<form class="login100-form validate-form" action="play.php" method="post" enctype="multipart/form-data">
<?php echo $message; ?>
<input type="hidden" name="game_url" value="<?php echo urldecode($url1);?>" />
<span class="login100-form-title p-b-49">
<img class="logo-responsive" src="assets/images/logo-white.png"/>Login
</span>
<div class="wrap-input100 validate-input m-b-23" data-validate = "Mobile Number is required">
<span class="label-input100">Mobile Number</span>
<input class="input100 allownumericwithoutdecimal" type="text" name="msisdn" placeholder="03XX1234567">
<span class="focus-input100" data-symbol=""></span>
</div>
<div class="container-login100-form-btn">
<div class="wrap-login100-form-btn">
<div class="login100-form-bgbtn"></div>
<button class="login100-form-btn" type="submit" name="login">
Login
</button>
</div>
</div>
<br><br><br>
<!--<div class="txt1 text-center p-t-54 p-b-20">
<span>
Or Login Using
</span>
</div>
<div class="flex-c-m">
<a href="#" class="login100-social-item bg1">
<i class="fa fa-facebook"></i>
</a>
</div>-->
<div class="flex-col-c p-t-155">
<span class="txt1 p-b-17">
Not registered?
</span>
<a href="register.php" class="txt2">
Register
</a>
</div>
</form>
</div>
</div>
</div>
<div id="dropDownSelect1"></div>
<script src="assets/vendor/jquery/jquery-3.2.1.min.js"></script>
<script src="assets/vendor/animsition/js/animsition.min.js"></script>
<script src="assets/vendor/bootstrap/js/popper.js"></script>
<script src="assets/vendor/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/vendor/select2/select2.min.js"></script>
<script src="assets/vendor/daterangepicker/moment.min.js"></script>
<script src="assets/vendor/daterangepicker/daterangepicker.js"></script>
<script src="assets/vendor/countdowntime/countdowntime.js"></script>
<script src="assets/js/main.js"></script>
<script>
$(".allownumericwithoutdecimal").on("keypress keyup blur",function (event) {
$(this).val($(this).val().replace(/[^\d].+/, ""));
if ((event.which < 48 || event.which > 57)) {
event.preventDefault();
}
});
</script>
</body>
</html>

How do have my page fill the username and password on an external site?

I am trying to make an HTML page, that when users access, it will take them to a 3rd party external site (I have no control over), and fill in the username and password fields, and log them in.
This is the source of the external site, which I got from my browser.
<!DOCTYPE html>
<html><head>
<title>Omitted | Login</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript">
var areActiveModsSelected = false;
var areInactiveModsSelected = false;
function SetActiveSelection()
{
var checkboxes = document.ActiveMods.getElementsByClassName("ModSelection");
areActiveModsSelected = !areActiveModsSelected;
SetSelection(checkboxes, areActiveModsSelected);
}
function SetInactiveSelection()
{
var checkboxes = document.InactiveMods.getElementsByClassName("ModSelection");
areInactiveModsSelected = !areInactiveModsSelected;
SetSelection(checkboxes, areInactiveModsSelected);
}
function SetSelection(checkboxes, isSelected)
{
for(var i=0, n=checkboxes.length;i<n;i++)
{
checkboxes[i].checked = isSelected;
}
}
function checkSavegame()
{
var e = document.getElementById("savegame");
if (e != null) {
var savegame = e.options[e.selectedIndex].text;
var isEmpty = isEmptySavegame(savegame);
document.getElementById("mapSelector").disabled = !isEmpty;
document.getElementById("difficultySelector").disabled = !isEmpty;
}
}
function isEmptySavegame(value)
{
var ret = value.match(/SAVEGAME \d\d* - Empty/g) || value.match(/SPIELSTAND \d\d* - Leer/g) || value.match(/SAUVEGARDE \d\d* - Vide/g);
return ret != null;
}
window.onload = function()
{
checkSavegame();
}
</script>
<link rel="stylesheet" type="text/css" href="css/main.css" />
<link rel="stylesheet" type="text/css" href="css/monitor.css" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<script type="text/javascript" src="js/all.js"></script>
</head>
<body>
<div class="white-bg clearfix">
<header class="main-header" role="banner" data-module="sticky">
<div class="header-bar clearfix"> <div class = "row column"> <div class = "top-bar-right"> <ul class = "menu float-left"><li><a target="_newTwitter" href="https://twitter.com/url"><span class="icon icon-twitter"></span></a></li><li><a target="_newFacebook" href="https://www.facebook.com/giants.farming.simulator"><span class="icon icon-facebook"></span></a></li><li><a target="_newYoutube" href="http://www.youtube.com/user/giantssoftware"><span class="icon icon-youtube"></span></a></li><li><a target="_newGoogleolus" href="https://plus.google.com/109211762279175256996"><span class="icon icon-google"></span></a></li> </ul>
<ul class="dropdown menu float-right"><li class="is-dropdown-submenu-parent is-down-arrow menu-flags"><img src="img/icons/flag-en.png" alt="lang"><ul class="menu submenu is-dropdown-submenu first-sub vertical"><li><img style="border:1px solid #000;" src="img/icons/flag-en.png" alt="English"><span class="country">English</span> <span>(en)</span></li><li><img style="border:1px solid #000;" src="img/icons/flag-de.png" alt="Deutsch"><span class="country">Deutsch</span> <span>(de)</span></li><li><img style="border:1px solid #000;" src="img/icons/flag-fr.png" alt="Francais"><span class="country">Francais</span> <span>(fr)</span></li></ul></li></ul> </div>
</div>
</div>
<div class="top-bar"> <div class="row column"> <div class="top-bar-left"> <img src="img/logo.png"> </div> <div class="top-bar-right"> <ul class="menu float-left"> <li><span>HOME</span></li>
<li><span>SAVEGAMES</span></li>
<li><span>MODS</span></li>
<li><span>JOURNAL</span></li>
<li><div class="status-indicator online"><span>ONLINE</span></div></li></ul></div></div></div></header><section class="content-wrap"><div class="row"> <div class="medium-8 columns">
<img src="template/gsfs.png"><br/><br/><h2>Login to server</h2>
<p>Please enter your login credentials</p>
<div class="row column">
<form name="input" action="index.html?lang=en" method="POST"><div class="table2"><div class="row column table-even"><div class="medium-3 columns column-label">Username</div><div class="medium-9 columns"><input type="text" name="username" value=""></div></div><div class="row column table-odd"><div class="medium-3 columns column-label">Password</div><div class="medium-9 columns"><input type="password" name="password" value=""></div></div><div class="row column table-even text-right">
<input class="button button-form-submit" name="login" type="submit" value="Login"></div></div></form><br />
<h2>Dedicated Server Mobile App (Free)</h2><div><a class="itunesbadge" href="https://itunes.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=1135922781&mt=8" style="display:inline-block;overflow:hidden;background:url(https://linkmaker.itunes.apple.com/images/badges/en-us/badge_appstore-lrg.svg) no-repeat;width:135px;height:40px;background-position: center;"></a><a class="googleplaybadge" href="https://play.google.com/store/apps/details?id=com.giantssoftware.fs17_dedi_app" style="margin-left: 5px; display:inline-block;overflow:hidden;background:url(https://play.google.com/intl/en_us/badges/images/apps/en-play-badge-border.png) no-repeat;width:141px;height:40px;background-size: cover;background-position-x: -4px;background-position-y: -3px;"></a></div></div>
</div>
<div class="medium-4 columns">
<div class="social-wrapper">
<div class="social-header clearfix">
<div class="title-wrap clearfix" style="line-height: 62px;">
<i class="icon icon-twitter"></i><span>Twitter</span>
</div>
Follow
</div>
<!-- Load from cache: ../cached/fs17_dedi_twitter_cache_farmingsim_4.json-->
<div class="social-news-block">
<p>RT hi: Come and meet us at E3 at booth West Hall #4512 to learn more about Farming Simulator 19, the next game in the successf…</p>
<span class="post-date">about 1 hour ago</span>
</div>
<div class="social-news-block">
<p>Are you are bale stacking champion? Are you at #blank ? Then show us your skills. The… <a target="_blank" href="blank">nothing</a></p>
<span class="post-date">4 days ago</span>
</div>
<div class="social-news-block">
<span class="post-date">11 days ago</span>
</div>
<div class="social-news-block">
<p>RT #url: We are glad to announce our plans for further expansion by moving to bigger office spaces for our two existing studios…</p>
<span class="post-date">12 days ago</span>
</div>
</div>
</div>
</div>
</section>
<div class="partners clearfix text-center"> <div class="row"> <div class="columns">
<img style="vertical-align:text-top;" src="template/image_11.gif" /> </div> </div> </div> <footer class="main-footer clearfix">
<div class="row">
<div class="medium-8 columns">
<div class="copyright"><img class="copyright__logo" src="img/logos/footer-logo.png"><div>© 2016 GIANTS Software GmbH Alle Rechte vorbehalten.<br>Alle anderen Warenzeichen sind das Eigentum ihrer jeweiligen Besitzer.</div></div> </div>
<div class="medium-4 small-12 columns">
<ul class="menu menu-footer float-right">
<li>7.0.5.0</li>
</ul>
</div>
</div>
</footer>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/frontend.js"></script>
<script>$(document).foundation();</script>
</div>
</body>
</html>
I tried this, but it simply redirects to the page without filling any of the fields.
<DOCTYPE html>
<html>
<head>
<title>TEST</title>
<script>
window.onload = function() {
document.getElementById('loginForm').submit();
};
</script>
</head>
<body>
<form id="loginForm" action="URL of site" method="POST">
<input type=hidden name="username" value="moo"/>
<input type=hidden name="password" value="boo"/>
</form>
</body>
</html>
What is wrong with my code, and how can I achieve my goal?
Thank you.

can create a loading page with jquery and css3 or need something else?

can please any one tell me how i can create a loading on my site and let page to load all pictures and then start to showing the site ?
is it possible to write this codes with java query and css3 or i need to learn some thing else ?
Here is my HTML code . thanks every one .
<?php
/**
*#copyright Copyright (C) 2008 - 2009 . All rights reserved.
* #license
*/
// no direct access
defined( '_JEXEC' ) or die( 'Restricted access' );?>
<!DOCTYPE html xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl ;?>/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ;?>/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ;?>/templates/<?php echo $this->template ;?>/css/template.css" type="text/css" />
<?php if($this->direction == 'rtl') : ?>
<link href="<?php echo $this->baseurl ;?>/templates/<?php echo $this->template ;?>/css/template_rtl.css" rel="stylesheet" type="text/css" />
<?php endif; ?>
<link id="JTKLocalCss" href="css/template.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery(document).on("click","#menu-oc",function() {
jQuery("#menu-drop").slideToggle("slow");
});
jQuery(window).scroll(function () {
if (jQuery(this).scrollTop() > 0) {
jQuery("#header").addClass("fixed");
jQuery("#header").addClass("goblack");
} else {
jQuery("#header").removeClass("fixed");
jQuery("#header").removeClass("goblack");
}
});
jQuery("#introcenter").animate({width: "0"},600,function (){
jQuery(".intro").animate({height : "0"},600,function () {
jQuery("#main").animate({opacity : "1"},500);
});
});
});
</script>
<style>
</style>
</head>
<body>
<div id="main">
<div id="header">
<button id="menu-oc">HELLO</button>
</div>
<div id="menu-drop">
<div id="menu">
<jdoc:include type="modules" name="menu" style="html" />
</div>
</div>
<div id="index">
<div id="top">
<jdoc:include type="modules" name="top" style="html" />
</div>
<div id="top2">
<jdoc:include type="modules" name="top2" style="html" />
</div>
<div id="center">
<jdoc:include type="modules" name="center" style="html" />
</div>
<div id="contents">
<jdoc:include type="component" />
</div>
<div id="bottom">
<jdoc:include type="modules" name="bottom" style="html" />
</div>
<div id="bottom2">
<jdoc:include type="modules" name="bottom2" style="html" />
</div>
<div id="footer">
<jdoc:include type="modules" name="footer" style="html" />
</div>
</div>
</div>
<div id="introcont">
<div id="introtop" class="intro"></div>
<div id="introcenter"></div>
<div id="introdown" class="intro"></div>
</div>
</body>
</html>

Yes you can, just add a div or loading image just after body tag so it will be loaded first, then at the end of your html, or before body end tag, or much better on window.onload put javascript function to remove the image.
Here look at this tutorial: http://smallenvelop.com/display-loading-icon-page-loads-completely/

Dynamically added content on template don't respond to Javascript/AJAX/Jquery in CodeIgniter

This is my sample code for the template.
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>WebLAB</title>
<link rel="stylesheet" href="<?php echo base_url()?>assets/css/bootstrap.css" />
</head>
<body class="container">
<header class="panel-heading" role="navigation">
<a class="navbar-brand" href="<?php echo base_url(); ?>">WebLAB</a>
<nav>
<ul class="nav nav-tabs" role="tablist">
<li>Register</li>
<li>About this site</li>
</ul>
</nav>
</header>
<section class="container">
<!--- Dynamic content is loaded here!-->
<?php if(isset($content)) echo $content; ?>
</section>
<footer class="panel-footer text-center">
<span><small>All Rights Reserved | © <?php echo date('Y'); ?> Christ the King College-ICT Team</small></span>
</footer>
<script type="text/javascript" src="<?php echo base_url()?>assets/js/jQuery-1.10.2.js"></script>
<script type="text/javascript" src="<?php echo base_url()?>assets/js/bootstrap.js"></script>
</body>
</html>
This code below is the content I am LOADING to the code above (It's embedding the content dynamically). My problem is that the Javascript code I am trying to apply to an element doesn't respond. I have tried also adding the script on the main page above.
<script type="text/javascript">
$(document).ready(function(){
$('#jq').click(function(){
alert("Hi");
});
});
</script>
<section class="col-md-8">
<p>
<h2 id="jq">Register Your Account here to Login!</h2>
<p>
<article>
<p>
You can only access your account when the admin
approves your request for registration.
</p>
</article>
</section>
<section class="col-md-4">
<form method="post" class="regform" action="<?php echo base_url();?>portal/register" role="form">
<div class="form-group">
<label for="Username" id="sample">Username:</label>
<input type="Username" class="form-control" id="Username" name="username" placeholder="example#mail.com" required>
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" name="password" required>
</div>
<div class="form-group">
<label for="pwd">Retype-Password:</label>
<input type="password" class="form-control" id="pwd" name="repassword" required>
</div>
<button type="submit" class="btn btn-default">Register</button>
</form>
</section>
I am using this technique in CodeIgniter 3 controller.
public function registration() {
$data = null;
$data['content'] = $this->load->view('pages/registration', $data, true);
$this->load->view('template/temp_portal.php', $data);
}
Sorry for the messy code. Your help is much appreciated. This is just a sample code BTW.

Your problem is you are using jquery before loading the library. load your JS file including jquery library in your head tag. It will work i.e
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>WebLAB</title>
<link rel="stylesheet" href="<?php echo base_url()?>assets/css/bootstrap.css" />
<script type="text/javascript" src="<?php echo base_url()?>assets/js/jQuery-1.10.2.js"></script>
<script type="text/javascript" src="<?php echo base_url()?>assets/js/bootstrap.js"></script>
</head>
<body class="container">
<header class="panel-heading" role="navigation">
<a class="navbar-brand" href="<?php echo base_url(); ?>">WebLAB</a>
<nav>
<ul class="nav nav-tabs" role="tablist">
<li>Register</li>
<li>About this site</li>
</ul>
</nav>
</header>
<section class="container">
<!--- Dynamic content is loaded here!-->
<?php if(isset($content)) echo $content; ?>
</section>
<footer class="panel-footer text-center">
<span><small>All Rights Reserved | © <?php echo date('Y'); ?> Christ the King College-ICT Team</small></span>
</footer>
</body>
</html>
Try this and check your console what error showing now
Double check your jQuery library link is ok or not

Phonegap app with jquery mobile contact form not working

I was building hybrid app using jQuery mobile and Phonegap, but I am stuck with the contact form here. The code is located here:
http://jsfiddle.net/8cpdcfow/
At the jsfiddle the only difference is that send.php is given as send.php without url because it is located in the root folder. I was using code earlier like a webapp and it worked very well but I don't know why now it displays Message sent message but the message is not sent.
Here is the code hosted: http://radio-pendimi.com/mobile/v2/#dergomesazh
UPDATE 2:
Now online on the web the contact form works very well,but after I builded webapp for android using phonegap and installed on android device when I press the submit button to send the message it returns me the whole php code of the form instead of Message sent or Message failed message.
Below is screenshot:
http://i60.tinypic.com/abqya0.jpg
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width,
height=device-height, target-densitydpi=device-dpi" />
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<title>Radio Pendimi - online streaming</title>
<link rel="apple-touch-icon" href="images/AppIcon.png" />
<!-- CSS LIDHJET -->
<link rel="stylesheet" href="css/new_template.min.css" />
<link rel="stylesheet" href="css/jquery.mobile.icons.min.css" />
<link rel="stylesheet" href="css/jquery.mobile.structure-1.4.0-rc.1.min.css" />
<link rel="stylesheet" href="css/stili.css"/>
<!-- JS LIDHJET -->
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/jquery.mobile-1.4.0-rc.1.min.js"></script>
<script src="js/myscript.js"></script>
<script type="text/javascript" src="phonegap.js"></script>
</head>
<body>
<!-- Kanali 1 - homepage -->
<div data-role="page" id="home" data-theme="b" style="background:#242426" >
<!-- Header -->
<div data-role="header" data-id="ap_header" style="background-color:#fafafc;border-top:6px solid #2f4c73">
<h1 style="color:#444;text-shadow: none;font-family: Dosis;"> Radio Pendimi 24h Live </h1>
</div>
<!-- content -->
<div data-role="none">
<img src="images/pendimi-logo-white.png" style="width: 210px; margin-right:auto; margin-left:auto;display: block;padding-top: 30px;"/>
<p style="text-align:center;text-shadow:none; color:#fff; margin:0px; padding-top:16px; padding-left: 5px; padding-right: 5px;">Jeni duke ndëgjuar: <script type="text/javascript" src="http://www.digital-webstream.de/status.php?mode=title&id=3204"></script> <br><br>
<audio src="http://server2.digital-webstream.de:35505/;$type=mp3" id="player" autoplay></audio>
<div style="text-align:center">
<span onclick="document.getElementById('player').play()" class="btn_control"> PLAY</span>
<span onclick="document.getElementById('player').pause()" class="btn_control"> STOP</span>
<span onclick="document.getElementById('player').muted=!document.getElementById('player').muted" class="btn_control"> MUTE/UNMUTE</span>
</div>
</div>
<!-- footer -->
<div data-role="footer" data-position="fixed" data-id="ap_footer">
<!-- footer navbar -->
<div data-role="navbar" style="border-bottom:6px solid #2f4c73">
<ul>
<li>Kanali 1</li>
<li>Kanali 2</li>
<li>Donacion</li>
<li>Info</li>
</ul>
</div>
</div>
</div>
<!-- End Page -->
<!-- Informacione -->
<div data-role="page" id="info" data-theme="b" style="background:#242426" >
<!-- Header -->
<div data-role="header" data-id="ap_header" style="background-color:#fafafc;border-top:6px solid #2f4c73">
<h1 style="color:#444;text-shadow: none;font-family: Dosis;"> Info </h1>
</div>
<!-- content -->
<div data-role="none">
<img src="images/pendimi-logo-white.png" style="width: 210px; margin-right:auto; margin-left:auto;display: block;padding-top: 30px;">
<p align="center">
info#radio-pendimi.com <br>
http://radio-pendimi.com <br>
<span style="text-decoration: none; text-shadow:none; color: #fff; font-weight: 500; font-size: 15px; font-family: Dosis;">Programuar & Dizajnuar nga Afrim Azizi</span> <br>
<img src="images/find-us-on-facebook.png" style="width: 170px; padding: 5px;"/>
</p>
</div>
<!-- footer -->
<div data-role="footer" data-position="fixed" data-id="ap_footer">
<!-- footer navbar -->
<div data-role="navbar" style="border-bottom:6px solid #2f4c73">
<ul>
<li>Kanali 1</li>
<li>Kanali 2</li>
<li>Donacion</li>
<li>Info</li>
</ul>
</div>
</div>
</div>
<!-- End Page -->
<!-- Kanali 2 -->
<div data-role="page" id="kanali-2" data-theme="b" style="background:#242426" >
<!-- Header -->
<div data-role="header" data-id="ap_header" style="background-color:#fafafc;border-top:6px solid #2f4c73">
<h1 style="color:#444;text-shadow: none;font-family: Dosis;"> Kanali - 2 </h1>
</div>
<!-- content -->
<div data-role="none">
<img src="images/pendimi-logo-white.png" style="width: 210px; margin-right:auto; margin-left:auto;display: block;padding-top: 30px;"/>
<p style="text-align:center;text-shadow:none; color:#fff; margin:0px; padding-top:16px; padding-left: 5px;padding-right: 5px;">Jeni duke ndëgjuar: <script type="text/javascript" src="http://www.digital-webstream.de/status.php?mode=title&id=7399"></script> <br><br>
<audio src="http://server6.digital-webstream.de:8400/;$type=mp3" id="player-2"></audio>
<div style="text-align:center">
<span onclick="document.getElementById('player-2').play()" class="btn_control"> PLAY</span>
<span onclick="document.getElementById('player-2').pause()" class="btn_control"> STOP</span>
<span onclick="document.getElementById('player-2').muted=!document.getElementById('player-2').muted" class="btn_control"> MUTE/UNMUTE</span>
</div>
</div>
<!-- footer -->
<div data-role="footer" data-position="fixed" data-id="ap_footer">
<!-- footer navbar -->
<div data-role="navbar" style="border-bottom:6px solid #2f4c73">
<ul>
<li>Kanali 1</li>
<li>Kanali 2</li>
<li>Donacion</li>
<li>Info</li>
</ul>
</div>
</div>
</div>
<!-- End Page -->
<!-- Donacione - Kontribo edhe ti -->
<div data-role="page" id="donacion" data-theme="b" style="background:#242426" >
<!-- Header -->
<div data-role="header" data-id="ap_header" style="background-color:#fafafc;border-top:6px solid #2f4c73">
<h1 style="color:#444;text-shadow: none;font-family: Dosis;"> Info </h1>
</div>
<!-- content -->
<div data-role="none">
<p style="text-align:center; text-shadow:none; color:#fff;">
Vëllezër dhe motra,
Kjo Radio çdo ditë bëhet shkak për udhëzimin e dikujt dhe kthimin e tij në rrugën e xhenetit, mirëpo ajo nuk mund ta çojë mesazhin e saj në vend pa përkrahje financiare. Nëse ju jepni kontributin tuaj do të keni hise në sevapet që fitohen nga kjo punë. Pejgamberi, alejhi salatu ue selam, ka thënë: “Sadakaja e shuan zemërimin e Allahut ashtu sikur uji e shuan zjarrin” (Sahihu Tergib nr. 983).
Ju bëjmë thirrje që ta përkrahni këtë projekt madhështor, për mirësinë e të cilit jemi dëshmitarë të gjithë ne.
Keto jan pikat kryesore :<br>
– Mirëmbajtjen dhe rritjen e kapacitetit të serverëve.<br>
– Mirëmbajtjen materiale të studiove që kemi në disa vende, sidomos studion numër 2 – Prizren, e cila ka një orar më të zgjeruar dhe më të pasur,<br>
– Mirëmbajtjen e ueb-faqes dhe serverit të veçantë që ka ajo,<br>
– Marketingun e Radio Pendimit në përgjithësi (fllajera, pllakata, reklama nëpër medie, etj.).<br>
Allahu ju shpërbleftë!
<p style="text-align:center; text-shadow:none; color:#fff;">Mund të kontribuoni nëpërmjet llogarisë bankare:<br>
Emri: Radio Pendimi<br>
Emri i bankës: Volksbank Linz <br>
IBAN: AT744480042614830000<br>
Bic Swift Code: VBWEAT2WXXX
</p>
<br>
<!-- PayPal Form start -->
<div style="text-align:center">
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top"><input name="cmd" type="hidden" value="_s-xclick"> <input name="hosted_button_id" type="hidden" value="GRGWN8J9JDM6U"> <input alt="Jetzt einfach, schnell und sicher online bezahlen – mit PayPal." name="submit" src="https://www.paypalobjects.com/de_DE/AT/i/btn/btn_donateCC_LG.gif" type="image"> <img src="https://www.paypalobjects.com/de_DE/i/scr/pixel.gif" alt="" width="1" height="1" border="0"></form>
</div> <!-- PayPal form end -->
</p>
</div>
<!-- footer -->
<div data-role="footer" data-position="fixed" data-id="ap_footer">
<!-- footer navbar -->
<div data-role="navbar" style="border-bottom:6px solid #2f4c73">
<ul>
<li>Kanali 1</li>
<li>Kanali 2</li>
<li>Donacion</li>
<li>Info</li>
</ul>
</div>
</div>
</div>
<!-- End Page -->
<!-- Dergo Mesazh -->
<div data-role="page" id="dergomesazh" data-theme="b">
<!-- Header -->
<div data-role="header" data-position="fixed" style="background-color:#fafafc;border-top:6px solid #2f4c73">
<h1 style="color:#444;text-shadow:none">Dërgo Mesazh</h1>
</div>
<!-- content -->
<div data-role="content">
<form class="form" id="callAjaxForm">
<p class="name">
<input name="emri" type="text" class="validate[required,custom[onlyLetter],length[0,100]] feedback-input" placeholder="Emri" id="name" data-role="none" />
</p>
<p class="text">
<textarea name="comment" class="validate[required,length[6,30]] feedback-input" id="comment" placeholder="Mesazhi" data-role="none" ></textarea>
</p>
<div class="submit">
<button id="submit" type="submit" >DËRGO</button>
<button id="reset" type="reset" >PASTRO FUSHAT</button>
</div>
<h3 id="notification" align="center" style="font-color:green;"></h3>
</form>
</div>
<!-- footer -->
</div>
<!-- End Page -->
</body>
</html>
myscript.js
//DergoMesazh
function onSuccess(data, status)
{
data = $.trim(data);
$("#notification").text(data);
}
function onError(data, status)
{
// handle an error
}
$(document).ready(function() {
$("#submit").click(function(){
var formData = $("#callAjaxForm").serialize();
$.ajax({
type: "POST",
url: "send.php",
cache: false,
data: formData,
success: onSuccess,
error: onError
});
return false;
});
$("#reset").click(function() {
$('#callAjaxForm').trigger("reset");
$('#notification').text("");
});
});
Send.php code:
<?php
header('Access-Control-Allow-Origin: *');
$emri=$_POST['emri'];
$mesazhi=$_POST['comment'];
$IPAdresa = $_SERVER["REMOTE_ADDR"];
$browser="";
if(strpos(strtolower($_SERVER["HTTP_USER_AGENT"]),strtolower("MSIE"))){$browser="ie";}
else if(strpos(strtolower($_SERVER["HTTP_USER_AGENT"]),strtolower("Presto"))){$browser="opera";}
else if(strpos(strtolower($_SERVER["HTTP_USER_AGENT"]),strtolower("CHROME"))){$browser="chrome";}
else if(strpos(strtolower($_SERVER["HTTP_USER_AGENT"]),strtolower("SAFARI"))){$browser="safari";}
else if(strpos(strtolower($_SERVER["HTTP_USER_AGENT"]),strtolower("FIREFOX"))){$browser="firefox";}
else {$browser="other";}
$to = "afrim.a#msn.com";
$subject = "Rubrika DergoMesazh (mobile app)";
$message = " Emri: " . $emri . "\r\n Mesazhi: " . $mesazhi. "\r\n IP Adresa: " . $IPAdresa. "\r\n Browser: " . $browser;
$from = "radio-v2#test.com";
$headers = "From:" . $from . "\r\n";
$headers .= "Content-type: text/plain; charset=UTF-8" . "\r\n";
if(#mail($to,$subject,$message,$headers))
{
echo "Mesazhi juaj u dërgua me sukses";
}else{
echo "Gabim! Ju lutemi provoni përsëri.";
}
?>

Try using the above code in Phonegap using input type=button instead of input type=submit.
Also, double check if the required assets for Phonegap [Cordova.js,jquery and other JS] are loaded properly.
Also it would help, if you can post the entire code as it is bundled in Phonegap

Ok now I fixed the problem and I wanted to share the solution for others who have this issue.
The myscript.js from where is made ajax call to the PHP file (send.php),instead of declaring local php file you need to declare the url of the php file because while building the app with phonegap/cordova it doesn't execute the php file. Also you need to enable crossDomain:true,
Below is the fully functional code in jsfiddle:
http://jsfiddle.net/8cpdcfow/1/
Here is the send.php code:
<?php
header('Access-Control-Allow-Origin: *');
$emri=$_POST['emri'];
$mesazhi=$_POST['comment'];
$IPAdresa = $_SERVER["REMOTE_ADDR"];
$browser="";
if(strpos(strtolower($_SERVER["HTTP_USER_AGENT"]),strtolower("MSIE"))){$browser="ie";}
else if(strpos(strtolower($_SERVER["HTTP_USER_AGENT"]),strtolower("Presto"))){$browser="opera";}
else if(strpos(strtolower($_SERVER["HTTP_USER_AGENT"]),strtolower("CHROME"))){$browser="chrome";}
else if(strpos(strtolower($_SERVER["HTTP_USER_AGENT"]),strtolower("SAFARI"))){$browser="safari";}
else if(strpos(strtolower($_SERVER["HTTP_USER_AGENT"]),strtolower("FIREFOX"))){$browser="firefox";}
else {$browser="other";}
$to = "your-email#hotmail.com";
$subject = "Rubrika DergoMesazh (mobile app)";
$message = " Name: " . $emri . "\r\n Message: " . $mesazhi. "\r\n IP Adresa: " . $IPAdresa. "\r\n Browser: " . $browser;
//Maybe you need to add $from email into whitelist at your inbox because the messages may be classified to the junk/spam folder
$from = "no-reply#domain.com";
$headers = "From:" . $from . "\r\n";
$headers .= "Content-type: text/plain; charset=UTF-8" . "\r\n";
if ($emri == "" || $mesazhi == ""){
echo "Empty strings,the form is not filled";
} else {
if(#mail($to,$subject,$message,$headers))
{
echo "Message Sent successfully";
}else{
echo "Message Failed to sent.Try again";
}
}
?>

Categories