Trying to show jqmobile grid(trirand) in a jquery mobile windows - php
Using JQuery Mobile I want to pop a dialog box where the user can enter in search filters and then when they submit the query show the jqmobile grid(trirand) inside a modal window. Is this possible. Here is my code below:
qr.php
<?php require_once '../auth.php'; require_once '../jqSuitePHP/jq-config.php'; // include the PDO driver class require_once '../../jqSuitePHP/php/jqGridPdo.php'; // Connection to the server $conn = new PDO(DB_DSN,DB_USER,DB_PASSWORD); // Tell the db that we use utf-8 $conn->query("SET NAMES utf8"); if(isset($_REQUEST['a'])) { //get asset information $conn = new PDO(DB_DSN,DB_USER,DB_PASSWORD); $sql = "SELECT asset_no, dept_id as dept, short_desc, `LOTO #` as loto FROM mfg_eng_common.machine WHERE asset_no ='".$_REQUEST['a']."'"; $result = $conn->query($sql); $row = $result->fetch(PDO::FETCH_ASSOC); //check to see if active work order exists in MWO system for current asset //status_id of 50 mean Approved/Closed $sql = "SELECT count(*) woCnt FROM mfg_eng_mwo.mwo WHERE asset_id ='".$_REQUEST['a']."' AND status_id != 50"; $result = $conn->query($sql); $woCnt = $result->fetch(PDO::FETCH_ASSOC); } else { header("Location: http://rworley-laptop.dayton-phoenix.com/dpg/mwo/forms/MWO.php"); } ?> <!DOCTYPE HTML> <html lang="en-US"> <head> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" /> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script> <script type="text/javascript"> function getWOCnt() { var cntval = <?php echo $woCnt['woCnt'];?>; if(cntval > 0) { if (confirm(" There are already active work order(s) for asset <?php echo $_REQUEST['a']?>. \n To see active work orders:\n Click Cancel and then click 'Update Work Orders'. \n\n To enter a new work order for asset <?php echo $_REQUEST['a']?> \n Click OK .")) { window.open("../forms/MWO.php?a=<?php echo $_REQUEST['a']?>", "new"); /* $(function () { $("#newMWO").on('click', (function (event) { event.preventDefault(); var loadVars=(encodeURI("../forms/MWO.php?a=<?php echo $_REQUEST['a']?>")); var dialogName= $("#mwoForm").load(loadVars); $(dialogName).dialog({ autoOpen: false, resizable: true, modal: true, bigframe: true, height: 600, width: 1000, overflow: scroll, resizable: true, title: "MWO New Work Order" }); dialogName.dialog('open'); return false; })); }); */ } } else { window.open("../forms/MWO.php?a=<?php echo $_REQUEST['a']?>", "new"); /* $(function () { $("#newMWO").on('click', (function (event) { event.preventDefault(); var loadVars=(encodeURI("../forms/MWO.php?a=<?php echo $_REQUEST['a']?>")); var dialogName= $("#mwoForm").load(loadVars); $(dialogName).dialog({ autoOpen: false, resizable: true, modal: true, bigframe: true, height: 600, width: 1000, overflow: scroll, resizable: true, title: "MWO New Work Order" }); dialogName.dialog('open'); return false; })); }); */ } }; </script> </head> <body> <div data-role="page" data-theme="b" align="center"> <div data-theme="a" data-role="header"> <h1>Maintenance Work Orders</h1> <img alt="<?php echo $_REQUEST['a']?>" src="../../Machine Pictures/<?php echo $row['dept']?>/<?php echo $row['asset_no']?>.jpg" height="240" width="300"/> <b><br><?php echo $row['short_desc']?></b> </div><!-- /header --> <br> <div data-theme="c" data-content-theme="d" > <hr> <?php echo "PM Procedure" ?> <b>|</b> <?php echo "Loto Procedure" ?> </div> <div data-role="collapsible-set" data-theme="b" data-content-theme="d" > <ul data-role="listview" data-inset="true" align="center" data-filter="false" data-theme="b"> <li> <a id="newMWO" name="newMWO" data-role="button" data-inline="true" target="_blank" onclick=getWOCnt() > New Work Order </a> </li> </ul> <ul data-role="listview" data-inset="true" align="center" data-filter="false" data-theme="b"> <li> Update Work Order </li> </ul> <ul data-role="listview" data-inset="true" align="center" data-filter="false" data-theme="b"> <li> <a href="../../mwo/MWO_mobile.php?a=<?php echo $_REQUEST['a']?>" data-role="button" data-inline="true" data-rel="dialog" target="mwoSearch" data-transition="slidedown" > Search Work Orders </a> </li> </ul> </div> <?php if(!($_POST)) { echo " <a href='#popupBasic' data-rel='popup' data-role='button' data-inline='true'>Quick Search</a> <div data-role='popup' id='popupBasic' data-transition='flip' > <a href='#' data-rel='back' data-role='button' data-theme='a' data-icon='delete' data-iconpos='notext' class='ui-btn-right'>Close</a> <form action='#' method='POST'> <div data-theme='a' data-role='header'> <h2>Look Up MWO</h2> </div> <p> Problem<textarea name='search_prob' data-theme = 'a' data-content-theme = 'd' rows = '3' cols = '50' id = 'search_prob' /></textarea> </p> <p> Solution<textarea name='search_sol' data-theme = 'a' data-content-theme = 'd' rows = '3' cols = '50' id = 'search_sol' /></textarea> </p> <p id = 'submit-area'> <input type='submit' data-theme='b' value='Search' id = 'sub1'/> </p> </form> </div> "; } else { echo " <ul data-role='listview' data-inset='true' align='center' data-filter='false' data-theme='b'> <li> <a href=\"QS.php?a=".$_REQUEST['a']."\" data-role='button' data-inline='true' data-rel='dialog' data-transition='slidedown'> Qucick Search Results </a> </li> </ul>"; } ?> <div data-role="footer" data-theme="a"> <h4>Dayton-Phoenix Group, Inc.</h4> </div><!-- footer --> </div><!-- page --> </body> </html>
QS.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>MWO Quick Search</title>
<link rel="stylesheet" href="../../jquerymobile.jqGrid/css/themes/default/jquery.mobile.css" />
<link rel="stylesheet" href="../../jquerymobile.jqGrid/css/themes/ui.jqgridmobile.css" />
<link rel="stylesheet" href="../../jquerymobile.jqGrid/css/themes/shCoreEclipse.css" />
<link rel="stylesheet" href="../../jquerymobile.jqGrid/css/themes/shThemeEclipse.css" />
<script src="../../jquerymobile.jqGrid/js/jquery.js" type="text/javascript"></script>
<script src="../../jquerymobile.jqGrid/js/jquerymobile.jqGrid.min.js" type="text/javascript"></script>
<script src="../../jquerymobile.jqGrid/js/jquery.mobile.js" type="text/javascript"></script>
<script src="../../jquerymobile.jqGrid/js/grid.locale-en.js" type="text/javascript"></script>
</head>
<body>
Paging, sorting and searching
</body>
</html>
quickSearch2.php
<!DOCTYPE html>
<html>
<body>
<div id="page" data-role="page" data-theme="b">
<div data-role="header" data-theme="b" style="margin-bottom: 10px">
<h1> MWO Quick Search Results</h1>
Home
</div>
<!-- HTML table Definition -->
<table id='grid'></table>
<div id='pager'></div>
<!-- Java Scruipt Code -->
<script type='text/javascript'>
var a = <?php echo json_encode($_REQUEST['a']); ?>;
var prob = <?php echo json_encode($_REQUEST['search_prob']); ?>;
jQuery('#grid').jqGrid({
"hoverrows":false,
"viewrecords":true,
//"jsonReader":{"repeatitems":false,"subgrid":{"repeatitems":false}},
"gridview":true,
"url":"../../mwo/mobile/quicksearch.php?a=" + a + "&search_prob=" + prob,
"loadonce": true,
"rowNum":10,
"height":200,
"autowidth":true,
"sortname":"mwo_id",
"rowList":[10,30,40],
"datatype":"json",
"colModel":[
{"name":"e", "index":"empty", "sorttype":"int", "hidden":true,"width":50,"editable":true},
{"name":"MWO #", "index":"mwo_id", "sorttype":"int", "key":true,"width":80,"editable":true},
{"name":"DPG #", "index":"asset_id", "sorttype":"string", "width":80, "editable":true},
{"name":"Assigned to", "index":"assigned_id", "sorttype":"string", "width":80, "editable":true},
{"name":"Entered", "index":"entered_time", "sorttype":"datetime", "width":80, "editable":true,"datefmt":"m/d/Y", "searchoptions":{sopt:['eq']}, "formatter":"date","formatoptions":{"srcformat":"Y-m-d H:i:s","newformat":"m/d/Y"}},
{"name":"Problem", "index":"long_desc", "sorttype":"string", "width":80, "editable":true},
{"name":"Solution", "index":"solution", "sorttype":"string", "width":80, "editable":true}
],
"pager":"#pager"
});
</script>
</div>
</body>
</html>
json data being used:
{"page":1,"total":2,"records":13,"rows":[{"mwo_id":"1302271211","cell":["","1302271211","38315","-1","2013-07-08 11:13:19","approved test",""]},{"mwo_id":"1302271213","cell":["","1302271213","38315","-1","2013-07-11 09:26:26","yo momma is so fattest","how fat is she? she's so fat she left the house in heels and came back in flip-flops"]},{"mwo_id":"1302271214","cell":["","1302271214","38315","-1","2013-07-12 12:13:55","july test",""]},{"mwo_id":"1302271215","cell":["","1302271215","38315","-1","2013-07-08 08:59:56","test","update2"]},{"mwo_id":"1302271216","cell":["","1302271216","38315","-1","2013-07-09 06:14:02","test",""]},{"mwo_id":"1302271217","cell":["","1302271217","38315","-1","2013-07-08 09:01:30","yep testing","no answer yet"]},{"mwo_id":"1302271218","cell":["","1302271218","38315","-1","2013-07-09 09:59:46","new test of email system",""]},{"mwo_id":"1302271219","cell":["","1302271219","38315","","2013-07-08 12:33:09","email new test",""]},{"mwo_id":"1302271221","cell":["","1302271221","38315","12","2013-07-11 13:20:55","ANOTHER TEST OF NEW ...WITH EMAIL","AND THE ANSWER IS ....."]},{"mwo_id":"1302271222","cell":["","1302271222","38315","","2013-07-11 09:29:58","test...add issue",""]},{"mwo_id":"1302271223","cell":["","1302271223","38315","","2013-07-11 13:11:15","testing",""]},{"mwo_id":"1302271224","cell":["","1302271224","38315","7","2013-07-11 13:27:32","test with auto assign","no solution its all good"]},{"mwo_id":"1302271226","cell":["","1302271226","38315","7","2013-07-12 12:05:02","Meeting test",""]}]}
Related
how to remember the radio selection?
after I post it use ajax,the value of radio disappear,but I want the radio part to remember the selection. I need the page to remember the radio button selections when I leaves and returns. Would this require database? If so, how do i implement it? I try to add the select =selected ,but it do not help.
<input value="<?php echo $key; $key++;?>" type="radio" class="radioOrCheck" name="answer<?php echo $num_select;?>"
id="0_answer_<?php echo $num_select;?>_option_<?php echo $key;?>"
below it is the full code
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>
<link href="css/main.css" rel="stylesheet" type="text/css" />
<link href="css/iconfont.css" rel="stylesheet" type="text/css" />
<link href="css/test.css" rel="stylesheet" type="text/css" />
<style>
.hasBeenAnswer {
background: #5d9cec;
color:#fff;
}
</style>
</head>
<body>
<p>
</p>
<div class="main">
<!--nr start-->
<div class="test_main">
<div class="nr_left">
<div class="test">
<form action="" method="post">
<div class="test_title">
<!--
<p class="test_time">
<i class="icon iconfont"></i><b class="alt-1">01:40</b>
</p>-->
<font><?php echo "<input type='button' name='test_jiaojuan' value='sub' onClick='getinput($ans_json,$id_json)'>";?>
</font>
</div>
<div class="test_content">
<div class="test_content_title">
<h2>word</h2>
<p>
<span>has</span><i class="content_lit"><?php echo $cnt_sel;?></i><span>title</span><span>sum</span><i class="content_fs"><?php echo $cnt_sel*10;?></i><span>min</span>
</p>
</div>
</div>
<div class="test_content_nr">
<ul>
<!--begin select-->
<?php
foreach($results as $temp){
$sql_2="SELECT `description`,`input`,`select_id` FROM `select` WHERE `select_id`=?";
$res_2=pdo_query($sql_2,$temp[0]);
$row = $res_2[0];
?>
<li id="qu_0_<?php echo $num_select;?>">
<div class="test_content_nr_tt">
<i><?php echo $num_select;?></i><font>
<p>
<?php
echo $row[0];
?>
</p>
</font>
</div>
<div class="test_content_nr_main">
<ul>
<?php
if ($row[1]) {
$arr = rtrim($row[1],"<br />");
$arr = explode('<br />', $arr);
foreach($arr as $key => $a){
?>
<li class="option">
<input value="<?php echo $key; $key++;?>" type="radio" class="radioOrCheck" name="answer<?php echo $num_select;?>"
id="0_answer_<?php echo $num_select;?>_option_<?php echo $key;?>"
/>
<label for="0_answer_<?php echo $num_select;?>_option_<?php echo $key;?>">
<p class="ue" style="display: inline;"><?php echo strip_tags($a,"<img>");//echo trim($a); ?></p>
</label>
</li>
<?php
}
}
if ($row['hint']) {
?><h4><?php echo $MSG_HINT;?></h4><?php
echo $row['hint'];
}
?>
</ul>
</br></br>
</div>
</li>
<?php
$num_select=$num_select+1;
}
?>
<p>
<?php
?>
</p>
<!--end select-->
</ul>
</div>
</form>
</div>
</div>
<div class="nr_right">
<div class="nr_rt_main">
<div class="rt_nr1">
<div class="rt_nr1_title">
<h1>
<i class="icon iconfont"></i>answer
</h1>
<!-- <p class="test_time">
<i class="icon iconfont"></i><b class="alt-1">01:40</b>
</p>-->
</div>
<div class="rt_content">
<div class="rt_content_tt">
<h2>chose</h2>
<p>
<span>sum</span><i class="content_lit"><?php echo $cnt_sel;?></i><span>answer</span>
</p>
</div>
<div class="rt_content_nr answerSheet">
<ul>
<?php
$temp=1;
for($temp=1;$temp<=$cnt_sel;$temp++){
?>
<li><?php echo $temp;?></li>
<?php
}
?>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<!--nr end-->
<div class="foot"></div>
</div>
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/jquery.easy-pie-chart.js"></script>
<script src="js/jquery.countdown.js"></script>
<script>
$(function() {
$('li.option label').click(function() {
debugger;
var examId = $(this).closest('.test_content_nr_main').closest('li').attr('id');
var cardLi = $('a[href=#' + examId + ']');
if(!cardLi.hasClass('hasBeenAnswer')){
cardLi.addClass('hasBeenAnswer');
}
});
});
$(function() {
$('li.option').click(function() {
debugger;
var examId = $(this).closest('.test_content_nr_main').closest('li').attr('id');
var cardLi = $('a[href=#' + examId + ']');
if(!cardLi.hasClass('hasBeenAnswer')){
cardLi.addClass('hasBeenAnswer');
}
});
});
/*window.onbeforeunload = function(event){
var msg = '';
msg +='do not like?\n';
//msg += '';
return msg;
};*/
function getinput(ans_json,results_json) {
var sum=<?php echo $cnt_sel;?>;
var blank_cnt=0;
var well_cnt=0;
for (var i = 1; i <= sum; i++) {
var radio_name = new String("answer" + i.toString());
var ans_s = $('input:radio[name=' + radio_name + ']:checked').val();
if(!(ans_s)){
blank_cnt++;
}}
//var json = getjson();
var msg = "ok";
if (confirm(msg) == true) {
var radio = new Array();
for (var i = 1; i <= <?php echo $cnt_sel;?>; i++) {
var radio_name = new String("answer" + i.toString());
var ans_s = $('input:radio[name=' + radio_name + ']:checked').val();
if(!(ans_s)){
ans_s=-1;
}
var judge=0;
var answer_true= parseInt(ans_json[i-1]);
var id_true=parseInt(results_json[i-1]);
if(ans_s == answer_true){
judge=1;
}
$.ajax({
type: "GET",
url: "select_ajax.php",
data: {
select_id: id_true,
contest_id:<?php echo $cid;?>,
result:judge
},
success: function(msg){
well_cnt++;
}
});
}
if(well_cnt==5){
alert('success');
}
setTimeout(function (){
window.location.href = "contest.php?cid="+<?php echo $cid;?>;
}, 1000);
} else {
return false;
}
}
</script>
</body>
</html>
You can do it by storing your radio button value in javascript localStorage and then set that localStorage value to your radio button again.
Issu having to get a new transaction ID Keeps showing the first one
I am having an issue with getting a new transaction id when placing new order. It wants to keep only showing me the first order the user made. I have it so the user logs in and it keeps a session of the login. Then the user adds items to the cart and checkouts. After the data is inserted to the customer order table, the page moves on to a successful order page. The only issue is it keeps wanting to only show the first transaction id (tr_id) for that user in the db. When I sign in with new user I do get a different tr_id, but the same thing happens for the second user. Here is all the code I have for it. I know it may be hard question don't waste to much time on it if it cant be figured out. If I have to I will delete the question and try different method. This is the only thing holding up to complete my project. I also know that this is not the greatest code and can get sql injections. I am wondering what I am doing wrong with getting the new transaction id?
main.js
$('#checkout_btn').click(function(){
$.ajax({
url: 'action.php',
method: 'POST',
data: {payment_checkout:1},
success: function(){
window.location.href = "payment_success.php";
}
})
})
cart_checkout();
function cart_checkout()
{
$.ajax({
url: 'action.php',
method: 'POST',
data: {cart_checkout:1},
success: function(data){
$('#cartdetail').html(data);
}
})
}
$("#login").click(function(event){
event.preventDefault();
var email=$('#email').val();
var pwd=$('#password').val();
console.log(pwd);
$.ajax({
url: "login.php",
method: "POST",
data: {userLogin:1,email:email, pwd:pwd},
success: function(data){
if(data=="true"){
window.location.href="profile.php";
}
}
})
})
login.php
<?php
include('dbconnect.php');
session_start();
if(isset($_POST['userLogin'])){
$email=mysqli_real_escape_string($conn,$_POST['email']);
$pwd=md5($_POST['pwd']);
$sql="SELECT * FROM user_info WHERE email='$email' AND password='$pwd'";
$run_query=mysqli_query($conn,$sql);
$count=mysqli_num_rows($run_query);
if($count==1){
$row=mysqli_fetch_array($run_query);
$_SESSION['uid']=$row['user_id'];
$_SESSION['uname']=$row['first_name'];
echo "true";
}
}
?>
action.php
if(isset($_POST['cartmenu']) || isset($_POST['cart_checkout']))
{
$uid=$_SESSION['uid'];
$sql="SELECT * FROM cart WHERE user_id='$uid'";
$run_query=mysqli_query($conn,$sql);
$count=mysqli_num_rows($run_query);
if($count>0){
$i=1;
$total_amt=0;
while($row=mysqli_fetch_array($run_query))
{
$sl=$i++;
$pid=$row['p_id'];
$product_image=$row['product_image'];
$product_title=$row['product_title'];
$product_price=$row['price'];
$qty=$row['qty'];
$total=$row['total_amount'];
$price_array=array($total);
$total_sum=array_sum($price_array);
$total_amt+=$total_sum;
if(isset($_POST['cartmenu']))
{
echo "
<div class='row'>
<div class='col-md-3'>$sl</div>
<div class='col-md-3'><img src='assets/prod_images/$product_image' width='60px' height='60px'></div>
<div class='col-md-3'>$product_title</div>
<div class='col-md-3'>$$product_price</div>
</div>
";
}
else
{
echo "
<div class='row'>
<div class='col-md-2'><a href='#' remove_id='$pid' class='btn btn-danger remove'><span class='glyphicon glyphicon-trash'></span></a>
<a href='#' update_id='$pid' class='btn btn-success update'><span class='glyphicon glyphicon-ok-sign'></span></a>
</div>
<div class='col-md-2'><img src='assets/prod_images/$product_image' width='60px' height='60px'></div>
<div class='col-md-2'>$product_title</div>
<div class='col-md-2'><input class='form-control price' type='text' size='10px' pid='$pid' id='price-$pid' value='$product_price' disabled></div>
<div class='col-md-2'><input class='form-control qty' type='text' size='10px' pid='$pid' id='qty-$pid' value='$qty'></div>
<div class='col-md-2'><input class='total form-control price' type='text' size='10px' pid='$pid' id='amt-$pid' value='$total' disabled></div>
</div>
";
}
}
if(isset($_POST['cart_checkout'])){
echo "
<div class='row'>
<div class='col-md-8'></div>
<div class='col-md-4'>
<b>Total: $$total_amt</b>
</div>
</div>
";
}
}
}
if(isset($_POST['payment_checkout'])){
$uid=$_SESSION['uid'];
$sql="SELECT * FROM cart WHERE user_id='$uid'";
$run_query=mysqli_query($conn,$sql);
$i=rand();
while($cart_row=mysqli_fetch_array($run_query))
{
$cart_prod_id=$cart_row['p_id'];
$cart_prod_title=$cart_row['product_title'];
$cart_qty=$cart_row['qty'];
$cart_price_total=$cart_row['total_amount'];
$sql2="INSERT INTO customer_order (uid,pid,p_name, p_price,p_qty,p_status,tr_id) VALUES ('$uid','$cart_prod_id','$cart_prod_title','$cart_price_total','$cart_qty','CONFIRMED','$i')";
$run_query2=mysqli_query($conn,$sql2);
}
payment_success.php
<?php
include('dbconnect.php');
session_start();
if(!isset($_SESSION['uid'])){
header('Location:index.php');
}
$uid=$_SESSION['uid'];
$sql="SELECT * FROM customer_order WHERE uid='$uid'";
$run_query=mysqli_query($conn,$sql);
$row=mysqli_fetch_array($run_query);
$trid=$row['tr_id'];
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Supplies</title>
<link rel="stylesheet" type="text/css" href="assets/bootstrap-3.3.6-dist/css/bootstrap.css">
<style type="text/css">
.content{
display: none;
}
</style>
</head>
<body>
<div class='content'>
<div class="navbar navbar-default navbar-fixed-top" id="topnav">
<div class="container-fluid">
<div class="navbar-header">
Supplies
</div>
</div>
</div>
<br><br><br><br><br>
<div class='container-fluid'>
<div class='row'>
<div class='col-md-2'></div>
<div class='col-md-8'>
<div class="panel panel-default">
<div class="panel-heading"><h1>Thank you!</h1></div>
<div class="panel-body">
Hello <?php echo $_SESSION['uname']; ?>, your payment is successful.
<br>Your Transaction ID is <?php echo $trid; ?>
<br>You can continue with your shopping.
<p></p>
<a href="profile.php" class='btn btn-success btn-lg'>Back to store</a>
</div>
</div>
<div class='col-md-2'></div>
</div>
</div>
</div>
</div>
<!--Pre-loader -->
<div class="preload"><img src="assets/images/loading.gif" style="width:400px;
height: 400px;
position: relative;
top: 0px;
left: 469px;"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="assets/bootstrap-3.3.6-dist/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(".preload").fadeOut(5000, function(){
$(".content").fadeIn(500);
});
</script>
</body>
</html>
Your SQL select will fetch only the first tr-id (transaction id) because your select makes an array of unfetched tr-id's and fetches them in the order of their existence on the table. you need to fetch the last element on the result. you could make it (there will be a better way) with a "for each" loop, it will write every result in the variable till the last one is saved on it. there will most likely be a better way, but this should also work. lg! ^^
Did not realize easy fix just need to add an order by id desc to grab last record entered.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Supplies</title>
<link rel="stylesheet" type="text/css" href="assets/bootstrap-3.3.6-dist/css/bootstrap.css">
<style type="text/css">
.content{
display: none;
}
</style>
</head>
<body>
<div class='content'>
<div class="navbar navbar-default navbar-fixed-top" id="topnav">
<div class="container-fluid">
<div class="navbar-header">
Supplies
</div>
</div>
</div>
<br><br><br><br><br>
<div class='container-fluid'>
<div class='row'>
<div class='col-md-2'></div>
<div class='col-md-8'>
<div class="panel panel-default">
<div class="panel-heading"><h1>Thank you!</h1></div>
<div class="panel-body">
Hello <?php echo $_SESSION['uname']; ?>, your payment is successful.
<br>Your Transaction ID is <?php echo $trid; ?>
<br>You can continue with your shopping.
<p></p>
<a href="profile.php" class='btn btn-success btn-lg'>Back to store</a>
</div>
</div>
<div class='col-md-2'></div>
</div>
</div>
</div>
</div>
<!--Pre-loader -->
<div class="preload"><img src="assets/images/loading.gif" style="width:400px;
height: 400px;
position: relative;
top: 0px;
left: 469px;"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="assets/bootstrap-3.3.6-dist/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(".preload").fadeOut(5000, function(){
$(".content").fadeIn(500);
});
</script>
</body>
</html>
How to make an id from a PHP while echo loop make work with JQuery AJAX
I want to make an id reference "logout" work when clicked from my php code. Please this would aid me very well in continuing the project. this method is important because it involves phonegap
php file
The php file gets user details from the database. the logout id is used to call the php page through an AJAX request and then log the user out and redirect them.
<?php
session_start();
$con = mysqli_connect("localhost", "*****", "*****", "*****");
//check connection...
if ($con === false) {
die ("couldn't connect to SQL Server");
}
if (isset($_SESSION['people_email'])){
$selectdata = "SELECT * FROM people WHERE people_email = '".$_SESSION['people_email']."'" ;
$query = mysqli_query($con, $selectdata);
while ($row = mysqli_fetch_array($query)) {
echo '<div class="ui fluid card">';
echo '<div class="extra content">';
echo '<div class="left floated meta">';
echo '<a href="#" id="logout">';
echo '<i class="remove circle icon"></i>';
echo "Log out";
echo '</a>';
echo '</div>';
echo '<div class="right floated meta">';
echo '<a>';
echo '<i class="plus icon"></i>';
echo "Upload a photo";
echo '</a>';
echo '</div>';
echo '</div>';
echo '<div class="image">';
echo '<img src="/images/avatar2/large/kristy.png">';
echo '</div>';
echo '<div class="content">';
echo '<a class="header">'.$row['people_name'].'</a>';
echo '<div class="meta">';
echo '<span class="date">'.$row['people_name'].'</span>';
echo '</div>';
echo '<div class="description">'.$row['people_email'].'</div>';
echo '</div>';
echo '<div class="extra content">';
echo '<a><i class="send icon"></i>'.$row['people_username'].'</a>';
echo '<a><i class="alarm icon"></i>'.$row['people_username'].'</a>';
echo '</div>';
echo '</div>' ;
}
}
else {
echo "no";
}
?>
this is the HTML file.
the html file graps the user data for php echo and displays them.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />
<!-- Path to your custom app styles-->
<link rel="stylesheet" href="css/my-app.css">
<link rel="stylesheet" href="Semantic/semantic.min.css">
<!--<link rel="stylesheet" type="text/css" href="css/index.css" />-->
<title>MyApp</title>
</head>
<body>
<!-- Views -->
<div class="views">
<!-- Your main view, should have "view-main" class -->
<div class="view view-main">
<!-- Pages container, because we use fixed navbar and toolbar, it has additional appropriate classes-->
<div class="pages navbar-fixed toolbar-fixed">
<!-- Page, "data-page" contains page name -->
<div class="page " data-page="profile">
<!-- Top Navbar. In Material theme it should be inside of the page-->
<div class="navbar bar-color">
<div class="navbar-inner">
<div class="left"><i class="bell icon"></i>
</div>
<div class="center"><form><input size="50px" type="search" placeholder="Search"/></form></div>
<div class="right">
<!-- Right link contains only icon - additional "icon-only" class-->
<i class="building outline icon"></i>
</div>
</div>
</div>
<!-- Toolbar. In Material theme it should be inside of the page-->
<div class="toolbar toolbar-bottom bar-color">
<div class="toolbar-inner">
<!-- Toolbar links -->
<i class="eye icon"></i>
<i class="calendar icon"></i>
<i class="plus icon"></i>
<i class="user icon"></i>
</div>
</div>
<!-- Scrollable page content -->
<div class="page-content" >
<div id="profile" style="height:90%; width:90%;margin:auto;position:relative;top:20px;"></div>
</div>
</div>
</div>
</div>
</div>
<script src="js/jquery-2.2.3.min.js"></script>
<script src="Semantic/semantic.min.js"></script>
<script>
$(document).ready(function(){
$.ajax({
type: 'get',
url: 'profile.php',
dataType: 'html',
success: function (response) {
$('#profile').html(response);
}
});
$("#logout").click(function() {
$.ajax({
type: 'get',
url: 'logout.php',
success: function (response) {
if (response == "success") {
window.location.href="login.html";
}else{
alert("You were not logged out");
}
}
});
});
});
</script>
</body>
</html>
You can include data attributes like data-page-id in the log out button html and use jQuery's attr() function to fetch that data.
<div id='logout' data-info='some_info'></div>
$('#logout').attr('data-info'); //returns the value
But I don't see why you need this extra info since it's just a log out button and you can bind it's id to click event.
How to convert from string to array with angularjs?
I'm trying to delete a row from my database table using php and angular. I'm using "Splice" but my data is a string and I need to convert to an array. can someone please help?
This is my code:
controller:
$scope.delete = function(deletingId, $index) {
var params = $.param({"customer_id":deletingId});
$http({
headers: {'Content-Type': 'application/x-www-form-urlencoded'},
url: 'http://localhost:8081/hamatkin/api/delete-customer.php/',
method: "GET",
data: params
}).success(function(data){
console.log(data);
var arr=JSON.parse(JSON.stringify(data))
$scope.customerDetails = arr;
$scope.customerDetails.splice($index, 1);
The error I'm getting :
angular.js:13550 TypeError: $scope.customerDetails.splice is not a function
delete-customer.php
<?php header('Content-Type: text/html; charset=utf-8');
$connect=mysqli_connect("localhost", "root", "", "hamatkin");
include_once 'Customer.php';
mysqli_query($connect,"SET character_set_client = utf8");
mysqli_query($connect,"SET character_set_connection = utf8");
mysqli_query($connect,"SET character_set_results = utf8");
// Check connection
if (mysqli_connect_errno()) {
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
$customer = new Customer();
if(isset($_GET['customer_id'])){
$customer_id = $_GET['customer_id'];
$del = "DELETE FROM posts WHERE customer_id='".$customer_id."'";
mysql_query($connect, $del);
}
$newURL = "/hamatkin/#/customerCards";
header('Location: '.$newURL);
?>
html
<tbody>
<tr ng-repeat="x in customers | filter:search_query | orderBy: order_query:reverse_query">
<!-- <td>{{$index + 1}}</td> -->
<td>{{ x.customer_id}}</td>
<td>{{ x.kind_Of_Customer}}</td>
<td>{{ x.full_name}}</td>
<td>הצג פרטי לקוח </td>
<td><a ng-click="delete(x.customer_id, $index)" class="btn btn-primary btn- active">מחיקה</td>
</tr>
</tbody>
console.log(data)
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Styles -->
<link rel="stylesheet" href="lib\bootstrap.css" />
<link rel="stylesheet" href="styles/layout.css" />
<!-- Liberaries -->
<script src="scripts/angular.min.js"></script>
<script src="lib/jquery-1.12.0.min.js"></script>
<!-- <script src="lib/angular.js"></script> -->
<script src="lib/angular-route.js"></script>
<script src="scripts/angular-ui/ui-bootstrap-tpls.min.js"></script>
<!-- <script src="scripts/angular-route.min.js"></script> -->
<script src="lib/bootstrap.js"></script>
<link href="scripts\bootstrap.min.js" />
<!-- Application Model, Direectives, Services & Controllers -->
<script src="scripts/App.js"></script>
<!-- <script src="scripts/angular.min.js"></script> -->
<!-- controllers-->
<script src="Controllers/loginCtrl.js"></script>
<script src="Controllers/customerFormCtrl.js"></script>
<script src="Controllers/customerCardsCtrl.js"></script>
<script src="Controllers/stockCtrl.js"></script>
<script src="Controllers/bodyCtrl.js"></script>
<script src="Controllers/ordersCtrl.js"></script>
<script src="Controllers/reportsCtrl.js"></script>
<script src="Controllers/recordExpensesCtrl.js"></script>
<script src="Controllers/supplierListCtrl.js"></script>
<script src="Controllers/supplierFormCtrl.js"></script>
<script src="Controllers/customerCardDetailsCtrl.js"></script>
<title>מערכת מידע רומן המתקין</title>
</head>
<body ng-app="dataSystem" ng-controller="bodyCtrl">
<!--Navigation Bar-->
<nav class="navbar navbar-inverse navbar-fixed-top" ng-hide="isNavTabsHidden()">
<div class="container-fluid">
<div class="navbar-header navbar-right">
<img class="img-rounded" src="images/black logo.jpg" style="width:155px" />
</div>
<ul class="nav navbar-nav navbar-right">
<li>דוחות</li>
<li>הכנסות והוצאות</li>
<li>ניהול מלאי וספקים</li>
<li>ניהול הזמנות</li>
<li>ניהול לקוחות</li>
</ul>
<ul class="nav navbar-nav navbar-left">
<li><span class="glyphicon glyphicon-log-out"></span> התנתק</li>
<li><span class="glyphicon glyphicon-wrench"></span> ניהול הרשאות</li>
</ul>
</div>
</nav>
<br /><br /><br />
<!--טאב ניהול לקוחות-->
<div class="containers-wrapper">
<div class="container" ng-hide="costumerHidden()">
<div class="list-group">
טופס רישום לקוח
כרטיסי לקוחות
רשימת פניות מלקוחות
</div>
</div>
<!--טאב ניהול מלאי וספקים-->
<div class="container" ng-hide="stockHidden()">
<div class="list-group">
טופס רישום מלאי
טופס עריכת/מחיקת מלאי
רשימת מלאים למכירה
רשימת ציוד עבודה
בדיקת זמינות מלאי
טופס רישום ספק
רשימת ספקים
</div>
</div>
<!--טאב ניהול הזמנות-->
<div class="container" ng-hide="ordersHidden()">
<div class="list-group">
טופס הזמנה חדשה
רשימת הזמנות
טופס הצעת מחיר
הצעות מחיר בהמתנה
</div>
</div>
<!--טאב דוחות-->
<div class="container" ng-hide="reportsHidden()">
<div class="list-group">
דו"ח מלאים לפי סוגים
דו"ח הצעות מחיר
דו"ח מכירות על פי סוגי מלאי
דו"ח הוצאות לספקים
דו"ח הוצאות לפי חודשים
דו"ח הכנסות לפי חודשים
דו"ח לקוחות חדשים חודשי
</div>
</div>
<!--טאב הכנסות והוצאות-->
<div class="container" ng-hide="isIncome_expensesHidden()">
<div class="list-group">
טופס תיעוד הוצאה
טופס תיעוד הכנסה
רשימת הוצאות
</div>
</div>
<!--left side screen-->
<div class="view-content left-side-screen">
<ng-view></ng-view>
</div>
</div>
<!--Footer-->
<div class="footer" ng-hide="isFooterHidden()">
<p>Copyright # 2016 Denis & Denis. All Rights Reserved</p>
</div>
</body>
</html>
Hi u have to first find the index which one u wants to splice then u have to splice , SPlice is for Array Items check whether the Item is array first for refrence https://plnkr.co/edit/Nzz4T4AmkLmcr7frxyH1?p=preview
JS
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.arrylist = [{
"id": 53,
"name": "abced"
}, {
"id": 53,
"name": "gayu"
}]
$scope.doc = {
"id": 53,
"name": "abced"
}
console.log($scope.arrylist)
var index = $scope.arrylist.findIndex(function(item) {
if (item.id == $scope.doc.id) {
return true;
}
});
if (index !== -1) {
//Removing the test from list;
$scope.arrylist.splice(index, 1);
}
console.log($scope.arrylist)
});
Using JSON.parse will turn JSON into JS object. In your scenario, you are invoking a splice function which exists on Array prototype, whereas your arr variable is in fact a plain string object which has no such function.
Assuming your string is formatted in some way, let's say - customer names are seperated by a comma, you can use split function. This will turn your string into an array of seperated elements devided by the required format.
Like this:
var clientsToDelete = arr.split(","); // comma splitting
clientsToDelete.splice($index, 1);
Javascript Reload after Jquery call with Php
I have a problem I've been trying to solve for the past days. I have a Jquery that updates an HTML and creates new content inside a div tag. The thing is that the javascript does not apply on the generated code. In other words, I could take the exact output that the Php gives me, put it in the html code directly and it works, but if it comes from the php while the page is running it won't work, it doesn't display the images correctly in a slideshow jflow.
Here is the HTML header
<!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>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/jquery-1.2.6.pack.js" type="text/javascript"></script>
<script src="js/jquery.robwalsh.randomImageOnload.js" type="text/javascript" charset="utf-8"></script>
<script src="js/application.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.flow.1.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("div#controller").jFlow({
slides: "#slides",
width: "785px",
height: "480px"
});
});
</script>
<script type="text/javascript">
/* SLIDESHOW AT HOMEPAGE */
function slideSwitch() {
var $active = $('#slideshow IMG.active');
if ( $active.length == 0 ) $active = $('#slideshow IMG:last');
var $next = $active.next().length ? $active.next()
: $('#slideshow IMG:first');
$active.addClass('last-active');
$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 1000, function() {
$active.removeClass('active last-active');
});
}
$(function() {
setInterval( "slideSwitch()", 5000 );
});
</script>
<script type="text/javascript">
/* Function to show/hide the side menu for all images */
function showDIV(e)
{
var notEmpty = true;
var count = 0;
while(document.getElementById('subCat'+count) != null)
{
document.getElementById('subCat'+count).style.display = 'none';
count++;
}
document.getElementById(e).style.display = 'block';
}
/* MENU INTERACTION */
function showContent(cmd, id)
{
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("contentMain").innerHTML=xmlhttp.responseText;
document.getElementById("controller").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getMain.php?cmd="+cmd+"&id="+id,true);
xmlhttp.send();
}
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-21909616-1']);
_gaq.push(['_setDomainName', '.karimtabar.com']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<meta http-equiv="Content-Type" content="text/html; charset=ISO 8859-1" />
<link rel="stylesheet" type"text/css" href="css/stylesheet.css" />
<link rel="shortcut icon" href="logo/icon.jpg">
<title>KARIM V TABAR PHOTOGRAPHY</title>
<meta name="description" content="Karim V Tabar: photographer, new media, film, design." />
</head>
<body style="width:100%;">
<div id="wholewrapper" >
<!-- HEADER // TOP PORTION OF SITE -->
<div id="logoheader">
<h5 class="logo">
KARIM VICTOR TABAR
</h5>
</div>
<div class="wrapper">
<div class="navcontainer">
<?php
$count = 0;
foreach (new DirectoryIterator('images/menuImages') as $fileInfo)
{
if($fileInfo->isDot()) continue;
echo "<h2 class='acc_trigger' onclick=\"showDIV('subCat".$count."'); showContent(1, '".$fileInfo->getFilename() ."');\"><a href='#'>".$fileInfo->getFilename() ."</a></h2><div class='acc_container' id='container".$count."'><div class='block' name='subCats' id='subCat".$count."'><ul>";
foreach (new DirectoryIterator('images/menuImages/'.$fileInfo) as $fileInfo2)
{
if($fileInfo2->isDot() || $fileInfo2 == "thumbnails") continue;
echo "<li>".$fileInfo2->getFilename() . "</li>";
}
echo "</ul></div></div>";$count++;
}
?>
<div id="navigationlinks">
<ul>
<li>BIO</li>
<li>CONTACT</li>
<li>BLOG</li></ul>
</div>
</div>
<!-- Images Thumbnails Categories -->
<div id="contentMain">
<div id="slideshow">
<img src="images/homepage/bb1.jpg" width = "750px" alt="" class="active" />
<img src="images/homepage/et1.jpg" width = "750px" alt="" />
<img src="images/homepage/gaga1.jpg" width = "750px" alt="" />
<img src="images/homepage/gaga2.jpg" width = "750px" alt="" />
<img src="images/homepage/hkartwalk.jpg" width = "750px" alt="" />
<img src="images/homepage/homepagegirl.jpg" width = "750px" alt="" />
<img src="images/homepage/rodeo2.jpg" width = "750px" alt="" />
<img src="images/homepage/rodeo5.jpg" width = "750px" alt="" />
<img src="images/homepage/silverwig_gaga.jpg" width = "750px" alt="" />
<img src="images/homepage/wavy1.jpg" width = "750px" alt="" />
<img src="images/homepage/Wenya.jpg" width = "750px" alt="" />
</div>
</div>
</body>
</html>
And Here is the Php code that generates the new HTML(getMain.php)
<?php
$cmd=$_GET["cmd"];
$id = $_GET["id"];
/* The Thumbnail Display */
if($cmd == 1)
{
echo "<div id='thumbnailcontentplaceholder'>";
echo "<div id='thumbnailcontent'>";
echo "<ul>";
$dir = "images/menuImages/".$id."/thumbnails";
// Open a known directory, and proceed to read its contents
if (is_dir($dir)) {
if ($dh = opendir($dir)) {
while (($file = readdir($dh)) != false) {
if(is_dir($file)) continue;
echo "<li>";
echo "<a href='#' title='".$file."'><img src='".$dir."/".$file."' alt='' /></a>";
echo "<div id='thumnailtitle'>".substr($file, 0, strpos($file, "."))."</div>";
echo "</li>";
}
closedir($dh);
}
}
echo "</div></div>";
}
if($cmd == 2)
{
$dir = "images/menuImages/".$id;
$count = 1;
$nFiles = countFiles($dir);
echo "<div id='imageplaceholder'> \n";
/* No1 No2 No3 ... */
echo "<div id='controller' class='hidden'>\n";
for($i =1; $i < $nFiles; $i++)
{
echo "<span class='jFlowControl'>No ".$i."</span>\n";
}
echo "</div>";
echo "<div id='slides'>";
if (is_dir($dir)) {
if ($dh = opendir($dir)) {
while (($file = readdir($dh)) != false) {
if(is_dir($file)) continue;
echo "<div><img src='".$dir."/".$file."'></div>\n";
}
closedir($dh);
}
}
echo "</div>\n";
echo '<div id="prevNext">
<a id="prev_275997_0" class="jFlowPrev" href="#" onfocus="this.blur()">Previous</a>
<span class="slide_slash">/</span>
<a id="next_275997_0" class="jFlowNext" href="#" onfocus="this.blur()">Next image</a> </div>';
echo '<div id="credits2">
BEIJING BLUE<br>
Photographed by: Karim V Tabar<br></div></div>';
}
function countFiles($dir)
{
$dh = opendir($dir);
while (false !== ($filename = readdir($dh))) {
$files[] = $filename;
}
if ($files)
$num_of_files = count($files) - 2; // we substract 2 because . and .. are included
else
die('there is an error');
return $num_of_files;
}
?>
Thanks
Real HTML that used to work was like this
<!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>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script src="../../js/jquery-1.2.6.pack.js" type="text/javascript"></script>
<script src="../../js/jquery.flow.1.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
//Set default open/close settings
$('.acc_container').hide(); //Hide/close all containers
$('.acc_trigger:first').addClass('active').next().show(); //Add "active" class to first trigger, then show/open the immediate next container$(document).ready(function(){
//On Click
$('.acc_trigger').click(function(){
('#open').click()
});
});
</script>
<script type="text/javascript">
$(function() {
$("div#controller").jFlow({
slides: "#slides",
width: "785px",
height: "480px"
});
});
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-21909616-1']);
_gaq.push(['_setDomainName', '.karimtabar.com']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type"text/css" href="../../css/stylesheet.css">
<link rel="shortcut icon" href="../../logo/icon.jpg">
<title>KARIM V TABAR PHOTOGRAPHY</title>
<meta name="description" content="Karim V Tabar: photographer, new media, film, design." />
</head>
<body style="width:100%;">
<div id="wholewrapper">
<!-- HEADER // TOP PORTION OF SITE -->
<div id="logoheader">
<h5 class="logo">
KARIM VICTOR TABAR
</h5>
</div>
<div class="wrapper">
<div class="navcontainer">
<h2 class="acc_trigger">EDITORIAL</h2>
<div class="acc_container">
<div class="block"> <ul> <li>BEIJING BLUE</li>
<li>GAGA</li>
<li>DOUBLE TROUBLE</li>
<li>EXTRATERRESTRIAL DREAMS</li>
<li>LIFE RUSH</li>
<li>RODEO GLAM</li>
<li>WANDERLUST</li>
<li>RUN AWAY ANGEL</li>
<li>RUSSIAN STANDARD</li>
<li>HOLLYWOOD HILLS</li></ul>
</div>
</div> <h2 class="acc_trigger">TRAVEL</h2>
<div class="acc_container">
<div class="block">
<ul>
<li>HONG KONG</li> </li>
<li>DUBAI, UAE</li>
<li>KYOTO, JAPAN</li>
<li>MIAMI, USA</li>
<li>L.A., USA</li></ul>
</div>
</div>
<h2 class="acc_trigger">ART</h2>
<div class="acc_container">
<div class="block">
<ul> <li>MIRROR ANGEL</li>
<li>ROUGE</li>
<li>VIOLET</li>
<li>NOIRE</li></ul>
</div>
</div> <h2 class="acc_trigger">VIDEO</h2>
<div class="acc_container">
<div class="block">
<ul>
<li>ZIGMAT - BETWEEN BULLETS VIDEO</li><li>ZIGMAT - BEHIND THE SCNES</li></ul>
</div>
</div>
<h2 class="acc_trigger">EXHIBITIONS</h2>
<div class="acc_container">
<div class="block">
<ul>
<li>2009 RESIDENT, MONTRÉAL, CANADA</li><li>2011 ART WALK, HONG KONG, CHINA</li>
</ul>
</div>
</div><!-- <h2 class="acc_trigger">PRESS</h2>
<div class="acc_container">
<div class="block">
<ul>
<li>NME</li>
<li>LIVE FAST MAG</li>
<li>GURU</li></ul>
</div>
</div>
--><div id="navigationlinks">
<ul>
<li>BIO</li>
<li>CONTACT</li>
<li>BLOG</li></ul>
</div> <!-- <div id="buyherelogo">
<img src="../../store/buyhere.png" width="150" border="0">
</div>
--></div>
<!--IMAGE // RIGHT PORTION -->
<div id="imageplaceholder">
<div id="controller" class="hidden">
<span class="jFlowControl">No 1</span>
<span class="jFlowControl">No 2</span>
<span class="jFlowControl">No 3</span>
<span class="jFlowControl">No 4</span>
<span class="jFlowControl">No 5</span>
<span class="jFlowControl">No 6</span>
<span class="jFlowControl">No 7</span>
</div>
<div id="slides">
<div><img src="../../images/fashion/beijingblue/bb1.jpg" width="785" height="480"></div>
<div><img src="../../images/fashion/beijingblue/bb2.jpg" width="785" height="480"></div>
<div><img src="../../images/fashion/beijingblue/bb3.jpg" width="785" height="480"></div>
<div><img src="../../images/fashion/beijingblue/bb4.jpg" width="785" height="480"></div>
<div><img src="../../images/fashion/beijingblue/bb5.jpg" width="785" height="480"></div>
<div><img src="../../images/fashion/beijingblue/bb6.jpg" width="785" height="480"></div>
<div><img src="../../images/fashion/beijingblue/bb7.jpg" width="785" height="480"></div>
</div>
<div id="prevNext">
<a id="prev_275997_0" class="jFlowPrev" href="#" onfocus="this.blur()">Previous</a>
<span class="slide_slash">/</span>
<a id="next_275997_0" class="jFlowNext" href="#" onfocus="this.blur()">Next image</a>
</div>
<div id="credits2">
BEIJING BLUE<br>
Photographed by: Karim V Tabar<br>
</div>
</div>
</div>
</div>
</body>
</html>
When you bind events, or call jQuery functions, the element needs to exist in the DOM for jQuery to find it.
Because you are populating your page after the script has executed, there's no element's to be selected (despite placing the selection in a document.ready callback.
If you did a console.log on $('div#controller') you'd see an empty jQuery object.
If you, instead, used the complete callback to register your jsFlow call, you should see things working as expected.
Is there a reason you're not using jQuery's normalized ajax functions?
You use <div id="contentMain"> in the code, but you call it on div#controller? Anyways, it wouldn't work even if you specified the correct selector, because as zzzzBov answered, when the page loads, your div is empty. You have to recall the jFlow function after you update the content:
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("contentMain").innerHTML=xmlhttp.responseText;
$("div#contentMain").jFlow({
slides: "#slides",
width: "785px",
height: "480px"
});
}