I'm loading content, forms mainly, dynamically using ajax in a Code Igniter app I'm working on. However I need get the URI segments for my DB insert and to autofill the date box on the form. Usually one would do something along the lines of:
$date = $this->uri->segment(3)."/".$this->uri->segment(4)."/".$this->uri->segment(5);
But obviously it just tries to read the address of the document being called through the ajax request, not the parent.
Any ideas how I get the parent details?
Thanks!
<meta charset="UTF-8" />
<script type="text/javascript">
$(function() {
$("#tabs").tabs({
ajaxOptions: {
error: function(xhr, status, index, anchor) {
$(anchor.hash).html("Unable to load this tab. We'll try to fix this as soon as possible.");
}
}
});
});
</script>
<div id="diary-input">
<div id="tabs">
<ul>
<li>Appointment</li>
<li>Event</li>
<li>New Client</li>
<li>New Contact</li>
<div id="input-cell-close" class="input-cell"><?php echo "<img src=\"".base_url()."images/cc_close.png\" id=\"input-cell-close\" border=\"0\" alt=\"close\" />" ?></div>
</ul>
</div>
</div>
With jquery and jquery ui included in my document header. I'm using the jquery ui ajax tabs if you need further info: http://jqueryui.com/demos/tabs/#ajax
When doing the Ajax request, you should send along the segments from the parent page. Like this:
In your controller:
$data['segments'] = $this->uri->segment(3)."/".$this->uri->segment(4)."/".$this->uri->segment(5);
In your view:
<li>Appointment</li>
<li>Event</li>
<li>New Client</li>
<li>New Contact</li>
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 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 am using jQuery ui tabs with the script below:
JS
$(document).ready(function() {
var tab_index = $('#tab_index').attr('value');
$('#tabs').tabs({ cache:true,
ajaxOptions: {
error: function(xhr, status, index, anchor) {
$(anchor.hash).html("Couldn't load this tab. We'll try to fix this as soon as possible.");
}
},
});
$('#tabs').tabs('option', 'active', tab_index);
});
HTML
<input id="tab_index" type="hidden" value="<?php echo $tab_index; ?>" />
<div id = "tabs">
<ul>
<li>Current Portfolio</li>
<li>Realised Gain / Loss</li>
<li class = "tab_trade_list">Add Trades</li>
<li>Test</li>
</ul>
</div>
Where $tab_index is a numeric value generated dynamically from a PHP script based on different scenarios.
The strange thing is that when the page is loaded, I need to click on a tab twice before it is selected, but it would work normally after that, until the page is refreshed and the problem returns. Any idea of how to resolve this will be much appreciated. Many thanks!
I don't use tabs in conjunction with ajax content but comparing your example against the demo example at http://jqueryui.com/tabs/#ajax I see a few things:
You have $('#tabs').tabs({ cache:true, but I don't see that as part of the tabs api
Looks like you are loading the fist tab via ajax as well? Is that part of the problem?
When you initially load the page and click a tab does firebug or the IE developer tools tell you anything is wrong?
In response to your comment below...I use the following:
$(document).ready(function() {
var setTab = $("#setTab").val();
$("#iTABs").tabs("select", setTab);
})
In conjunction with this (on page tabs.php):
<div id="iTABs">
<ul>
<li><a tabindex="-1" href="#tabs-1">Tab Title</a></li>
<li><a tabindex="-1" href="#tabs-2">Tab 2 Title</a></li>
<!-- Repeat for each tab you need -->
</ul>
</div>
<div id="tabs-1">Fancy tab content</div>
<div id="tabs-2">Fancy tab 2 content</div>
<input type="hidden" id="setTab" value="<?php echo $_GET['sTab']; //2 ?>">
With that when a user goes to tabs.php?sTab=2 The tab strip opens to Tab 2 and the tab 2 content is shown. No fancy ajax stuff there...
Also, (not part of the issue but just in general) you use:
var tab_index = $('#tab_index').attr('value');
You could just use:
var tab_index = $('#tab_index').val();
I use a simple jquery code for tabs, the idea of it: in each tab I have a form when i submit each form the code will give me values from mysql . The problem is when i submit a form in for example tab 3 it will redirect me to the first tab (default tab), before I show any result.
any suggestion to solve this problem.
thanks in advance,
My Code :
<script type="text/javascript">
$(function() {
$( "#tabs" ).tabs();
});
</script>
HTML code :
<div id="tabs">
<ul>
<li>tab 1</li>
<li>tab 2</li>
<li>tab 3</li>
</ul>
<div id="tabs-1">
<p>tab 1 content</p>
</div>
<div id="tabs-2">
<p>tab 2 content</p>
</div>
<div id="tabs-3">
<p>tab 3 content</p>
</div>
</div>
If you use php, you could use for e.g. hidden html-field in form which contains number of the tab. When submitting form you could parse that variable and use it in jQuery-code. If you use php inside jQuery code could look like this:
$("#tabs").tabs({
selected: <?php echo (isset($_POST['selected_tab']) ? $_POST['selected_tab'] : 1)?>
});
You jest use this code
$( ".selector" ).tabs( "load", 2 );
after loading call this one so you can select 2 tab.
Try it!!
You can pass parameters to tabs() function (http://api.jqueryui.com/tabs/)
<script type="text/javascript">
$(function() {
$( "#tabs" ).tabs({active: 2});
});
</script>
you said "forms" if you submit the form, the page will send data and refresh itself. Just use a button and when the button is clicked, send the ajax.
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.