var element = document.getElementById("divname");
var pagerHtml ='< Prev';
for (var page = 1; page <= this.pages; page++){
pagerHtml += '<a href="#" class="'+ page>' + page + '</a> ';
}
pagerHtml += '<a class="dotline" style="display:none;">........</a>';
pagerHtml += ' Next >';
element.innerHTML = pagerHtml;
if(this.pages > 9){
for(var i=this.buffer;i<(this.pages-this.buffer);i++){
$("."+i+1)).hide();
}
}
I want to add class "dotline" so that when pages are hidden I would do $(".dash").show(); and it would look like 1,2,.....,8,9,10. any ideas would be appreciated.
Check this fiddle.
I've updated the script as shown below.
var pages = 10;
var buffer = 3;
var pagerHtml = ['< Prev'];
for (var page = 1; page <= pages; page++){
pagerHtml.push('' + page + ' ');
}
pagerHtml.push(' Next >');
$("#divname").append(pagerHtml.join(""));
if(pages > 9){
$("#divname a:gt(3):lt(" + (pages - 6) + ")").hide();
$('<a class="dotline" >........</a>').insertAfter($("#divname a:eq(3)"));
}
Can't edit post. However this is more what it should look like I think. Now what's the problem?
var element = document.getElementById("divname");
var pagerHtml ='< Prev';
for (var page = 1; page <= this.pages; page++){
pagerHtml += '<a href="#" class="'+ page> + page + '</a>';
}
pagerHtml += '<a class="dotline" style="display:none;">........</a>';
pagerHtml += ' Next >';
element.innerHTML = pagerHtml;
if(this.pages > 9){
for(var i=this.buffer;i<(this.pages-this.buffer);i++){
$("."+i+1).hide();
}
}
Unfinished product, however you can play with / tweak this.
I've rewritten your code cause it didn't work. Lots of errors in it.
Check it out: http://jsfiddle.net/tkwwZ/
Related
I have this for loop
<script>
...
for(i = 0;i < json.length;i++){
document.getElementById("pText").innerHTML = json[i].name;
document.getElementById("pLink").setAttribute("href",json[i].html_url);
}
</script>
I want to print a paragraph with a href on each loop, so i did this:
</script>
<a id="pLink">
<p id="pText">
</p>
</a>
It works but the thing is this only prints the last loop.
So i tried this inside the script
document.write("<a href=\"" + json[i].html_url + "\">");
document.write("<p>" + json[i].name + "</p>");
document.write("</a>");
instead of this:
document.getElementById("pText").innerHTML = json[i].name;
document.getElementById("pLink").setAttribute("href",json[i].html_url);
And it prints everything i want but it replaces the whole page.
How can i do this? Do i need to create an id for every loop? Like "pText1, pText2, etc.
Create a container element for that loop, and add the html as you had in mind
<div id="container"></div>
Then in javascript
var container = document.getElementById('container');
var my_html = '';
for(var i = 0;i < json.length;i++){
my_html += '<a href="' + json[i].html_url + '\">';
my_html += '<p>'+ json[i].name + '</p>'
my_html += '</a>'
}
container.innerHTML = my_html;
What we are doing here is adding the content to a string as many times as needed and then add it to the container so it already has all the loops
document.getElementById("pText").innerHTML = json[i].name;
document.getElementById("pLink").setAttribute("href",json[i].html_url);
If you want to use your this code, you have to write "+=" instead of the "=".
var json = [
{"name":"Name 1", "html_url": "http://www.example.com"},
{"name":"Name 2", "html_url": "http://www.example.com"},
{"name":"Name 3", "html_url": "http://www.example.com"}
];
for(var i = 0; i < json.length; i++){
document.getElementById("pText").innerHTML += json[i].name + "<br>";
document.getElementById("pLink").setAttribute("href",json[i].html_url);
}
<a id="pLink">
<p id="pText">
</p>
</a>
I will do it in the following way:
let json = [{'name':'Google','html_url':'https://www.google.com/'}, {'name':'Facebook','html_url':'https://www.facebook.com/'}, {'name':'Twitter','html_url':'https://twitter.com/?lang=en'}];
let item = document.querySelector(".pLink")
for(let j = 1; j<json.length; j++){
let cln = item.cloneNode(true);
document.body.appendChild(cln);
}
let aTag = document.querySelectorAll('a.pLink');
aTag.forEach(function(item, i){
let a = item.setAttribute("href",json[i].html_url);
let p = item.querySelector('.pText');
p.innerHTML = json[i].name;
})
<a class="pLink">
<p class="pText">
</p>
</a>
I've been working on a functionality that involves the creation of a HTML table using jquery that will display a list of accounts dynamically on page load, that's something I achieved without problems.
However, I've also asked to add an "onclick" event to each row that will redirect me to another web page, but that will depend on a parameter that I need to pass. Here's my code:
$(document).ready(function() {
var x = ['Visa-1234', 'Amex-9182', 'Visa-8162', 'Visa-9554'];
var message = 'No accounts found';
if (x.length > 0) {
message = 'Select an account to display the rewards information: ';
}
$('#message').text(message);
var tableContentHtml = '<table class="table-fill"><thead><tr><th class="text-left">Account</th></tr></thead><tbody class="table-hover">';
for (var i = 0; i < x.length; i++) {
tableContentHtml += '<tr><td class="text-left" onclick="goAnotherWebPage()">' + x[i] + '</td></tr>';
}
tableContentHtml += '</tbody></table>';
$(tableContentHtml).appendTo('#container');
});
function goAnotherWebPage(account) {
//do some logic here
}
The method "goAnotherWebPage" should receive the same account ID that is being displayed, I have no problem with that, the problem comes when I pass the x[i] as parameter on the table creation:
onclick="goAnotherWebPage(x[i])"
That is not working, it says that the account is not defined.
Can somebody give me a hint or provide help in order to achieve this? Thanks in advance!
Try this out
for (var i = 0; i < x.length; i++) {
tableContentHtml += '<tr><td class="text-left" onclick="goAnotherWebPage(\'' + x[i] + '\')">' + x[i] + '</td></tr>';
}
$(document).ready(function() {
var x = ['Visa-1234', 'Amex-9182', 'Visa-8162', 'Visa-9554'];
var message = 'No accounts found';
if (x.length > 0) {
message = 'Select an account to display the rewards information: ';
}
$('#message').text(message);
var tableContentHtml = '<table class="table-fill"><thead><tr><th class="text-left">Account</th></tr></thead><tbody class="table-hover">';
for (var i = 0; i < x.length; i++) {
tableContentHtml += '<tr><td class="text-left" onclick="goAnotherWebPage(\'' + x[i] + '\')">' + x[i] + '</td></tr>';
}
tableContentHtml += '</tbody></table>';
$(tableContentHtml).appendTo('#container');
goAnotherWebPage = function(account) {
console.log(account);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="message"></div>
<div id="container"></div>
Hope this will help you.
I try to understand what do you need and i create a simple demo for you
$(document).ready(function() {
var x = ['Visa-1234', 'Amex-9182', 'Visa-8162', 'Visa-9554'];
var message = 'No accounts found';
if (x.length > 0) {
message = 'Select an account to display the rewards information: ';
}
$('#message').text(message);
var tableContentHtml = '<table class="table-fill"><thead><tr><th class="text-left">Account</th></tr></thead><tbody class="table-hover">';
for (var i = 0; i < x.length; i++) {
tableContentHtml += '<tr><td class="text-left redirect">' + x[i] + '</td></tr>';
}
tableContentHtml += '</tbody></table>';
$(tableContentHtml).appendTo('#container');
});
$('body').on('click', '.redirect', function (e) {
value = $(this).html();
console.log(value);
// do your logic here
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="message"></div>
<div id="container"></div>
Can you please tell me how to make list in jQuery mobile? I am trying to make this type list as given in fiddle on pop up screen dynamically .
Here is the fiddle
In this fiddle I make two rows.In first row there is only p tag. But in second row there is nested collapsible rows. I need to make same thing in pop up screen. I am able to make first row. But In my second row contend is null why? Can you suggest where I am wrong?
fiddle
$(function () {
$('#test').click(function(){
alert('d');
createCommandPopUpTabs();
$("#tabbedPopup").popup("open");
});
});
var tabsHeader = [ "InputParameter", "basic"];
var tabsHeader_basic = [ "XYZ", "Third Level",
];
function createCommandPopUpTabs(){
var header = "<h3 >dd</h3>";
var commmand = 'dd';
var button = '<button onclick="return submitCommand("'+
'")" style="" class="donebtn common-button1">Save</button>';
$("#commandInfo").append(button);
$("#commandInfoheader").html(header);
for ( var i = 0; i < tabsHeader.length; i++) {
var headerId = tabsHeader[i] + "_tab" + commmand;
var header = "<div data-role='collapsible' data-collapsed='false' id='"
+ headerId + "'><h3>InputParameter</h3></div>";
var content ;
if(tabsHeader[i]=="InputParameter"){
content = "<p>yes</p>";
}else if(tabsHeader[i]=="basic"){
for ( var i = 0; i < tabsHeader_basic.length; i++) {
headerId = tabsHeader_basic[i] + "_tab" + commmand;
header = "<div data-role='collapsible' data-collapsed='false' id='"
+ headerId + "'><h3>basic</h3></div>";
content += getcontend(tabsHeader_basic[i]);
}
}
$("#tabbedSet").append(header);
$("#tabbedSet").find("#" + headerId).append(content);
$("#tabbedSet").collapsibleset("refresh");
}
}
function getcontend(name){
if(name=="Third Level"){
return"<p>Third Level></p>";
} if(name=="XYZ"){
return"<p> second Level></p>";
}
}
There are errors in your code and logic. I will only go over a couple of them to hopefully get you on the right path:
In tabsHeader_basic array the Third Level has a space in it which you later use as an ID which makes it an invalid ID because you cannot have spaces in an ID.
From the HTML 5 Draft:
The value must not contain any space characters.
Also, the "basic" collapsible div needs to exist before you start adding the nested collapsible div.
So this line needs to come out of the for loop
header = "<div data-role='collapsible' data-collapsed='false' id='"+ headerId + "'><h3>basic</h3></div>";
Go through the JSFiddle and compare your code agaisnt my changes.
Hopefully that helps! Let me know if you have any other questions.
I have updated createCommandPopUpTabs() function.
Also removed space in Third Level on var tabsHeader_basic = ["XYZ", "ThirdLevel"];
Check the Updated Fiddle
function createCommandPopUpTabs() {
var header = "<h3 >dd</h3>";
var commmand = 'dd';
var button = '<button onclick="return submitCommand("' +
'")" style="" class="donebtn common-button1">Save</button>';
$("#commandInfo").html(button);
$("#commandInfoheader").html(header);
$("#tabbedSet").html('');
for (var i = 0; i < tabsHeader.length; i++) {
var headerId = tabsHeader[i] + "_tab" + commmand;
var header = "<div data-role='collapsible' data-collapsed='true' id='" + headerId + "'><h3>" + tabsHeader[i] + "</h3></div>";
$("#tabbedSet").append(header);
var content;
if (tabsHeader[i] == "InputParameter") {
content = "<p>yes</p>";
$("#tabbedSet").find("#" + headerId).append(content);
} else if (tabsHeader[i] == "basic") {
for (var j = 0; j < tabsHeader_basic.length; j++) {
var headerId1 = tabsHeader_basic[j] + "_tab" + commmand;
var header1 = "<div data-role='collapsible' data-collapsed='true' id='" + headerId1 + "'><h3>" + tabsHeader_basic[j] + "</h3></div>";
var content1 = getcontend(tabsHeader_basic[j]);
$("#tabbedSet").find("#" + headerId).append(header1);
$("#tabbedSet").find("#" + headerId1).append(content1);
}
}
$("#tabbedSet").collapsibleset("refresh");
}
}
I need help for returning the value from the loop. Here is my javascript code :
get_images = ["01","02","03"];
for(var i=0; i < get_images.length; i++){
images = '<img src="images/' + page_id + '/gallery/01/' + get_images[i] +'.jpg" >';
}
$("#imgs").html(images);
What I want is, I want get all the value " images " from inside the loop and put it into inside the
<div id="imgs"></div>
How do I put the images found in the loop into their own div tag?
Try this..
get_images = ["01","02","03"];
var images ='',
arrLength = get_images.length;
for(var i=0; i < arrLength; i++){
// Here concatenate your values.
images += '<img src="images/' + page_id + '/gallery/01/' + get_images[i] +'.jpg" >';
}
$("#imgs").html(images);
Do you mean to do string append? Right now you're overwriting the images variable in every iteration:
images = images + '<img src="images/' + page_id + '/gallery/01/' + get_images[i] +'.jpg" >';
I am using this code on my blogger blog.This is the javascript-
<script type='text/javascript'>
var thumbnail_mode = & quot;
yes & quot;; //yes -with thumbnail, no -no thumbnail
summary_noimg = 430; //summary length when no image
summary_img = 340; //summary length when with image
img_thumb_height = 200;
img_thumb_width = 200;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx, chop) {
if (strx.indexOf("<") != -1) {
var s = strx.split("<");
for (var i = 0; i < s.length; i++) {
if (s[i].indexOf(">") != -1) {
s[i] = s[i].substring(s[i].indexOf(">") + 1, s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length - 1) ? chop : strx.length - 2;
while (strx.charAt(chop - 1) != ' ' && strx.indexOf(' ', chop) != -1) chop++;
strx = strx.substring(0, chop - 1);
return strx + '...';
}
function createSummaryAndThumb(pID) {
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if (thumbnail_mode == "yes") {
if (img.length >= 1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;">
<img src="' + img[0].src + '" width="' + img_thumb_width + 'px" height="' + img_thumb_height + 'px"/>
</span>';
summ = summary_img;
}
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML, summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>
And this is the code i am using in div of post element
<div expr:id='"summary" + data:post.id'>
<data:post.body/>
</div>
<a class='more' expr:href='data:post.url'> read more </a>
<script type='text/javascript'>
createSummaryAndThumb( & quot; summary < data: post.id / > & quot;);
</script>
This is the result:
Twitter is the second most popular social networking site. It is used by celebrities all around world. It is also called a microblogging website... read more
I want read more link just after ' ...' for example-
It is also called a microblogging website... read more
How can i do it, please help me.
Just one solution of many, but give your div prior to the anchor a display:inline; css styling and the anchor will fall to the right of the div content. Either in another included css file, in a style tag, or within the div tag place a style="display:inline".