PDA

View Full Version : Resolved jquery ui tabs doesn't make form works!



hosam
02-09-2012, 01:20 PM
well I have this form:


<form name="enter" action="hand.php" method="post" dir="rtl" accept-charset="utf-8">';
echo '<p align="right" id="lable">request number:</p><br/>
<span id="request_number"></span><br/>
<p align="center" id="lable">send to:</p>
<select id="userone">';
$data = mysql_query("SELECT `id`,`firstname`,`lastname` FROM `users`");
while($row = mysql_fetch_assoc($data)) {
echo '<option value="'.$row['id'].'">'.$row['firstname'].' '.$row['lastname'].'</option>';}
echo '</select><br/>
<p align="center" id="lable"> copy to:</p>
<select id="usermulti" multiple="multiple">';
$data = mysql_query("SELECT `id`,`firstname`,`lastname` FROM `users`");
while($row = mysql_fetch_assoc($data)) {
echo '<option value="'.$row['id'].'">'.$row['firstname'].' '.$row['lastname'].'</option>';}
echo '</select><br/><br/>
<p align="center" id="lable">need: </p>
<input type="text" class="input" size="100" /><br/><br/>
<p align="right" id="lable">type:</p>
<div id="radio">
<input type="radio" id="radio1" name="send_type1" /><label for="radio1">problem1</label>
<input type="radio" id="radio2" name="send_type2" /><label for="radio2">problem2</label>
<input type="radio" id="radio3" name="send_type3" /><label for="radio3">problem3</label>
<input type="radio" id="radio4" name="send_type4" /><label for="radio4">problem4</label>
<input type="radio" id="radio5" name="send_type5" /><label for="radio5">problem5</label>
<input type="radio" id="radio6" name="send_type6" /><label for="radio6">problem6</label>
<input type="radio" id="radio7" name="others" /><label for="radio7">other:
<input type="text" name="others"/></label>
</div><Br/>
<p align="right" id="lable">explian:</p>
<textarea id="text" name="content" style="width:75%" class="tinymce"></textarea>
<br/>
<div id="radios">
<input type="radio" id="radio8" name="important" /><label for="radio8">important</label>
<input type="radio" id="radio9" name="important0" /><label for="radio9">not important</label></div><br/>

<input class="realupload" name="attachfile" type="file" id="realupload" value="post file" dir="rtl" title="post" />
</div><br/>
<input id="submit" name="submit" type="submit" value="send" />
</div>

</form>

and this one is inside request.php file, so I use another file called program.php that contains tabs to show pages included like this:


<?php
session_start();
$username = $_SESSION['username'];
if (isset($username)){
//insert welcome user
echo'

<div align="right" style="display:block">welcome, '.$username ;
//insert tabs for program
echo'you are in</div>
<div id="b"><h4><a href="logout.php" >logout</a></h4></div>
<div id="tabs">
<ul dir="rtl">
<li><a href="mail.php">mail</a></li>
<li><a href="request.php">request</a></li>
<li><a href="#tabs-3">req</a></li>
<li><a href="#tabs-4">med</a></li>
<li><a href="#tabs-5">store</a></li>
<li><a href="#tabs-6">account</a></li>
<li><a href="#tabs-7">sales</a></li>
<li style="float:left;"><a href="#tabs-8">profile</a></li>
</ul>
<div id="tabs-3">req</div>
<div id="tabs-4">med</div>
<div id="tabs-5">store</div>
<div id="tabs-6">account</div>
<div id="tabs-7">sales</div>
<div id="tabs-8">profile</div>
</div>';

}else
die("<h3 dir='rtl'> sorry you are not log in <a href='index.php'>back!</a></h3>");
?>

my jquery code:


at program.php inside <head>

<script type="text/javascript">
$(function(){
// Tabs
$('#tabs').tabs();
// Accordion
$("#accordion").accordion({ header: "h4" });
// Button
$("#b").button({link: "a"});
});
</script>

at request.php inside <head>
<script type="text/javascript">
$(document).ready(function(){
$("#typname").multiselect({
header: false,
multiple:false,
noneSelectedText: "choose type",
selectedText: "choose requester" ,
selectedList: 1,
height:"auto"

}) .multiselectfilter();
$("#usermulti").multiselect({
checkAllText: "all",
uncheckAllText: "none",
noneSelectedText: "choose requesters",
selectedList: 5,
height:"auto"
});
$("#userone").multiselect({
header: false,
multiple:false,
noneSelectedText: "اختر مستخدم",
selectedList: 1,
height:"auto"

}) .multiselectfilter();

$("#send_type").buttonset({ icons: {primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'} });
$("#radios").buttonset({ icons: {primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'} });
$("#accordion1").accordion({ autoHeight: true });
$("#submit").button();
$("#success").dialog();

});

</script>

the problem is the request.php without tabs working alone, but with in tabs inside program.php doesn't I don't know why but I suppose I miss something related to event or something else I just can't understand what I've missing to make this form working!:confused:

XManBG
02-11-2012, 10:22 PM
No way to understand your problem using only that three abstracts of your whole picture...
Not to mention, that you could explain much more background of what you would like to achieve at the end: to get it working, or to learn integrating JS into PHP??

hosam
02-12-2012, 12:01 AM
it obvious what I want to achieve here:
-allow form to be load and send $_POST requests
-escape part of sending dynamic data throw ajax, and just allow php to do its work, so here I just use tabs for style not to handle any http requests.
- I want to load the url inside tab as I load it alone so the javascript code also work, for example allow form validation to get work without load just the content and disable javascript as tabs do.
hope this help to get what is my problem.

traq
02-12-2012, 04:33 AM
Your question is unclear.
Please provide more information, and be as specific as possible.
What do you want to accomplish? What have you already tried? What problems did you encounter?
Also, please be sure that you have included all relevant code and/or a link to the page in question.


-allow form to be load and send $_POST requests
so, your form is not submitting properly when you use .tabs()?


-escape part of sending dynamic data throw ajax, and just allow php to do its work, so here I just use tabs for style not to handle any http requests.
.tabs() (optionally) uses ajax for retrieving content, not for submitting forms.


- I want to load the url inside tab as I load it alone so the javascript code also work,
this seems to contradict what you say above (that you want to disable ajax)...?


...for example allow form validation to get work without load just the content and disable javascript as tabs do
what you mean by this is completely unclear.

in general:

you say it "doesn't work," but you don't say specifically what is going wrong.

your code samples seem to be incomplete, and it isn't clear how they relate to each other.

if this is a javascript issue (as it seems to be - you say it works without the tabs script), then you need to show what the generated HTML markup looks like.

XManBG
02-12-2012, 07:14 PM
:) Thank you traq, I thought, it's only me, who don't understand the "obvious" asking...

traq
02-12-2012, 10:40 PM
well, it is obvious that the OP is trying to combine several scripts and wants them to "work" - what isn't obvious is the specific problem, what has already been attempted, and the "bigger picture" of how the whole thing is being orchestrated.

Once those unknowns are addressed, the solution may become obvious.

hosam
02-13-2012, 04:51 PM
Your question is unclear.
Please provide more information, and be as specific as possible.
What do you want to accomplish? What have you already tried? What problems did you encounter?
Also, please be sure that you have included all relevant code and/or a link to the page in question.


so, your form is not submitting properly when you use .tabs()?


.tabs() (optionally) uses ajax for retrieving content, not for submitting forms.


this seems to contradict what you say above (that you want to disable ajax)...?


what you mean by this is completely unclear.

in general:

you say it "doesn't work," but you don't say specifically what is going wrong.

your code samples seem to be incomplete, and it isn't clear how they relate to each other.

if this is a javascript issue (as it seems to be - you say it works without the tabs script), then you need to show what the generated HTML markup looks like.

I'll explain everything now again, but before let me help you with my code above to get the idea of what I want to accomplish, so then when I define problem you know what I'm talking about also I'll help with picture so make everything clear as view of the problem in details if my explanation not clear:
my code here is program.php which connected to mail.php and request.php the request.php is just a form handle the user input then send them back to hand.php that send the information to database I suppose I didn't mention that cause its not important or problem, anyway mail php just get the infomation from database also not important cause it works both sides alone when localhost/mail.php or when within program http://localhost/fleet-p/tests/program.php#tab_1
so the main proplem here is request.php which is working alone as:
localhost/request.php and send data
but doesn't work when:
http://localhost/fleet-p/tests/program.php#tab_2
and I mean here with doesn't work that the form doesn't send any data to hand.php which handle form information and send to database.
so what I've tried before and seems 100% fail these check picture also to get complete idea:
- first I tried to include file with in <div> container related to tabs as I know the first example they use this way:


<div id="tabs">
<ul id="tab_nav" dir="rtl" >
<li><a href="#tabs-1">mail</a></li>
<li><a href="#tabs-2">request</a></li>
<li><a href="#tabs-3">req</a></li>
<li><a href="#tabs-4">med</a></li>
<li><a href="#tabs-5">store</a></li>
<li><a href="#tabs-6">account</a></li>
<li><a href="#tabs-7">sales</a></li>
<li style="float:left;"><a href="#tabs-8">profile</a></li>
</ul>
<div id="tabs-1">';
include("mail.php");
echo'</div>
<div id="tabs-2">';
include("request.php");
echo '</div>
</div>'

now the result is like this:
http://www.dynamicdrive.com/forums/attachment.php?attachmentid=4345&stc=1&d=1329150643well now the tabs use instead of <div> to hold content of include php I'll call them with just the link inside <li> element:


<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title><?php //$sitename; echo $sitename; ?></title>
<link type="text/css" href="css/jquery-ui.css" rel="stylesheet" />
<link type="text/css" href="css/jquery.ui.accordion.css" rel="stylesheet" />
<link type="text/css" href="css/jquery.ui.all.css" rel="stylesheet" />
<link type="text/css" href="css/jquery.ui.autocomplete.css" rel="stylesheet" />
<link type="text/css" href="css/jquery.ui.base.css" rel="stylesheet" />
<link type="text/css" href="css/jquery.ui.button.css" rel="stylesheet" />
<link type="text/css" href="css/jquery.ui.core.css" rel="stylesheet" />
<link type="text/css" href="css/jquery.ui.datepicker.css" rel="stylesheet" />
<link type="text/css" href="css/jquery.ui.dialog.css" rel="stylesheet" />
<link type="text/css" href="css/jquery.ui.progressbar.css" rel="stylesheet" />
<link type="text/css" href="css/jquery.ui.resizable.css" rel="stylesheet" />
<link type="text/css" href="css/jquery.ui.selectable.css" rel="stylesheet" />
<link type="text/css" href="css/jquery.ui.slider.css" rel="stylesheet" />
<link type="text/css" href="css/jquery.ui.tabs.css" rel="stylesheet" />
<link type="text/css" href="css/jquery.ui.theme.css" rel="stylesheet" />
<link type="text/css" href="css/jquery-ui.css" rel="stylesheet" />
<link type="text/css" href="css/jquery-ui-1.8.17.custom.css" rel="stylesheet" />
<link type="text/css" href="css/page.css" rel="stylesheet" />
<link type="text/css" href="css/qunit.css" rel="stylesheet" />

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.17.custom.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.3.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.form.js"></script>

<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
// Tabs
$('#tabs').tabs();

// Accordion
$("#accordion").accordion({ header: "h4" });
// Button
$("#b").button({link: "a"});
});
</script>

<style type="text/css">
body{ margin:0;
padding-top:0;}
.ui-tabs { direction: rtl; }
.ui-tabs .ui-tabs-nav li.ui-tabs-selected,
.ui-tabs .ui-tabs-nav li.ui-state-default {float: right;}
.ui-tabs .ui-tabs-nav li a { float: right; }

</style>
</head>

<body>
<div class='logo'><img src='img/logo.png' width='100%' border="none" /></div>

<?php
session_start();
$username = $_SESSION['username'];

if (isset($username)){

//insert welcome user
echo'

<div align="right" style="display:block">welcome, '.$username ;
//insert tabs for program
echo' </div>
<div id="b"><h4><a href="logout.php" >log out</a></h4></div>
<div id="tabs">
<ul id="tab_nav" dir="rtl" >
<li><a href="mail.php">mail</a></li>
<li><a href="request.php">requests</a></li>
<li><a href="#tabs-3">req</a></li>
<li><a href="#tabs-4">med</a></li>
<li><a href="#tabs-5">store</a></li>
<li><a href="#tabs-6">account</a></li>
<li><a href="#tabs-7">sales</a></li>
<li style="float:left;"><a href="#tabs-8">profile</a></li>
</ul>
</div>';

}else
die("<h3 dir='rtl'>sorry you are not log in yet <a href='index.php'>log in!</a></h3>");
?>

</body>
</html>

problem show error:
http://localhost/fleet-p/tests/program.php#NaN
http://www.dynamicdrive.com/forums/attachment.php?attachmentid=4346&stc=1&d=1329151378
and no tabs load at all!
if you need more and more test I'll show you up but that isn't the point of the whole post, what I need exactly simple:
- the tabs load correctly and hold the content inside.
- the script inside .php files are worked and not effected with the tabs UI.
if you need more explaination I'll post more if you need help at point isn't clear I'll also try my best to explain everything.

hosam
02-14-2012, 03:31 AM
thank you all for interesting at this post anyway I found the solution and its not so hard I used the other version for tabs 1.7.3 now everything is work and no problem at all, so I suggest to anyone use the new version to be aware of this bug.