I'm pretty new to jQuery Mobile and PHP and I'm having an issue where I have a PHP while loop
while ( $row = sasql_fetch_array ( $idresult ) ) {
echo "
<li>
<a href='#' data-rel='popup' data-position-to='window' data-transition='pop'>
<div class='ui-grid-a'>
<div class='ui-block-a'>
<div class='ui-bar ui-bar-a titleRow' style='height:15px'>Identification Type</div>
<div id='idType' class='ui-bar ui-bar-a 'style='height:15px; background-color:transparent; border: none; color: black; font-weight: normal;' >" . $row ['description'] . "</div>
</div>
<div class='ui-block-b'>
<div class='ui-bar ui-bar-a titleRow' style='height:15px'>Details</div>
<div id='idNo' class='ui-bar ui-bar-a ' style='height:15px; background-color:transparent; border: none; color: black; font-weight: normal;'>" . $row ['number'] . "</div>
</div>
</div>
</a>
<a href='#editCustId' data-rel='popup' data-position-to='window' data-transition='pop'>Edit</a>
</li>
";
} // end while
echo "</ul>";
} // end if
When the use clicks on the edit button I need to pass the ID of that particular row. I'm not sure where I should put this in but it could be something like this...? Will this work when there is no form?
<input type="hidden" name="the_id" value='<?php " . $row ['theid'] . " ?>' />
However I can't figure out how to do this. I have tried opening the dialog as a new page ie.
<a href='./editCustId.php?id=" . $row['theid'] . "' data-rel='popup' data-position-to='window' data-transition='pop' class='ui-btn ui-btn-inline ui-icon-edit ui-btn-icon-notext'>Edit</a>
When edit is clicked this popup will open
<div data-role='popup' id='editCustId' data-theme='a' data-overlay-theme='a' data-dismissible='false' style='min-width: 300px;'>
<div data-role='header' data-theme='a'>
<h1>Add ID</h1>
</div>
<div data-role='main' class='ui-content'>
<form id='editId' onsubmit="return false;">
<input type="hidden" name="cust_id" value='<?php echo $custid; ?>' />
<input type="hidden" name="sess_id" value='<?php echo $sid; ?>' />
<!-- <input type="hidden" name="submitted" value="true" /> -->
<div class="ui-field-contain">
<label for="phoneType">Type</label>
<select name="idType" id="idType">
<?php echo $idInnerOptions; ?>
</select>
</div>
<div class="ui-field-contain">
<label for="idDesc">Description</label> <input type="text" name="idDesc" id="idDesc" value="">
</div>
<div class='ui-grid-a'>
<div class='ui-block-a'>
<input type='submit' id="submit" value='Update' class='ui-btn ui-btn-inline' data-transition='pop' />
</div>
<div class='ui-block-b'>
Cancel
</div>
<div id="success" style="color: black;"></div>
</div>
</form>
</div>
</div>
The description and number will contain the relevant info based on which link was clicked.
I've been looking into passing the data through ajax but I'm not really getting what I should be doing?
I Think there are 2 issues here for you to check more:
As i recall, the popup feature of jquery mobile is for code that are inside divs that has the popup data-role. So, what you tried to do is not in the JQM logic. However, JQM also allows you to use iframe in divs with popup data-role so maybe that will be a good solution for you.
Another way to go, could be to dynamicly load the content of the page you want by AJAX to a div that has the popup data-role.
Hope this helps
Related
I want to add margin to this <div>:
$notification_list .= "
<div class='FriendRdiv'>
<a href='main.php?u=".$initiator."'>
<img src='../img/".$pr."' id='FriendRPP'>
</a>
<a id='FriendRfrom'>".$initiator." sent you a friend request</a>
</div>
<form class='FriendRForm Rejecat' onsubmit='return false'>
<input type='submit' value='Reject' id='Reject'>
</form>
<form class='FriendRForm' onsubmit='return false'>
<input type='submit' value='Accept' id='Accept'>
</form>";
I don't know how many notifications I will get, so I want each <div> to have a bigger margin than one before it.
you can use style attribute
<div class='FriendRdiv' style="margin: 10px;">
or you can use css for that in css file
.FriendRdiv{
margin: 10px;
}
In the bellow code i have printed a session variable on the output page
<?php ob_start();
session_start();
include("database.php");
include("tracking-header.php");
?>
<div class="dt-content" style="text-align:center;">
<p class="srymsg">Sorry</p>
<p class="srymsg2" style="margin-bottom:110px;">The Vehicle number <span style="color:#000; font-weight:bold; text-transform:uppercase;"><?php print $_SESSION['vehicleno']; ?></span>, not found.<br />please try again.</p>
</div>
<div class="nxtbtn" >
<input type="button" value="BACK" name="back" style="float:left;margin:17px 25px 16px;" />
<?php include("tracking-footer.php");?>
in this print $_SESSION['vehicleno']; is displayed on local but when i upload this file online and then this is not displayed on the page. can any one say what is the problem in it?
Try by switching place of ob_start and session_start function like below
<?php
session_start();
ob_start();
include("database.php");
include("tracking-header.php");
?>
<div class="dt-content" style="text-align:center;">
<p class="srymsg">Sorry</p>
<p class="srymsg2" style="margin-bottom:110px;">The Vehicle number <span style="color:#000; font-weight:bold; text-transform:uppercase;"><?php print $_SESSION['vehicleno']; ?></span>, not found.<br />please try again.</p>
</div>
<div class="nxtbtn" >
<input type="button" value="BACK" name="back" style="float:left;margin:17px 25px 16px;" />
<?php include("tracking-footer.php");?>
i'm working on a form in php mysql. so in my page there is a form and below that i shown the data of that form in table format.now i want to print only the table structure thats why i just made a PRINT button as:
<span style="float:right;">PRINT</span>
but it will print the whole page with form field and table and i just want the tableto print.
Here is the design of my whole page with form and table:
<html>
<head></head>
<body>
<div class="container">
<form class="form-horizontal" action="" method="post" name="userform1" id="company-form" enctype="multipart/form-data">
<?php if($_GET[id]){?>
<fieldset>
<legend>Add Company</legend>
<div class="control-group">
<label class="control-label">Company Name</label>
<div class="controls">
<input type="text" name="company" id="company" value="<?php echo $selup['company']?>">
</div>
</div>
<div class="control-group">another field</div>
<div class="control-group">another field</div>
<div class="control-group">
<div class="controls">
<button type="submit" class="btn" name="submit" id="submit" value="Submit">Submit</button>
</div>
</div>
<table class="table table-bordered">
<tbody>
<tr>
<td>S.No.</td>
<td>Company Name</td>
<td>Type</td>
<td>Action</td>
</tr>
<?php
// to print the records
$select = "select * from company where type='Miscellaneous'";
$query1 = mysql_query($select);
while($value = mysql_fetch_array($query1)){ ?>
<tr>
<td><?php echo $value[id];?></td>
<td><?php echo $value[company ];?></td>
<td><?php echo $value[type];?></td>
<!--<td> </td>-->
<?php /*?><td><?php echo $value[amount];?></td>
<td><?php echo $value[date];?></td><?php */?>
<td><i class="icon-edit"></i>
<i class="icon-trash"></i></td>
</tr><?php }?>
</tbody>
</table>
</fieldset>
<form>
</div>
</body>
so i just want to print the table not whole page.
Use css to hide elements you don't want to print:
#media print {
.control-group {
display: none;
}
}
function printContent(el){
var restorepage = document.body.innerHTML;
var printcontent = document.getElementById(el).innerHTML;
document.body.innerHTML = printcontent;
window.print();
document.body.innerHTML = restorepage;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>My page</h1>
<div id="div1">DIV 1 content...</div>
<button onclick="printContent('div1')">Print Content</button>
<div id="div2">DIV 2 content...</div>
<button onclick="printContent('div2')">Print Content</button>
<p id="p1">Paragraph 1 content...</p>
<button onclick="printContent('p1')">Print Content</button>
</body>
</html>
You could make a print-css (which does the same as #media print, but I think it is cleaner, and you can disable the css include via javascript, if you need it):
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
In that css, you hide all elements which should not get printed, for example:
.wrapper, .header {display: none;}
One posible solution, perhaps not the best option:
1. Open a new window with JS
2. Copy the whole table into the new window (with jQuery for example)
3. Print the new window
4. Close the window
Sure it has a blink effect but It will work.
I have a form where users will need to select multiple items from 3 very long lists that will be dynamically generated. My solution was to put the 3 lists in separate popups with filterable listviews and checkboxes. It's working visually and the interaction is fine, BUT the values of the checkboxes inside the popups seems to be lost on submit since I'm not getting anything back from $_POST for the checkbox field names.
Form:
<form action="processor.php" method="post">
<label for="Title" class="ui-hidden-accessible" >Title:</label>
<input name="Title" id="Title" value="" placeholder="Title" type="text">
<label for="Desc" class="ui-hidden-accessible" >Battle Round Description:</label>
<textarea name="Desc" id="Desc" value="" placeholder="Description (Optional)" ></textarea>
<a href="#AddVol_Pop" data-rel="popup" data-position-to="window" data-role="button" data-transition="pop" >Assign Volunteer(s)</a>
<a href="#AddJudge_Pop" data-rel="popup" data-position-to="window" data-role="button" data-transition="pop" >Assign Judge(s)</a>
<!-- Pop Ups -->
<!-- Volunteers -->
<div data-role="popup" id="AddVol_Pop" data-overlay-theme="a" data-theme="a" style="max-width:500px">
<div data-role="header" >
<h1>Assign Volunteer(s)</h1>
</div>
<div data-role="content" data-theme="a">
<fieldset data-role="controlgroup">
<ul data-role="listview" data-filter="true" data-filter-reveal="true" data-filter-placeholder="Search volunteers..." data-inset="true" data-theme="a">
<?php
$volSet = get_all_users_by_roles(1,2,3,4);
while($row = mysql_fetch_array($volSet)){
echo "<li style=\"padding:0px;\">";
echo "<label for=\"selectVol{$row[UserID]}\">{$row[UserFirstName]} {$row[UserLastName]}</label>";
echo "<input name=\"selectVol[]\" value=\"{$row[UserID]}\" id=\"selectVol{$row[UserID]}\" type=\"checkbox\">";
echo "</li>";
}
?>
</ul>
</fieldset>
<a href="#" data-role="button" data-inline="true" data-rel="back" >Done</a>
<a href="#" data-role="button" data-inline="true" data-rel="back" >Clear</a>
</div>
</div>
<!-- End Volunteers -->
<!-- Judges -->
<div data-role="popup" id="AddJudge_Pop" data-overlay-theme="a" data-theme="a" style="max-width:500px">
<div data-role="header" >
<h1>Assign Judge(s)</h1>
</div>
<div data-role="content" data-theme="a">
<fieldset data-role="controlgroup">
<ul data-role="listview" data-filter="true" data-filter-reveal="true" data-filter-placeholder="Search judges..." data-inset="true" data-theme="a">
<?php
$judgeSet = get_all_users_by_roles(5);
while($row = mysql_fetch_array($judgeSet)){
echo "<li style=\"padding:0px;\">";
echo "<label for=\"selectJudge{$row[UserID]}\">{$row[UserFirstName]} {$row[UserLastName]}</label>";
echo "<input name=\"selectJudge[]\" value=\"selectJudge{$row[UserID]}\" id=\"selectJudge{$row[UserID]}\" type=\"checkbox\">";
echo "</li>";
}
?>
</ul>
</fieldset>
<a href="#" data-role="button" data-inline="true" data-rel="back" >Done</a>
<a href="#" data-role="button" data-inline="true" data-rel="back" >Clear</a>
</div>
</div>
<!-- End Judges -->
<div class="row">
<div class="large-6 columns">
<button type="submit" name="submitNewRound" data-icon="check">Create Round</button>
</div>
<div class="large-6 columns">
<a href="rounds.php" type="button" data-icon="back" >Cancel</a>
</div>
</div>
Processor:
<?php
if (isset($_POST['submitNewRound'])) {
$Title = trim(mysql_prep($_POST['Title']));
$Desc = trim(mysql_prep($_POST['Desc']));
$sql = "INSERT INTO Round (
RndTitle,
RndDesc
) VALUES (
'{$Title}',
'{$Desc}'
)";
$message = "Results: ";
if (mysql_query($sql, $connection)){
$genRnd = mysql_insert_id();
$message .= "Round created sucessfully.";
} else {
$message .= "Creating new Round failed: ";
$message .= mysql_error();
}
foreach($_POST['selectVol'] as $volID){
$sql = "INSERT INTO Round_User (
UserID,
RndID
) VALUES (
'{$volID}',
'{$genRnd}'
)";
if (!mysql_query($sql, $connection)){
$message .= "Inserting RUser for VolID Failed: ";
$message .= mysql_error();
}
}
foreach($_POST['selectJudge'] as $judgeID){
$sql = "INSERT INTO Round_User (
UserID,
RndID
) VALUES (
'{$judgeID}',
'{$genRnd}'
)";
if (!mysql_query($sql, $connection)){
$message .= "Inserting RUser for JudgeID Failed: ";
$message .= mysql_error();
}
}
}
?>
I believe the error is with the popups as everything else in the form returns fine. How can I ensure the selections made in those popups is retained as part of the overall form?
I had a similar reaction trying to do a form with hidden fields to be revealed in a popup. I discovered that jquery automatically moves those input fields to the bottom of the page, and only inserts placeholders within the tags. I am meddling with a few different solutions now and if I come up with any for the both of us I will be sure to share.
**Edit:
Here is some more info I found related to the problem:
http://forum.jquery.com/topic/jquery-mobile-popup-aspires-outside-of-form
Thusfar things look grim for our predicament. I am beginning to think it might just be easier to use twitter bootstrap popups in this case, or even just building my own.
<< Referring to this thread >>
I want to make several modal-box on a page:
<script>
var grid_modal_options = {
height: 'auto',
width: '80%',
modal: true
};
function showProducts1ModalBox() {
$("#products1_modal_box").dialog(grid_modal_options);
$("#products1_modal_box").parent().appendTo('form:first');
}
function showProducts2ModalBox() {
$("#products2_modal_box").dialog(grid_modal_options);
$("#products2_modal_box").parent().appendTo('form:first');
}
function showProducts3ModalBox() {
$("#products3_modal_box").dialog(grid_modal_options);
$("#products3_modal_box").parent().appendTo('form:first');
}
</script>
<div id="products1_modal_box" title="Products" style="display: none;">
<div class="in">
<div class="grid-12-12">
<form id="products1_modal_box_form" action="#" method="post">
<table>
<thead>
<tr>
<th> </th>
<th>Product</th>
</tr>
</thead>
<!-- Query for read mysql goes here (I skipped this line because it's not the main thing I'm gonna ask since it's run well) /-->
<tbody>
<?php
//read the results
while($fetch = mysqli_fetch_array($r)) {
print "<tr>";
print " <td>Choose</td>";
print " <td>" . $fetch[0] . "</td>"; //$fetch[0] == Product ID
print "</tr>";
}
?>
</tbody>
</table>
</form>
</div>
</div>
</div>
<div id="products2_modal_box" title="Products" style="display: none;">
<!--
The rest goes here (the same with "products1_modal_box")
except:
print " <td>Choose</td>";
/-->
</div>
<div id="products3_modal_box" title="Products" style="display: none;">
<!--
The rest goes here (the same with "products1_modal_box")
except:
print " <td>Choose</td>";
/-->
</div>
And:
<input type='text' id='products1_id_textbox' name='products1_id_textbox' />
<a href='#' onclick='showProducts1ModalBox(); return false;'>Choose products 1</a>
<input type='text' id='products2_id_textbox' name='products2_id_textbox' />
<a href='#' onclick='showProducts2ModalBox(); return false;'>Choose products 2</a>
<input type='text' id='products3_id_textbox' name='products3_id_textbox' />
<a href='#' onclick='showProducts3ModalBox(); return false;'>Choose products 3</a>
Why this doesn't work? When I removed the div "products2_modal_box" and "products3_modal_box", the modal-box for div "products1_modal_box" appear, but when I tried to get back all of them, each modal-box doesn't appear while I clicked the link. What's wrong with the code? Thanks..
This doesn't technically answer your question, but I use jQuery Reveal for modals on my site. Seems a lot easier than what you're trying to do. Here's the source: http://www.zurb.com/playground/reveal-modal-plugin
It's really easy to set up, and you can have multiple modals per page, and can trigger them with an event (such as a click) or dynamically with jquery.
Hope this helps!