I'm using navbar for tabs with jquerymobile .
as you will notice my tabs are generated through jsonp.
I'm facing a problem when trying to load a div inside a tab . internal href doesn't seem to work .
what I want to do is , for example the with list loads when I change to tab x.
<script>
function order() {
var output = [];
$.ajax({
url: "http://192.168.22.102/me1.php",
dataType: "jsonp",
jsonp: "mycallback",
success: function (data) {
jsonArray = data;
jsonArray = data;
var ch = "";
for (i = 0; i < jsonArray.length; i++) {
ch = ch + '<li>' + jsonArray[i].nom + '</li>'
}
ch = '<div data-role="navbar"><ul>' + ch + '</a></ul></div>';
var s = $(ch).appendTo('.ui-content')
alert(ch);
$('#lm').append('<div data-role="navbar"></div>').trigger('create');
}
});
}
</script>
<body onload="order('');">
<div data-role="page" id="home">
<div data-role="content" id="lm">
<div id="1">
<ul data-role="listview" data-inset="true">
<li>stuff</li>
<li>stuff</li>
<li>so</li>
<li>stuff</li>
<li>stuff</li>
</ul>
</div>
</div>
</div>
<div data-role="footer" data-postion="fixed">
<h1>Footer Text</h1>
</div>
</div>
update
I've solved the issue by adding a personal click handler
$(document).delegate('[data-role="navbar"] a', 'click', function () {
$(this).addClass('ui-btn-active');
$('.content_div').hide();
$('#' + $(this).attr('data-href')).show();
return false;});
Related
I created a contact list agenda with a contact-alphapets sidebar filter. What Im trying to achieve is when clicking on a specific letter it will scroll down to the first contact that start with the Letter chosen.
Exemple when I click on Letter A it will scroll down to contacts that starts with the letter A.
Here the code Im using:
HTML part:
<div class="contact-box clearfix">
<div class="contact-cat col-xs-12 col-sm-4 col-lg-3">
<div class="roles-menu">
<ul class="nav">
<li class="contacts_tab active" rel="customers">Customers</li>
<li class="contacts_tab" rel="suppliers">Suppliers</li>
</ul>
</div>
</div>
<div class="contacts-list col-xs-12 col-sm-8 col-lg-9">
<ul class="contact-list" id="contact-list" >
<!-- DISPLAY CONTACTS LIST WITH AJAX-->
</ul>
</div>
<div class="contact-alphapets">
<div class="alphapets-inner">
A
B
C
D
E
F
G
H
I
J
K
L
M
N
O
P
Q
R
S
T
U
V
W
X
Y
Z
</div>
</div>
</div>
Display contacts with ajax/jquery
var baseUrl = $('#baseUrl').val();
$('.contacts_tab').on('click', function(){
var params = $(this).attr('rel');
$('#contact-list > li').remove();
$.ajax({
url: `${baseUrl}api/contacts/list.php?params=${params}`,
success: function (result) {
$.each(result, function(index, data) {
var html = `<li class="${data.firstname.slice(0,1)}">`;
html += '<div class="contact-cont">';
html += '<div class="pull-left user-img m-r-10">';
html += `<img src="${baseUrl}public/attachements/${params}/${data.logo}" alt="" class="w-40 img-circle">`;
html += '</div>';
html += '<div class="contact-info">';
html += `<span class="contact-name text-ellipsis">${data.firstname} ${data.lastname ?? ''}</span>`;
html += `<span class="contact-date"><i class="">${data.phone}</span>`;
html += '</div>';
html += '</div>';
html += '</li>';
$("#contact-list").append(html);
});
}
});
})
The code above works just fine.
Here is the code I tried for the scroll down:
$(".findContact").on('click', function(e){
e.preventDefault();
var findContact = $(this).attr('rel');
$('html,body').animate({ scrollTop: $(`.${findContact}`).offset().top}, 'slow');
})
**
I am using creating costume directive in angularjs. I want to scroll the window on click to data-target element. but its showing the error el.bind is not a function
in custome directive code as bellow,
'use strict';
app.directive("productfinderpage", ["$window","$document", function($window, $document) {
console.log("enter into directive");
return {
restrict: "AC",
link: function () {
// get all anchors
var anchors = angular.element(document.querySelectorAll("a[data-target]"));
angular.forEach(anchors, function (el) {
el.bind("click", function (e) {
var targetLink = e.target.dataset.target;
var targetContext = angular.element(document.querySelector("[data-name=\"" + targetLink + "\""));
var targetContextInt = targetContext.offsetTop;
// initiate scroll
scrollTo(scrollable, targetContextInt, 225);
});
});
// scroll to function
function scrollTo(element, to, duration) {
if (duration <= 0) return;
var difference = to - element.scrollTop;
var perTick = difference / duration * 10;
setTimeout(function () {
element.scrollTop = element.scrollTop + perTick;
if (element.scrollTop == to) return;
scrollTo(element, to, duration - 10);
}, 10);
}
}
};
}]);
html code as bellow,
<div productFinderPage class="modal-body">
<div class="info" data-sticky="data-sticky">
<div class="info-inner">
<div class="lender-image">LOGO</div>
<div class="package-name"></div>
<div class="cta">
<button class="primary">Add to Favorites</button>
</div>
<nav>
<ul class="info-section">
<li>Basic Information</li>
<li>Extended Information</li>
<li>Loan Size / LVR</li>
<li>Loan Fees</li>
<li>Services</li>
</ul>
</nav>
</div>
</div>
<div class="main-details">
<div class="panel" data-name="basicInfo">
<div class="panel-header">Basic Information</div>
</div>
<div class="panel" data-name="extInfo">
<div class="panel-header">Extended Information</div>
</div>
<div class="panel" data-name="loanSize">
<div class="panel-header">Loan Size</div>
</div>
<div class="panel" data-name="loanFees">
<div class="panel-header">Loan Fees</div>
</div>
<div class="panel" data-name="services">
<div class="panel-header">Services</div>
</div>
</div>
</div>
jsfiddle is here.
If you iterate through an angular element, you get the plain document elements which need to be converted to an angular element again:
var anchors = angular.element(document.querySelectorAll("a[data-target]"));
angular.forEach(anchors, function(ele) {
var el = angular.element(ele);
el.bind("click", function(e) {
..
});
}
See this jsfiddle
i need help about loading tab content when page is loaded. My example work good but default tab load content only when i click on him. That content is not loaded automatically when page is loaded is empty.
Check:
Fiddle example
Like on example u will see you
<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 js:
$('[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;
});
Place this at the very end of your script:
$(document).ready(function(){
$('[data-toggle="tabajax"]:first').click();
});
that's it worked here is the complete js code:
<script type="text/javascript">
$('[data-toggle="tab"]').click(function(e) {
var $this = $(this),
loadurl = $this.attr('href'),
targ = $this.attr('data-target');
$.get(loadurl, function(data) {
$(targ).html(data);
});
$('[data-toggle="tab"]:eq(0)').trigger('click');
$this.tab('show');
return false;
});
$(document).ready(function(){
$('[data-toggle="tab"]:first').click();
});
</script>
Thanks a lot
i make JQM application which have listwiew and i want to send the choosen item text to another page to use this text to get data from server by ajax
the first page
`<div data-role="page" id="hteacher" >
<div data-role="header" data-position="fixed">
<h1>Welcome teacher 1</h1>
<div data-role="navbar">
<ul>
<li>Home</li>
<li>ADD Class</li>
<li>MSG</li>`<div data- role="page" id="hteacher" >
<div data-role="header" data-position="fixed">
<h1>Welcome teacher 1</h1>
<div data-role="navbar">
<ul>
<li>Home</li>
<li>ADD Class</li>
<li>MSG</li>
</ul>
</div>
</div>
<div data-role="content">
<p></p>
<h2>list of classes </h2>
<ul data-role="listview" id="classes_list" data-autodividers="true" data-inset="true" data-filter="true">
<script>
$( document ).delegate("#hteacher", "pagecreate", function() {
$.post("teacher_login.php", { teacher_user:teacher_user , get_classes:"1"} , function(data ,status){
var obj = jQuery.parseJSON( data );
$.each(obj,function(){
var str =this['class_un'];
var html = ' <li>'+ str + '</li>';
$("#classes_list").append (html).listview("refresh");
});
});
$('#classes_list').on('click','li', function () {
teacher_choose_class = $(this).text();
$.mobile.changePage("#teacher_classes");
});
});
</script>
</ul>
</div>
<div data-role="footer" data-position="fixed">
<h1>Welcome To .....</h1>
</div>
the second page that want to send the selected item text to it
<div data-role="page" id="teacher_classes" >
<div data-role="header" data-position="fixed">
<h1>Welcome to class A</h1>
<div data-role="navbar">
<ul>
<li>Home</li>
<li>Take Attendance</li>
</ul>
</div>
</div>
<div data-role="content">
<p></p>
<h2>class student </h2>
<ul data-role="listview" id="student_list_class" data-autodividers="true" data-inset="true" data-filter="true">
<script>
$("#teacher_classes").live("pageshow",function(event){
alert(teacher_choose_class);
$.post("teacher_login.php", { class_un:teacher_choose_class , get_students:"1"} , function(data ,status){
var obj = jQuery.parseJSON( data );
$.each(obj,function(){
var str =this['child_name'];
var html = ' <li><img src="student1.jpg">'+ str + '</li>';
$("#student_list_class").append (html).listview("refresh");
});
});
});
</script>
</ul>
</div>
<div data-role="footer" data-position="fixed">
<h1>Welcome To .....</h1>
</div>
i make teacher_choose_class as global variable the problem is that the value of this variable show in the alert message but when use this variable to get data by ajax no data return
In the ajax part of your code, put an alert(data); on the return to see what you are getting back. Assuming you are getting back an array of JSON objects each with a property called child_name, try:
$("#teacher_classes").live("pageshow",function(event){
alert(teacher_choose_class);
$.post("teacher_login.php", { class_un:teacher_choose_class , get_students:"1"} , function(data ,status){
alert(data);
var obj = $.parseJSON(data);
var html = '';
$.each(obj,function(i, item){
var str =item.child_name;
html += '<li><img src="student1.jpg">'+ str + '</li>';
});
$("#student_list_class").append(html).listview("refresh");
});
});
When I press "btnNew" the click event fires but the page does not navigate to newLanguagePage, instead it goes back to my initial page (index.html).
Could anyone, please, tell me what my dumb head is doing wrong?
Here's my HTML
<!DOCTYPE html>
<html>
<body>
<div id="languagesAdmin" class="mobilePage" data-role="page">
<div data-role="header">
Back
<h1>NOTHNG</h1>
Help
</div>
<div class="banner">
<div class="logo"></div><div id="languagesTopImage" class="topBannerImage"></div>
</div>
<div class="ui-corner-all custom-corners">
<h2 class="ui-bar ui-bar-e adminHeader">Languages Menu</h2>
<div class="ui-body ui-body-e">
<div data-role="fieldcontain" class="filterDisabledCheckbox">
<label for="HideDisabledLanguages">Hide disabled Languages</label>
<input type=checkbox id="HideDisabledLanguages" name="HideDisabledLanguages" value="true" checked/>
</div>
<ul data-role="listview" id="lwLanguages" class="listViewMenu"></ul>
</div>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a id="btnNew" href="#" rel="external" data-role="button" data-icon="plus">New</a></li>
<li>Delete</li>
<li>Search</li>
<li>Refresh</li>
</ul>
</div>
</div>
</div>
<div id="newLanguagePage" class="mobilePage" data-role="page">
<div data-role="header">
Back
<h1>Inter Pay Less</h1>
Help
</div>
<div class="banner">
<div class="logo"></div><div class="topBannerImage"></div>
</div>
<div class="ui-corner-all custom-corners">
<h2 class="ui-bar ui-bar-e adminHeader">Languages Menu</h2>
<div class="ui-body ui-body-e">
New Language
</div>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li>Delete</li>
<li>Search</li>
<li>Refresh</li>
</ul>
</div>
</div>
</div>
</body>
</html>
Here's the JavaScript
var strBaseWSURL = "http://www.WHATEVER.com/";
var objLanguages = new Array();
var lngLanguagesCursor = -1;
//Language Object
function _Language(data) {
this.Id = data.Id;
this.Code = data.Code;
this.Name = data.Name;
}
//LanguageAdmin_pageinit
$(document).on('pageinit', '#languagesAdmin', function () {
try {
execJQueryAjaxAndGetJSON([], strBaseWSURL + "IPLObjectsWS.asmx/GetAllLanguages", loadLanguages);
}
catch (e) {//Report the error
alert("Error fetching the languages.")
return false;
}
//New_Click
$(document).on("click", "#btnNew", function () {
$.mobile.navigate("#newLanguagePage", { transition: "slide" });
});
//Languages_onclick
$(document).on("click", "#lwLanguages li a", function () {
lngLanguagesCursor = $(this).closest("li").index();
});
});
//LanguageDetails_pageinit
$(document).on('pageinit', '#languageDetails', function () {
var objCurrentObject = objLanguages[lngLanguagesCursor];
$("#languageid").val(objCurrentObject.Id);
$("#languagecode").val(objCurrentObject.Code);
$("#languagename").val(objCurrentObject.Name);
//Save_onclick
$(document).on("click", "#btnSaveCountry", function () {
var objCurrentObject = objLanguages[lngLanguagesCursor];
var objUpdatedLanguage = new _Language();
objUpdatedLanguage.id = objCurrentObject.id;
objUpdatedLanguage.Code = $("#languagecode").val();
objUpdatedLanguage.Name = $("#languagename").val();
execJQueryAjaxAndGetJSON(objUpdatedLanguage, strBaseWSURL + "IPLObjectsWS.asmx/SaveLanguage", savedLanguage);
});
});
//__________________________________________________________________________Application Functions
//__________________________________________________________Calback functions
//Goes thru the languages and adds them to the lisview
function loadLanguages(result) {
$.each(result.d, function () {
$("#lwLanguages").append($('<li>' + this.Name + '</li>'));
objLanguages[objLanguages.length] = new _Language(this);
});
$("#lwLanguages").listview("refresh");
}
function savedLanguage(result) {
alert("The object was saved successfully!");
}
//__________________________________________________________Main functions
//Executes a Webservice Method and send the returned JSON to a callback function
function execJQueryAjaxAndGetJSON(params, strURL, callBackFunc) {
//GetCountries
$.ajax({
type: "POST",
url: strURL,
data: params,
contentType: "application/json; charset=utf-8",
dataType: "json",
async: false,
success: callBackFunc,
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(textStatus + ": " + XMLHttpRequest.responseText + "\n" + errorThrown);
}
});
}