Ajax Tabs with PHP sites - php

I have a "little" big problem with my web application.
First, I must confess, that I am not so good in english :).
I have realize very simple html+css-Tabs based on ajax (powered by jquery) and each Tab request a separate PHP-site. Every site includes min. one form with php-values and other jquery-effects/-plugins.
The primary problem is the form-view in every tab. The ajax-loaded forms were shown not complete and other form were complete blank. I locate the problem and delete PHP-code in one of some fieldsets and finaly I show this one fieldset and the rest of the form were blank.
If I use only css-based tabs and without ajax functionality the forms loaded completely.
What is the problem with ajax? I dont understand it :P
Here is a part of one of the forms:
<form action="#" method="post" name="form_project" class="form_project mainform">
<input type="hidden" name="uid" value="<?= issetGlobals('uid') ?>" />
<table border="0" id="tbl-projects" cellspacing="0" cellpadding="5">
<tr>
<td colspan="2"><input type="checkbox" name="cb_newProject" onclick="actFieldset('#fs-newProject')" /> <label for="cb_newProject">Projekt erstellen</label></td>
</tr><tr>
<td>
<fieldset id="fs-newProject" disabled="disabled"><legend>Projektverzeichnis erstellen</legend>
<table border="0">
<tr>
<td><label for="projectName">Projektname</label></td>
<td><input type="text" name="projectName" value="" /></td>
</tr><tr>
<td><label for="projectManager">Projektleiter</label></td>
<td><select size="1" name="projectManager" id="projectManager">
<?php
foreach($DBma->getEmployees() as $value) {
if($value['uid'] == issetGlobals('uid'))
echo '<option value="'.$value["uid"].'" selected="selected">'. convertString($value["name"]) .'</option>';
else
echo '<option value="'.$value["uid"].'">'. convertString($value["name"]) .'</option>';
}
?>
</select>
</td>
</tr>
And here the "converted" JS-Code:
$('#tabs-nav li').each(function(i) {
$(this).click(function(event){
event.stopPropagation();
Tab($(this).attr('id'));
});
});
function Tab(key){
$('#tabs-nav li').each(function() {
$(this).removeClass('active');
})
$(key).addClass('active');
$.ajax({
url: 'tab-content.php?tab=' + key,
type: 'get',
beforeSend: function() {
$(key + '-loading').html('<img src=\'images/ajax-loader.gif\' width=\'16\' height=\'16\' alt=\'Loading\' />');
}
}).done(function(responseText) {
$(key + '-loading').html("");
$('#tabs-content').html(responseText);
});
}

Related

HTML/PHP multiple form actions

I have a form with 2 selectboxes a textbox and 1 textarea.
When i load this form it gets all the menu items and language items from the database and inserts them in the selectboxed and then gets the corresponding content from menu item and language.
<form style="border: 1px solid black; " name="form" method="post" action="">
Content selecteren om te wijzigen:
<table>
<tr>
<td width="78">Menu item:</td>
<td><select name="Menu" onchange="this.form.submit()">' . $this->MenuItems->render() . '</select></td>
</tr><br>
<tr>
<td width="78">Taal:</td>
<td><select name="Language" onchange="this.form.submit()">' . $this->LanguageItems->render() . '</select></td>
</tr>
<tr>
<td>Menu Item:</td>
<td width="78"><input name="MenuItemTextBox" type="text" id="MenuItemTextBox" value="' . $_POST['Menu'] . '"></td><br>
</tr>
<tr>
<td>content</td>
<td><textarea style="" Name="Content" id="NewContent" ROWS=10 COLS=50>' . $this->GetContent->render() . '</textarea></td>
</tr>
<tr>
<td><input type="submit" name="Submit" value="Wijzigen"></td>
</tr>
</table>
</form>
When you select a different value from the selectboxed it reloads the form/page and displays the correct content in the textare again with "this.form.submit()", and it also remembers what you have chosen in the selectbox.
Now i want to submit all these posts from this form to a file ChangeContent.php But i cant use the action attribute in the form otherwise it will always go to this file when you select a new value from the selectbox.
so my question in short: Reload form onchange while able to use the action attribute on a button submit press.
Thank you
if I understand the question correctly, you change the url of form via javascript/jquery like so..
<select onchange="submitform('url1')"></select>
<select onchange="submitform('url2')"></select>
<script type="text/javascript">
function submitForm(url)
{
$("#formid").attr("action",url);
$("#formid").submit();
}
</script>
and if you do this on submit button, you may try something like so:
<input type="submit" onclick="return submitformviabtn()"></select>
<select onchange="submitform('url2')"></select>
<script type="text/javascript">
function submitformviabtn(e)
{
e.preventDefault();
$("#formid").attr("action","page.php");
$("#formid").submit();
}
</script>
<script>
$(document).ready(function(){
$("#textBox").keyup(function()
changeTest($(this).val());
});
function changeTest(val)
{
rowno=0;
var str="";
str = "http://www.xyz.com/index.php/api/getArtist?searchtext="+val;
$.getJSON(str, function (data) {
var artistname="";
var artistid="";
$.each( data, function(key1,value1) {
$.each(data[rowno], function(key,value) {
if(key=='artistname')
{
artistname=value ;
}
});
availableTags[rowno] = artistname;
rowno=rowno+1;
});
});
$( "#textBox" ).autocomplete({
source: availableTags
});
}
</script>
<form action="your-page.php" method="post">
<label>Event Category</label>
<select name="eventTypeidFk" id="eventTypeidFk" class="" required onchange="changetextbox()">
<option value="">--- Select Event Category ---</option>
<option value="1">Sports</option>
<option value="2">Concert</option>
</select>
<label>Artist</label>
<input type="text" name="artist1" id="textBox" class="" required>
</form>
You can use this concept. Create an api to fetch data from db and with onchange call that method.

How to submit a form from home domain to sub domain?

I want to submit a Form from home page to sub domain page.
Here is my code
html - home page (main domain)
<table>
<tr>
<td>Name</td>
<td><input type="text" name="txtName" id="txtName" /></td>
</tr>
<tr>
<td>Email</td>
<td><input type="text" name="txtEmail" id="txtEmail" /></td>
</tr>
<tr>
<td><input name="btnSubmit" id="btnSubmit" value="Submit" type="button"></td>
</tr>
</table>
<form id="getDetails" method="post" action="http://customers.liyyas.com/">
<input type="hidden" name="act" value="Users" />
<input type="hidden" name="hdnName" id="hdnName" />
<input type="hidden" name="hdnEmail" id="hdnEmail" />
</form>
Script
<script type="text/javascript">
$(document).ready(function(){
$('#btnSubmit').click(function()
{
alert("hai");
document.getElementById("getDetails").submit();
document.getElementById("hdnName").value = $('#txtName').val();
document.getElementById("hdnEmail").value = $('#txtEmail').val();
});
});
</script>
Sub domain page - user.php
<?php
$act = formatstring($_POST['act']);
switch($act)
{
case "Users":
$Name=$_POST['hdnName'];
$Email=$_POST['hdnEmail'];
print($Name);
exit();
}
?>
In sub domain I am printing the value but its not printing
Is it possible to submit a form from home domain to sub domain?
You need to change the action attribute of the form element from
http://customers.liyyas.com/
to
http://customers.liyyas.com/customers.php
I also assume you know that according to this code
$('#btnSubmit').click(function()
{
alert("hai");
document.getElementById("getDetails").submit();
document.getElementById("hdnName").value = $('#txtName').val();
document.getElementById("hdnEmail").value = $('#txtEmail').val();
});
The form will submit BEFORE the values of hdnName and hdnEmail are changed? That may also be a bug for you to quickly switch solve by switching around a few lines. The reason this may be a bug is that when your form submits the page will be reloaded meaning the user will never get to see the new values inserted via JavaScript.
The fix could be
$('#btnSubmit').click(function()
{
alert("hai");
document.getElementById("hdnName").value = $('#txtName').val();
document.getElementById("hdnEmail").value = $('#txtEmail').val();
document.getElementById("getDetails").submit();
});

Auto populate a textfield with the information of previous textfield

I have a form, which I'm using autofill using jquery in the first textfield. This textfield is called "producto1".
What I want is that when user write the information in "producto1" automatically load the content in "marca1", the content in this field will be loaded from my database.
This is my code:
<table width="100%" border="0" align="center" cellpadding="5" cellspacing="0">
<tr>
<td width="545"><div align="center">
<input name="producto1" type="text" class="textfield4" id="producto1" value="" size="65" />
</div></td>
<td width="385"><div align="center">
<input name="marca1" type="text" class="textfield5" id="marca1" size="10" maxlength="5" onKeyPress="return handleEnter(event);">
</div></td>
<td width="385"><input name="cantidad1" type="text" class="textfield5" id="textfield2" size="10" maxlength="5" onKeyPress="return handleEnter(event);"></td>
</tr>
</table>
The information that will be displayed at the "marca1" field will be loaded from my database, but my problem is that I don't know how to populate automatically this second field using ajax.
// JS File
$(document).ready(function(){
$("#producto1").keyup(function(){
$.post('/path-to/marca.php',
{
text: $(this).val()
},
function(data) {
$('#marca1').val(data.returns);
},
'json');
});
});
// PHP File
$sql = $mysqli->query("SELECT marca_name
FROM marca
WHERE marca_name
LIKE '%" . $mysql->real_escape_string($_POST['text']) . "%'");
while($row = $sql->fetch_assoc($sql))
$returns[] = $row['marca_name'];
echo json_encode("returns" => implode(",", $returns));

Populate text field with checkbox

I have a table with a column on prices and the next column is a check box to mark whether that item was paid. I was wondering how I could populate the text box with the amount when the check box is clicked.
Code:
<table>
<tr>
<td>Procedure</td>
<td>Amount</td>
<td align="center"><input type="checkbox"></td>
<input type="text" size="20" value="" class="currency">
</tr>
</table>
HTML
<table>
<tr>
<td>Procedure</td>
<td>Amount</td>
<td align="center">
<input type="checkbox">
</td>
<td>
<input type="text" size="20" value="" class="currency">
</td>
</tr>
</table>
JavaScript/jQuery:
$(function() {
$('table input[type="checkbox"]').change(function() {
var input = $(this).closest('td').next('td').find('input');
if ($(this).is(':checked')) {
var amount = $(this).closest('td').prev('td').text();
input.val(amount);
} else {
input.val('');
}
});
});
See a working example at: http://jsfiddle.net/KTQgv/2/.
Some code you can expand on:
<input type="checkbox" rel="textbox1" name="banana"/>
<textarea id="textbox1" ></textarea>
JS/jQuery:
$('input:checkbox').click(function(){
var tb = "#"+$(this).attr('rel');
if($(this).is(":checked"))
$(tb).append(this.name + "\n");
});
Fiddle: http://jsfiddle.net/maniator/hxkX3/
Semantically, a checkbox isn't really the best control to choose to initiate an action. I would have an edit or pay (something actionable) button/icon which initiates the action of allowing the user to enter a value.
However for the purposes of your example, the click event of the checkbox is enough to be able to change the contents of your table cell from the displayed text (if any) to a textbox.
Given
<td id="row_1">Unpaid</td>
Using
$('#row_1').html('<input type="text" name="txtRow1" />');
is simplistic, but enough to enable the user to type in a value which could then be posted to the server during a save action.

Can't upload file in Internet Explorer using JQuery Form plugin

I'm using JQuery Form Plugin to upload a file together with PHP, everything works perfectly in Firefox, but in Internet explorer is does not do anything if I submit the form.
My code is below
<script type="text/javascript">
<!--
$(document).ready(function() {
var options = {
target: '#message',
url:'../includes/ajax/import.php?import=1',
beforeSubmit: function() {
$('#uploader').html('<div style="padding-top:10%"><center><img src="../domain/images/ajax-loader.gif" border="0" /></center></div>');
$('#message').toggle();
},
success: function() {
$("#message").removeClass("message").addClass("messageResponse");
$('#message').toggle();
$('#uploader').html('');
}
};
$('#upload').ajaxForm(options);
});
//-->
</script>
<div id="message" class="message">
<form name="upload" id="upload" action="#" method="POST" enctype="multipart/form-data">
<table cellpadding="4" cellspacing="4" border="0">
<tr>
<td colspan="3"><h1>Map Clients <i>(Import CSV File)</i></h1></td>
</tr>
<tr>
<td class="fieldLabel" nowrap>File:</td>
<td nowrap><input type="file" name="fileToUpload" id="fileToUpload" /> *</td>
<td nowrap id="errorFile" class="error"></td>
</tr>
<tr>
<td nowrap colspan="3"><button id="mapClients">Map Clients</button></td><td nowrap id="errorFile" class="error"></td>
</tr>
<tr>
<td colspan="3"><input type="hidden" value="1" id="type" name="type" /></td>
</tr>
</table>
</form>
</div>
<div id="uploader"></div>
Now my problem is that I can't figure out why IE 7 is not doing anything when I click on my form submit button
I seem to recall running into the same problem. Try this:
$(document).ready(function() {
var options = {...
/*abridged for clarity*/
$('#upload').submit(function() {
$(this).ajaxSubmit(options);
return false;
});
});
I found the issue
In my HTML I had something like this
<tr>
<td nowrap colspan="3"><button id="mapClients">Map Clients</button></td><td nowrap id="errorFile" class="error"></td>
</tr>
I changed it to
<tr>
<td nowrap colspan="3"><input type="submit" id="mapClients" value="Map Clients" /></td><td nowrap id="errorFile" class="error"></td>
</tr>
And the problem was solved
I had a problem with the JQuery Form Plugin in ie8. The piece of code that started the "ajax form" was located in a "dynamical div" that was updated later then the main page. Moving that call to the main page got ie8 working for me.
Had a similar problem with IE as well. In my case the problem was happening because I was disabling the file input element (input[type=file]) in beforeSend (for cosmetic and usability reasons). Only IE had a problem with the input element being disabled.

Categories