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.
Related
Simply, I have an <a> tag having values(ID) which will be posted to the same page in clicking,
I wanted to load data into the table based on the ID provided by the post method. On the other hand I am having a clock which is rested again and again when fired a post method.
I simply wanted to do the same via jQuery.
In short I wanted to Implement ajax using jQuery
Also I am using database MySQL, with PHP scripting
Any sort help will be appreciated.
<a class="D" href="?ID=<?php echo $rows[0]; ?>" onclick="">Question<?php echo $QNo; ?></a>
I wanted the same above and get ID for searching relevant data against the ID.
I might be wrong here, but you basically want to query a PHP page based on an ID and display relevant content in a div?
To make an AJAX call, setup a PHP page that will query your database and in turn return HTML data which you can then display in a DOM element.
A very simple example of this would be:
HTML
Load table 1
Load table 2
<div id="contentToPopulate"></div>
jQuery:
$('a.linkToLoadTable').click(function(){
var pageId = $(this).data('tableId')
$.ajax({
url: 'loadTable.php?id='+pageId
}).done(function(data) {
$('#contentToPopulate').html(data)
});
})
I have a page called test.html. This HTML page will contain 2 JavaScripts file. I need to pass a variable value to a PHP file using the first JavaScript file. The user can copy this javascript on as many pages as he wants for displaying output.
The PHP file that receives the variable from the JavaScript file retrieves some data from database depending upon the variable's value. This retrieved value can contain HTML content. This PHP file will always reside on my server.
All of the retrieved content (from the PHP file) needs to be passed to the second JavaScript file so that the data can be displayed in browser. This JS file will need to stay together with the first JS file in order for the data to be displayed.
So I have this:
JavaScript File
<script type= "text/javascript" src="http://www.myserver.com/custom_script.php?unique_id=12"></script>
PHP FILE
//custom_script.php
<?php
$unique_id= (int)$_GET['unique_id'];
$res = db_res(" SELECT col1, col2, col3, .... col10 FROM table WHERE unique_id = $unique_id
LIMIT 1 ");
$rows = mysql_fetch_array($res);
?>
<div id="1"><?php echo $rows['col1']; ?></div>
<div id="2"><?php echo $rows['col2']; ?></div>
<div id="3"><?php echo $rows['col3']; ?></div>
.
.
.
<div id="10"><?php echo $rows['col10']; ?></div>
I need to send all the HTML above from the PHP file to the second JavaScript file so that the output can be displayed. Please note that the CSS styling is also applied using Div ID, so I am expecting those styles would show up too. Please note that there may be more than 10 columns, so an efficient way of passing data is highly appreciated.
So what would be the easiest and the best way to send all the HTML data from the PHP file in one go to the 2nd javascript file residing in test.html page, so that the HTML data can be displayed in test.html file?
EDIT 1:
I apologize to everyone if my question has been confusing. I just thought of an example and hence wanted to add it my edit. I hope you are all aware of what Google Analytics (GA)(or any other Website Visits Stats Tracker) does. Right? You register for a Analytics account and Google gives you a piece of JS code that you copy and paste in your website. And after couple of days, you can login into your GA account to see the stats. Correct? What I am trying to do here is just the same.
Users come to MY WEBSITE and register for an account and I give them JS files that they can paste in their website. The only difference between GA and my website is that GA is personal to you and no one else, but you, the account holder can see it. Whereas in my case, your data can BE SEEN by others as well, as long as you include the JS file on your website. Because users can't just take my PHP file and run it on their server, I am trying to access MY PHP file by giving the full path to it in the JS file.
For example:
<script type= "text/javascript" src="http://www.myserver.com/custom_script.php?unique_id=12"></script>
This is not an actual JS file, rather it is just a medium for my custom_script.php script to receive the unique_id of the user, query MY database and send back the HTML data related to this requesting user. And I am stuck with this part. Hope this clairifies what I am trying to do.
The jQuery documentation actually gives an example almost identical to your problem:
http://api.jquery.com/jQuery.get/
$.get('ajax/test.html', function(data) {
$('.result').html(data);
alert('Load was performed.');
});
This will get an html page and insert it under an html element with class 'result'.
You should be able to replace your php script url and specify where the output should be displayed.
If youre worried about conflicts with other jQuery instances, have a read of this:
http://api.jquery.com/jQuery.noConflict/
If you want to write your own AJAX handler check out this page :
https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest
Essentially you will do something like this (taken from the link):
function reqListener () {
console.log(this.responseText);
};
var oReq = new XMLHttpRequest();
oReq.onload = reqListener;
oReq.open("get", "yourFile.txt", true);
oReq.send();
I think its worth doing if you've never had to do it before, but you will open yourself up to lots of potential problems that have been solved for you.
Ideally if I were doing this I would return json from the handler and allow the user to decide how to display it, but thats your call.
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.
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
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.