I have this code on my index.php page:
require_once 'includes/settings.php';
require_once 'includes/data_functions.php';
if($_GET["section"] == '1') {
require_once 'includes/includes.php';
require_once 'pages/'.$_GET["id"].'.php';
exit();
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Integra | <?php echo $PageTitle; ?></title>
<meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
<?php require_once 'includes/includes.php'; ?>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body class="skin-black-light sidebar-mini sidebar-collapse">
and i use JQuery .load to load pages into a popup div, when loading the page it has the $_GET variable section = 1 so it runs the above code
here is the function that i use to .load pages:
function LoadModal(page, title) {
title = title || '';
$( "#modal_page" ).fadeIn("slow");
$( "#modal_title" ).html(title);
$("#modal_page_body").html('<h2 align="center">Loading...</h3><p align="center"><i class="fa fa-refresh fa-spin fa-5x"></i></p>'); //$('#LoadingDiv').show();
$("#modal_page_body").load(page, function(){
});
$("html, body").animate({ scrollTop: 0 }, "slow");
}
and then to call this function:
<i class="fa fa-plus"></i>
so the includes.php file is included in all pages.
this includes some jquery files which have some functions in.
when opening a page in the popup using jquery .load these specific jquery funtcions are not working at all however if i remove the $_GET var (section = 1) to open the page not in the jquery popup (.load) the functions are working fine
what could be causing these to stop working only in the jquery .load
Your URL (/section/page?seq=add) doesn't include section=1 in the query string, so $_GET['section'] is not set.
Related
I have a div tag with many anchor tags in it. On clicking a lick it should open a php page in another div tag of the same page.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<header>
<h2>Test</h2>
</header>
<div class="topnav" id="myTopnav">
page1
page2
page3
page4
</div>
<div id="content" >
</div>
<script>
$(function(){
$("#myTopnav a").click(function(e){
e.preventDefault(); //To prevent the default anchor tag behaviour
var url = this.href;
$("#content").load(url);
});
});
</script>
</body>
</html>
I have a nav bar and on clicking the links it should load a php page in content div. I tried the above code but it does not work.
The Reason is that its a local file at your system, you need to set up a webserver.
If the problem exist further then you can add "Cross Origin" headers to the called php files.
If it's not working for you, try the full context and see what the error message might be:
$( "#content" ).load( url, function( response, status, xhr ) {
if ( status == "error" ) {
window.alert(xhr.status + " " + xhr.statusText);
}
});
Here my index.php page structure:
<?php
session_start();
include("lang/".$_SESSION['lang'].".php");
?>
<!DOCTYPE html>
<html lang="en">
<head>
...
</head>
<body>
<a href="#" data-module="home">
<div id="content"></div>
</body>
<script src="jquery.js"></script>
<script src="script.js"></script>
</html>
I have a piece of js code to load the right clicked module.
$('a[data-module]').click(function(event) {
event.preventDefault();
var module = $(this).attr('data-module');
$('#content').load('modules/' + module + '.php');
});
My problem is:
On each module page, I use $_SESSION variables. But with .load() jQuery function, it don't works anymore.
Do you have a reason for that ?
Thanks.
Probably I'm misunderstanding something about Fancybox v1 but have the following minor issue. First I'm calling fancybox via clicking a link:
$(document).ready(function() {
$(".href").click(function() {
$.fancybox.open({
href : $(this).attr("data-id"),
type : 'iframe'
});
});
});
This loads a simple PHP/HTML page with JS, to be populated into the Fancybox window:
<!DOCTYPE html><html><head><title></title></head>
<body>
<?php
# this is the fancybox content
echo "<script>var dcwrtext = 'random_text'; document.write(dcwrtext);</script> Some other content to show on fancybox.";
?>
</body></html>
The content appears without a problem, but the nuance is, the document.write value is echoed after the closing </script> tag: and this makes the content visible on the page, not the document.write() function. You can see this in the source code:
<body>
<script>var dcwrtext = 'random_text'; document.write(dcwrtext);</script>**random_text** Some other content to show on fancybox.
</body>
The problem seems to be with fancybox, if I use the document.write() on a standard HTML (not fancyboxed) page, as expected, it will correctly show 'random_text' on the page, inside <script></script> only. This is the source code:
<body>
<script>var dcwrtext = 'random_text'; document.write(dcwrtext);</script> Some other content to show on fancybox.
</body>
What I'd need is if I open the fancbox window, 'random_text' shouldn't appear literally after the closing </script> tag, but would be displayed only by the document.write() function.
This is how I tested:
main page:
<html>
<head>
<title></title>
<meta name="" content="">
<link rel="stylesheet" type="text/css" href="fancybox/source/jquery.fancybox.css?v=2.1.2" media="screen" />
</head>
<body>
<div data-id="fancy.php" class="href">open fancy</div>
<script src="http://code.jquery.com/jquery-1.9.0.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.js"></script>
<script type="text/javascript" src="fancybox/source/jquery.fancybox.js?v=2.1.3"></script>
<script>
$(document).ready(function() {
$(".fancybox").fancybox();
$(".href").click(function() {
$.fancybox.open({
href : $(this).attr("data-id"),
type : 'iframe'
});
});
});
</script>
<div id="theid" class="fancybox"></div>
</body>
</html>
and the page being opened in fancybox: fancy.php
<html>
<head>
<title></title>
</head>
<body>
<?php
$randomtext = "random_text";
echo "<script>var dcwrtext = '$randomtext'; document.write(dcwrtext);</script>Some other content to show on fancybox";
?>
</body>
</html>
[I had to include jquery-migrate-1.2.1.js because of an error [ Uncaught TypeError: Cannot read property 'msie' of undefined] when including newer versions of jquery with fancybox]
I have some pages i am loading the normal way by calling a view like you'ld expect, $this->load->view('foo') but the file i have put all my javascript main.js is giving errors on firebug if it misses the html it requires.
To stop the errors,i would like to avoid loading main.js in all pages and instead load only the javascript that specific pages uses.
I have tried this
public function index(){
echo <<<'EOT'
$(document).ready(function(){
$(".btn").click(function(){
$(this).hide();
});
});
EOT;
echo '<button class="btn btn-primary">'.$this->lang->line('lorem_ipsum').'</button>';
//$this->load->view('foo');
}
I know EOT will display the code and not inject it into the fetched view but that's the idea i am having.
Is there a way i can inject javascript or css into foo from the the controller index?.
You can always set the view variable and use if when you want to load that JS file (or any other file that will be used only on certain pages). Try something like this:
In your controller:
$this->load->view('foo', array('loadMainJS'=>true));
Then in your view:
<?php if (isset($loadMainJS) && $loadMainJS): ?>
<script src="main.js"></script>
<?php endif; ?>
You can even make a separate view that will only load that file and then load that view from the controllers only where needed. Plenty of ways to do this, actually.
Adding to what Shomz ,i was able to create a variable in controller
public function index(){
$data['custom_js'] = <<<EOT
<script>
$(document).ready(function(){
$( '.btn' ).click(function() {
alert( 'Handler for .click() called.' );
});
});
</script>
EOT;
$this->load->view('header',$data);
echo '<button class="btn btn-primary">'.$this->lang->line('lorem_ipsum').'</button>';
$this->load->view('body');
$this->load->view('footer');
}
and use it in the view,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="<?php echo base_url("assets/ico/favicon.ico"); ?>">
<title>Sticky Footer Navbar Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="<?php echo base_url("assets/css/bootstrap.min.css"); ?>" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="<?php echo base_url("assets/css/sticky-footer-navbar.css"); ?>" rel="stylesheet">
<link href="<?php echo base_url("assets/jui/jquery-ui.min.css"); ?>" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<script src="<?php echo base_url("assets/js/jquery.min.js"); ?>"></script>
<script src="<?php echo base_url("assets/jui/jquery-ui.min.js"); ?>"></script>
<script src="<?php echo base_url("assets/js/bootstrap.min.js"); ?>"></script>
<script src="<?php echo base_url("assets/js/isotopeSearchFilter.jquery.min.js"); ?>"></script>
<?php echo $custom_js; ?>
</head>
<body>
My jQuery Mobile page does not load content via $.get which is bind into pageinit event, but does so when I hit refresh (F5), why is that so?
My HTML page igra.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- stili za custom temo, jquery, jquery mobile, phonegap-->
<link rel="stylesheet" href="themes/what.min.css" />
<link rel="stylesheet" href="jquerymobile.css" />
<script src="jquery191.js"></script>
<script src="jquerymobile.js"></script>
<script src="phonegap.js"></script>
<script src="main.js"></script>
<link rel="stylesheet" href="stil.css" />
</head>
<body>
<div data-role="page" id="igra">
<div data-theme="a" data-role="header">
347 coins
<h3>WHAT?</h3>
Home
</div>
<div data-role="content" class="igracontent"> </div>
</div>
</body>
</html>
My main.js with jQuery Mobile code:
$( document ).delegate("#igra", "pageinit", function() {
var par = qs["battlefield"];
$.get('igra.php?battlefield='+par, function(data2) {
$('div.igracontent').append(data2).trigger('create');
});
});
//parse url parameter
var qs = (function(a) {
if (a == "") return {};
var b = {};
for (var i = 0; i < a.length; ++i)
{
var p=a[i].split('=');
if (p.length != 2) continue;
b[p[0]] = decodeURIComponent(p[1].replace(/\+/g, " "));
}
return b;
})(window.location.search.substr(1).split('&'));
In igra.php I make SQL query and retrieve some data which I format in jQuery Mobile style and echo it back.
I know jQuery Mobile does not load head into DOM in subsequent pages, so main.js is also included in index.html head which is landing page of my app. All transitions to new pages are by normal ajax querying (I do not prevent default behaviour).
So what happens? When I navigate to igra.html?battlefield=3 the pageinit event does happen but content which I load via $.get from php page does not get inserted! If I hit F5(refresh) the content does get loaded into page. Can anybody explain and help? :) Thank you!