i have succeeded in listing my data from mysql database
in JQM.
i want to link the list item to its details.
Therefore when there is a click on a list, a new page with the data from the list is displayed.
I dont know how to do it
Heres what i have now : but the link i have isnt working, guess i am missing something.
heres the link on js fiddle http://jsfiddle.net/8WU39/16/
<script type= text/javascript>
$('#seyzListPage').live('pageshow', function(){
$.ajax({
url: "data.php",
dataType: 'json',
success: function(json_results){
listItems = $('#seyzList').find('ul');
$.each(json_results.rows, function(key) {
html = '<li <h3><a href="index1.html?id=' + [json_results.rows[key].airp_id] +'"rel="external">'+json_results.rows[key].airport_code+'</h3>';
html += '<p><br> Aiport name: '+json_results.rows[key].airport_name+'</p></a></li>';
listItems.append(html);
});
// Need to refresh list after AJAX call
$('#seyzList ul').listview('refresh');
$.mobile.pageLoading(true);
}
});
});
</script>
<div data-role="page" id="seyzListPage">
<div data-role="header" id="header">
<h1>Airports</h1>
</div>
<div data-role="content" id="seyzList">
<ul data-role="listview" data-inset="true" data-filter="true"></ul>
</div>
<div data-role="footer" data-postion="fixed">
<h3>Footer</h3>
</div>
</div>
What do i do to get the list linked to its data on another html page.
I had a very similar problem and found a fix with a simple plugin. It's called jqm.page.params.js and can be found here. Implementation was very easy. Added the plugin file to my root directory and then included it at the bottom of my index.html page.
In your js file, you then just want to place
if ($.mobile.pageData && $.mobile.pageData.color){
var color = $.mobile.pageData.color;
}
at the top of your beforepageshow event to capture the variables tacked on to the link. Replace 'color' with the variables you are looking for.
Related
I am kinda new in Ajax and jQuery the problem is that I have a folder pages and in it are php pages with content divs. I want to reload the container div with the content instead of the whole page i tried many things but nothing seems to help. this is a part of how my index.php looks like:
<?php include ('inc/nav.php'); ?>
<div id="container">
<?
$type = $_GET["type"];
switch ($type) {
case "about" :
include "pages/about-us.php";
break;
case "contact":
include "pages/contact.php";
break;
default :
include "pages/homepage.php";
}
?>
</div>
In the navigation the link looks like this:
<ul class="main-menu">
<li class="url">Homepage</li>
<li class="url">About us</li>
<li class="url">Contact</li>
</ul>
I tried to get the content that's in pages/about-us.php into the <div id="container"></div> but it's not working. this is how my ajax script looks like:
//run on page load
$(function(){
//bind a click event to the nav links
$(".url a").on("click", function(e){
//keep the links from going to another page by preventing their default behavior
e.preventDefault();
//this = link; grab the url
var pageLocation = this.href;
console.log(pageLocation);
//fire off an ajax request
$.ajax({
url: pageLocation,
//on success, set the html to the responsetext
success: function(data){
$("#container").html(data.responseText);
}
});
});
});
The .load() method, unlike $.get(), allows us to specify a portion of the remote document to be inserted. This is achieved with a special syntax for the url parameter. If one or more space characters are included in the string, the portion of the string following the first space is assumed to be a jQuery selector that determines the content to be loaded.
Consider the following example.
$(function() {
$(".url a").click(function(e) {
e.preventDefault();
var pageLocation = this.href + " #container";
console.log(pageLocation);
$("#container").load(pageLocation)
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="main-menu">
<li class="url">Homepage</li>
<li class="url">About us</li>
<li class="url">Contact</li>
</ul>
<div id="container">
</div>
This is untested. You will want to test this in your own code.
See More: https://api.jquery.com/load/
I have multiple divs on my website that are clickable. I simply want that when the user clicks this div, a class is then added so they know they have viewed this.
For example, we could have a list of 10 links on the site. Once they click a link, the 'viewed' class would be added, to set a background colour to green.
I know the below is a simply way to do this in jQuery, but if someone could please help with storing this in PHP it would help so much, I am quite stuck on this!
$(function() {
$('.clickable-links > div').click(function() {
$(this).addClass("viewed");
});
});
.viewed {
background: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.0.min.js" integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=" crossorigin="anonymous"></script>
<div class="clickable-links">
<div class="link1">Lnk 1</div>
<div class="link2">Lnk 2</div>
<div class="link3">Lnk 3</div>
</div>
You could add a jquery ajax in order to save the status change in your php.
By example:
$(function() {
$('.clickable-links > div').click(function() {
link= $(this).text()
$(this).addClass("viewed");
$.ajax({
type: "POST",
url: "/url/to/php/script",
data: "link=" + link,
})
})
});
Then in your PHP script you acces the clicked link with:
$link=$_POST['link']
It's just a thought. It can be improved.
After much Googling, I'm on the cusp of success (I think).
I have a fairly large page, overview.php that contains the following snippets:
<script>
function getSummary(id)
{
$.ajax({
type: "GET",
url: '_table_category.php',
data: "catid=" + id,
success: function(data) {
$('#summary').html(data);
alert('Successfully called');
},
error: function(jqxhr, status, exception) {
alert('Exception:', exception);
}
});
}
</script>
Down the page, I iterate over an array and populate a table. The first column is as follow:
<td> <a onclick="getSummary('<?php echo $expenses[$k]['categoryid']; ?>')"> <?php echo $expenses[$k]['shortdesc']; ?> </a> </td>
And then further down on the page, there is a div that will contain the details:
<div class="box">
<div class="box-header"> <h3 class="box-title"> Details </h3> </div>
<div class="box-body">
<div id="#summary"> Select a category to see the details. </div>
</div>
</div>
No errors upon loading the page, nor by clicking on the 'link'. If I click on the link, it pops up with the 'Successfully called' alert as expected.
Looking in the Network tab of the developer tools in Chrome, it calls the _table_category.php page (with a value for catid), and if I click on the link it lists (for example _table_category.php?catid=35), the HTML in the preview pane is correctly formatted HTML.
If I then paste the HTML inside the div manually, it looks exactly as hoped.
This makes me think I am missing something fairly obvious and I am just not actually replacing the div with the result?
Your div has a bad ID.
<div id="#summary">
It should just be:
<div id="summary">
The # is just there in the selector (it's used to specify "select by ID").
I am writing an admin dashboard in PHP at the moment.
To simplify things, as far as I think it simplifies, the page I structured has the typical areas Header, Aside with menu and MainContent page. The main content page should change when I click a different page in the aside menu.
So I created the page index.php which will hold the whole framework of the page.
<?php include('../includes/overall/overallHeader.php'); ?>
<section class="content-header">
<h1>Einsatzliste</h1>
</section>
<script type="text/javascript">
$('#pageIncidents').click(function(){
$('#mainContent').load('incidents.php');
});
</script>
<section class="content">
<div id="mainContent">
</div>
</section>
<?php include('../includes/overall/overallFooter.php'); ?>
Within this I created the section content, and gave the div inside the id mainContent. My idea was to load different subpages into this div, when I click a menu item in the aside menu:
aside menu
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
<ul class="nav in" id="side-menu">
<li><div id="pageIncidents">Einsatzliste</div></li>
<li>Testseite 1</li>
</ul>
</div>
</div>
There I put the link inside a div with a unique ID which I want to use in jQuery to load the specific contents.
jQuery script
<script type="text/javascript">
$('#pageIncidents').click(function(){
$('#mainContent').load('incidents.php');
});
</script>
The script is supposed to load the page incidents.php into the div mainContent in the index.php page.
It totally does not work... Do you have a hint where to look for? I think the logic seems right I guess. Could it be a problem, that the id "pageIncidents" is not directly visible in the code but included by the php include overallHeader at the top of the page?
You can try doing it with ajax and make up the ajax response in html (string), onclick start ajax request.
$(document).on("click", ".delete-asset", function() {
var link = $(this).attr('[data-page]');
$.ajax({
type:'GET',
url:'http://www.example.com/index.php',
dataType: "json",
data: {
action: 'incidents',
data: { 'incidents': 'incidents' }
},
success:function(data) {
$('#mainContent').html("[your data]");
}
});
});
I would like to know if there is a way to be able to click a Link on the navigational Div tag and have it display on the content Div like if i had
<div id="nav">
a link </div>
<div id="content>show the stuff</div>
From the comments below - the OP stated the following :
I am trying to redo a website but my imagagination is getting the better of me. If I have three links like home, about author, and about our mission. I would like to be able to click about author and in the main_content div tag show the html file aboutauthor.html
Alt 1: Use jquery tabs:
See demo and code here: http://jqueryui.com/demos/tabs/
Alt 2: Hide/show div in same html file:
HTML:
<div id="nav">
Show content 1
Show content 2
Show content 3
</div>
<div id="content1" class="toggle" style="display:none">show the stuff1</div>
<div id="content2" class="toggle" style="display:none">show the stuff2</div>
<div id="content3" class="toggle" style="display:none">show the stuff3</div>
jQuery:
$("#nav a").click(function(e){
e.preventDefault();
$(".toggle").hide();
var toShow = $(this).attr('href');
$(toShow).show();
});
Demo: http://jsfiddle.net/5NEu3/3/
Alt 3: Load from server ondemand:
To load html into your main div you should use: http://api.jquery.com/load/
Follow examples on that site. And be aware that the html side you are loading must be in same domain as you are hosting the new page.
Html
Show content 1
Show content 2
jQuery
$("#nav a").click(function(e){
e.preventDefault();
$('#maindiv').load($(this).attr("href"));
});
Using jQuery, you could do something like this.
This will open the site <a href="example.html"> and put it inside of the <div id="content"> when you click it, and then disable changing the whole site.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$('#nav a').click(function(e) {
e.preventDefault();
$('#content').load($(this).attr('href'));
});
});
</script>
<div id="nav">
Some page
Some other page
My page
</div>
<div id="content">
show the stuff
</div>
Something like this:
function setContent(div, content)
{
getElementById(div).innerHtml = content;
return false; // return false to ignore the click
}
a link
to show a hidden div (i think this is what you wanted)
the javascript (using jQuery)
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#showdiv").click(function () {
$("#hiddendiv").show();
});
});
<script>
the html
Show the Div
<div id="hiddendiv" style="display:none;">Content here</div>
you can see it in action here