I'm working in kendo UI & I'm facing an issue while I give an ng-click option on the HTML content which was loaded later.
Here I'm adding a few codes related to what I have did:
HTML:
<div ng-controller="KendoCtrl">
<div class="show_html_here"><!-- Ajax inserts HTML here --></div>
</div>
HTML & ng-click in RED box & which is working:
<div ng-model="open_Filter" ng-click="onClick('open_Filter')">
<span>Total Open</span>
<span>0</span>
</div>
HTML & ng-click in ajax HTML & which is not working:
<ul>
<li ng-model="stageFilter" ng-click="onClick('stageFilter')">PRT - 1</li>
<li ng-model="stageFilter" ng-click="onClick('stageFilter')">PRT - 2</li>
<li ng-model="stageFilter" ng-click="onClick('stageFilter')">PRT - 3</li>
<li ng-model="stageFilter" ng-click="onClick('stageFilter')">PRT - 4</li>
</ul>
While clicking in any of the li which has ng-click, the alert is not working.
I have also tried by adding the ajax HTML section directly to my view page without the ajax and at that point, the click was working fine.
Ajax:
$('body').on('change', '#dropdown_id', function(){
$.post('controller/htmlsection', {'id': $this.val()}, function(data) {
$('.show_html_here').html(data.html);
});
});
Kendo/Angular Codes:
angular.module("KendoApp", ["kendo.directives"]).controller("KendoCtrl", function ($scope, $http) {
...
$scope.onClick = function(param) {
alert(param); // Not working while we click in a section which is loaded in ajax(eg.: PRT-4)
}
...
});
alert(param); inside $scope.onClick not working while we click in a section which is loaded in ajax(eg.: PRT-4) to div with class show_html_here. I think that it is because of the reason that the ajax section is loaded later the Kendo/Angular code is initiated.
If you know some solution for this please help me.
I do not get a solution from Stack & need to find a way to solve my issue. I found a solution for the issue, do not know whether its a proper way or not, but it solved my issue.
Update in HTML:
<ul>
<li class="customFilter" ng-model="stageFilter">PRT - 1</li>
<li class="customFilter" ng-model="stageFilter">PRT - 2</li>
<li class="customFilter" ng-model="stageFilter">PRT - 3</li>
<li class="customFilter" ng-model="stageFilter">PRT - 4</li>
</ul>
Kendo/Angular Codes:
// Custom Click
$('body').off('click', '.customFilter').on('click', '.customFilter', function () {
if ($(this).hasClass('active')) {
$(this).removeClass('active');
active = 0;
} else {
$(this).addClass('active');
active = 1;
}
$scope.onClick('stageFilter', active); // Click was working as required
});
The custom click was working properly as I required because of the reason that the click was happening only after the HTML from ajax is loaded.
I do not say that this solution is a proper way, but it's my issue for this time.
Open to new or a proper solution
This is the Div with UL on the webpage.
<div id='sites'>
<ul style="display: block;">
<li data-product-id="55">
Test1<br><em class="environment">Production</em>
</li>
<li data-product-id="99">
Test2<br><em class="environment">Production</em>
</li>
<li data-product-id="98">
Test3<br><em class="environment">Production</em>
</li>
<li data-product-id="61">
Test4<br><em class="environment">Production</em>
</li>
<li data-product-id="97">
Test5<br><em class="environment">Production</em>
</li>
<li class="active">
Test6<br><em class="environment">Production</em> <a class="flat button" href="/product_center">Settings</a>
</li>
</ul>
</div>
The page loads with Test6 ul by-default and I want to click on Test5.
The CSS locator provided by Firepath is "#sites>ul>li>a". So I tried this in casperjs:
var casper = require('casper').create({
verbose: true,
logLevel: "debug",
});
casper.start('http://localhost:8080', function() {
this.echo(this.getTitle());
});
casper.then(function(){
casper.page.injectJs('jquery.js');
this.evaluate(function (){
$("#sites>ul>li")[4].click();
});
this.capture('screenshot.png');
});
casper.then(function() {
this.echo(this.getTitle());
});
The title that comes up is always of the current page. It should have clicked on Test5 and fetched the title of the Test5 Page.
What I am doing wrong?
Try #sites .active as the selector
I'd do
this.click('#sites .active') instead of
casper.page.injectJs('jquery.js');
this.evaluate(function ()
{
$("#sites>ul>li")[4].click();
});
edit for comment:
try this then
#sites li:nth-child(5) a
square bracket for JS array returns "object HTMLDivElement"; while .slice() returns array.
click() function normally coming along with array objects.
So your codes should go to:
$("#sites ul li").slice(4,5).click()
My html
<ul class="nav nav-tabs tabs-up" id="friends">
<li> Contacts </li>
<li> Friends list</li>
<li>Awaiting request</li>
</ul>
<div class="tab-pane active" id="contacts">
</div>
<div class="tab-pane" id="friends_list">
</div>
<div class="tab-pane urlbox span8" id="awaiting_request">
</div>
My javascript code :
$('[data-toggle="tabajax"]').click(function (e)
{
e.preventDefault()
var loadurl = $(this).attr('href')
var targ = $(this).attr('data-target')
$.get(loadurl, function(data) {
$(targ).html(data)
});
$(this).tab('show')
return false;
});
I have given links for tabs respectively. But i couldnt render those links in the page when a tab is clicked..
Could anyone please help me out of this.
Seems to work fine for me:
JSFiddle
The only code that I added to yours (aside from using some gists for the ajax calls) was putting the tab panes inside a <div class="tab-content">.
I am having a php template where i have a leftmenu as accordin jquery menu. In this menu i had menu items .When i click the menu item, page related to this menu item to be loaded into the div in the right side of the page without refresh.I am giving you the screenshot of the page.
Can anyone help me in this regard,
Thank you in advance
Ramsai
here is the code of left menu.php
<div id="leftmenu">
<div class="urbangreymenu">
<h3 class="headerbar">BREAST</h3>
<ul class="submenu">
**<li><a href="breast.php">Breast/a></li>**
</ul>
<h3 class="headerbar">CVS</h3>
<ul class="submenu">
<li>CHEST PAIN</li>
<li>CHEST PAIN MASTER</li>
<li>DIZZINESS-VERTIGO-LOC</li>
<li>LOCAL-LEG-GENERALISED SWELLING</li>
<li>SHORT OF BREATH(+PND)</li>
</ul>
<h3 class="headerbar">ENT</h3>
<ul class="submenu">
<li>EAR</li>
<li>NOSE</li>
<li>THROAT</li>
</ul>
<h3 class="headerbar">GENERAL</h3>
<ul class="submenu">
<li>FATIGUE-MALAISE</li>
<li>FEVER</li>
<li>SKIN RASH & PRURITIS</li>
</ul>
<h3 class="headerbar">GIT</h3>
<ul class="submenu">
<li>ABDOMINAL DISTENTION</li>
<li>ABDOMINAL PAIN</li>
<li>BLACK STOOLS</li>
<li>CONSTIPATION</li>
<li>DIARRHEA</li>
<li>NAUSEA-VOMITING</li>
</ul>
<h3 class="headerbar">NEUROLOGY</h3>
<ul class="submenu">
<li>APHASIA & SLURRED SPEECH</li>
<li>BALANCE-TREMORS-PARALYSIS</li>
<li>HEADACHE</li>
<li>SEIZURES-MEMORY LOSS-CONFUSION</li>
<li>TINGLING-NUMBNESS</li>
</ul>
<h3 class="headerbar">PULMONARY</h3>
<ul class="submenu">
<li>COUGH</li>
</ul>
</div>
</div>
And here is my loading code:
<div id ="content">
<script>
$.get('breast.php', function(data) {
$('.content').html(data);
});
</script>
</div>
When i click the menu item then the related page should come in that div
Thank you in advance,
Ramsai
$(document).ready(function () {
$('#leftmenu').find('a[href*=".php"]').live('click', function (e) {
e.preventDefault();
$.get($(this).attr('href'), function (data) {
$('.content').html(data);
});
});
//Or
$('#leftmenu').find('a[href*=".php"][class*="MyWebLink"]').live('click', function (e) {
e.preventDefault();
if(!$(this).hasClass('Alreadyloaded')){
var Url = $(this).attr('href');
$.ajax({
url: Url, type: 'Get', dataType: 'json',
//data: { value: $(this).data('value') },
success: function (data) {
$('.content').append(data);
//Or
$('.content').prepend(data);
$(this).addClass('Alreadyloaded');
}
});
}
});
});
What's the problem? Use docs.jquery.com/Ajax
I used bootstrap-tabs.js and it has worked perfectly.
But I didn't find information about how to load content through AJAX request.
So, how to use AJAX loading with bootstrap-tabs.js?
In Bootstrap 2.0 and up you have to bind to the 'show' event instead.
Here's an example HTML and JavaScript:
<div class="tabbable">
<ul class="nav nav-tabs" id="myTabs">
<li>Home</li>
<li>Foo</li>
<li><a href="#bar" data-toggle="tab">Bar</li>
</ul>
<div>
<div class="tab-pane active" id="home"></div>
<div class="tab-pane" id="foo"></div>
<div class="tab-pane" id="bar"></div>
</div>
</div>
JavaScript:
$(function() {
var baseURL = 'http://yourdomain.com/ajax/';
//load content for first tab and initialize
$('#home').load(baseURL+'home', function() {
$('#myTab').tab(); //initialize tabs
});
$('#myTab').bind('show', function(e) {
var pattern=/#.+/gi //use regex to get anchor(==selector)
var contentID = e.target.toString().match(pattern)[0]; //get anchor
//load content for selected tab
$(contentID).load(baseURL+contentID.replace('#',''), function(){
$('#myTab').tab(); //reinitialize tabs
});
});
});
I wrote a post about it here: http://www.mightywebdeveloper.com/coding/bootstrap-2-tabs-jquery-ajax-load-content/
You can listen the change event and ajax load content in the event handler
$('.tabs').bind('change', function (e) {
var now_tab = e.target // activated tab
// get the div's id
var divid = $(now_tab).attr('href').substr(1);
$.getJSON('xxx.php').success(function(data){
$("#"+divid).text(data.msg);
});
})
I wanted to load fully dynamic php pages into the tabs through Ajax.
For example, I wanted to have $_GET values in the links, based on which tab it was - this is useful if your tabs are dynamic, based on database data for example.
Couldn't find anything that worked with it but I did manage to write some jQuery that actually works and does what I'm looking for.
I'm a complete jQuery noob but here's how I did it.
I created a new 'data-toggle' option called tabajax (instead of just tab), this allows me to seperate what's ajax and what's static content.
I created a jQuery snippet that runs based on that data-toggle, it doesn't mess with the original code.
I can now load say url.php?value=x into my Bootstrap Tabs.
Feel free to use it if you want to, code is below
jQuery code:
$('[data-toggle="tabajax"]').click(function(e) {
e.preventDefault()
var loadurl = $(this).attr('href')
var targ = $(this).attr('data-target')
$.get(loadurl, function(data) {
$(targ).html(data)
});
$(this).tab('show')
});
HTML:
<li>Val 1</li>
So here you can see that I've changed the way bootstrap loads thing, I use the href for the dynamic ajaxlink and then add a 'data-target' value to the link instead, that should be your target div (tab-content).
So in your tab content section, you should then create an empty div called val1 for this example.
Empty Div (target):
<div class='tab-pane' id='val1'><!-- Ajax content will be loaded here--></div>
Hope this is useful to someone :)
I suggest to put the uri into the tab-pane elements, it allows to take advantage of web frameworks reverse url fonctionnalities. It also allows to depend exclusively on the markup
<ul class="nav nav-tabs" id="ajax_tabs">
<li class="active"><a data-toggle="tab" href="#ajax_login">Login</a></li>
<li><a data-toggle="tab" href="#ajax_registration">Registration</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="ajax_login"
data-target="{% url common.views.ajax_login %}"></div>
<div class="tab-pane" id="ajax_registration"
data-target="{% url common.views.ajax_registration %}"></div>
</div>
And here is the javascript
function show_tab(tab) {
if (!tab.html()) {
tab.load(tab.attr('data-target'));
}
}
function init_tabs() {
show_tab($('.tab-pane.active'));
$('a[data-toggle="tab"]').on('show', function(e) {
tab = $('#' + $(e.target).attr('href').substr(1));
show_tab(tab);
});
}
$(function () {
init_tabs();
});
I loads the active tab, and loads a tab only if it is not already loaded
There is an error in your code user1177811.
It has to be $('[data-toggle="tabajax"]').
Also there is room for improvement. The .load() method, unlike $.get(), allows us to specify a portion of the remote document to be inserted. So i added #content to load the content div of the remote page.
$this.tab('show'); is now only called, when response was a success.
Here is the code
$('[data-toggle="tabajax"]').click(function(e) {
e.preventDefault();
$this = $(this);
var loadurl = $(this).attr('href');
var targ = $(this).attr('data-target');
$(targ).load(loadurl+'?ajax=true #content', function(){
$this.tab('show');
});
});
Here is how I do it. I utilize an attribute data-href which holds the url I want to load on show. This will not reload data that is already loaded unless you set $('#tab').data('loaded'); to 0 or remove it. It also handles relative vs. absolute urls by detecting the location of the first slash. I am not sure of the compatibility with all browsers but it works in our situation and allows for the functionality we are looking for.
Javascript:
//Ajax tabs
$('.nav-tabs a[data-href][data-toggle="tab"]').on('show', function(e) {
var $this = $(this);
if ($this.data('loaded') != 1)
{
var firstSlash = $this.attr('data-href').indexOf('/');
var url = '';
if (firstSlash !== 0)
url = window.location.href + '/' + $this.attr('data-href');
else
url = $this.attr('data-href');
//Load the page
$($this.attr('href')).load(url, function(data) {
$this.data('loaded', 1);
});
}
});
HTML:
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active">
Tab 1
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="js-tab1">
<p>
This content isn't used, but instead replaced with contents of tab1.php.
</p>
<p>
You can put a loader image in here if you want
</p>
</div>
</div>
</div>
Here is a solution I have found - and modified to suit my needs:
$("#tabletabs").tab(); // initialize tabs
$("#tabletabs").bind("show", function(e) {
var contentID = $(e.target).attr("data-target");
var contentURL = $(e.target).attr("href");
if (typeof(contentURL) != 'undefined') { // Check if URL exists
$(contentID).load(contentURL, function(){
$("#tabletabs").tab(); // reinitialize tabs
});
} else {
$(contentID).tab('show');
}
});
$('#tabletabs a:first').tab("show"); // Load and display content for first tab
});
This is an MVC example using Razor. It will interact with two partial views named: _SearchTab.cshtml and _SubmissionTab.cshtml
Notice that I am naming the id of the tabs the same as the partials.
Markup:
<!-- Nav tabs -->
<ul id="tabstrip" class="nav nav-tabs" role="tablist">
<li class="active">Submission</li>
<li>Search</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane fade in active" id="_SubmissionTab">#Html.Partial("_SubmissionTab")</div>
<div class="tab-pane fade" id="_SearchTab"></div>
</div>
The #Html.Partial will request the page on the active tab on page load
Script:
<script>
$('#tabstrip a').click(function (e) {
e.preventDefault()
var tabID = $(this).attr("href").substr(1);
$("#" + tabID).load("/#ViewContext.RouteData.Values["controller"]/" + tabID)
$(this).tab('show')
})
</script>
The load function will perform an ajax request as each tab is clicked. As for what path is requested you will notice a #ViewContext.RouteData.Values["controller"] call. It simply gets the controller of the current view assuming the partial views are located there.
Controller:
public ActionResult _SubmissionTab()
{
return PartialView();
}
public ActionResult _SearchTab()
{
return PartialView();
}
The controller is needed to relay the load request to the proper partial view.
Here is the Bootstrap tab Ajax example, you can use it...
<ul class="nav nav-tabs tabs-up" id="friends">
<li> Contacts </li>
<li> Friends list</li>
<li>Awaiting request</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="contacts">
</div>
<div class="tab-pane" id="friends_list">
</div>
<div class="tab-pane urlbox span8" id="awaiting_request">
</div>
</div>
and here is the AJAX call
$('[data-toggle="tabajax"]').click(function(e) {
var $this = $(this),
loadurl = $this.attr('href'),
targ = $this.attr('data-target');
$.get(loadurl, function(data) {
$(targ).html(data);
});
$this.tab('show');
return false;
});
I use this function and it's really nice because she prevent's you from load ajax again when going back to that tab.
Tip: on tab href, just put the destination. Add this to footer:
$("#templates_tabs").tabs({
beforeLoad: function( event, ui ) {
if (ui.tab.data("loaded")) {
event.preventDefault();
return;
}
ui.ajaxSettings.cache = false,
ui.jqXHR.success(function() {
ui.tab.data( "loaded", true );
}),
ui.jqXHR.error(function () {
ui.panel.html(
"Not possible to load. Are you connected?");
});
}
});