Change Height of Div After Ajax Call - javascript

PROBLEM:
I have a dynamic form that is using JQuery steps to make it a wizard. Right now, there is a step where a drop down box selection triggers an AJAX call that then adds form fields to the form. I need the height of the div that this field is in to become longer based off of the amount of fields added.
IMAGES:
The form starts with two drop downs:
Once something is selected for the second dropdown, the AJAX call is made and the form appends fields.
The grey box should resize to accomodate the appended fields.
CODE:
The CSS for the div is as follows:
.wizard > .content
{
background: #eee;
display: table-cell;
margin: 0.5em;
min-height: 35em;
position: relative;
width: auto;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
I can add a permanent height here, but it's not dynamic.
The form is a Zend Form, so the HTML is as follows:
<div class="container-fluid">
<?php if ($this->error) : ?>
<div class="row-fluid">
<?php echo $this->error; ?>
</div>
<?php else : ?>
<?php echo $this->form()->openTag($form); ?>
<h3>Details</h3>
<section>
<?php echo FormElementFactory::create($this, ProjectForm::KEY_PROJECT_NAME, false, true); ?>
<?php echo FormElementFactory::create($this, ProjectForm::KEY_PROJECT_DUE_DTTM, !($this->uberAdmin)); ?>
<?php echo FormElementFactory::create($this, ProjectForm::KEY_PROJECT_DESCRIPTION); ?>
</section>
<h3>Options</h3>
<section>
<?php echo FormElementFactory::create($this, ProjectForm::KEY_REVIEW_PROJECT); ?>
<?php echo FormElementFactory::create($this, ProjectForm::KEY_WTL_PROJECT); ?>
<?php echo FormElementFactory::create($this, ProjectForm::KEY_JOB_TABLE); ?>
</section>
<h3>Project Configuration</h3>
<section>
<?php echo FormElementFactory::create($this, ProjectForm::KEY_PROJECT_TYPES, !($this->uberAdmin), true); ?>
<?php echo FormElementFactory::create($this, ProjectForm::KEY_PROJECT_SUBTYPES, !($this->uberAdmin)); ?>
<?php
echo $this->partial('project/project/dynamicFormElements.phtml', array('form' => $this->projectForm, 'div' => 'project-config-elts'));
?>
</section>
<h3>Workflow Configuration</h3>
<section>
<?php echo FormElementFactory::create($this, ProjectForm::KEY_WORKFLOW_TYPES, !($this->uberAdmin)); ?>
<?php echo FormElementFactory::create($this, ProjectForm::KEY_WORKFLOW_SUBTYPES, !($this->uberAdmin), true); ?>
<?php echo FormElementFactory::create($this, ProjectForm::KEY_PROJECT_WORKFLOW_CONFIG, !($this->uberAdmin)); ?>
</section>
This generates HTML with the structure below:
The highlighted div is the div in question.
My AJAX call is done here:
// Handle AJAX dynamic form creation results
function updateProjectForm(resp) {
$('div#project-config-elts').html(resp.html);
}
// Handle ajax error
function projectFormError(req, status, err) {
var errorString = '<div class="row-fluid alert alert-error">' +
'Error retrieving project form.' +
'</div>';
$('div#project-config-elts').html(errorString);
}
// AJAX request to get dynamic Project config form
function requestProjConfigForm() {
var request = {project_type: $('select[name=project_types]').val(),
project_subtype: $('select[name=project_subtypes]').val()
};
var ajaxOptions = {
url: 'projectform',
type:'POST',
dataType: 'json',
success: updateProjectForm,
error: projectFormError,
data: request
};
// Initiate the request!
$.ajax(ajaxOptions);
}
$('select[name=project_types]').change(function(){
updateProjectSubtypes();
});
// Handle a change in the selection of the particular project
$('select[name=project_subtypes]').change(function(){
requestProjConfigForm();
});
$('select[name=workflow_types]').change(function(){
updateWorkflowSubtypes();
});
$.validator.addMethod("validJSON", function(val, el) {
try {
JSON.parse(val);
return true;
} catch(e) {
return false;
}
}, "*Not valid JSON");
form.validate({
errorPlacement: function(error, element) {
$( element )
.closest( "form" )
.find( "label[for='" + element.attr( "id" ) + "']" )
.append( error );
},
rules: {
project_config: { validJSON: true }
}
});
I'm thinking that here I can dynamically change the height, but I'm not quite sure how to do so.

It looks like you're running into an issue that has been discussed on the jQuery Steps plugin github page: https://github.com/rstaib/jquery-steps/issues/147
basically, since the body of the step content is positioned absolutely with a percent height, it's height is no longer based on the content within it. A few things people used to try to fix this are:
By waqashsn:
.content > .body{
/*position: absolute*/
float:left;
width:95%;
height:95%;
padding:2.5%
}
Here's another alternative by AneeshRS that instead causes overflowing content to scroll:
.wizard.clearfix > .content.clearfix{
min-height: 500px;
overflow-y: auto;
}
Checkout the link to the issues page for a better explanation of either of these. Note however that any solution that involves removing the absolute positioning will likely cause transitions to no longer work.

Related

Posting a variable in a php file

i've created 3 files. The main is html with javascript, the second one is based on php only and the third one uses html and inline php forms.
In main file, i've written the below script:
$(document).on('click', '.print_fumes_card', function(){
var user_id1 = $(this).attr("id");
alert(user_id1);
$.ajax({
url:"print/print_fumes_card.php",
method:"POST",
data:{user_id1:user_id1},
success:function(data)
{
window.open ("print/print_fumes_card.php","_blank");
}
})
});
The above script is enabled, only when i press the button '.print_fumes_card' in second php file.
The problem is that var user_id1 doesn't pass to third file (mix of html and php) "print_fumes_card.php" and i can't undertand why.
I need that variable in 3rd file to, execute some select queries.
The structure of thrid file is the following:
<!DOCTYPE html>
<?php
require 'conn.php';
echo $_POST["user_id1"];
?>
<html lang="en">
<head>
<style>
.table {
width: 100%;
margin-bottom: 20px;
}
.table-striped tbody > tr:nth-child(odd) > td,
.table-striped tbody > tr:nth-child(odd) > th {
background-color: #f9f9f9;
}
#media print{
#print {
display:none;
}
}
#media print {
#PrintButton {
display: none;
}
}
#page {
size: auto; /* auto is the initial value */
margin: 10; /* this affects the margin in the printer settings */
}
</style>
<link rel="stylesheet" href="style4.css" media="all" />
</head>
<body>
<header class="clearfix">
<div id="logo">
<img src="logo1.png">
</div>
<div id="company">
<h2 class="name">App</h2>
<div>address</div>
<div>phone</div>
<div>email</div>
<div>web</div>
</div>
</div>
</header>
<main>
<div id="details" class="clearfix">
<div id="client">
<div class="to">Plate:</div>
<div class="address"><?php
require 'conn.php';
$result = $conn->query("SELECT * FROM vehicles WHERE plate=(SELECT plate FROM visits WHERE vid='".$_POST["user_id1"]."')");
$row = mysqli_fetch_array($result);
echo $row['plate'];
?></div>
</div>
....
....
..
.
.
The problem is that $_POST["user_id"] variable isn't recognized as in second file, which is only php. Is there any special technique to pass that variable in third file?
I've tried different combinations and i can't figure out what i'm missing.
The two separate requests to print/print_fumes_card.php make little sense based on the information provided. The initial ajax post passes only user_id1 and does not appear to be attempting to make any change to the data. The second request does not pass the param at all. Just pass the param in the window.open call -
$(document).on('click', '.print_fumes_card', function(){
var user_id1 = $(this).attr("id");
alert(user_id1);
window.open ('print/print_fumes_card.php?user_id1=' + user_id1, '_blank');
});
And then -
<?php
require 'conn.php';
echo $_GET['user_id1'];
?>
The comment about understanding the SQL Injection vulnerabilities and using prepared statements still stands. At the very least you should force the type -
$user_id1 = (int) $_GET['user_id1'];

Flexslider prev/next navigation appears below images in wordpress

I followed this article to enable flexsliderhttps://code.tutsplus.com/tutorials/adding-a-responsive-jquery-slider-to-your-wordpress-theme--wp-27914
I found they use font-awesome rather than image for the navigation and got it sorted out correctly.
However the prev/ next navigation are not showing up at their locations. I believe this has something to do with css.
Can someone guide me on how to fix this please?
I got the navigation appearing side by side after changing the
left:10px and right:10px to left:1px and right:1px for these class.
.flexslider:hover .flex-direction-nav .flex-prev {
opacity: 0.7;
left: 1px;
}
.flexslider:hover .flex-direction-nav .flex-next {
opacity: 0.7;
right: 1px;
}
Why could this kind of issue happen and what could the fix in css?
The image slider html
<div class="flexslider">
<ul class="slides">
<?php
// The Loop
while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<li>
<?php // Check if there's a Slide URL given and if so let's a link to it
if ( get_post_meta( get_the_id(), 'wptuts_slideurl', true) != '' ) { ?>
<a href="<?php echo esc_url( get_post_meta( get_the_id(), 'wptuts_slideurl', true) ); ?>">
<?php }
// The Slide's Image
echo the_post_thumbnail();
// Close off the Slide's Link if there is one
if ( get_post_meta( get_the_id(), 'wptuts_slideurl', true) != '' ) { ?>
</a>
<?php } ?>
</li>
<?php endwhile; ?>
</ul><!-- .slides -->
</div><!-- .flexslider -->
There are too much missing informations for givin a precise answer, as there are only css for the two navigation buttons, but I guess it could have something to do with a parent position: (or sizing properties) property or something like that.

Alternative to hyperlinks with JqueryUI Mobile ListView

I have a page using JqueryUI Mobile. More specifically it uses JqueryMobile Lists
http://demos.jquerymobile.com/1.2.1/docs/lists/lists-ul.html
I love the look, feel, and usage of the listview, but I have come into a problem.
The users need to be able to click the link quickly, which is difficult with how I do it now. The link performs a PHP function, then redirects back to page they was on and the cycle restarts. Now that I am getting more familiar with AJAX, I would like to be able to have them click the link, it updates the database, then calls my AJAX script to update the data without the refreshing the page.
This would enable the users to be much much quicker with the tasks as most of the down time they have currently is the few seconds it takes to refresh (or more accurately be redirected back to) the page. When if its possible they would like to be able to click a link every second or even more if they are able to.
My question is: How can perform a database update based on dynamically generated links from a MySQLi database without requiring the user to refresh? I believe once I have that, I could also use Ajax to update the list every quarter second or so. I've considered using buttons, but I'm not sure how that would tie into listview, since listview seems to be only based on links.
On a side note - are their standard practices with often Ajax should update? Is there any guidelines I should follow?
Here is a sample of my current code:
<?php
session_start();
if(isset($_SESSION['username']))
{
}
else
{
$_SESSION['error']="You are logged in.";
header('Location: index.php');
exit;
}
?><!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/> <!--320-->
<link rel="stylesheet" href="js/jquery.mobile-1.4.5.min.css">
<script src="js/jquery-1.11.3.min.js"></script>
<link rel="stylesheet" href="style.css">
<script src="js/jquery.mobile-1.4.5.min.js"></script>
<style>
.split-custom-wrapper {
/* position wrapper on the right of the listitem */
position: absolute;
right: 0;
top: 0;
height: 100%;
}
.split-custom-button {
position: relative;
float: right; /* allow multiple links stacked on the right */
height: 80%;
margin:10px;
min-width:3em;
/* remove boxshadow and border */
border:none;
moz-border-radius: 0;
webkit-border-radius: 0;
border-radius: 0;
moz-box-shadow: none;
webkit-box-shadow: none;
box-shadow: none;
}
.split-custom-button span.ui-btn-inner {
/* position icons in center of listitem*/
position: relative;
margin-top:50%;
margin-left:50%;
/* compensation for icon dimensions */
top:11px;
left:-12px;
height:40%; /* stay within boundaries of list item */
}
.ui-icon-delete:after{
background-color: #B22222 !important;
background-image:url("data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22iso-8859-1%22%3F%3E%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20%20width%3D%2214px%22%20height%3D%2214px%22%20viewBox%3D%220%200%2014%2014%22%20style%3D%22enable-background%3Anew%200%200%2014%2014%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpolygon%20fill%3D%22%23FFF%22%20points%3D%2214%2C3%2011%2C0%207%2C4%203%2C0%200%2C3%204%2C7%200%2C11%203%2C14%207%2C10%2011%2C14%2014%2C11%2010%2C7%20%22%2F%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3C%2Fsvg%3E")
}
.ui-icon-home:after{
background-color: #A2CD5A !important;
}
.ui-icon-arrow-u-r:after{
background-color: #3D59AB !important;
}
</style>
</header>
</head><center> <h2 style="">Empty For now<br><br>
</h2></center>
<a href="home.php" class="ui-btn ui-icon-home ui-btn-icon-left" data-ajax='false'>HOME</a>
<a href="ViewOrderMobile.php" class="ui-btn ui-icon-edit ui-btn-icon-left" data-ajax='false'>VIEW / EDIT CURRENT LINE</a>
<br><br><br><br>
<center><center>
<div data-role="main" class="ui-content"style="margin-top:-75px;">
<h2 style=""></h2>
<ul data-role="listview">
<?php
include "../../includes/databaseconnections/demo/database_connection.php";
///////////////////////////////////////////////////////////////////////////////////////////////
/* check connection */
if (mysqli_connect_errno()) {
printf("Connect failed: %s\n", mysqli_connect_error());
exit();
}
else{}
$query = "SELECT * FROM Table1 LEFT JOIN Table2 USING (ID) WHERE Table1.feild1 = '0' ORDER BY dateSelected ASC LIMIT 25";
if ($result = mysqli_query($link, $query)) {
/* fetch associative array */
while ($row = mysqli_fetch_assoc($result)) {
if ($row['photoLink'] == NULL)
{
$row['photoLink'] = "endofgroup";
$row['lastName'] = "End Of Group " ;
$ID = "&ID=".$row['ID'];
}
if ($row[leftGym] == "1") { $flash = "style='color:#B22222;font-size:140%'";} else {$flash ="";}
echo "<li><a href='button1.php?sid=${row['ID']}' $flash style='font-size:140%;' width='25px' data-ajax='false'> {$row["lastName"]}, {$row["firstName"]} ({$row["pmBusNumber"]})</a><div class='split-custom-wrapper'>
<a href='button2.php?sID={$row['ID']}&lane=1{$ID}' data-role='button' class='split-custom-button' data-icon='delete' data-rel='dialog' data-theme='c' data-ajax='false' data-iconpos='notext'></a>
</div></li>";
}
/* free result set */
mysqli_free_result($result);
}
mysqli_close($link);
/////////////////////////////////////////////////////////////////////////////////
?>
</ul><br>
</div>
</div>
</div>
</body>
</html>
I've added comments to the code snippet. Please let us know if you require further info.
Based on jquery ajax() v3.1.1
html: update the a element in the list with class=myCustomClass
<a href='button1.php?sid=${row['ID']}' $flash style='font-size:140%;' width='25px' data-ajax='false' class='myCustomClass'> {$row["lastName"]}, {$row["firstName"]} ({$row["pmBusNumber"]})</a>
<div class='split-custom-wrapper'>
<a href='button2.php?sID={$row['ID']}&lane=1{$ID}' data-role='button' class='myCustomClass split-custom-button' data-icon='delete' data-rel='dialog' data-theme='c' data-ajax='false' data-iconpos='notext'>
</a>
</div>
<span id="status"></span>
script :
$(function () {
//Attach the click event to Links only with class=myCustomClass and perform this function
$("a[class=myCustomClass]").on('click', function (e) {
e.preventDefault(); //preven the page from navigating, the default behaviour for a link
$.ajax({
url : this.href, //perform a ajax request with the link, GET in this case
/* type: POST, */
beforeSend : function () {
$("#status").text('Working..')
}
}).done(function (data) {
console.log(data); //do something with the data if any
}).fail(function (jqXHR, textStatus, errorThrown) {
console.log("ERROR"); //report in console for errors
console.info(jqXHR);
console.info(textStatus);
console.info(errorThrown);
}).always(function () {
//do this step every time
$("#status").text('completed..')
console.info("completed"); irrespective of result
});
})

Run Jquery Slide Toggle on while elements

I have a problem in running jquery . Here the table sample:
table database
id | name | value
1 data1 10
2 data2 20
3 data3 30
4 data4 40
5 data5 50
Here is my code:
<?php
$sql = "SELECT * FROM database ORDER BY id"
$result = $conn->query($sql);
while($row = $result->fetch_assoc())
{?>
<div id="flip">
<?php echo $row['name']?>
</div>
<div id="panel">
<?php echo $row['value']?>
</div>
<?php
}
?>
But the slide toogle jquery only execute once, on the first element. How to make slide toggle execute every row in while looping?
Here is my slidetoggle()Jquery:
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideToggle("slow");
});
});
</script>
And the CSS :
<style>
#panel, #flip {
padding: 5px;
text-align: center;
background-color: #e5eecc;
border: solid 1px #c3c3c3;
}
#panel {
padding: 50px;
display: none;
}
</style>
Based on Jack A. answer, build first your HTML with classes instead of multiples IDs. Then, in your script, use jQuery.next() to find the next panel element and toggle it:
$(document).ready(function(){
$(".flip").click(function(){
$(this).next('.panel').slideToggle("slow");
});
});
Here is a jsfiddle illustrating this.
You are using the same id in multiple elements. Build a unique id for every element. E.g. flip1, flip2, etc. and panel1, panel2, etc.
You are creating multiple HTML elements with the same ID ("flip" and "panel"), which is not correct; IDs should be unique.
An alternative is to use a class instead of an ID:
while($row = $result->fetch_assoc())
{?>
<div class="flip">
<?php echo $row['name']?>
</div>
<div class="panel">
<?php echo $row['value']?>
</div>
<?php
}
JavaScript:
$(document).ready(function(){
$(".flip").click(function(){
$(".panel").slideToggle("slow");
});
});
This will act on all of the elements simultaneously.

change position depending on DB value

I let people fill in a form, and insert distances etc. They get stored in a db.
Then I lead them to a page, where I show the number of axles (12 in this case) and make a circle of them (in css)
Then it looks like this:
The code for this:
<?php
$show_axle = $database->axles($_GET['train_id']);
?>
<div id="axle_bogie_border">
<div id="axle_position">
<?php
foreach($show_axle as $axlefigure){ ?>
<div id='number_of_axles'> <?php echo $axlefigure['axle'] ?></div>
<?php
}
?>
</div>
</div>
The axle_border make the Train image (The black rectangle)
The axle_position take care that the axles (Numbers actually) Don't go in the image but slightly below it (So it looks like wheels/axles).
The Number_of_axles make the numbers look like a circle (Like wheels/axles).
Now the function:
function axles($id){
$sql = "SELECT * FROM axle WHERE train_id = :id2";
$sth = $this->pdo->prepare($sql);
$sth->bindParam(":id2", $id, PDO::PARAM_STR);
$sth->execute();
return $sth->fetchAll();
}
The function selects everything from the table axle (See first image).
Now, I actually want the axles to take a position. And I'm thinking about doing that via the Distance row.
So:
Axle 1 has the number 5 for distance. So it goes 5px from the far left
Axle 2 has the number 10. So i want it 10 pixels next to the axle 1.
Axle 3 has the number 5. So i want it 5 pixels next to the axle 2.
Etc.
Eventually it needs to look like this:
My question: Is this posible. If yes, how?
EDIT:
it is working now :)
I did the following:
<?php
$show_axle = $database->axles($_GET['train_id']);
?>
<div id="axle_bogie_border">
<div id="axle_position2">
<?php
foreach($show_axle as $axlefigure){ ?>
<div style="margin-left:<?php echo $axlefigure['distance'];?>px;">
<?php echo $axlefigure['axle'] ?>
</div>
<?php
}
?>
</div>
</div>
And the css:
#axle_position2 {
margin-top: 9%;
position: relative;
float: left;
}
#axle_position2 div {
background: green;
float: left;
position: inline-block;
width: 40px;
height: 40px;
border-radius: 50px;
}

Categories