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_", "");
Related
This is my tree view
I have already done that when i do right click tree name(For example ,Asset, Non Current , Shah) and click add head Then there will come jquery dialog form and I add head code and head name and it is saved successfully in mysql database using codeigniter frame work in php.
Basically , it is created subhead under head.
I need when after submitting, it will be display subhead under that head without refresh tree. For Example ,
If i create subhead under asset then append subhead after "104-Kamrul" without refresh and Display without Change.
How can i solve it, Please any suggestions?
i think you need ajax to make what you need, just use a specific class for each tree parent for example:
<div class="parent-1">
<div class="child-1"></div>
<div class="child-2"></div>
</div>
<div class="parent-2">
<div class="child-1"></div>
<div class="child-2"></div>
</div>
now just load what you need following parents classess:
$('.parent-1').children('.child-1').load('http://site.com/url/to/load/new/childs');
or
var _childs = $.get('http://site.com/url/to/get/some/childs');
$('.parent-1').append(_childs);
Given the following markup:
<div id="tree">
<ul>
<li>Asset
<ul>
<li>101-Non Current</li>
<li>102-Current Asset</li>
<li>103-Abdul Halim Shah
<ul>
<li>10301-Shah
<ul>
<li>1030101</li>
</ul>
</li>
</ul>
</li>
<li>104-Kamrul</li>
</ul>
</li>
<li>2-Expenses</li>
</ul>
</div>
I wrote a couple of jQuery functions to dynamically add new nodes. One adds the node below the selector specified and the other adds it as a sibling:
function addSibling(selector, content) {
var markup = '<li>' + content + '</li>';
$(selector).parent().append(markup);
}
function addChild(selector, content){
var obj = $(selector);
var markup='<li>' + content + '</li>';
var element;
if ($('ul', selector).length > 0){
//nested list
element = obj.find('> ul');
} else {
element = obj;
markup = '<ul>' + markup + '</ul>';
}
element.append(markup);
}
Although you'll have to adapt them to your code, you can use the following click function to test them:
$("#tree ul").click(function (e) {
//addSibling(e.target, 'new one');
addChild(e.target, 'new one');
e.stopPropagation();
});
I didn't understand what your variable were, but to get the data to the server without a page load, you can use an ajax function something like the following:
$('#form').submit(function() {
var headCode = $('input[name="headCode"]').val();
var headName = $('input[name="headName"]').val();
$.ajax({
url: "load.php",
type: 'POST',
data: {
head_code: headCode,
head_name: headName
},
cache: false,
success: function(json){
alert('loaded');
}
});
return false;
});
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'});
});
Hello I am having trouble regarding div reloading when a new record has been added. What I wanted to do is to show first a loading image then after a record has been inserted it will reload the div.
$("a.follow").click(function(event) {
event.preventDefault();
$("#flash").show();
$("#flash").fadeIn(300).html('<img src="ajax-loader-transp.gif" />Loading Result.');
$.ajax({
//url: $(this).attr("href"),
success: function(msg) {
$("#results_div").load('http://localhost/<app_name>/index.php/<contoller>/index');
}
});
return false;
});
That's what I got to far when I'm trying the code it refreshes a whole physical of page on the div & not the desired div itself. . .
Sorry guys I am poor with jQuery and BTW this is in CodeIgniter.
Your problem is, that codeigniter obviously returns a whole html page. You have two choices:
Either return only a fragment (I don't know how to do this in CI) or use jQuery to parse out the div you want. This can be done with the following code, assuming that the div you want is named <div id="results_div">...</div>
$("a.follow").click(function(event) {
event.preventDefault();
$("#flash").show();
$("#flash").fadeIn(300).html('<img src="ajax-loader-transp.gif" />Loading Result.');
$("#results_div").load('http://localhost/<app_name>/index.php/<contoller>/index #results_div', function(){ $('#flash').hide(); });
});
Can you include the HTML with the #results_div div?
This is my best guess without html to work with:
$("a.follow").click(function(event) {
event.preventDefault();
// show the linke
$("#flash").fadeIn(300).html('Loading Result.');
//ajax load the 'mini div' result -- i guessed that this url pulls back the div you want
$("#results_div").load('http://localhost/<app_name>/index.php/<contoller>/index', function(data, text, xhr){
$('#flash').fadeOut("fast");
});
});
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();
});