JavaScript onchange not working on dropdown element - javascript

I am creating an application that will search db and later on allow user to compare results. For that i need multiple dependable drop down menus. I am not expert coder, have some knowledge of HTML and PHP. For this i have to use Javascript.
Now if i try to use same script with diferent information that will create dropdown3, it does not work.
Here is code of index page:
<?php
require('assets/classes/manufacturer.php');
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link href="style/style.css" rel="stylesheet" type="text/css">
<title>Untitled Document</title>
</head>
<body>
<div id="wrapper">
<div id="sidebar">
<div id="dropdown1">
<select name="proizvodac" id="proizvodac-select">
<option value="">Odaberi Proizvođača</option>
<?php foreach($proizvodaci as $proizvodac): ?>
<option value="<?php echo $proizvodac['id']; ?>"><?php echo $proizvodac['proizvodac']; ?></option>
<?php endforeach; ?>
</select>
</div>
<div id="dropdown2">
</div>
<div id="dropdown3">
</div>
</div>
<div id="grupe">
<div id="grupa1">
</div>
<div id="grupa2">
</div>
<div id="grupa3">
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/global.js"></script>
</body>
</html>
And script is here:
$('#proizvodac-select').on('change', function() {
var self = $(this);
$.ajax({
url: 'http://localhost/assets/classes/model.php',
data: { proizvodac: self.val()},
success: function(data){
$('#dropdown2').html(data);
}
});
});
This should call model.php when selection is made in first dropdown, first dropdown is created from manufacturer.php that is required on start.
model.php:
<?php
require('database.php');
if(isset($_GET['proizvodac'])) {
$modelQuery = "SELECT
*
FROM auti
WHERE proizvodac_id = :proizvodac_id
";
$modeli = $db->prepare($modelQuery);
$modeli->execute(['proizvodac_id' => $_GET['proizvodac']]);
$selectedModel = $modeli->fetch(PDO::FETCH_ASSOC);
}
?>
<select name="model" id="model-select">
<option value="">Odaberi Model</option>
<?php foreach($modeli as $model): ?>
<option value="<?php echo $model['id']; ?>"><?php echo $model['model']; ?></option>
<?php endforeach; ?>
</select>
NOTE:
I have probably did something wrong when i was trying to create third dropdown that depends on second one.
EDIT: I have did something wrong, thanks kingkero for finding it.
So what i need now, if you can tell me how to get third dropdown menu and so on. I need like 10 of them. All should depend on previous one.
And if you notice some bad practice in my code, please let me know.
Now i got script for third dropdown and it is working if run from console in chrome but can't get it to work by itself.
SCRIPT HERE:
$('#model-select').on('change', function() {
var self = $(this);
$.ajax({
url: 'http://localhost/assets/classes/opcija_modela.php',
data: { model: self.val()},
success: function(data){
$('#dropdown3').html(data);
}
});
});
Thank you in advance

Your Script file should be include with in the head tag
Ex:
<?php
require('assets/classes/manufacturer.php');
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link href="style/style.css" rel="stylesheet" type="text/css">
<title>Untitled Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/global.js"></script>
</head>
<body>
<div id="wrapper">
<div id="sidebar">
<div id="dropdown1">
<select name="proizvodac" id="proizvodac-select">
<option value="">Odaberi Proizvođača</option>
<?php foreach($proizvodaci as $proizvodac): ?>
<option value="<?php echo $proizvodac['id']; ?>"><?php echo $proizvodac['proizvodac']; ?></option>
<?php endforeach; ?>
</select>
</div>
<div id="dropdown2">
</div>
<div id="dropdown3">
</div>
</div>
<div id="grupe">
<div id="grupa1">
</div>
<div id="grupa2">
</div>
<div id="grupa3">
</div>
</div>
</div>
</body>
</html>

Related

AJAX dynamic Dependent Select Box

What i need?
I need to create an input form that must be fille up with dynamic dropdown list as per below screenshot.
What is my actual script??
Actually is divided in some files, i'll ignore the database connection and the functions file.
assign.php
<?php
session_start();
ob_start();
if(isset($_SESSION['log'])){
include ('connection.php');
include ('functions.php');
//Variables que vienen desde el boton de ASSIGN
$szDescription = $_POST['szDescription'];
$szRequestor = $_POST['szRequestor'];
$szRecived = $_POST['szRecived'];
$szCID = $_POST['szCID'];
?>
<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">
<link rel="stylesheet" href="..\css\bootstrap.min.css">
<link rel="stylesheet" href="..\css\style.css">
<script type="text/javascript">
// Select Category function
$(document).ready(function(){
$('#szTeam').on('change',function(){
var team_selected = $(this).val();
$.ajax({
type:'POST',
url:'getcategory.php',
data:'teamselected='+team_selected,
success:function(html){
$('#optionCategory').html(html);
}
});
});
});
// FIN TEAM Select
</script>
</head>
<body>
<div class="container-fluid"><div class="container">
<p class="bg-Success">You are about to assign this ticket:</p>
<p><b>Subject:</b><i> <?php echo $szDescription ?></i></p>
<p><b>From:</b><i> <?php echo $szRequestor ?></i></p>
<p><b>Recived:</b><i> <?php echo $szRecived ?></i></p>
<form action="" method="post">
<div class="form-group">
<label for="szTeam">Team</label>
<select class="form-control form-control-sm" name="szTeam" id="szTeam">
<option>Select Team</option>
<?php
foreach($_SESSION['userteam'] as $userteamsArray){
echo "<option>".$userteamsArray."</option>";
}
?>
</select>
</div>
<div class="form-group">
<label for="optionCategory">Category</label>
<select class="form-control form-control-sm" name="optionCategory" id="optionCategory" >
<option></option>
</select>
</div>
<button type="submit" class="btn btn-primary" name="SubmitButton">Submit</button>
</form>
</div></div>
</body>
</html>
getcategory.php
<?php
include ('connection.php');
$team = $_POST['teamselected'];
$query = "SELECT szActivitySubCategory FROM Subcategories WHERE szTeam = '$team'";
$result = sqlsrv_query($conn,$query);
if(!$result){
echo "<center>Error detected:Query <b>".$query."</b> did not work.
<br>Please contact the administrator</center><br>".sqlsrv_errors($query);
}
$ouput = "<option value=\"\">Select Category</option>";
while($row = sqlsrv_fetch_array($result, SQLSRV_FETCH_ASSOC))
{
$selected = $row['szActivitySubCategory'];
$ouput = $ouput."<option value='$selected'> $selected </option>";
}
echo $ouput;
?>
What is happening??
The code is not working as expected. I tested the getcategory.php file using a default team and works properly.. it return an option list with the results of the query.
Also, the rest of the code seems to be correct.
The jquery is suppose to insert the ouput from getcategory.php in the id ('#optioncategory') but it doesn't.
I've already read:
http://www.lisenme.com/dynamic-dependent-select-box-using-jquery-ajax-php/
But it does not help me at all because my code is simillar and have the same structure.
Any suggestion to fix it??
Thanks in advance!
The code were incomplete. It was a missing script on the header:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Regards,

Building dependent dropdown with Ajax and Jquery: having trouble getting 2 php GET variables to show up on get_state.php - ajax is sending too

I have index.php?WORKORDER_BASE_ID=w21592 -> This is getting the work order number that I entered, that searches the MSSQL DATABASE. I call $_GET['WORKORDER_BASE_ID']; to be used to run other queries to get database results.
I need a dependent drop down. The first drop down runs the query and returns the result and it uses ajax to go to get_state.php. There it's showing up undefined varialbe/index when I try to CALL $_GET['WORKORDER_BASE_ID']; to run the 2nd query and output it in the second dropdown. How can I get around this?
<?php
require_once("dbcontroller.php");
$db_handle = new DBController();
$query ="SELECT DISTINCT R.PART_ID AS PartId, R.PART_ID + ' (' +P.DESCRIPTION + ')' AS PartFull
FROM REQUIREMENT AS R INNER JOIN PART AS P
ON R.PART_ID = P.ID
WHERE NOT EXISTS (SELECT PART_ID FROM TRACE_PROFILE TP WHERE R.PART_ID=TP.PART_ID)
AND (R.WORKORDER_BASE_ID = '".$_GET["WORKORDER_BASE_ID"]."')";
$results = $db_handle->runQuery($query);
?>
<html>
<head>
<TITLE>jQuery Dependent DropDown List - Countries and States</TITLE>
<head>
<style>
body{width:610px;}
.frmDronpDown {border: 1px solid #F0F0F0;background-color:#C8EEFD;margin: 2px 0px;padding:40px;}
.demoInputBox {padding: 10px;border: #F0F0F0 1px solid;border-radius: 4px;background-color: #FFF;width: 50%;}
.row{padding-bottom:15px;}
</style>
<script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
<script>
function getState(val) {
$.ajax({
type: "GET",
url: "index.php",
data:'PartFull='+val,
success: function(data){
$("#state-list").html(data);
}
});
}
function selectCountry(val) {
$("#search-box").val(val);
$("#suggesstion-box").hide();
}
</script>
</head>
<body>
<?
ini_set('display_errors',1);
error_reporting(E_ALL);
date_default_timezone_set('America/New_York');
$dateunix = new DateTime();
$dateunix = $dateunix->getTimestamp();
?>
<input type="textarea" name="WORKORDER_BASE_ID" rows="3" cols="5" id="WORKORDER_BASE_ID" value="<?= $_GET["WORKORDER_BASE_ID"];?>" data-theme="f" class="ui-input-text ui-body-f ui-corner-all ui-shadow-inset" required>
<input method="get" id="button" type="submit">
<h5>WORK ORDER ID:</h5><labelh5><center><? echo $_GET["WORKORDER_BASE_ID"];?></center></labelh5>
<div class="frmDronpDown">
<div class="row">
<label>Partid:</label><br/>
<select name="PartFull" id="partfull-list" class="demoInputBox" onChange="getState(this.value);">
<option value="">Select Part Id:</option>
<?php
foreach($results as $country) {
?>
<option value="<?php echo $country["PartId"]; ?>"><?php echo $country["PartFull"]; ?> </option>
<?php
}
?>
</select>
</div>
<div class="row">
<label>op seq no:</label><br/>
<select name="state" id="state-list" class="demoInputBox">
<option value="">Select Operation Seq. NO</option>
</select>
</div>
</div>
</body>
</html>
get_state.php
<!doctype html>
<html>
<head>
<meta name="viewport" content="height=device-height, width=device-width, initial-scale=1.0, user-scalable=no" />
<title>GET STATE </title>
<!-- jQuery -->
<link href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<!-- jQuery -->
</head>
<body>
<input name="WORKORDER_BASE_ID" type="hidden" value="<?= $_GET["WORKORDER_BASE_ID"];?>" />
<?php
ini_set('display_errors',1);
error_reporting(E_ALL);
date_default_timezone_set('America/New_York');
$dateunix = new DateTime();
$dateunix = $dateunix->getTimestamp();
require_once("dbcontroller.php");
$db_handle = new DBController();
if($_GET["PartFull"] != "") {
echo $wobi;
echo $_GET['PartFull'];
echo $_GET['WORKORDER_BASE_ID'];
$query ="SELECT DISTINCT R.OPERATION_SEQ_NO AS OSN, '(' + CONVERT(VARCHAR(30), R.OPERATION_SEQ_NO) + ') ' + O.RESOURCE_ID AS Expr1
FROM OPERATION
AS O
INNER JOIN REQUIREMENT AS R
ON R.OPERATION_SEQ_NO = O.SEQUENCE_NO AND O.WORKORDER_BASE_ID = R.WORKORDER_BASE_ID
WHERE (R.WORKORDER_BASE_ID = '".$_GET['WORKORDER_BASE_ID']."') AND (R.PART_ID = '" . $_GET["PartFull"] . "')";
$results = $db_handle->runQuery($query);
?>
<option value="">Select Operation Seq. NO 2</option>
<?php
foreach($results as $state) {
?>
<option value="<?php echo $state["OSN"]; ?>"><?php echo $state["Expr1"]; ?></option>
<?php
}
}
?>
</body>
</html>

Using Pop up and keep the form open

I try to use pop up to calling my form, it works but every time I pick a value on combo box (onchange action), the form won't keep open so I have to click that pop up again (the value is retain though)
any idea?
here's the code:
<head>
<title>JQuery Popup | JQuery Slide Popup | Demo</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="popup.js"></script>
</head>
<body>
<div id="wrapper">
<div id="overlay" class="overlay"></div>
<a onclick="openOffersDialog();">Click Here To See The PopUp</a>
<div id="boxpopup" class="box">
<a onclick="closeOffersDialog('boxpopup');" class="boxclose"></a>
<div id="content">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Info Tarif</title>
</head>
<?php include('connection.php'); ?>
<body>
<?php
$query = "SELECT distinct (kota_kabupaten) FROM `ongkirjne` order by kota_kabupaten ASC ";
$result = mysql_query($query);
?>
<form name="satu" method=GET action="index.php" openOffersDialog();>
Pilih Daerah Tujuan :
<select name="kota" onChange='this.form.submit();'>
<option value="">-Pilih Kota/Kabupaten-</option>;
<?php while ($row = mysql_fetch_assoc($result)) { ?>
<option <?php if($_REQUEST['kota'] == $row['kota_kabupaten']) echo "selected" ?> ><?php echo $row['kota_kabupaten']; ?></option>
<?php } ?>
</select>
<br>
Pilih Kecamatan :
<select name='kec' class='nama' Method='GET'>
<?php
echo"<option value>-Pilih Kecamatan-</option>";
$city= $_GET['kota'];
if (isset($_GET['kota']))
{
$query = "SELECT * FROM `ongkirjne` where kota_kabupaten like '%$city%'";
$result = mysql_query($query);
while ($row = mysql_fetch_assoc($result)) {?>
<option <?php if($_REQUEST['kec'] == $row['kecamatan']) echo "selected" ?> >
<?php echo $row['kecamatan']; ?></option>
<?php } ?>
<?php } ?>
</select> Berat : <input type="text" name="berat" value="<?php echo htmlspecialchars($_GET['berat']); ?>"/>
<?php
echo " <input type='submit' name='hitung' value='hitung' onclick='hitung()'/>";
my desire result are:
1. when I click the pop up link, the form shows (ok)
2. when I pick the value on first combo box, the form retain (fail) -> using on change action.
3. when I pick the value on first combo box, the value retain (ok)
4. when I click submit button(hitung), the value retain and the function works (ok)
I want all of them on the same page.
thank you
If I understand what your problem is I believe it can be fixed by just not having any code that hides the form.
Are you using the .toggle function? If so, change that to .show
If you'd like the form to be hidden again after it's submitted then that will be done automatically when the page refreshes (given you're not using AJAX). You can set the action to "#" for the page to redirect to itself instead of another file.

Ajax call is inserting data on page in some other place

I am making use of ajax call to insert data in starting of my page. this is more like a wall post script. Whenever user posts something, the latest post is shown in the top of the posts page.
I am using JS, PHP and an HTML page.
here is my js code:
$(function() {
$("#tweet_submit").click(function()
{
var tweet = $("#tweet").val();
var x = $('.preview').attr('id');
if(x)
var z= x;
else
var z=0;
var dataString = 'tweet='+ tweet+ '&z=' +z;
if(tweet=='')
{
alert('Please type your tweet here');
}
else
{
alert('into post');
$.ajax({
type: "POST",
url: "WallPost/post_tweet1.php",
data: dataString,
cache: false,
success: function(html){
$("#tweet").val('');
$("#preview").hide();
$("#content").prepend(html);
}
});
}return false;
});
});
This is my PHP page:
post_tweet.php
<?php
include("includes/db.php");
include("session.php");
include_once 'includes/time_stamp.php';
//echo "request sent to post";
if($_POST)
{
$tweet=$_POST['tweet'];
$upload_id=$_POST['z'];
$time=time();
$query = "INSERT INTO tweets(tweet,time,upload_id,uid_fk) VALUES ('$tweet','$time','$upload_id','$uid')";
if (!mysqli_query($con,$query))
{
die('Error: ' . mysqli_error($con));
}
else
{
$msg ="<br> 1 record added";
}
echo "<br>".$msg;
$sql=mysqli_query($con,"select T.tid, T.tweet, T.time, T.upload_id, U.username, U.fullname, U.email FROM tweets T, users U WHERE T.uid_fk=U.uid and T.uid_fk='$uid' order by T.tid DESC LIMIT 1");
//$show_result=mysqli_query($sql);
while($row=mysqli_fetch_row($sql))
{
echo "data start here";
$tid= "$row[0]";
$tweet= "$row[1]";
$time = "$row[2]";
$img_id= "$row[3]";
$username="$row[4]";
$fullname = "$row[5]";
$email = "$row[6]";
$lowercase = strtolower($email);
$imagecode = md5( $lowercase );
$image_sql=mysqli_query($con,"select image_name from uploads where upload_id='$img_id'");
while($data=mysqli_fetch_row($image_sql))
{
$image_name="$data[0]";
$chars = 7;
$text = $image_name." ";
$text = substr($text,0,$chars);
$imgtext = "pic.twitter/".$text."...";
}
//echo "<div class='center'>";
echo "<div class='tweet_box' id='$tid'>";
echo "<div class='tweet_user'><img class='user_img' src='http://www.gravatar.com/avatar/$imagecode?s=50'></div>";
echo "<div class='tweet_body'>";
?>
<div class='tweet_time'><?php time_stamp($time);?></div>
<?php
echo "<div><b><a href='http://twitter.com/$username'>$fullname</a></b> <span class='uname'>#$username</span></div>";
echo "<div class='tweet_text'>$tweet ";
if($img_id!=0)
{
echo "<a href=''/>$imgtext</a></div>";
}
else
{
echo "</div>";
}
echo "<div class='tweet_options'><div class='first_option'><a href='#'>Expand</a> </div><div class='sub_options'> <a href='#'>Reply</a> <a href='#'>Retweet</a> <a href='#'>Favourite</a></div></div>";
if($img_id!=0)
{
?>
<div class="tweet_image" id="tweetimage<?php echo $tid; ?>">
<center><img src="uploads/<?php echo $image_name; ?>" class="image_show"/></center></div>
<?php
}
echo "</div></div>";
?>
<div class="tweet_reply_box" id="replybox<?php echo $tid;?>">
<div><textarea rel="<?php echo $tid;?>" id="replytext<?php echo $tid;?>" class="reply" name="reply"
maxlength="140">#<?php echo $username;?> </textarea></div>
<div class="reply_button_bar" id="replybutton<?php echo $tid;?>">
<div><input type="submit" value=" Reply " class="reply_btn" id="<?php echo $tid;?>"/></div>
</div>
</div>
<div id="reply_load<?php echo $tid;?>" class="reply_load">
</div>
<?php
}
}
else { }
?>
And this is my HTML page:
Wallpost.php
<!doctype html>
<html>
<head>
<title>Design Modo - Code-pal | eCommerce Website Template - Dead Stocker</title>
<link rel="shortcut icon" href="http://www.code-pal.com/wp-content/themes/codpeal-new/favicon.ico">
<link rel="stylesheet" type="text/css" href="css/check_style.css" />
<link rel="stylesheet" href="css/wallpost/wtfdiary.css">
<link rel="stylesheet" href="css/wallpost/tipsy_title.css">
<script type="text/javascript" src="WallPost/js/jquery.min.js"></script>
<script type="text/javascript" src="WallPost/js/jquery.tipsy.js"></script>
<script src="WallPost/js/twitter.js"></script>
<script type="text/javascript" src="WallPost/js/jquery.form.js"></script>
</head>
<body>
<div class="page-wrap">
<div class="clear"></div>
<?php include("header.php"); ?>
<div class="clear"></div>
<div class="body-contents">
<?php include("left-body1.php"); ?>
<div class="center">
<br>
<div class="txthead"><strong>Share thoughts here</strong></div>
<?php
include("WallPost/index.php");
?>
</div>
</div>
<?php include("right-body.php"); ?>
<div class="clear"></div>
</div>
<!-- eo .body-content -->
<?php include("footer.php"); ?>
</div><!-- eo .page-wrap-->
Here is the code where i post tweet:
index.php under WallPost folder:
<?php
include("includes/db.php");
include("session.php");
include("includes/time_stamp.php");
?>
<html>
<head>
<link rel="stylesheet" href="css/wtfdiary.css">
<link rel="stylesheet" href="css/tipsy_title.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.tipsy.js"></script>
<script type="text/javascript" src="js/twitter.js"></script>
<script type="text/javascript" src="js/jquery.form.js"></script>
</head>
<body>
<div id="container">
<div id="sidebar_container">
<div id="sidebar">
<div id='logo'><img src='images/1.png'></div>
<div id="box">
<div><textarea id="tweet" name="tweet" placeholder="Compose new Tweet..."></textarea></div>
<div id='preview'></div>
<div id="button_bar">
<div id="icons">
<div class="filebutton" title="Image Upload">
<form id="imageform" method="post" enctype="multipart/form-data" action='ajax_image.php'>
<span><input type="file" name="photoimg" id="photoimg"/></span>
</form>
</div>
</div>
<div><input type="submit" value=" Tweet " class="btn" id="tweet_submit"/></div>
</div>
</div>
</div>
</div>
<!-- <div id="main"> -->
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div id='heading'>Tweets</div>
<div id='content'>
<?php include("loads_tweets1.php");?>
<!-- </div> -->
</div>
</div>
</body>
</html>
So after i make use of all these code, Post is shown in my page, but the way it is shown is not correct.
The post is inserted at some random place. (I couldn't attach image due to less reputation)
Can someone please tell what is going wrong, and i am not able to get this data in correct place where my other posts are listed.
Thanks in advance!!!
Your input helped me and i was able to solve it. Content was being called at two places, and ajax inserted the data on first location and i was not getting it placed where i needed it.
Thanks.

jQuery Mobile popup only works on initial page load

I've got a really simple form that displays a single field. When you punch in a value and hit submit, it gives you a list of checkboxes. You check some and then click another button below and it displays a success/failure message.
I'm trying to convert this to a jQuery mobile app but am having nothing but problems. For example, I can pragmatically call a popup using $("#element").popup("open"); when the page first loads, but after the post when I call the popup open like above I see the URL change but no popup is visible and it's pretty much the exact same page. I also tried just posting the checkboxes to a secondary URL (/update) and then use an HTTP redirect back to the original page, but somehow jQuery Mobile is breaking that.
I've pasted the majority of the code below. If anyone can point me in the correct direction, that's all I'm looking for.
<!DOCTYPE html>
<html>
<head>
<title>Search</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.2/jquery.mobile.min.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.2/jquery.mobile.min.js"></script>
<script type="text/javascript">
$(document).on("pagecreate", function() {
$(document).on("click", "#button", function(e) {
// Do ajax stuff here
$("#popupBasic").popup("open");
});
});
</script>
</head>
<body>
<div id="lookup" data-role="page">
<div data-role="header">
<h1>Lookup Order</h1>
</div>
<div data-role="content">
<?php if (validation_errors()): ?>
<div class="errors"><?=validation_errors()?></div>
<?php endif; ?>
<?php if ($this->session->flashdata('error')): ?>
<div class="errors"><?=$this->session->flashdata('error')?></div>
<?php endif; ?>
<form method="post" id="search_form" action="/search">
<label for="term">Term:</label>
<input type="number" data-clear-btn="true" name="term" id="term" value="<?=set_value('term')?>" />
<input type="submit" value="Search" />
</form>
<?php if (!empty($fish) && $fish->num_rows()): ?>
<form method="post" action="/update">
<br /><strong>Species:</strong> <?=$species?><br />
<hr />
Uncheck All / Check All<br />
<?php foreach ($fish->result_array() as $k => $f): ?>
<fieldset data-role="fishgroup">
<?php if (!$f['is_deleted']): ?>
<input type="checkbox" name="fish[]" id="checkbox-<?=$f['id']?>" value="<?=$f['id']?>" checked="checked" />
<?php else: ?>
<input type="checkbox" name="fish[]" id="checkbox-<?=$f['id']?>" value="<?=$f['id']?>" checked="checked" disabled="disabled" />
<?php endif; ?>
<label for="checkbox-<?=$f['id']?>">
<?php if ($f['type']): ?>
<?= $f['1'] ?> <?= $f['2'] ?> Attr: <?= $f['3'] ?> Attr: <?= $seat['4'] ?>
<?php else: ?>
<?= $f['3'] ?> <?= $f['4'] ?>
<?php endif; ?>
</label>
</fieldset>
<?php endforeach; ?>
Uncheck All / Check All<br /><br />
<input type="button" value="Update Fish(s)" id="button" />
</form>
<?php endif; ?>
<div data-role="popup" id="popupBasic">
<p>This is a completely basic popup, no options set.</p>
</div>
</div> <!-- end content -->
</div><!-- end page -->
</body>
</html>
Using the following prevents the click handler from being called twice but I still don't get the actual popup after the initial page load:
$(document).off("click").on("click", "#button", function() {
$(" #popupBasic").popup("open");
});
All I'm getting is #&ui-state=dialog added to the URL, and calling $("#button").popup("close"); removes that.
It might be that youre attaching same handler multiple times add
<script type="text/javascript">
$(document).on("pagecreate", function() {
$("#button").off();
$(document).on("click", "#button", function(e) {
// Do ajax stuff here
$("#popupBasic").popup("open");
});
});
</script>

Categories