attaching handler to dynamic created elements.. - javascript

I am trying to attach handler to dynamic created element I am doing this but it isn't work
custom1.js
$(document).ready(function(){
var kart=[];
var found=0;
$(".adTo").on("click",function(){
var name,quantity,price,temp;
name=$(this).parent().children(".name").html().toString();
price=$(this).parent().children(".price").html().toString().substring(2,this.length);
found=0;
temp=kart.length;
for(var i=0;i<kart.length;i++)
{
console.log(kart[i].name);
if((kart[i].name==name))
{
console.log("ni");
kart[i].quantity++;
$(".cartStatus").children("#"+name).children(".quantity").html("Quantity: "+kart[i].quantity);
kart.price=kart.price+parseInt(kart[i].price);
$("#totalCartA").html("Total Amount:"+kart.price);
found=1;
break;
}
}
if(found==0)
{
console.log("ni1");
kart[kart.length]={
"name":name,
"quantity":1,
"price":price
};
$("#cartStatus").append("<div id='"+name+"' class='cartItems mt8'><div class='lf'>"+(temp+1)+"</div><div class='lf mr10'>"+kart[temp].name+"</div><div id='"+name+"' class='reduction rf mr10'>Remove[x]</div><div class='clr bdr'></div><div class='lf quantity'>Quantity: "+kart[temp].quantity+"</div><div class='mr10 rf'>Price: "+kart[temp].price+"</div><div class='clr'></div></div>");
$("#totalCartP").html("Products:"+kart.length);
kart.price=kart.price+parseInt(kart[temp].price);
}
});
$(".reduction").on('click',function(){
console.log('nitin');
console.log($(this));
$(this).parent().remove();
kart.splice(temp, 1);
regenKart(1,temp);
});
function regenKart(howMany, indexFrm){
for(var i=indexFrm; i<(kart.length );i++)
{
kart[i].index=kart[i].index-howMany;
console.log('a');
}
}
});
and this is my view page...
<!DOCTYPE html>
<html>
<head>
<!--script src="/js/jquery.min.js"></script-->
<link rel="stylesheet" href="/css/ekart/style.css" type="text/css" media="all" />
</head>
<body>
<div class="container">
<div class="header">
<div class="logo">EKART</div>
<ul class="menuLinks">
<li>Home</li>
<li>About Us</li>
<li>Products</li>
<li>Services</li>
<li>Feedback</li>
<li>Contact</li>
</ul>
<div class="clr"></div>
</div>
<!--div class="welComeBar">
<div class="lf mt5">
Welcome Shopper name
</div>
<div class="rf mt5">
<a class="logout" href="javascript:void(0);">Logout</a>
</div>
<div class="clr"></div>
</div-->
<div class="seacrhBar">
<div class="mt5">
<form id="user" action="/do/ekart/userindex/searchproduct/" method="POST" enctype="multipart/form-data">
<select name="category" name="category" id="category">
<option value="">Select your category...</option-->
<?php
foreach($result as $row)
{
echo "<option value='".$row['cat_name']."'> ".$row['cat_name']." </option>";
}
?></select>
<input type="text" value="" name="product" placeholder="Enter Product Name" />
<input type="submit" value="GO" />
</form>
</div>
<div class="clr"></div>
</div>
<div class="mainBody">
<div class="itemWrapper" style= <?php $visible="";echo "'display:".$visible.";'"?> >
<?php foreach($products as $row) { ?>
<div class="itemS">
<div class="name"><?php echo $row['Pro_name'];?></div>
<div class="image"><img src="data:image/jpeg;base64,<?php echo base64_encode($row['image']);?>" alt="No photo" height="100" width='145'/> </div>
<div class="price">Rs <?php echo $row['cost'];?></div>
<a class="adTo" href="javascript:void(0);">Add To Cart</a>
</div>
<?php }?>
</div>
<div id="cartStatus" class="cartStatus">
<div class="yourCart mt8">Your Cart</div>
<div class="yourCart mt8" id="totalCart"><span id="totalCartP">Products:0</span><span class="rf" id="totalCartA">Total Amount: 0</span></div>
<div class="cartStatus1"></div>
</div>
<div class="clr"></div>
</div>
<div class="footer">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Products</li>
<li>Services</li>
<li>Feedback</li>
<li>Contact</li>
X </ul>
<div class="clr"></div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="/js/custom1.js"></script>
</body>
</html>
I am dynamically creating a division cartItems in which there is a subdivision with tag remove i want that when this tag is clicked the cartItem is automatically removed from cart list. I have assign reduction as class name to this division but found myself unable to attach this division with handler using this class name.I have also print "nitin" on console inside this handler to check weather handler is attached with remove tag or not but nothing gets printed on console.I dont know what to do now..


When using on() for dynamic elements, the syntax is
$("#cartStatus").on('click', '.reduction', function() { ...
where you pass in an element that exists at the time of binding the event, and where the second argument after the event is the selector to filter on.

Related

How to make a pop window when pressed button using Jquery

I have already raised this question with and I have found the answers as well here.
How to make an button to make a confirmation box to do a task in Jquery and HTML
I could see the answers are correct as in the output. But whenever I used this same code to my existing code I could not see the popup window and my test php script is not running. Can someone show what interfered here in my original code?
My Code...
<?php
// Initialize the session
session_start();
date_default_timezone_set("Asia/Colombo");//set you countary name from below timezone list
// Check if the user is logged in, if not then redirect him to login page
if(!isset($_SESSION["loggedin"]) || $_SESSION["loggedin"] !== true){
header("location: login.php");
exit;
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Dashboard</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://www.jqueryscript.net/demo/Sliding-Confirm-Dialog-Plugin-with-jQuery-Bootstrap-Confirm/jquery.confirm.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm//vega#5"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm//vega-lite#4.8.1"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm//vega-embed#6"></script>
</head>
<body style=" background-color: #F0F8FF">
<div class="wrapper">
<div class="sidebar">
<h2>Dashboard</h2>
</div>
<div class="main_content">
<div id="loading" >
<img id="loading-image" src="./assets/loading.gif" alt="Loading..." />
</div>
<?php
include "adminHeader.php";
?>
<div class="mytabs">
<ul class="nav nav-tabs" role="tablist">
<li class="active">Summary</li>
<li>SSW KPI Monitoring</li>
<li>SBC KPI Monitoring</li>
<li>CTB KPI Monitoring</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Web <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>jQuery</li>
<li>Bootstrap</li>
<li>HTML</li>
</ul>
</li>
</ul>
</div>
<div class="mytabs">
<div class="tab-content">
<div class="tab-pane active" id="summarytab">Write something for home tab</div>
<div class="tab-pane" id="SSWtab">
<div class="card">
<div class="card-body">
<form method="POST">
<div class="mb-3">
<button type='button' id ="btnnew">submit</button>
<p></p>
</div>
</form>
</div>
</div>
</div>
<div class="tab-pane" id="SBCtab">C# is also a programming language</div>
<div class="tab-pane" id="ctbtab">MySQL is a databased mostly used for web applications.</div>
<div class="tab-pane" id="jquerytab">jQuery content here </div>
<div class="tab-pane" id="bootstab">Bootstrap Content here
<ul>
<li>Bootstrap forms</li>
<li>Bootstrap buttons</li>
<li>Bootstrap navbar</li>
<li>Bootstrap footer</li>
</ul>
</div>
<div class="tab-pane" id="htmltab">Hypertext Markup Language</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
<script>
$(window).load(function() {
$('#loading').hide();
});
$("#btnnew").confirm({
title: "Delete confirmation",
text: "This is very dangerous, you shouldn't do it! Are you really really sure?",
confirm: function(button) {
console.log('AJAX request in progress...');
$('#loading').show();
$.ajax({
type: 'POST',
url: 'testme.php',
success: function(data) {
$("p").text(data);
},
complete: function() {
$('#loading').hide();
}
});
},
cancel: function(button) {
console.log("You aborted the operation.");
},
confirmButton: "Yes I am",
cancelButton: "No"
});
</script>

replace $(document).load(function() {});
with
$(function() {}); or $(document).on('load', function() {})
Because .load() is Deprecated, See the Bug #11733
<!DOCTYPE html>
<html lang="en">
<head>
<title>Dashboard</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://www.jqueryscript.net/demo/Sliding-Confirm-Dialog-Plugin-with-jQuery-Bootstrap-Confirm/jquery.confirm.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm//vega#5"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm//vega-lite#4.8.1"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm//vega-embed#6"></script>
</head>
<body style=" background-color: #F0F8FF">
<div class="wrapper">
<div class="sidebar">
<h2>Dashboard</h2>
</div>
<div class="main_content">
<div id="loading">
<img id="loading-image" src="./assets/loading.gif" alt="Loading..." />
</div>
<?php
include "adminHeader.php";
?>
<div class="mytabs">
<ul class="nav nav-tabs" role="tablist">
<li class="active">Summary</li>
<li>SSW KPI Monitoring</li>
<li>SBC KPI Monitoring</li>
<li>CTB KPI Monitoring</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Web <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>jQuery</li>
<li>Bootstrap</li>
<li>HTML</li>
</ul>
</li>
</ul>
</div>
<div class="mytabs">
<div class="tab-content">
<div class="tab-pane active" id="summarytab">Write something for home tab</div>
<div class="tab-pane" id="SSWtab">
<div class="card">
<div class="card-body">
<form method="POST">
<div class="mb-3">
<button type='button' id="btnnew">submit</button>
<p></p>
</div>
</form>
</div>
</div>
</div>
<div class="tab-pane" id="SBCtab">C# is also a programming language</div>
<div class="tab-pane" id="ctbtab">MySQL is a databased mostly used for web applications.</div>
<div class="tab-pane" id="jquerytab">jQuery content here </div>
<div class="tab-pane" id="bootstab">Bootstrap Content here
<ul>
<li>Bootstrap forms</li>
<li>Bootstrap buttons</li>
<li>Bootstrap navbar</li>
<li>Bootstrap footer</li>
</ul>
</div>
<div class="tab-pane" id="htmltab">Hypertext Markup Language</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
<script>
$(function() {
$('#loading').hide();
})
$("#btnnew").confirm({
title: "Delete confirmation",
text: "This is very dangerous, you shouldn't do it! Are you really really sure?",
confirm: function(button) {
console.log('AJAX request in progress...');
$('#loading').show();
$.ajax({
type: 'POST',
url: 'testme.php',
success: function(data) {
$("p").text(data);
},
complete: function() {
$('#loading').hide();
}
});
},
cancel: function(button) {
console.log("You aborted the operation.");
},
confirmButton: "Yes I am",
cancelButton: "No"
});
</script>

The picture appears and disappears instantly

The picture appears and disappears instantly
I need to change the picture at the click of a button, but it appears and disappears instantly. What to do in this case, please help. By pressing I call the function php and in it the js code for changing the picture. Already everything I knew was retried. How to deal with this?
Game.php :
<?php
require "php/set_locations.php";
?>
<html>
<head><title></title>
<link rel="stylesheet" type="text/css" href="styles/GameStyle.css">
</head>
<body>
<div class="main_container">
<div class="header"></div>
<div class="body_container">
<div class="left_menu_container">
<div class="left_menu_main_div">
<a class="left_menu_button">
<span class="left_menu_span"></span>
</a>
<nav class="left_menu_nav">
Инвентарь
Персонаж
Ремесло
Охота
</nav>
<div class="left_menu_close_container"></div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="js/Left_menu.js"></script>
</div>
</div>
<div class="main_image_container">
<div class="image_container">
<div class="img_container">
<img class="image_location" id="image_location" name="image_location" src="">
</div>
</div>
</div>
<div class="location_buttons_container">
<div class="buttons_container">
<form method="post">
<ul class="buttons_menu">
<li>Локации</li>
<li ><span ><button id="location_button_1" name="location_button_1">Главные ворота</button></span><em>3 сек.</em></li>
<li><span>Торговый квартал</span><em>2 сек</em></li>
<li><span>Замок</span><em>5 сек</em></li>
<li><span>Гильдия</span><em>4 сек</em></li>
</ul>
</form>
</div>
</div>
</div>
<div class="footer_container">
<div class="left_footer_block"></div>
<div class="textarea_container">
<textarea class="main_textArea" readonly></textarea>
<div class="input_and_button_container">
<input class="input_for_main_textArea">
<div class="button_container">
<button class="set_text_button" ></button>
</div>
</div>
</div>
<div class="onlinelist_container">
<div class="online_list">
<ul class="online_list_ul">
<li><span>Герои в локации</span><em></em></li>
<li><span>IIITUKATUPKA</span><em>8</em></li>
<li><span>Tataliec</span><em>7</em></li>
<li><span>Nekita2012</span><em>6</em></li>
<li><span>Brion</span><em>5</em></li>
<li><span>Joken</span><em>4</em></li>
<li><span>Golden</span><em>5</em></li>
</ul>
</div>
</div>
</div>
</div>
<?php
if(isset($_POST["location_button_1"])){
setLocation(4);
}
?>
</body>
</html>
setLocation.php:
<?php
require "include_db.php";
function setLocation($url_image){
$locationName = R::load('locationsdb', $url_image);
echo '<script type="text/javascript">
var img = "'.$locationName->location_image.'";
var button1 = document.getElementById("location_button_1");
button1.addEventListener("click", function(){
});
//document.getElementById("location_button_1").onclick = () => asd();
</script>';
}
?>
<script>
function cccc(){
document.getElementById("image_location").src =img;
}
</script>

after navigate to another page, bootstrap dropdown become unusable

I had 3 .php files, they are index.php, load_file.php,and register.php
In index.php, contain navigation, and each navigation has dropdown list, i call this navigation and the dropdown from database. and also index.php has link to register.php, note : load_file.php included in this file
In load_file.php, contain code to check value of page, by using if($_GET['page']),and trigger every value with switch-case
register.php, just a normal form
My problem is, after I navigate to register.php by typing ?page=register in browser, my dropdown in index.php file become unusable
::UPDATE::
this is my index.php file
<?php
session_start();
require_once './model/functions.php';
if(isset($_GET["category"])){
$index_page= $_GET["category"];
$index_sub_page= null;
}elseif (isset ($_GET["sub_category"])) {
$index_sub_page = $_GET["sub_category"];
$index_page= null;
}else{
$index_sub_page= null;
$index_page= null;
}
if($_POST){
$username = $_POST["username"];
$password = $_POST["password"];
if(check_username_and_password_from_users($username, $password)){
$_SESSION["username"] = $username;
}
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Learn Bootstrap</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
</head>
<body>
<div id="TopContainer" class="container">
<div class="pull-right navbar-default">
<ul class="nav navbar-nav">
<?php if(isset($_SESSION["username"])){ ?>
<li class="dropdown">
<a class="dropdown-toggle" href="#" data-toggle="dropdown"><?php echo $_SESSION["username"]; ?></a>
<div class="dropdown-menu" style="padding: 17px;">
Logout
</div>
</li>
<?php }else{ ?>
<!--dropdown here -->
<li class="dropdown">
<a class="dropdown-toggle" href="#" data-toggle="dropdown" id="login">Dropdown</a>
<div class="dropdown-menu" style="padding:17px;">
<form id="loginform" method="post" action="index.php" class="form">
<div class="form-group">
<input class="form-control" type="text" name="username" id="username" placeholder="username">
</div>
<div class="form-group">
<input class="form-control" type="password" name="password" id="password" placeholder="password">
</div>
<input type="submit" value="Submit">
</form>
</div>
</li>
<li>Register</li>
<?php } ?>
<li>FAQs</li>
<li>Twitter</li>
<li>Facebook</li>
</ul>
</div>
</div>
<div id="logo" class="container">
<div class="col-md-6">
<a class="navbar no-margin" href="#"><img src="picture/LogoSaya.png"></a>
</div>
<div class="col-md-6">
<div class="col-md-6 pull-right">
<div class="input-group input-group-sm">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
<input type="text" class="form-control" placeholder="Search for...">
</div>
</div>
</div>
</div>
<nav class="container">
<div class="navbar navbar-default">
<ul class="nav navbar-nav">
<?php
$subject_set = find_all_subjects();
while($subject = mysqli_fetch_assoc($subject_set)){
?>
<li>
<a id="dLabel" data-target="#" href="?subject=<?php echo urlencode($subject["id"]);?>" data-toggle="dropdown" aria-haspopup="true" role="button">
<?php echo $subject["name"];?>
<span class="caret"></span>
</a>
<!--dropdown here -->
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<?php
$page_set = find_pages_from_subjects($subject["id"]);
while($page = mysqli_fetch_assoc($page_set)){
?>
<li>
<?php echo $page["name"];?>
<ul>
<?php
$sub_page_set = find_sub_pages_from_pages($page["id"]);
while($sub_page = mysqli_fetch_assoc($sub_page_set)){
?>
<li>
<?php echo $sub_page["name"];?>
</li>
<?php
}
clear_result($sub_page_set);
?>
</ul>
</li>
<?php
}
clear_result($page_set);
?>
</ul>
</li>
<?php
}
clear_result($subject_set);
?>
</ul>
</div>
</nav>
<div class="container">
<?php
include "load_files.php"; //this is to load the files
?>
</div>
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</body>
</html>
to navigate register.html, i use this code
<li>Register</li>
as you can see, i put code on below in index.php
<?php
include "load_files.php"; //this is to load file
?>
and this is my load_files.php
<?php
if($_GET){
switch ($_GET['page']) {
case 'register':
if(!file_exists("register.html")){
die("Sorry Empty Page");
}
include 'register.html';
break;
default:
break;
}
}
?>

Seems like an event handler issue. I'd look at how you are adding event handlers and see if the handler is getting wiped out somehow.

::SOLVED::
My problem is, after I navigate to register.php by typing ?page=register in browser, my dropdown in index.php file become unusable
this problem happen because, i had 2
<script src="jquery.js"></script>
, inside index.php and register.html .by remove the one inside register.html will solve the problem

JQuery input form is not working

I have two input fields, one for sorting one for the radius.
I want it to work if I set the sortby it should save and resubmit with the order I've selected, and the radis would work the same way, without getting the two input fields messing up each other. Right now whatever I set for radius is go over by the sortby field, even it get posted as a value and displayed under the wrong input.
Someone please look it over and help me to solve this.
Thank you, I would really appreciate any help with this problem.
<head>
<meta charset="utf-8">
<title>Dropdown Menus</title>
<link rel="stylesheet" href="style.css">
<script src="jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function($) {
$('ul li').on('click', function() {
$('input#shortby').val($(this).data('val'));
$('#order').submit();
});
});
$(document).ready(function($) {
$('ul li').on('click', function() {
$('input#radius').val($(this).data('val'));
$('#order').submit();
});
});
</script>
</head>
<body>
<?php
echo "POST VALUE: ". $_POST['shortby'];
echo "POST VALUE: ". $_POST['radius'];
?>
<form action="index.php" method="post" id="order">
<input id="shortby" type="hidden" value="" name="shortby">
<section class="container">
<div class="dropdown">
<div>Sort By: <?php echo $_POST['shortby']; ?>
<ul>
<li data-val="Featured" ><a href="#" >Featured</a></li>
<li data-val="Name" ><a href="#" >Name</a></li>
<li data-val="Price (Highest)"><a href="#" >Price (Highest)</a></li>
<li data-val="Price (Lowest)" ><a href="#" >Price (Lowest)</a></li>
</ul>
</div>
</div>
</section>
<br>
<br>
<br>
<br>
<input id="radius" type="hidden" value="" name="radius">
<section class="container">
<div class="dropdown">
<div>Radius: <?php echo $_POST['radius']; ?>
<ul>
<li data-val="10"> <a href="#" >10</a></li>
<li data-val="20"> <a href="#" >20</a></li>
<li data-val="30"> <a href="#" >30</a></li>
<li data-val="40"> <a href="#" >40</a></li>
<li data-val="50"> <a href="#" >50</a></li>
</ul>
</div>
</div>
</section>
</form>

See the problem is that you are setting the same data, i.e. val in both cases. Check the following
<script type="text/javascript">
$(document).ready(function($) {
$('input#shortby').val(<?php echo (isset($_POST['shortby'])) ? json_encode($_POST['shortby']) : ''; ?>);
$('input#radius').val(<?php echo (isset($_POST['radius'])) ? json_encode($_POST['radius']) : ''; ?>);
$('ul li').on('click', function() {
var shortbyVal, radiusVal;
if($(this).data('val') === undefined){
radiusVal = $(this).data('val2');
shortbyVal = $('input#shortby').val();
}
else if($(this).data('val2') === undefined){
shortbyVal = $(this).data('val');
radiusVal = $('input#radius').val();
}$('input#shortby').val(shortbyVal);
$('input#radius').val(radiusVal);
$('#order').submit();
});
});
</script>
</head>
<body>
<?php
echo "POST VALUE: ". $_POST['shortby'];
echo "POST VALUE: ". $_POST['radius'];
?>
<form action="1.php" method="post" id="order">
<input id="shortby" type="hidden" value="" name="shortby">
<section class="container">
<div class="dropdown">
<div>Sort By: <?php echo $_POST['shortby']; ?>
<ul>
<li data-val="Featured" ><a href="#" >Featured</a></li>
<li data-val="Name" ><a href="#" >Name</a></li>
<li data-val="Price (Highest)"><a href="#" >Price (Highest)</a></li>
<li data-val="Price (Lowest)" ><a href="#" >Price (Lowest)</a></li>
</ul>
</div>
</div>
</section>
<br>
<br>
<br>
<br>
<input id="radius" type="hidden" value="" name="radius">
<section class="container">
<div class="dropdown">
<div>Radius: <?php echo $_POST['radius']; ?>
<ul> <!-- Observe the change in data-val to data-val2 -->
<li data-val2="10"> <a href="#" >10</a></li>
<li data-val2="20"> <a href="#" >20</a></li>
<li data-val2="30"> <a href="#" >30</a></li>
<li data-val2="40"> <a href="#" >40</a></li>
<li data-val2="50"> <a href="#" >50</a></li>
</ul>
</div>
</div>
</section>
</form>
This should be a good workaround for that

jquery mobile coming back to prev page onclick event is not working

I am trying to create one app which is having three pages in single page template architecture first page contains login page and i am using
$.mobile.changePage('xxxx.php'); to navigate its working properly in second page i am having listview from there i am navigating to another page using
$.mobile.changePage('xxxx.php');
and for coming back prev page i am using this $.mobile.changePage('xxxx.php');
But when i go to prev page listview on click delegate method any other method is not working. But it works after I refresh the page.
Below is my code. Any suggestions will be great.
secondpage.php
<!DOCTYPE html>
<html>
<head>
<title> Management</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile</title>
<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>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<link rel="stylesheet" href="./js/jquery.mobile-1.3.1.min.css" />
<script src="./js/jquery.mobile-1.3.1.min.js"></script>
</head>
<body >
<div data-role="page" id="demo-page" >
<div data-role="header" id="header" data-position="fixed" data-tap-toggle="false" data-fullscreen="true" data-theme="a" > <!-- data-position="fixed" data-tap-toggle="false" -->
<a href="#menu" data-role="button" data-inline="true" data-icon="bars" data-iconpos="notext" class="ui-btn-left" ></a>
Edit
<h1 style="font-size:14px;">Event Management</h1>
</div>
<div data-role="content" id="content" >
<div id="listdiv" style="margin-top:15%;margin-bottom:10%;">
<ul data-role="listview" id="list" class="ui-listview " data-split-icon="delete" data-filter="true" data-filter-placeholder="Search..." >
<li data-icon="false" data-name="<?php echo $token_res['event_name'];?>" value="<?php echo $token_res['msg_body'];?>" id="read">
</li>
<li data-icon="false" data-name="<?php echo $token_res['event_name'];?>" value="<?php echo $token_res['msg_body'];?>" id="read">
</li>
</ul>
</div>
</div><!--end of content -->
<script>
$("#list").delegate('li',"click",function(){
var ki=$(this).attr('data-name');
//alert("clicked"+$(this).attr('data-name')+$(this).attr('value'));
$( document ).one( "pagechange", function() {
$.mobile.changePage("edit.php",{type:'post',transition: "slide", data: {'param1':ki}});
});
});
$(document).ready(function() {
});
</script>
<div data-role="footer" id="mainfooter" data-theme="a" data-fullscreen="true" data-position="fixed" data-tap-toggle="false" style=" bottom:0; width:100%;">
</div>
</div><!--end of page -->
</body>
</html>
thirdpage.php
<!DOCTYPE html>
<html>
<head>
<title>Management</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile</title>
<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>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<link rel="stylesheet" href="./js/jquery.mobile-1.3.1.min.css" />
<script src="./js/jquery.mobile-1.3.1.min.js"></script>
</head>
<body >
<div data-role="page" id="demo-page1" >
<div data-role="header" id="header" data-position="fixed" data-tap-toggle="false" data-fullscreen="true" data-theme="a" >
<a href="" data-role="button" id="mback" data-inline="true" class="ui-btn-left" >Back</a>
<a href="" id="medit" data-role="button" data-inline="true" class="ui-btn-right" >Edit</a>
<h1 style="font-size:14px;">Management</h1>
</div>
<div data-role="content" id="content" >
<ul data-role="listview" data-inset="true" style="margin-top:10%;margin-bottom:10%;" >
<li data-role="fieldcontain">
<label for="eventbody">Message-Body</label>
<input type="text" id="eventbody" value=<?php echo decode($_REQUEST['msg_body']);?> >
</li>
<li data-role="fieldcontain">
<label for="eventname">Message-Body</label>
<input type="text" id="eventname" value=<?php echo decode($_REQUEST['event_name']);?> >
</li>
<li data-role="fieldcontain">
<label for="sdate">Message-Body</label>
<input type="text" id="sdate" value=<?php echo decode($_REQUEST['sdate']);?> >
</li>
<li data-role="fieldcontain">
<label for="edate">Message-Body</label>
<input type="text" id="edate" value=<?php echo $_REQUEST['param1'];?> >
</li>
<li data-role="fieldcontain" id="nouse" style="display:none;">
<input type="text" id="eid" value=<?php echo decode($_REQUEST['id']);?> >
</li>
<li >
<fieldset class="ui-grid-a">
<div class="ui-block-a"><button type="submit" id="mcancel" data-theme="d">Cancel</button></div>
<div class="ui-block-b"><button type="submit" data-theme="a">Submit</button></div>
</fieldset>
</li>
</ul>
</div><!--end of content -->
<div data-role="footer" id="mainfooter" data-theme="a" data-fullscreen="true" data-position="fixed" data-tap-toggle="false" style=" bottom:0; width:100%;">
</div>
<script>
$("#mback").click(function(){
alert("alert");
if($("#mback").text()=='Back'){
//e.preventDefault();
var page = document.referrer;
$.mobile.changePage("home.php",{
transition: 'slide',
reloadPage:true,
reverse: true
});
}else{
$("#eventbody").attr("readonly", "readonly");
$("#eventname").attr("readonly", "readonly");
$("#sdate").attr("readonly", "readonly");
$("#edate").attr("readonly", "readonly");
$("#medit .ui-btn-text").text("Edit");
$("#mback .ui-btn-text").text("Back");
$('#mback .ui-btn-text').button('refresh');
$("#medit .ui-btn-text").button('refresh');
}
});
$(document).ready(function() { // <-- ensures the DOM is ready
});
</script>
</div><!--end of page -->
</body>
</html>

i changed the list delegate on click method from id to class then it is working properly as suggested by the link answer

Why don't you use the auto back feature. Just have this in your script after jquery-1.9.1.min.js and before jquery.mobile-1.3.1.min.js:
$.mobile.page.prototype.options.addBackBtn = true;
$.mobile.page.prototype.options.backBtnText = "Back";
Then it would automatically add back button markup on each page except first one and route backwards to the previous pages.

Categories

Resources