I'm a learning student who is making a picture upload feature with HTML, CSS, JS, and PHP.
My final goal is to make a profile picture upload feature with cropping.
I found cropper.js would be a good tool for my idea, so I decided to use this.
And also, I found cropper.js is available to use with sweetalert2 that I've used to. official document(Sweetalert2 + cropper.js)
So I built the code that inspects file validity and uploads the raw file and loads that again to crop. But I couldn't use the feature of cropper.js and received a strange warning from the browser console that is SweetAlert2: Unknown parameter "willOpen".
(Every valid image could be uploaded without any error, but the image was shown but the draggable cropping bar did not show so I couldn't crop any image.)
Here is my code that the problem has occurred.
This code inspects whether the uploaded file is allowable and uploads that, and loads that file again to crop with cropper.js(now problem has occurred at that point.).
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Change profile picture</title>
<link rel="stylesheet" href="../../../css/font.css">
<link rel="shortcut icon" href="../../../favicon/favicon.ico">
<link rel="stylesheet" href="./css/uploadProfilePicture.css">
<?php include('../../../common/resource.html'); ?>
<script src="https://cdn.jsdelivr.net/npm/cropperjs#1.5.11/dist/cropper.js"></script>
<link href="https://cdn.jsdelivr.net/npm/cropperjs#1.5.11/dist/cropper.css" rel="stylesheet">
</head>
<body>
</body>
</html>
<style>
#cropperjs {
display: block;
max-width: 100%;
}
#preview {
width: 200px;
height: 200px;
margin-bottom: 10px;
border-radius: 100%;
}
</style>
<?php
session_start();
header('Content-Type: text/html; charset=utf-8');
if(!isset($_FILES)) {
?>
<script>
Swal.fire({
icon: 'error',
title: ':/',
footer: 'The file did not uploaded'
}).then((result) => {
location.href = "./uploadProfilePicture.php";
})
</script>
<?php
die();
}
$tempFile = $_FILES['profileImage']['tmp_name'];
$fileTypeExtension = explode("/", $_FILES['profileImage']['type']);
$fileType = $fileTypeExtension[0];
$fileExtension = $fileTypeExtension[1];
$isExtensionAllowable = false;
switch($fileExtension){
case 'jpeg':
case 'jpg':
case 'gif':
case 'bmp':
case 'png':
$isExtensionAllowable = true;
break;
default:
?>
<script>
Swal.fire({
icon: 'error',
title: 'error',
footer: 'Only pictures(jpeg, jpg, gif, bmp, png) can be uploaded'
}).then((result) => {
location.href = "./uploadProfilePicture.php";
})
</script>
<?php
exit;
die();
}
if($fileType === "image"){
if($isExtensionAllowable === true) {
// allowable
try {
$savePath = "../../../asset/userdata/profilePicture/{$_SESSION['id']}.png";
move_uploaded_file($tempFile, $savePath);
// cropper.js ?
} catch (Exception $err) {
die($err -> getMessage());
}
?>
<script>
Swal.fire({
title: 'edit profile picture',
html: `
<img id="preview" src="<?php echo $savePath ?>">
<div>
<img id="cropperjs" src="<?php echo $savePath ?>">
</div>
`,
willOpen: () => {
const image = Swal.getPopup().querySelector('#cropperjs')
const cropper = new Cropper(image, {
aspectRatio: 1,
viewMode: 1,
crop: throttle(function () {
const croppedCanvas = cropper.getCroppedCanvas()
const preview = Swal.getHtmlContainer().querySelector('#preview')
preview.src = croppedCanvas.toDataURL()
}, 25)
});
},
preConfirm: () => {
return Swal.getHtmlContainer().querySelector('#preview').src
}
})
</script>
<?php
}
} else {
?>
<script>
Swal.fire({
icon: 'error',
title: 'not image!!',
}).then((result) => {
location.href = "./uploadProfilePicture.php";
})
</script>
<?php
}
?>
In addition, the content of resource.html is here. It contains some external JS/CSS links to use at my page and there was no problem to load.
<!-- bootstrap -->
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous">
</script>
<!-- end of bootstrap-->
<!-- Bootstrap icon -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.8.0/font/bootstrap-icons.css">
<!-- end of Bootstrap icon -->
<!-- toastr.js -->
<link rel="stylesheet" type="text/css"
href="http://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
<!-- end of toastr.js -->
<!-- sweetalert -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2#9"></script>
<!-- end of sweetalert -->
I need help to figure out the point to be fixed or what I have to do to reach my goal(I think my thought to implement my goal might be wrong.).
Do you have any ideas? It hasn't been long since I've experienced this part, so it's very hard to me.
Thanks in advance.
i am trying to send the value of a toggle switch to my URL and retrieve it with Php. The code is working. The problem is every time i change the page or using the back-button i need to get the page reloaded so the toggle switch works, but when staying at the same page is doesnt work. what am doing wrong ?
This my code:
<?php
$status_water = $_GET['water_swicth'];
$status_light = $_GET['light_swicth'];
$status_air = $_GET['air_swicth'];
if ($status_water == "on")
{ $water_on = "selected";
$file = fopen("light.json", "w") or die("can't open file");
fwrite($file, '{"water": "on", "light":off, "air":off}');
fclose($file);
}
if ($status_water == "off") {
$file = fopen("light.json", "w") or die("can't open file");
fwrite($file, '{"water": "off", "light":"off", "air":off}');
fclose($file);
}
?>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/MyTheme.min.css" />
<link rel="stylesheet" href="css/jquery.mobile.icons.min.css" />
<link rel="stylesheet" href="css/jquery.mobile.structure-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="footer">
<div data-role="navbar">
<ul>
<li style="font-size: 14px;">Water
<div id="water_switch">
<select name="water" id="water" data-role="flipswitch" data-mini="true">
<option value="off" myTag="off">Off</option>
<option value="on" myTag="on" <?php echo $water_on; ?>>On</option>
</select>
</div>
</li>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
$('#water_switch').on('click', function () {
var checkStatus = $('option:selected', this).attr('mytag');
window.location.href = "stats.php?id=<?php echo $id; ?>&water_swicth=" + checkStatus;
});
});
</script>
</body>
</html>
i got it to work, by moving the part from the to
ref: https://forum.jquery.com/topic/script-not-running-unless-i-refresh-page
I am writing a simple application using Flask. I am using Google API for drawing graphs. The first page displays correctly.
But in the next pages I am getting "cannot read property length of null" error.
My Code is as shown below:
Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="refresh" content="100; URL=http://127.0.0.1:5000/">
<title>Test</title>
<!-- Bootstrap Core CSS -->
<link href="static/css/bootstrap.min.css" rel="stylesheet">
<link href="static/css/bootstrap-multiselect.css" rel="stylesheet">
<link href="static/css/new.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="static/lib/css/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">
<!-- JavaScript -->
<script src="static/js/jquery.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src="static/js/bootstrap.min.js"></script>
<script src="static/js/bootstrap-multiselect.js"></script>
<script src="static/js/Chart.js-master/Chart.js"></script>
</head>
<body onload = onLoading()>
<div class="container">
<div class="col-xs-12">
<div class="page-header">
<h3><b>Test</b></h3>
</div>
<div class="carousel slide" id="myCarousel">
<nav>
<ul class="control-box pager">
<li><a data-slide="prev" href="#myCarousel" class=""><i class="glyphicon glyphicon-chevron-left"></i></a></li>
<li><a data-slide="next" href="#myCarousel" class=""><i class="glyphicon glyphicon-chevron-right"></i></li>
</ul>
</nav>
<!-- /.control-box -->
<!-- Slide1 -->
<div class="carousel-inner" id="imp">
<!-- /Slide1 -->
</div><!-- /Carousel inner -->
</div><!-- /#myCarousel -->
</div><!-- /.col-xs-12 -->
</div><!-- /.container -->
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
// Carousel Auto-Cycle
$(document).ready(function() {
$('.carousel').carousel({
interval: 3000
})
});
function onLoading() {
//alert("Inside");
$.get("/load",function(calldata,status) {
//console.log(calldata);
//alert(calldata.length);
var num_nodes = calldata.length;
var loop = 0;
for (i=0;i<num_nodes;i++) {
if (i%4==0) {
if (i==0) {
var divoutput = document.getElementById("imp");
var divhtml = '<div class="item active" id="c'+(i/4)+'"></div>';
divoutput.innerHTML = divoutput.innerHTML+divhtml;
alert(i);
console.log(divoutput.innerHTML);
} else {
var divoutput = document.getElementById("imp");
var divhtml = '<div class="item" id="c'+(i/4)+'"></div>';
divoutput.innerHTML = divoutput.innerHTML+divhtml;
loop = i/4;
alert(loop);
console.log(divoutput.innerHTML);
}
}
var data = new google.visualization.DataTable();
data.addColumn('string', 'Errors');
data.addColumn('number', 'Statistics');
data.addRows([
['Success', calldata[i].errors.success],
['Authorization Failure', calldata[i].errors.auth_failure],
['Feature Failure', calldata[i].errors.feature_failure],
['FSOL Failure', calldata[i].errors.fsol_failure]
]);
var options = {
title: calldata[i].node_name,
is3D: true,
backgroundColor:'#ECECEA',
};
var output = document.getElementById("c"+loop);
//alert("***"+document.getElementById("c"+loop));
var html = '<div class="col-sm-6"><div class="fff"><div class="thumbnail" id="i'+i+'"></div></div></div>';
//alert(html);
output.innerHTML = output.innerHTML + html;
var tmp = "i";
var ele_id = tmp.concat(i);
//alert(ele_id);
if (calldata[i].errors.success < calldata[i].errors.auth_failure) {
document.getElementById("i"+i).style.backgroundColor = "red";
}
google.setOnLoadCallback(drawChart(ele_id,data,options));
}
});
}
function drawChart(ele_id,data,options)
{
google.load("visualization", "1", {packages:["corechart"]});
//alert(ele_id);
//alert("draw"+document.getElementById(ele_id));
var chart = new google.visualization.PieChart(document.getElementById(ele_id));
chart.draw(data, options);
}
</script>
</body>
</html>
I use bootstrap tabs and want to display a graph on a hidden tab and I get the same error as you
When I display the graph on an active table it show's up perfectly.
So I guess there is something linked to the DOM and hidden elements nothing to do with your data
I have a wordpress site, and I need to move some javascript to the footer. I am using a theme (photocrati) that only uses the wp_enqueue_scripts tag a total of 4 times in the header.php file.
What I'm looking to do is find a way, hopefully dynamically, to move the javascript files to the footer. I realize this would be much easier using the $in_footer if they were properly referenced using the enqueue_scripts, but alas, that's not the case.
Being that this is a photography studio website, I need to do everything I can to reduce loading time. Now, obviously I'm not about to move CSS to the footer like google page speed recommends because I don't want my site being rendered unformatted when the visitor first views it.
After doing everything else I can (I obviously can't do anything about minimizing or setting leveraging browser caching on files not hosted with my site, ie the google analytics js file), the page speed insights recommends, "Remove render-blocking JavaScript and CSS in above-the-fold content" is all I have left. I am hoping once I move the js to the footer my page load time will be under 5 seconds considering it is now just under 6 and there are 19 script resources.
Hopefully someone can give me some guidance on being able to do this through some PHP code added to the functions.php file since I (for the most part) understand what's going on with PHP code when I am writing. But, I am having a hard time deciphering what is going on in the header file, and being able to find all 19 js files to delete them from the header file and enqueue them properly.
EDIT Here is the header.php file. I've noticed that some of the scripts are not even called here in any way because when I search the file for say "hoverintent.js" it's nowhere to be found, but if I search the source code after my page loads, sure enough it's in the header.
<?php
$preset = Photocrati_Style_Manager::get_active_preset();
extract($preset->to_array());
$rcp = $wpdb->get_results("SELECT fs_rightclick,lightbox_mode,lightbox_type FROM ".$wpdb->prefix."photocrati_gallery_settings WHERE id = 1");
foreach ($rcp as $rcp) {
$fs_rightclick = $rcp->fs_rightclick;
$lightbox_mode = $rcp->lightbox_mode;
$lightbox_type = $rcp->lightbox_type;
}
$music = $wpdb->get_results("SELECT music_blog,music_blog_auto,music_blog_file,music_blog_controls,music_cat,music_cat_auto,music_cat_file,music_cat_controls FROM ".$wpdb->prefix."photocrati_gallery_settings WHERE id = 1");
foreach ($music as $music) {
$music_blog = $music->music_blog;
$music_blog_auto = $music->music_blog_auto;
$music_blog_controls = $music->music_blog_controls;
$music_blog_file = $music->music_blog_file;
$music_cat = $music->music_cat;
$music_cat_auto = $music->music_cat_auto;
$music_cat_controls = $music->music_cat_controls;
$music_cat_file = $music->music_cat_file;
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--[if IE 9 ]> <html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?> class='ie9'><!--<![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>><!--<![endif]-->
<head profile="http://gmpg.org/xfn/11">
<?php
Photocrati_Fonts::render_google_font_link(array(
array($font_style, $font_weight, $font_italic),
array($sidebar_font_style, $sidebar_font_weight, $sidebar_font_italic),
array($sidebar_title_style, $sidebar_title_weight, $sidebar_title_italic),
array($title_style, $title_font_weight, $title_italic),
array($h1_font_style, $h1_font_weight, $h1_font_italic),
array($h2_font_style, $h2_font_weight, $h2_font_italic),
array($h3_font_style, $h3_font_weight, $h3_font_italic),
array($h4_font_style, $h4_font_weight, $h4_font_italic),
array($h5_font_style, $h5_font_weight, $h5_font_italic),
array($description_style, $description_font_weight, $description_font_italic),
array($menu_font_style, $menu_font_weight, $menu_font_italic),
array($submenu_font_style, $submenu_font_weight, $submenu_font_italic),
array($footer_widget_style, $footer_widget_weight, $footer_widget_italic),
array($footer_font_style, $footer_font_weight, $footer_font_italic)
));
?>
<title><?php
if ( is_single() ) { single_post_title(); }
elseif ( is_home() || is_front_page() ) { bloginfo('name'); print ' | '; bloginfo('description'); get_page_number(); }
elseif ( is_page() ) { single_post_title(''); }
elseif ( is_search() ) { bloginfo('name'); print ' | Search results for ' . wp_specialchars($s); get_page_number(); }
elseif ( is_404() ) { bloginfo('name'); print ' | Not Found'; }
else { bloginfo('name'); wp_title('|'); get_page_number(); }
?></title>
<meta http-equiv="content-type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<!-- IMPORTANT! Do not remove this code. This is used for enabling & disabling the dynamic styling -->
<?php if($dynamic_style) { ?>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/styles/dynamic-style.php" />
<?php if($logo_menu_position == 'left-right') { ?>
<!--[if lt IE 8]>
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/styles/style-ie7-menufix.css" type="text/css" />
<![endif]-->
<?php } ?>
<?php } else { ?>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/styles/style.css" />
<?php if($logo_menu_position == 'left-right') { ?>
<!--[if lt IE 8]>
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/styles/style-ie7-menufix.css" type="text/css" />
<![endif]-->
<?php } ?>
<?php } ?>
<!-- End dynamic styling -->
<!--[if IE 8]>
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/styles/style-ie.css" type="text/css" />
<![endif]-->
<!--[if lt IE 8]>
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/styles/style-ie7.css" type="text/css" />
<![endif]-->
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/admin/css/jquery.lightbox-0.5.css" />
<?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>
<?php
if( !is_admin()){
wp_enqueue_script('jquery');
wp_enqueue_script('jquery-effects-core');
if ($preset->custom_js) wp_enqueue_script('photocrati-custom-js', site_url('?photocrati-js'));
}
?>
<?php wp_head(); ?>
<link rel="alternate" type="application/rss+xml" href="<?php bloginfo('rss2_url'); ?>" title="<?php printf( __( '%s latest posts', 'photocrati-framework' ), wp_specialchars( get_bloginfo('name'), 1 ) ); ?>" />
<link rel="alternate" type="application/rss+xml" href="<?php bloginfo('comments_rss2_url') ?>" title="<?php printf( __( '%s latest comments', 'photocrati-framework' ), wp_specialchars( get_bloginfo('name'), 1 ) ); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<?php if($fs_rightclick == "ON") { ?>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/scripts/clickprotect.js"></script>
<?php } ?>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/scripts/jquery.jplayer.min.js"></script>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/scripts/jplayer.style.css" />
<?php if($lightbox_type == 'fancy'): ?>
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/admin/css/jquery.fancybox-1.3.4.css" type="text/css" />
<?php elseif($lightbox_type == 'light'): ?>
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/admin/css/jquery.fancybox-1.3.4-light.css" type="text/css" />
<?php elseif($lightbox_type == 'thick'): ?>
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/admin/css/jquery.fancybox-1.3.4-thick.css" type="text/css" />
<?php endif ?>
<?php if($style_skin == 'modern' || $lightbox_type == 'magnific'): ?>
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/admin/css/jquery.fancybox-1.3.4.css" type="text/css" />
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/scripts/lightbox/magnific-popup/magnific-popup.css" type="text/css" />
<?php endif ?>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/admin/js/jquery.fancybox-1.3.4.pack.js"></script>
<?php if($style_skin == 'modern' || $lightbox_type == 'magnific'): ?>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/scripts/lightbox/magnific-popup/magnific-popup-v0.9.9.min.js"></script>
<?php endif ?>
<?php if($style_skin == 'modern' && is_front_page()): ?>
<?php
// when selecting multiple images as background then $home_bg_image is an array
if (!is_array($home_bg_image)) {
$home_bg_image = array($home_bg_image);
}
$home_bg_list = array();
foreach ($home_bg_image as $bg_image) {
if ($bg_image != null) {
$bg_img = Photocrati_Style_Manager::get_image_url($bg_image, true);
if ($bg_img != null) {
$home_bg_list[] = array(
'image' => $bg_img,
'thumb' => Photocrati_Style_Manager::get_image_url($bg_image, true, 'thumbnail'),
'title' => $bg_image,
);
}
}
}
// check that there are 1 or more images selected, otherwise fallback to default
if ($home_bg_list == null) {
$home_bg = 'default';
}
?>
<?php if($home_bg == 'slideshow'): ?>
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ? >/scripts/supersized/slideshow/css/supersized.css" type="text/css" />
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/scripts/supersized/slideshow/theme/supersized.shutter.css" type="text/css" media="screen" />
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/scripts/supersized/slideshow/js/supersized.3.2.7.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/scripts/supersized/slideshow/theme/supersized.shutter.min.js"></script>
<script type="text/javascript">
jQuery(function($){
$.supersized({
// Functionality
slideshow : 1, // Slideshow on/off
autoplay : 1, // Slideshow starts playing automatically
start_slide : 1, // Start slide (0 is random)
stop_loop : 0, // Pauses slideshow on last slide
random : 0, // Randomize slide order (Ignores start slide)
slide_interval : <?php echo (floatval($home_bg_interval_speed) * 1000) ?>, // Length between transitions
transition : <?php echo ($home_bg_transition_effect) ?>, // 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
transition_speed : <?php echo (floatval($home_bg_transition_speed) * 1000) ?>, // Speed of transition
new_window : 1, // Image links open in new window/tab
pause_hover : 0, // Pause slideshow on hover
keyboard_nav : 1, // Keyboard navigation on/off
performance : 1, // 0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed // (Only works for Firefox/IE, not Webkit)
image_protect : 1, // Disables image dragging and right click with Javascript
// Size & Position
min_width : 0, // Min width allowed (in pixels)
min_height : 0, // Min height allowed (in pixels)
vertical_center : 1, // Vertically center background
horizontal_center : 1, // Horizontally center background
fit_always : 0, // Image will never exceed browser width or height (Ignores min. dimensions)
fit_portrait : 1, // Portrait images will not exceed browser height
fit_landscape : 0, // Landscape images will not exceed browser width
// Components
slide_links : 'blank', // Individual links for each slide (Options: false, 'num', 'name', 'blank')
thumb_links : 1, // Individual thumb links for each slide
thumbnail_navigation : 0, // Thumbnail navigation
slides : <?php echo json_encode($home_bg_list) ?>,
// Theme Options
progress_bar : 1, // Timer for each slide
mouse_scrub : 0
});
});
</script>
There's the part of the header.php file that contains the js file references. As I said before, not all of them are called through the header.php file.
Enqueue script has a fifth parameter, which is a boolean, false as default. If you set to true, your scripts will be in the footer. In case, your theme has the wp_footer() method in the footer.
<?php wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer ); ?>
An example:
<?php wp_enqueue_script( 'mysript', get_template_directory_uri() . '/js/myscript.js', array(), false, true ); ?>
So basically, when I load my data from the server script (retrieve.php), it shows up the in the showlist.html using $('#result').html(data). But whenever I try to load my listview or selectbox with that data..nothing happens. PLEASE ADVICE what I might be doing wrong
//SERVER-SIDE SCRIPT - retrieve.php
<?php
$pdo = new PDO('mysql:host=localhost;dbname=sports_rush;charset=utf8', 'root', '');
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
try {
$query = "SELECT eid,event_title FROM event_table";
$result = $pdo->prepare($query);
$result->execute();
while ($row = $result->fetch(PDO::FETCH_ASSOC)) {
echo json_encode($row);
}
$db_connection = null;
} catch (PDOException $e) {
echo $e->getMessage();
}
//I found this recursive function online to enable me force convert to UTF-8 all the strings contained in an array
function utf8ize($d) {
if (is_array($d)) {
foreach ($d as $k => $v) {
$d[$k] = utf8ize($v);
}
} else {
return utf8_encode($d);
}
return $d;
}
?>
//FILE THAT SHOWS MY DATA FROM SERVER-SIDE SCRIPT - Showlist.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
<title>SHOW LIST</title>
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" type="text/css" media="screen" href="css/style.css"/>
<link rel="stylesheet" href="jquery-mobile/jquery.mobile-1.4.2.min.css" />
<script src="jquery-mobile/jquery-1.9.1.min.js"></script>
<script src="jquery-mobile/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
<div data-role="page" id="home_page">
<div data-role="header" data-theme="a">
<h1>Header</h1>
</div>
<div data-role="content">
<select name="zip" id="zip" onChange="initializeRetrieve()"></select>
<div id="result"></div>
<ul data-role="listview" data-inset="true" id="postallist"></ul>
</div>
</div>
<script>
$(function(){
$.ajax({
url : 'retrieve.php',
type : "POST",
success : function(data){
var output = '';
$('#result').html(data); //This is just a test to see my data
$.each(data, function (index, value) {
output += '<li>' + value.eid + '</li>';
});
$('#postallist').html(output).listview("refresh");
}
});
});
function initializeRetrieve(){
var $select5 = $('#zip');
//request the JSON data and parse into the select element
$.getJSON("retrieve.php", function(data){
//iterate over the data and append a select option where eid is in the json file
$.each(data, function(key, value){
$select5.append('<option>' + value.eid + '</option>');
});
});
}
</script>
</body>
</html>
Have you tried using the GET method
Try putting your request to $(document).ready
$(document).ready(function(){
$.getJSON('retrieve.php', function(data) {
$('#result').html(data);
})
});
//FINALLY GOT IT WORKING. The problem was in my showlist.html. Needed to change up my initialization when my page opens
<html>
<meta charset="utf-8" />
<title>SHOW LIST</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page" id="index">
<div data-role="header" data-position="fixed">
<h1>Sports Rush Events</h1>
</div>
<div data-role = "content">
<div class="content-primary">
<ul id="list" data-role="listview" data-filter="true"></ul>
</div>
<div id="result"></div>
</div>
<script type="text/javascript">
$(document).on('pagebeforeshow', '#index', function(){
$.ajax({
url : 'retrievelist.php',
type : "POST",
dataType: 'json',
success : function(data){
$.each(data,function(i,dat){
$("#list").append("<li><b>ID: </b>"+i+"</br><b> Name: </b>"+dat.event_title+"</li>");
});
$("#list").listview('refresh');
}
});
});
</script>
<div data-role="footer" data-position="fixed">
</div>
</div>