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.
Related
<a href='#' onClick ='backcolor();' class='pagecolor' id='firstpage-right-pagecolor' >
<img src='". Yii::app()->baseURL.'/images/color.png'."'></a>
here i call backcolor function (important-Its in controller) and its definition is in view as follows..
function backcolor() {
$('.pagecolor').colpick({
onSubmit:function(hsb,hex,rgb,el){
var divid = $(el).closest('div').attr('id');
$('#'+divid).css('background-color', '#'+hex);
$(el).colpickHide();
$.ajax({
url:baseURL+'/index.php/MyPhotoBooks/addbackground',
type:'POST',
data:{color:hex,divid:divid},
success:function(){
//$("#"+divid).css('height', '80%');
},
});
}
});
};
It works on second click only..for first click color pick not displaying..
This is entirely expected behaviour.
You seem to be binding the colorpick to the element on click of the same element. You need to do that on page load instead.
Recommended Solution:
Change onClick to onload. This will make sure that when your element is loaded, the colorpicker is binded to it. Next when the colorpicker element is clicked, it should work.
<a href='#' onClick ='backcolor();' class='pagecolor' id='firstpage-right-pagecolor' >
to
<a href='#' onload ='backcolor();' class='pagecolor' id='firstpage-right-pagecolor' >
-----Alternative Approach---------
Showing the colorpick on click of the element is automatically handled by the plugin. So simply change your function code to
$(function(){
$('.pagecolor').colpick({
onSubmit:function(hsb,hex,rgb,el){
var divid = $(el).closest('div').attr('id');
$('#'+divid).css('background-color', '#'+hex);
$(el).colpickHide();
$.ajax({
url:baseURL+'/index.php/MyPhotoBooks/addbackground',
type:'POST',
data:{color:hex,divid:divid},
success:function(){
//$("#"+divid).css('height', '80%');
},
});
}
});
});
This will ensure binding on page load. Also make sure to remove onclick handler from your .pagecolor element.
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 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_", "");
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();
});