Jquery Mobile and .load function - php

I am trying to transfer my website into jquery mobile and am running into an error when using:
$('#information').load('getRegister.php' , function() {
$('#preloader').hide();
});
This function gets called to load html code dynamicaly into the page without a refresh, but the code that appears does not match the css of code already in the website. You can see this in the screenshot below:
I am pretty stumped on why, the buttons and text fields do not take on the styling of the form already loaded into the page. The code the .load calls is this php file:
<?php
require ('myConnectDB.inc.php');
// echo registration form
echo "
<p class=\"center\"> </p>
<form name=\"input2\" action=\"\" onsubmit = \" return register()\" method=\"post\" data-ajax=\"false\">
<p class=\"center\"> User Name:
<input type=\"text\" name=\"user\" id=\"userRegister\" /></p>
<p class=\"center\"> </p>
<p class=\"center\"> Email:
<input type=\"text\" name=\"user\" id=\"emailRegister\" /></p>
<p class=\"center\"> </p>
<p class=\"center\"> Password: <input type=\"password\" name=\"password\" id=\"passwordRegister1\" /></p>
<p class=\"center\"> </p>
<p class=\"center\"> Re-Type Password: <input type=\"password\" name=\"password\" id=\"passwordRegister2\" /></p>
<p class=\"center\"> </p>
<p class=\"center\">
<input type=\"submit\" class=\" button blue\" name = \"login\" value=\"Register\" />
</p>
</form>";
?>

You need to trigger the create event on the newly added content.
From the Docs
If you should generate new markup client-side or load in content via
AJAX and inject it into a page, you can trigger the create event to
handle the auto-initialization for all the plugins contained within
the new markup. This can be triggered on any element (even the page
div itself), saving you the task of manually initializing each plugin
(see below).
For example, if a block of HTML markup (say a login form) was loaded
in through Ajax, trigger the create event to automatically transform
all the widgets it contains (inputs
and buttons in this case) into the enhanced versions. The code for
this scenario would be:
$( ...new markup that contains widgets... ).appendTo( ".ui-page" ).trigger( "create" );
In your case you will probably want to something like the following
$('#information').load('getRegister.php' , function() {
$('#preloader').hide();
$('#information').trigger("create");
});

It's probably because your new html doesn't provide the same class attributes as the original form or whatever nested div structure the original style sheet uses.
Look at the class attribute of the original text fields and match those. or look at the style sheet to see how to layout your html.

Related

Show forms from php with jquery in php

I have a php file that has 3 forms inside and some insert queries and i separate them with if(isset()) based on what variable comes from $_POST. I want to make the forms appear for example on the center of the page and when the user presses submit the form fades out and the next one from the isset appears. How can i do that?
For example this is the first form
<?php if (!isset($_POST['date'])): ?>
<?php if (!isset($_GET['id'])):?>
<form method="post" action="<?php echo $_SERVER['PHP_SELF']?>">
Date :
<input type="text" name="date" id="date"> </br>
<input type="submit" value="Submit" />
</form>
<script>
$("#date").datepicker();
</script>
<?php endif;?>
<?php endif;?>
And then if the user presses submit there is an if(isset()) with an insert query.
After the insert query there is another form
<?php if (isset($_GET['id'])): ?>
<form action="<?php echo $_SERVER['PHP_SELF']?><?php echo " ?id=" . $_GET['id'] . " &date=" . $_GET['date'] . " &seats=" . $_GET['seats']; ?>" method="post">
Ώρα :
<input type="text" name="time">
<input type="submit" name="submit">
</form>
<?php endif;?>
So what i want is to display them on the center of my page but i dont have to open another page every time i press submit and they will fadeout (or something similar) and display the next form.
Sounds like you could do this with css. Not sure I understand your question though.
display all 3 forms on the page at once -> no isset stuff, I don't get what that is there for
hide the ones you don't want the user to see with a class ".hide"
submit the forms with jquery, as you don't want the page to reload. after submitting, hide the one you just sumbmitted by setting its class to hide and removing hide from the next form
form{
transition: opacity 2s;
}
form.hide{
opacity:0;
}

PHP Autofill or something?

I have seen many questions related to auto fill, but none of them worked for me. I'm not even sure if a solution to my problem lies in HTML or PHP. I am new in both of them and I'm still not used to them. I'm working on a simple chat app. What I have now is chat window, text field, and nick name field. Both of them pass the values to the text file (which is how I want this to work, no change here). Problem is that both these fields work as a form, and each time I submit, nick name field refreshes. What I would want is auto completing nickname field so it stays the same (it'd be the best if it stayed even after browser refreshes, but it will be okay if it only goes through the form submit)
code if needed:
PHP:
<?php
$action = $_GET["action"];
$myText = $_POST["mytext"];
$nick = $_POST["nick"];
if($action = "save") {
$targetFolder = "/var/www/html/xami/";
file_put_contents($targetFolder."htmlinput.txt", $nick.">".$myText);
}?>
HTML:
<form action="?action=save" name="myform" method="post">
<label for="nick">Nick:</label>
<input type=text id="nick" name="nick" placeholder="Nick" value="Name" required><br>
<input type=text name="mytext" placeholder="Text" required>
<input type="submit" value="Send.">
</form>
I was fooling around with autocomplete but no positive results.
I'm leaving post for tomorrow, I'll reply then.
Assuming your HTML is on a .php page you could have...
if(0<strlen($nick)){
echo "<input type=hidden id='nick' name='nick' value='$nick'>";
}else{
echo "<input type=text id='nick' name='nick' placeholder='Nick' value='Name' required><br>";
}
Or, use AJAX as #Rishi says.

Sowing an updated value in a HTML page

I'm trying to use AJAX to make my website a little slicker than it currently is.
I have a block of code that shows the following
if($guess == 0){
echo "Enter a guess:;
*AJAX form* ---> inserts a MySQL database record with the users guess
<div to show results of script for form> - not necessarily needed
}else{
echo "Update your guess:";
*SAME AJAX form* ---> updates the MySQL database record with the users new guess
<div to show results of script for form> - - not necessarily needed
}
The problem I'm having is that I want part of the webpage to show:
Your latest guess is: £x.xx
However because a user will start off with 0 guesses, and AJAX sends the form "behind" the scenes, I'm struggling in knowing how to show the above line once the user has made a guess.
So also that way when they revisit the page at a later date, it shows the last guess they had.
Those are the only 2 elements of the page I want to be able to refresh, the rest of the information doesn't have to refresh.
Some more code here:
<?php
if($guessess_open == 1){
echo "<h2>guesses are CLOSED</h2>";
}
else{
//it's this part that I want to have always shown on the page, but when I visit the page fresh it doesn't show me any results.
<div id="results"></div>
<form name="myform" id="myform" action="" method="POST">
<!-- The all important guess field -->
<label for="guess" id="guess_label">Guess<br></label>
<input type="text" name="guess" id="guess" size="10" value=""/>
<?php
echo "<input type='hidden' name='user_id' id='user_id' size='10' value='$user'/>";
echo "<input type='hidden' name='item_id' id='item_id' size='10' value='$itemID'/>";
echo "<input type='hidden' name='title' id='title' size='100' value='$title2'/>";
echo "<input type='hidden' name='owner_id' id='owner_id' size='10' value='$ownerid'/>";
echo "<input type='hidden' name='guesses_open' id='guesses_open' size='10' value='$guesses_open'/>";
echo "<input type='hidden' name='exist' id='exist' size='10' value='$exist'/>";
?>
<!-- The Submit button -->
<br>
<input type="image" name="submit" src="URL" width="150px" height="100px">
</form>
The only way I can get it to show something in that part of the page is to have some code in which checks a database for a guess and if it exists display the result, but then when I submit a new form, because it only updates the results it doesn't update the part of code for example could include
else{
include("URL.php?item_id=" . $itemID. "&user=" .$user. "");?>
//it's this part that I want to have always shown on the page, but when I visit the page fresh it doesn't show me any results.
<div id="results"></div>
which shows the latest guess when a user visits the page, but then when a new guess is made, this doesn't update... I don't have to have my forms php up display the result if the above part of code would update each time I make a guess... I hope this is clearer?

passing complete string value within accordion tab

i have the jquery accordion tabs. within those tabs, i have a hidden form which on click, is auto-filled with certain values displayed within that tab. It displays correctly within the accordion tab but when i pass those same variables as auto-fill values within the form, only the first word gets displayed if there is more than 1 word. the variable name that i have put as the value attribute of the text box is exactly the same so i don't know why this happens.
echo "<tr><p><td>".$allCourses[$i][0]."</td> - <td>".$allCourses[$i][1]."</td>
it gets displayed correctly here. however, here, only the first word appears:
<form action='editCourse.php' method='post'>
<p id='edit-course-d' class='edit-accordion-tab'><img src='images/edit.png' title='Edit Course'/></p>
<p id='edit-course-f' style='display: none'>
Course ID: <input type='text' name='edit-course-id' value =".$allCourses[$i][0]."><br />
Course Name: <input type='text' name='edit-course-name' value=".$allCourses[$i][1]."><br />
(all this is within the echo "" in php)
You have to put quotes around the content of your value-attribute, otherwise the "other words" are interpreted as HTML-attributes. So what is rendered to the browser looks like:
<input value=hello world>
The browser interprets this as an input element which has two attributes:
value="hello"
world=""
So you have to put quotes ' or double-quotes " around the value of the attribute. Like that:
echo "
<form action='editCourse.php' method='post'>
<p id='edit-course-d' class='edit-accordion-tab'><img src='images/edit.png' title='Edit Course'/></p>
<p id='edit-course-f' style='display: none'>
Course ID: <input type='text' name='edit-course-id' value='".htmlspecialchars($allCourses[$i][0])."'><br />
Course Name: <input type='text' name='edit-course-name' value='".htmlspecialchars($allCourses[$i][1])."'><br />";
I use htmlspecialchars to escape the quotes that might appear inside the values (this adds another layer of safety).

jQuery Tools Overlay - Loading form but not passing $_POST vars?

Say I have info.php page with user info (id, name, age, etc).
On this page, there is an 'edit' button that takes the user to a form on edit.php so they can change their info. The form is populated via $_POST with id, name, age, etc.
edit.php has an 'update' button that posts back to info.php with the updated data. This all works fine.
But when I try to load edit.php within a jQuery Tools Overlay pop-up, the form in edit.php appears but the variables are not passed along. Instead they all appear as 'undefined'.
I am not sure where to place the required href element so as to pass my variables to edit.php when inside the overlay.
Any ideas?
<form action="edit.php" method="post">
<input type="hidden" name="edit" value="yes" />
<input type="hidden" name="id" value="<?php echo $row[1] ?>" />
<input type="hidden" name="name" value="<?php echo $row[2] ?>" />
<!-- this is the required href to trigger overlay -->
<a href="edit.php" rel="#overlay" style="text-decoration:none">
<input type="submit" value="Edit"/>
</a>
</form>
<div class="apple_overlay" id="overlay">
<!-- the external content is loaded inside this tag -->
<div class="contentWrap"></div>
</div>
<!-- make all links with the 'rel' attribute open overlays -->
<script>
$(function() {
// if the function argument is given to overlay,
// it is assumed to be the onBeforeLoad event listener
$("a[rel]").overlay({
mask: 'darkred',
effect: 'apple',
onBeforeLoad: function() {
// grab wrapper element inside content
var wrap = this.getOverlay().find(".contentWrap");
// load the page specified in the trigger
wrap.load(this.getTrigger().attr("href"));
}
});
});
</script>
I'm a little confused by the question but this is possibly what you are looking for...
You need to either pass the ID in the url and look up the data serverside or pass all the data in the url like so
<a href="edit.php?id=<?php echo $row[1] ?>&name="<?php echo $row[2] ?>" rel="#overlay" style="text-decoration:none">
Another way is to store name id and all that stuff in $_SESSION in php. Then info.php would save it and edit php would read it.

Categories