I have a jQuery tab script that gets content from a PHP file defined by the link and parses it to a div element. When a user selects a tab, it turns bold. However, currently when the script is loaded up, a tab is not selected by default. My question is how can I load up a certain tab and it's contents by default and show that the tab is selected with my current code?
This is my current jQuery code:
function load(url){
$.ajax({
url:url,
success:function(message){
$("#content").html(message);
}
});
}
$(document).ready(function(){
$("[id]").click(function(){
type=$(this).attr("id");
url=""+type+".php";
$("[id]").removeClass("selected");
$("#"+type).addClass("selected");
load(url);
return false;
});
});
This is my HTML code:
<ul>
<li><a id="tab1" href="javascript:void(null);">Tab1</a></li>
<li><a id="tab2" href="javascript:void(null);">Tab2</a></li>
<li><a id="tab3" href="javascript:void(null);">Tab3</a></li>
</ul>
Trigger the click event of the tab you want to load:
e.g. -
$(document).ready(function(){
$("[id]").click(function(){
type=$(this).attr("id");
url=""+type+".php";
$("[id]").removeClass("selected");
$("#"+type).addClass("selected");
load(url);
return false;
});
//load default tab
$("#tab1").click();
});
Related
I'm trying to load Javascript into a div that has been generated through AJAX and filled with an external PHP file.
Here is the navigation I am using to load the AJAX div, and my PHP content:
<div id="portfolioContent">
<div id="portfoliotabContainer">
<ul id="portfolioTabs">
<li><a id="dashboardTab" href="./portfolio/portfoliocontent/dashboard.php">Dashboard</a></li>
<li><a id="casedetailsTab" href="./portfolio/portfoliocontent/casedetails.php">Case Details</a></li>
<li><a id="correspondenceTab" href="./portfolio/portfoliocontent/correspondence.php">Correspondence</a></li>
<li><a id="pleadingTab" href="./portfolio/portfoliocontent/pleading.php">Pleading</a></li>
<li><a id="discoveryTab" href="./portfolio/portfoliocontent/discovery.php">Discovery</a></li>
<li><a id="expensesTab" href="./portfolio/portfoliocontent/expenses.php">Expenses</a></li>
<li><a id="indexTab" href="./portfolio/portfoliocontent/docindex.php">Document Index</a></li>
</ul>
</div>
I need the hyperlink to load and fill the generated div, but also call an external Javascript file so my scripts work within the generated div.
Here is my script:
$(function () {
$("#portfolioTabs li a").live("click", function () {
var pagecontent = $(document.createElement("div"));
pagecontent.load(
$(this).attr("href"));
$(".insideContent").html(pagecontent);
$(".portfolioContent").animate({
height: "110%"
});
$(".insideContent").animate({
bottom: "0px"
});
return false;
});
});
I've looked into this and I understand that I can load is dynamically, but I'm unsure of the simplest way to achieve that.
The problem seems to be that you are assigning the content to another element when it is not loaded yet.
You can use the callback function of load for that:
pagecontent.load($(this).attr("href"), function() {
// this gets executed when the `load` is complete
$(".insideContent").html(pagecontent);
$(".portfolioContent").animate({
height: "110%"
});
$(".insideContent").animate({
bottom: "0px"
});
});
You should use something like $.ajax. This allows you to asynchronously load content into your page without a page reload, which sounds like what you want.
Within your event handler, you would probably want something like
var url = $(this).attr("href");
$.ajax({
url: url,
success: function(data) {
$(".insideContent").html(data);
}
});
Note that everything that depends on the data loading must be placed within the anonymous function where I update the html.
hi is there any reference/sample for php ajax tabs with load more functionality within each tabs? Lets say we have 2 tabs and when we click each tab it will display only selected number of result until we click load more button at end of each result. Thanks. My current code seems not works well,when i click each tabs it display result correctly but when i click the tabs again it loads more data.Below are my current code:
<li data-tab-id="self" class="tab selected">Near You<span class="unread-count hidden" style="display: none;"></span></li>
<li data-section-id="user_feed" data-component-bound="true">
<ul class="module-list">
<!-- USER ACTIVITY JSON -->
</ul>
<a class="ybtn ybtn-primary ybtn-large more-wishlist" href="#" onclick="getRecentActivityClick(event)">
<span data-component-bound="true" class="loading-msg user_feed">See more recent activity</span>
</a>
</li>
<script type="text/javascript">
var totalRecords = '<?= $this->totalRecords?>';
$(document).ready(function(){
getRecentActivity(totalRecords);
});
$(".hd-ui-activity li a").click(function(e) {
e.preventDefault();
var tabid = $(this).parent().attr('data-tab-id');
if(tabid == "self"){
getRecentActivity(totalRecords);
}
});
function getRecentActivityClick(event)
{
if (event != null){
disabledEventPreventDefault(event);
}
getRecentActivity(totalRecords);
}
home.js:
function getRecentActivity(totalRecords)
{
$.ajax({
url:baseUrl + "activity/activityfeed",
data:{'total':totalRecordsView},
dataType:"json",
type:"POST",
success:function(data){
var activityHtml = '<p>Hello</p>';
$('#activity-feed li[data-section-id=near_you] .module-list').append(activityHtml);
}
});
}
UPDATE:
JSFIDDLE: http://jsfiddle.net/zlippr/5YkWw/1/
with what i understood from your question.. i think you are getting more datas since u are using.. append()..
use html()
append() inserts content, specified by the parameter, to the end of each element in the set of matched elements.
html() is used to set an element's content, any content that was in that element is completely replaced by the new content.
try this
replace
$('#activity-feed li[data-section-id=near_you] .module-list').append(activityHtml);
with
$('#activity-feed li[data-section-id=near_you] .module-list').html(activityHtml); //html()
You can do this:
$('#activity-feed li[data-section-id=near_you] .module-list').append(activityHtml);
// here you are appending the fulldata just apply some css here
use css this way:
$('#activity-feed li[data-section-id=near_you] .module-list')
.css({'height':'300px','overflow':'hidden'})
.append(activityHtml);
then click the loadmore:
$('your load more button').toggle(function(){
$('#activity-feed li[data-section-id=near_you] .module-list')
.css({'height':'auto','overflow':'auto'})
},function(){
$('#activity-feed li[data-section-id=near_you] .module-list')
.css({'height':'300px','overflow':'hidden'});
});
I have a list on one of my website pages that acts like a delete button, however I was wondering if you could call a php script when the user clicks on it, a bit like a submit button.
Here is the list:
<li>
<a class="actions_dropdown" href="#"> </a>
<ul class="actions_content">
<li>Delete</li>
<li>Report</li>
<li>Mark as Read</li>
<li>Mark as Unread</li>
<li>Move to Folder 1</li>
<!----whole loop of folders--->
</ul>
</li>
Is there anyway so when the user clicks on, say the delete li that it calls a php script? I can't seem to work it out.
assign a class to your Delete li like
<li><a class="actions_dropdown" href="#"> </a>
<ul class="actions_content">
<li class="del">Delete</li>
<li>Report</li>
<li>Mark as Read</li>
<li>Mark as Unread</li>
<li>Move to Folder 1</li>
<!----whole loop of folders--->
</ul>
</li>
now attach a click event handler to the li with class del
$("li.del").click(function(e){
var db = $(':checkbox:checked').map(function(i,n) {
return $(n).val();
}).get(); //get converts it to an array
if(db.length == 0) {
db = "none";
}
$.post('/test.php',{'db[]':db},function(data){
console.log(data);//it should log data deleted successfully
});
});
in test.php
<?php
//delete logic here
echo json_encode("data deleted successfully");
?>
Post array of multiple checkbox values
You can simply set the anchor's href to your PHP page, but as with a standard form submission that would either navigate away from the current page or cause the current page to reload (depending on what your PHP returned).
So probably you want to make an Ajax request. Unlike standard form submission, Ajax doesn't cause the current page to reload, it returns the response back to your JS code.
Assuming you can add an id to your li or anchor element (e.g., id="deleteLink"), or otherwise identify it, you can bind a click handler that does the Ajax:
$("#deleteLink").click(function(e) {
e.preventDefault();
$.ajax({
url: "yourPHPpageHere.php",
data: { paramName1 : paramValue, paramName2 : paramValue2 },
dataType : "json" // or "html", "xml", or "text", whatever your PHP returns
}).done(function( response ) {
// optionally do something with response.
});
});
Any data you need to pass to the delete PHP (presumably some kind of record id at minimum) can be set in the data parameter of the $.ajax() call.
For more detail about the $.ajax() method see the jQuery doco.
I was wondering if someone would be able to help or point me in a direction. I am looking to make a web application like a quiz. What I need is to be able to load dynamic content off a dynamical created button or href in this case that will link to the other content. So far it doesnt seem to be functioning in that i get a page not found every time i click the button. doesnt seem to be passing the .php through the name. I have tested this outside of the dynmaic content div and it works fine but i really need it to work inside.
What I have so far:
index.php
<body>
<div class="container_12">
<div id="content">
<!--dynamic content loads here-->
</div>
</div>
</body>
Login.php
<h1> Login Page </h1>
<p> this is a test to c if works </p>
<a href='Suitable'>Hello</a> <!--button that doesnt work-->
general.js
$(document).ready(function() {
//initial
$('#content').load('Login.php');
//Handle widget Clicks
$('div#content a').click(function() {
var page = $(this).attr('href');
$('#content').load('pages/' + page +'.php');
return false;
});
});
Suitable.php
<h1> Working </h1>
<!-- content thats not loading off button-->
you should delegate the click event for dynamically loaded elements, try the following:
$('#content').on('click', 'a', function(e) {
e.preventDefault()
var page = $(this).attr('href');
$('#content').load('pages/' + page +'.php');
});
$(document).ready(function() {
//initial
$('#content').load('Login.php', function(){
//Handle widget Clicks
$('div#content a').click(function() {
var page = $(this).attr('href');
$('#content').load('pages/' + page +'.php');
return false;
});
});
});
Explanation:
load is asynchronous. JS engine does not wait for it to complete before it goes to the next line. The result is that when your click binding executes there is no a in div#content, so the selector returns an empty array and no binding happens.
Try Live instead of click
//Handle widget Clicks
$('div#content a').live('click',function() {
var page = $(this).attr('href');
$('#content').load('pages/' + page +'.php');
return false;
});
I have a jQuery tabbed search script that gets content from a PHP file defined by the link and parses it to the results div element. The ID for each link is used to pull content from the correct file however type_ is needed in the link ID for the tabs to work which then doesn't pull content from the right place. How can I resolve this issue?
This is my current jQuery code:
$(document).ready(function(){
$("[id^=type_]").click(function(){
type=$(this).attr("id");
$("[id^=type_]").removeClass("selected");
$("#"+type).addClass("selected");
return false;
});
$("#type_tab1").click();
$("#query").keyup(function(){
var query=$(this).val();
var yt_url=''+type+'.php?q='+query;
if(query==''){
window.location.hash='';
document.title='My Search Script';
}
$.ajax({
type:"GET",
url:yt_url,
dataType:"html",
success:function(results){
$('#results').html(results);
}
});
});
});
This is my HTML code:
<ul>
<li><a id="type_tab1" href="javascript:void(null);">Tab1</a></li>
<li><a id="type_tab2" href="javascript:void(null);">Tab2</a></li>
<li><a id="type_tab3" href="javascript:void(null);">Tab3</a></li>
</ul>
If I've understood your question correctly, you want to use only the part after the underscore character when you send your GET request.
If that's the case, you can do this in your click event hander:
type=$(this).attr("id").replace("type_", "");
Note that you can simplify this, because you don't need to use jQuery to get the id attribute:
type=this.id.replace("type_", "");