I need help getting an ajax function to work properly. I have a page that does a simulated search of a person's zip code. It shows a Google map of their location and an ajax loader.gif. After a 3000 MS timeout, the ajax function is called to load more content in a <div id="content"></div>
The problem I am having is that the content that is loaded in the div doesn't seems to be getting any of the CSS styles I need and a few php includes. If I load the page that is called via the ajax function directly in the browser, everything displays fine. But when loaded in the ajax, I am missing the CSS and the PHP includes. Need someone ASAP to help me figure this out! Please respond.
Here's my code:
<?php
include($_SERVER['DOCUMENT_ROOT'] .'/inc/tokens.php');
?>
<!DOCTYPE HTML>
<html lang="en" xml:lang="en">
<!--head code-->
<head>
<link type="text/css" rel="stylesheet" href="../css/v1.css" />
<style type="text/css">
#quotebtn {
position:relative;
margin: 5px 0 1px 0;
left:45px;
float:left;
width: 200px;
height:50px;
border: 0px;
border-radius: none;
}
#form
{
margin: 100px;
}
</style>
<!--start scripts-->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script language="javascript">
function ajax_request() {
setTimeout('load_results()', 3000);
}
function load_results(url) {
$('#content').hide('fast');
/*$('#content').fadeIn('normal');*/
$('#content').slideDown('fast', function() {
// Animation complete.
});
$('#content').load('page2.php #content', "",
function(responseText, textStatus, XMLHttpRequest) {
if(textStatus == 'error') {
$('#content').html('<p>There was an error making the AJAX request</p>');
}
}
);
}
</script>
</head>
<body onload="ajax_request();">
<ul id="nav">
<li>welcome</li>
</ul>
<!--form-->
<div id="form">
<div id="top"><img src="<?php echo $imgpath;?>/step1_boxtop.png" width="365px" height="100px" border="0" /></div>
<!--content-->
<div id="content">
<div id="page2text_1"><?php echo $form_text1;?></div>
<div id="loader"><img src="<?php echo $imgpath;?>/ajax-loader.gif" width="128px" height="15px" border="0" /></div>
<div id="gmaps">
<?php include($_SERVER['DOCUMENT_ROOT'] .'/offer/v1/gmap.php');?>
</div>
<div id="page2text_2"><?php echo $form_text2;?></div>
</div>
<!--content-->
</div>
<!--form-->
</body>
</html>
Maybe you will have better luck with .ajax() instead:
Replace:
$('#content').load('page2.php #content', "",
function(responseText, textStatus, XMLHttpRequest) {
if(textStatus == 'error') {
$('#content').html('<p>There was an error making the AJAX request</p>');
}
}
);
With:
var jqxhr = $.ajax({ type: 'POST', cache: false, url: 'page2.php', data: {id: 'somedata'},
success: function(data) {
$('#content').html(data.find('#content').html());
}
})
.error(function() {
$('#content').html('<p>There was an error making the AJAX request</p>');
});
Related
In my php, I have this
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
`$result = curl_exec($ch);` //consist of the full content returned from php curl
//from $result, I want to retrive these 3 value from within the Javascript data: section of $.ajax({
tracking: "PSIByN1JXRnQyQ2t0Y0lmMTkyZmRhZDQ1ODhmM2RjNyJ9",
timestamp: 1622805734,
hash: "8bb3c9cb42025cb49a19c2cd060c4b21"
to assign them into php variable like this
$data_tracking = PSIByN1JXRnQyQ2t0Y0lmMTkyZmRhZDQ1ODhmM2RjNyJ9
$data_timestamp = 1622805734
$data_hash = 8bb3c9cb42025cb49a19c2cd060c4b21
Facing challenge on way to retrieve data for such scenario
Here's the full content gotten from $result = curl_exec($ch);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=0">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>hello</title>
<meta name="csrf-token" content="iJ5ISYftFCNpTaaNfgX1VaPPfYmBhoXbGM6LxEVp">
<link rel="search" type="application/opensearchdescription+xml" href="/opensearch.xml" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700:latin">
<style type="text/css">
</style>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-8s4113-1', 'auto');
ga('send', 'pageview');
</script>
<!-- Facebook Pixel Code -->
<script>
!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window, document,'script',
'https://connect.facebook.net/en_US/fbevents.js');
fbq('init', '10344570522916');
fbq('track', 'PageView');
</script>
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=1d445000522916&ev=PageView&noscript=1"
/></noscript>
<!-- End Facebook Pixel Code -->
<style type="text/css">
html, body {
height: 100%;
}
/*body {
display: -ms-flexbox;
display: -webkit-box;
display: flex;
-ms-flex-align: center;
-ms-flex-pack: center;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: center;
justify-content: center;
padding-top: 40px;
padding-bottom: 40px;
background-color: #f5f5f5;
}*/
</style>
</head>
<body>
<div class="external-body">
<content>
<section class="detail">
<div class="container">
<div class="external-detail">
<img src="./img/empty.png" alt="Express" data-toggle="tooltip" title="Express">
<h5>#Detail</h5>
<div class="contact">
<li><span class="icon"><i class="fas fa-phone"></i></span> Loading...</li>
<li><span class="icon"><i class="fas fa-envelope"></i></span> Loading...</li> <li><span class="icon"><i class="fas fa-globe"></i></span> http://www.poslaju.com.my/</li> </div>
</div>
<div id="result">
<div class="text-center status-pending">
<p class="status text-tight">pending</p>
</div>
<div class="list">
<p class="text-center my-4"><i class="fas fa-spinner fa-spin"></i> Please wait</p>
</div>
</div>
</div>
</section>
</content>
<script src="https://test.com/js/app.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var retry = 2, not_found = function(){
$('.list').html('<div class="result-not-found"></div>');
};
$.ajax({
url: '/api/getResult',
method: 'POST',
data: {
tracking: "PSIByN1JXRnQyQ2t0Y0lmMTkyZmRhZDQ1ODhmM2RjNyJ9",
timestamp: 1622805734,
hash: "8bb3c9cb42025cb49a19c2cd060c4b21"
},
dataType: "json",
success: function(data){
if(data.error_code){
ga('send', {
hitType: 'event',
eventLabel: data.error_code
});
}
var html = '', result = '\n==================================\n';
if(data['latest_time']){
html += '<div class="alert alert-danger" role="alert"><i class="fa fa-warning"></i> result at '+data['latest_time']+'.</div>';
}
html += '<div class="text-center status-'+data['latest_status'].replace(/_/g, '')+'"><p class="status text-tight">'+data['latest_status'].replace(/_/g, ' ')+'</p></div><div class="list">';
var faicon = {
sponsored: 'heart',
attemptfail: 'bolt',
exception: 'exclamation',
inforeceived: 'clipboard-list',
intransit: 'circle'
};
copy_result += '==================================\n';
$('#result').html(html);
if(data['location']){
html = '<div class="sidebox location"><h5>'+data['location']['name']+'</h5><div class="detail">';
html += '<p><span class="icon"><i class="fas fa-map-marker"></i></span>'+data['location']['address']+'</p>'
var array = [
{ name: "tel", icon: "phone" },
{ name: "mobile", icon: "mobile-alt" },
{ name: "fax", icon: "fax" },
{ name: "email", icon: "envelope" },
{ name: "operation", icon: "clock" }
];
for(x in array){
if(data['location'][array[x]['name']]){
if(array[x]['name'] == 'operation' && data['location']['operation_collection']){
array[x]['name'] = 'operation_collection';
}
html += '<p><span class="icon"><i class="fas fa-'+array[x]['icon']+'"></i></span>'+data['location'][array[x]['name']].split('/').join('<br>')+'</p>';
}
}
html += '</div>';
$('#location').html(html);
}
new ClipboardJS('[data-copy-result]', {
text: function(trigger) {
return copy_result;
}
});
$('[data-copy-result], [data-copy-link]').show().tooltip({
title: 'Copied',
trigger: 'manual'
}).click(function(event){
event.preventDefault();
var a = $(this);
a.tooltip('show');
setTimeout(function(){
a.tooltip('hide');
}, 1500);
});
},
error: function(data){
ga('send', {
hitType: 'event',
});
retry--;
if(retry){
$.ajax(this);
}else{
not_found();
}
}
});
ga('send', {
hitType: 'event',
});
});
</script>
</body>
</html>
You need to use Regular Expressions to extract such information from the HTML code.
Here is a very good start to learn this powerful tool.
In your specific case the expressions are fairly easy, see an example below:
preg_match('/tracking: (.*)/', $result, $m);
if (isset($m[1])) {
$data_tracking = $m[1];
}
preg_match('/timestamp: (.*)/', $result, $m);
if (isset($m[1])) {
$data_timestamp = $m[1];
}
preg_match('/hash: (.*)/', $result, $m);
if (isset($m[1])) {
$data_hash = $m[1];
}
I am trying to get Ajax to POST to another.PHP file in the same directory as the main index. The idea is that I want an online diary that people can write into and have it instantly updated in the database.
Currently, my ajax looks like this
$('#diary').on('input propertychange', function() {
$.ajax({
type: "POST",
url: "updatedatabase.php",
data: {content: $('#diary').val()},
success: function( msg ) {
alert('Data Saved: ' + msg);
},
dataType: "text"
});
});
My PHP looks like this, on the updatedatabase.php page
<?php
session_start();
if ($_POST['content']) {
$link = mysqli_connect("location", "username", "password", "databasename");
if (mysqli_connect_error()) {
echo "Could not connect to database";
die;
}
$query = "UPDATE `users` SET `Diary` = '".mysqli_real_escape_string($link, $_POST['content'])."' WHERE email = '".mysqli_real_escape_string($link, $_SESSION['email'])."' LIMIT 1";
if (mysqli_query($link, $query)) {
echo "Success";
} else {
echo mysqli_error($link);
echo "Failure";
}
}
?>
Full HTML + PHP at start of main page:
<?php
session_start();
$link = mysqli_connect(databaseinfo);
if (mysqli_connect_error()) {
echo "Could not connect to database";
die();
}
if (empty($_COOKIE['userId']) && (empty($_SESSION['email']))) {
header('Location: index.php');
}
$query = "SELECT email FROM users WHERE email = '".mysqli_real_escape_string($link, $_COOKIE['userId'])."' ";
if (!mysqli_query($link, $query)) {
header('Location: login.php');
die();
}
if(isset($_POST['logout'])) {
unset($_SESSION['email']);
setcookie('userId', '', time() - 60 * 60);
header('Location: login.php');
}
?>
<!doctype html>
<html lang="en">
<head>
<title>Title</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style type="text/css">
body {
background-image: url("images/landscape.jpg");
}
h1 {
text-align: center;
margin: 15px auto 30px auto;
}
#diary {
min-height: 40vw;
}
</style>
</head>
<body>
<div class="container">
<div class="container">
<h1>Secret Diary</h1>
<form method="POST">
<div class="form-group">
<button type="submit" name="logout" id="logout" class="btn btn-info">Logout</button>
</div>
</form>
</div>
<div class="form-group">
<div class="form-group">
<textarea class="form-control" name="diary" id="diary" rows="3" placeholder="shhh"></textarea>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script type="text/javascript">
$('#diary').on('input propertychange', function() {
$.ajax({
type: "POST",
url: "updatedatabase.php",
data: {content: $('#diary').val()},
success: function( msg ) {
alert('Data Saved: ' + msg);
},
dataType: "text"
});
});
</script>
</body>
</html>
I have tried changing from .on to .bind, I've tried different variations of the ajax code and update database code, I've tried looking around StackOverflow.
p.s I understand there are a couple of security errors in the mysqli query injections. This is mainly for my own practice and learning journey but I am struggling to figure this one out.
Many thanks in advance.
Use .on('change') to bind to the input event.
Also, don't use the slim minified jquery library if you're going to use ajax, it's not included. See jQuery 3 slim ajax basic example
EDIT: I got the script working, with this piece of html/js:
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script type="text/javascript">
$('#diary').on('change', function() {
$.ajax({
type: "POST",
url: "updatedatabase.php",
data: {content: $('#diary').val()},
success: function( msg ) {
alert('Data Saved: ' + msg);
},
dataType: "text"
});
});
</script>
You should use the change in jQuery like this:
$('#diary').on('change', function() {
code...
});
or
$(document).on('change', '#diary', function() {
code...
});
or if the #diary is not dynamically created (in runtime) you could do:
$('#diary').change(function() {
code...
});
Have been using the following on a form's Thankyou page to redirect back to the form in 5 seconds and neatly pre-fill the name fields with values:
<script> setTimeout(function() {location.href = '<?php echo $var3['returnurl'] ?>?fullName[first]=<?php echo $var1['first'] ?>&fullName[last]=<?php echo $var2['last'] ?>'}, 5000); </script>
Works great until the returnurl field is a https:// url.
Then it stays on the thankyou page in a loop trying to do the redirect.
There are no iframes involved .... have tried top.location.href ... no good ... even tried location.replace
Can anyone see any limitations with the code that may be impacting the redirect to an https:// url.
Code in the php 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="width">
<title>Thankyou</title>
<style type="text/css">
body
{
margin: 0px;
padding: 0px;
background: #fff;
font-family: Arial;
}
#message
{
position: absolute;
left: 50%;
width: 320px;
margin-left: -160px;
}
</style>
<?php
$answers = $_POST;
$var1 = array("first" => $answers[fullname][0]);
$var2 = array("last" => $answers[fullname][1]);
$var3 = array("returnurl" => $answers[returnurl]);
?>
</head>
<body>
<script>
setTimeout(function() {location.href = '<?php echo $var3['returnurl'] ?>?fullName[first]=<?php echo $var1['first'] ?>&fullName[last]=<?php echo $var2['last'] ?>'}, 5000); // this duration is in millisecs
</script>
<div id="message">
<p> </p>
<div style="text-align: center;"><h1>Thank You!</h1></div>
<div style="text-align: center;">Your submission has been received.</div>
<div style="text-align: center;">We're most grateful</div>
<div style="text-align: center;"> </div>
<div style="text-align: center;"><img src="http://www.mazeguy.net/bigsmilies/thumbsup.gif"></img></div>
<div style="text-align: center;"> </div>
<div style="text-align: center;">You will return in 5 seconds</div><br />
</body>
</html>
Here's the result of a submission ... the Thankyou Page source shows ... yeah the secure page url is not being passed through ....
<script>
setTimeout(function() {location.href = '?fullName[first]=&fullName[last]='}, 5000); // this duration is in millisecs
</script>
Have you considered submitting the form via Ajax? The user would never leave the form submission page. You could simply display a modal with the confirmation message. That seems simpler than redirecting the user. It may be a nicer user experience as well.
Let's assume your form has a submit button with a class of 'submit'. You could so something like this in jQuery:
$(function() {
$('body').on('click', '.submit', function(event) {
event.preventDefault();
var target = event.currenTarget;
var form = $(target).closest('form');
var action = $(form).attr('action');
$.post(action, form.serialize())
.done(function() {
alert('Thanks for your submission!');
})
.fail(function() {
alert('Oops! Something went wrong... PLease try again.');
});
});
});
Check out Bootstrap. They have some nifty looking modals you can use.
I'm building this web page and I want the news to appear in jquery.modal, but with sharing functionality, that means with the URL. I found PJAX for the solution and then I wanted to put the link in URL and show the content in the modal window.
After days of googling I stumbled on this, and if you click on the page it opens in modal, but shows the URL, but I can't find how it works. Here is the link: http://rigaspots.blogspot.com/
Here is my code.
<link rel="stylesheet" href="../jquery.modal.css">
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/jquery.cookie.js"></script>
<script src="js/jquery.pjax.js"></script>
<script src="../js/jquery.modal.js"></script>
<script type="text/javascript">
var direction = "right";
$(document).ready(function(){
$('a').pjax({
container: '.modal'
});
$('.modal').on('pjax:start', function() {
$(this).addClass('loading')
})
$('.modal').on('pjax:end', function() {
$(this).removeClass('loading')
})
});
</script>
<style>
#main {
font-family:Helvetica,Arial,sans-serif;
width:30%;
opacity: 1;
transition: opacity 0.20s linear;
}
#main.loading {
opacity: 0.5;
}
h2 {margin-left:200px;}
ul{padding-left:15px; list-style:none;}
</style>
</head>
<body>
<p ><strong style='color:green'> 2012-10-25 16:52:13</strong> (Time should only change on refresh!)</p><div id="main">
<h1>PJAX using PHP</h1>
<ul class='header'>
<li>Tyrannosaurus</li>
<li><a href='kong.php' data-pjax='modal' rel="modal:open" >King Kong</a></li>
</ul>
</div>
You can see it here: http://supervalters.mplab.lv/source/
Any help would be appreciated. Thanks.
Firstly, I apologise if this is a really simple question to those with more experience, but I'm a little to new to this so I hope someone may be able to help me please.
I'm trying to implement a jQuery Modal Confirmation box upon a button click. This shown in the script below:
<!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>
<title>Gallery</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/themes/smoothness/jquery-ui.css">
<link href="Libraries/fancybox/jquery.fancybox-1.3.1.css" rel="stylesheet" type="text/css"/>
<link href="Styles/style.css" rel="stylesheet" type="text/css" />
<!--[if IE]>
<link href="Styles/ie.css" rel="stylesheet" type="text/css" />
<![endif]-->
<script src="Libraries/jquery/jquery-1.4.3.min.js" type="text/javascript"></script>
<script src="Libraries/fancybox/jquery.fancybox-1.3.1.pack.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() { $('a.fancybox').fancybox(); });
</script>
<script type="text/javascript">
var deleteTheSelectedUrl = '';
$(document).ready(function() {
// create the jQuery modal window and set autoOpen to false
$("#jQueryDeleteConfirmationModalWindow").dialog({
title: "Delete Confirmation",
autoOpen: false, // set this to false so we can manually open it
dialogClass: "jQueryDeleteConfirmationModalWindow",
closeOnEscape: false,
draggable: false,
width: 460,
height: 260,
modal: true,
buttons: {
"Yes, I'm sure": function() {
$( this ).dialog( "close" );
if('' != jQuery.trim(deleteTheSelectedUrl)) {
window.location = deleteTheSelectedUrl;
}
},
Cancel: function() {
$( this ).dialog( "close" );
}
},
resizable: false,
open: function() {
// scrollbar fix for IE
$('body').css('overflow','hidden');
},
close: function() {
// reset overflow
$('body').css('overflow','auto');
}
}); // end of dialog
// bind the loading screen to each delete link, assuming you have some kind of way to select them via jQuery
jQuery('a.deleteConfirmation').click(function() {
deleteTheSelectedUrl = $(this).attr('href');
var name = $(this).parent().parent().children('td.name').html(); // a.delete -> td -> tr -> td.name
name = jQuery.trim(name);
$("#jQueryDeleteConfirmationModalWindow").html('Are you sure you wish to delete ' + name + '?');
$("#jQueryDeleteConfirmationModalWindow").dialog('open');
return false;
});
});
</script>
<style type="text/css">
<!--
.style1 {
font-size: 14px;
margin-right: 110px;
}
.style4 {font-size: 12px}
-->
</style>
</head>
<body style="font-family: Calibri; color: #505050; font-size: 9px; border-bottom-width: thin; margin-top: 5px; margin-left: -476px; margin-right: 1px; margin-bottom: -10px;">
<div align="right" class="style1"> <a href = "javascript:document.gallery.submit()"/> Add Images <a/> ← View Uploaded Images </div>
<form id="gallery" name="gallery" class="page" action="index.php" method="post">
<div id="container">
<div id="center">
<div class="aB">
<div class="aB-B">
<?php if ('Uploaded files' != $current['title']) :?>
<?php endif;?>
<div class="demo">
<input name="username" type="hidden" id="username" value="IRHM73" />
<input name="locationid" type="hidden" id="locationid" value="1" />
<div class="inner">
<div class="container">
<div class="gallery">
<ul class="gallery-image-list">
<input type="button" name="deleteimage" value="Delete Selected Image" onclick="jQueryDeleteConfirmationModalWindow"/>
<?php for ($i = 0; $i < $descriptions->documentElement->childNodes->length; $i++) :
$xmlFile = $descriptions->documentElement->childNodes->item($i);
$name = htmlentities($xmlFile->getAttribute('originalname'), ENT_COMPAT, 'UTF-8');
$description = htmlentities($xmlFile->getAttribute('description'), ENT_COMPAT, 'UTF-8');
//$folder = htmlentities($xmlFile->getAttribute('folder'), ENT_COMPAT, 'UTF-8');
$source = $galleryPath . rawurlencode($xmlFile->getAttribute('source'));
$thumbnail = $galleryPath . rawurlencode($xmlFile->getAttribute('thumbnail'));
?>
<li class="item">
<a class="fancybox" target="_blank" rel="original" href="<?php echo $source; ?>"><img class="preview"
alt="<?php echo $name; ?>" src="<?php echo $thumbnail; ?>" /></a><input type="radio" name="delete" /></li>
<p><span class="style4"><b>Image Name:</b> <?php echo htmlentities($xmlFile->getAttribute('originalname'));?> <br />
<b>Image Description:</b> <?php echo htmlentities($xmlFile->getAttribute('description'));?> </span><br />
<?php endfor; ?>
</li>
</p>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</body>
</html>
The problem I'm having, is that when I click the 'Delete Selected Image' button, I receive this error:'jQueryDeleteConfirmationModalWindow' is undefined at line 92 which is this
<form id="gallery" name="gallery" class="page" action="index.php" method="post">
I've rebuilt the page a few times, but I still get the same error, but I'm not sure why.
I just wondered whether someone could have a look at this please and let me know where I'm going wrong?
Thanks and regards
I don't see a div with the ID jQueryDeleteConfirmationModalWindow. Perhaps I am missing it? The jQuery Dialog is performed on an existing div.
http://jqueryui.com/demos/dialog/
<div id="jQueryDeleteConfirmationModalWindow">ARE YOU SURE???</div>
Your onlclick event handler should call a function name
<input type="button" onclick="showDialog()" ... />
then your JS will access it this way
function showDialog(){
$("#jQueryDeleteConfirmationModalWindow").dialog({...});
}