Here is the scenario:
I am using jQuery UI Tabs to load dynamic content into a content div below.
When clicking on the tabs, the content changes and loads (via Ajax) various PHP Files
One of the files is a list (accessed through a mysql db) that lists for example users in the general format
Ex: ID - UserName - Full Name - View / Modify
What I want to achieve, is that, from this list, when a user clicks the View Modify link, it replaces the list of users with the "viewUser.php" file in that div.
My question is as follows:
- How do i pass the viewUser.php?ID=4 value back to the jQuery TABS so that it changes the content of the specific div with the output from the viewUser PHP file?
The reason I've not included any code is that I am at a loss as to where to begin. The only tutorials I've found so far is to pass POST values to an external file via AJAX and to display the result in the same DIV. However, what I want to do is to send a GET Request and change the content of the DIV with the result.
Any help is greatly appreciated, I hope that I've explained my situation adequately.
UPDATE (added code as suggested)
This is my tabs / navigation + Content DIV. The div tc0 is the format of what the div will be for the PHP files as well.
<div id="tabs">
<ul class="grid_12 alpha" id="hmenu">
<li>Dashboard</li>
<li>List Users</li>
<li>List Tasks</li>
</ul>
<div id="tc0">
<p>Some Content</p>
</div>
</div>
The PHP File (list-users.php or list-tasks.php):
<?php
// Do Database query stuff here
foreach($data as $row){
echo '<tr>';
echo '<td>' .$row['TID']. '</td><td>' .$row['user'];
echo '</td><td>View User</td>';
echo '</tr>';
}
The jQuery portion (which works fine for loading the AJAX): (This is where I need the help)
<script type="text/javascript"><!--//TABS-->
$(document).ready(function(){
$("#tabs").tabs();
});
</script><!--//END TABS-->
Hope this helps. I don't know where to begin coding the jQuery to handle the link from the userlist.
. on every tab of click event you Have To Pass Filename With id
You have to do this simple line on onclick event of ever tag
window.location='viewUser.php?ID=4
Related
I am creating a mobile extention to an existing php backend. Hence ive been trying out Jquery Mobile for this.
I am trying to generate dynamic content from php backend, sending stored local data to generate the desired results based on users id etc etc. It baffels me a bit that jqm isnt 'more' prepared out of the box for these types of use.
Anyhow, Ive been working with the following example to insert dynamic content inside a div area:
$(document).on('pageinit', "#orders",function () {
var uid = localStorage.getItem('uid');
var mobilecode = localStorage.getItem('mobilecode');
var company = localStorage.getItem('company');
$("#orders_data").load("orders_data.php", {uid: uid, mobilecode: mobilecode, company:company}, function(){
$('#orders_data').trigger('create');
});
});
Here is an example of php backend. Top php files are db and site setup plus user validation/details from post data.
<?php
define("AJAX_HTML", true);
require($_SERVER[ 'DOCUMENT_ROOT']. "/config/init.php");
require("init_ajax_handler.php");
?>
<div id="accordion-orders" data-role="collapsible-set" data-inset="false" data-filter="true" data-theme="c" data-content-theme="d" data-collapsed-icon="bars" data-expanded-icon="info">
<div data-role="collapsible">
<h3>Order ID</h3>
<p>Notes</p>
</div>
<div data-role="collapsible">
<h3>Order ID</h3>
<p>Notes</p>
</div>
</div>
<?php echo "<pre>"; print_r($_POST); echo "</pre>"; ?>
This method works and puts the dynamic content into #orders_data, but every 3 or 4 times it fails resulting in white screen where the content is supposed to be. The div is infact empty!. If i refresh its okay again. The same happends both from mobile testing and desktop testing.
The php backend is hardcoded for testing purposes so i knows it sends jqm formatted data every time, and all required post data are recieved by backend aswell.
Anyone have any idea why it fails sometimes ? Or have a better method for fetching php data into jqm ?
Most of all i would like to simply call a complete page 'orders.php' directly by menu triggering along with get or postdata, instead of updating divs.
I am working on a tag system:
1.you can select some tags from a list and display them in a tag container (the tag can be selected only once and the sum is limited to 10), and different tag has different colors.
2.you can delete some selected tags in the tag container
3.pass the information to the php and store in the database.
4. display the tags in another page and you can update the selected tag list in this page.
For now the first two steps has finished by javascript but I am quite confused how I can pass the selected information to the php and the database (the content and colors) so they can be displayed and updated in another page.Anyone can give me some suggestions? Thanks.
The link to the jsfiddle is http://jsfiddle.net/V9Euk/1015/
Here is the html:
<ul>
<li data-val="300"><span class="label label-morning">Morning</span></li>
<li data-val="301"><span class="label label-afternoon">Afternoon</span></li>
<li data-val="302"><span class="label label-evening">Evening</span></li>
</ul>
<div class="tagHandler">
<ul class="tagHandlerContainer" id="tag_handler">
</ul>
</div>
here is the javascript:
$(function(){
var tags = [];
function add_tag(that){
var tag = $(that).text();
if($.inArray(tag, tags)>=0|| tags.length >= 10) return;
tags.push(tag);
var singleValues = $(that).find('span').clone();
singleValues[0].innerHTML += "×";
$("#tag_handler").append(singleValues);/*display the selected tags in the tag_handler with × style*/
}
$("li").click(function(){
add_tag(this);
});/*add tags to the tag_container when click the li*/
$('#tag_handler').on('click', 'span', function(){
var tag = $(this).text();
var index = $.inArray(tag, tags);
tags.splice(index,1);
$(this).remove();
});/*remove the tag when click this tag in the tag_container*/
});
First of all the jsfiddle link doesn't work for me.
Now, the only way is to use http methods like POST/GET to pass the data from client to server. The implementation depends of what you like the most or better a friendly and easy to use interface, so my suggestions are:
You can create (dynamically or not) a form (with hidden fields for example) and update their values with JS and pass the data through a submit button which is an easy implementation.
An another implementation is to use Ajax if you take care of user selection and create the data structure dynamically.
In both cases, you should validate the correctness of the submitted data with php. Never trust the user or the "supposed" JavaScript restrictions.
I have an area on my webpage that is populated by different <div> containers of information. When a link in my navigation bar is pressed, one <div> will fade out and another will fade in. What I'd like to do is have one of these content <div>'s filled with dynamic information, and when a link is pressed on another one of the "pages" it would change which database to load the information from and then display, or fade in, that <div> with the new information.
Sudo:
View information
<div id = "dynamicDiv">
<?php include 'file.php' ?>
</div>
file.php
**Find which database to load information from and display content**
I thought about using $GLOBAL vars, but I'm not sure how to set those from a link, and also it wouldn't reload the div content.
I also considered using a form, but I'm not sure of the "correct" way of doing this would be, and also when the page is reloaded the <div> that is displayed by default would be loaded, not the <div id = "dynamicDiv>
Any suggestions/ideas are very much welcomed....
In this case you should use ajax.
AJAX is used for changing the page content from server without reloading the page.
You can use this JQUERY AJAX And JQUERY LOAD
$(document).ready(function(){
$("#changediv").load("load.php?id=1");
})
in load.php
$id=$_GET['id'];
// use that id for dynamic query in database
$query="SELECT *.....";
$result=mysql_query($query);
echo mysql_fetch_array($result);//somthing like that
All the word echoed in php become response in ajax.
I am not ever sure this is possible but I know you guys will know the answer.
I wonder if it is possible to load the first div on a page into a different page.
Example:
This code is on "list.php"
<div class="message_details">
Some Content 1
</div>
<div class="message_details">
Some Content 2
</div>
I found this article and it works but it brings in all div's but I want to load only the first div.
Load content from external page into another page using Ajax/jQuery
Here is the code I have now that loads all divs
$(document).ready(function() {
$(".loader").load('list.php .message_details');
});
How can I load only the first div? Also is there any way to remove an img tag within the selected div?
Thanks everyone
Use the :first-child selector
$(".loader").load('list.php .message_details:first-child', function() {
$(this).find("img").remove();
});
Reference
simply echo the the div in the second page. Give each div an id, then echo that. (unless i am misunderstanding your goal)
Im currently calling a php code that displays results from a mysql db by using AJAX so that the page doesnt reload!
Inside the php code, I am creating a menu where the users can chose to display only "private ads" or "all ads".
Currently, "all ads" are displayed in a div container using ajax as mentioned because I havent implemented the "show private only", which is where I need your help...
Is it possible to use AJAX to check if the user clicks on the "show private only" tab in the php code displayed, and then setting a variable to something and sending it to the SAME php code which then uses the variable to display"private ads" only, WITHOUT making a new query to mysql?
If you need more input just tell me...
SOME MORE INPUT:
This is what I want:
AJAX is used to check search criteria... AJAX sends criteria to PHP... PHP Checks mysql db for criteria and displays in tables, also creates two links, one for "all ads" and one for "private only"... PHP echoes the display tables... AJAX DISPLAYS the tables in a DIV container in the HTML page (innerhtml=blabla)
UPDATE
HERE COMES THE ADDITION I WANT: the users click on one of the links provided by the PHP code, lets say "private only", AJAX reacts and calls PHP code again ... PHP code this time displays the tables differently, filtering out all non-private ads... AJAX displays in the div container...
Is this possible, if so could you point me in the right direction please!
Thanks
If I understood correctly you want do filtering on your ads by a criteria. This could easily be done without a second query in php code. Just change your html code to add a class in advertisement entry that describes the category. Then add the buttons that will filter out the unwanted.
HTML:
Display all ads
Display normal ads
Display private ads
<div id="ads">
<ul>
<li class="normal">Advertisment 1</li>
<li class="normal">Advertisment 2</li>
<li class="private">PRIVATE Advertisment 1</li>
<li class="normal">Advertisment 3</li>
</ul>
</div>
<!-- Then add the following code to capture click events -->
<script type="text/javascript">
$(document).ready(function()
{
$('#normal_ads').click(function()
{
$('#ads li:not(.normal)').hide();
$('#ads li.normal').show();
return false;
});
$('#private_ads').click(function()
{
$('#ads li:not(.private)').hide();
$('#ads li.private').show();
return false;
});
$('#all_ads').click(function()
{
$('#ads li').show();
return false;
});
});
</script>
This was written from mind, I will cross-check it right away. OK it works.
The advantage of this is that you want have to re-query for every click of the user as all advertisements will sent the first time and JavaScript will filter out the unwanted. You can also add some effects in the show/hide through jquery's effects.
The php should just be outputting the form, so the javascript can definitely check what the form value is before sending and/or displaying the ads and do filtering based on the form value (or letting the server side of the AJAX request do the filtering).
If I understood your question correctly, you could implement it with JQuery with ease.
HTML:
Display normal ads
Display private ads
<div id="ads"></div>
JQuery:
$(document).ready(function()
{
$('#normal_ads').click(function()
{
$('#ads').html("").load("ajax_ads.php?normal=1");
return false;
});
$('#private_ads').click(function()
{
$('#ads').html("").load("ajax_ads.php?private=1");
return false;
});
});
Just add a token to the URL string which the XmlHTTP request goes to?
In other words "my.server.script.php?ads=all" or "my.server.script.php?ads=private" and examine your request variables in the PHP script to determine what to return.