Is it possible to link directly to a tab for a site such as http://www.antutu.com/Ranking.shtml?
I'm referring to the tabs Recommend, Highest, Lowest........
Looking at the source, I couldn't find any references of class and id in a script from the block:
<div class="tab">
<div class="tab_bg" id="mobile-tab">
<div class="fl tab_i">Recommend</div>
<div class="fl tab_i2">Highest</div>
<div class="fl tab_i2">Lowest</div>
<div class="fl tab_i2">Cost-effective</div>
<div class="fl tab_i2">Experience</div>
<div class="fl tab_i2">Hottest</div>
<div class="fl tab_i2">Camera</div>
<div class="fl tab_i2">Professional</div>
<div class="cl"></div>
</div>
</div>
Oh and I'm really new to html and javascript, but I was using this site: http://www.dnnstuff.com/modules/aggregator-tabbed-modules/aggregator-demos/linking-directly-to-a-tab.aspx 's code as a guide.
Using an actual link to the page it wouldnt appear so.
The page runs this code when clicking on a tab
function loadRanking_order(obj, m, o) {
$("div#" + m + "-tab div.tab_i,div#" + m + "-tab div.tab_i2").removeClass("tab_i").addClass("tab_i2");
obj.parentNode.className = "fl tab_i"
if (o == 'df') {
$('#rank_' + m + '_lists').html($('#rank_' + m + '_default').html());
return;
}
$.ajax({
url: '/Ranking.shtml?cmd=ajax_' + m + '&o=' + o,
dataType: "html",
success: function (data) {
$('#rank_' + m + '_lists').html(data);
}
});
}
You could perhaps load the page in an iframe and call the javascript method yourself
Related
sorry for the newbie question. I have this code, but i dont like it, its not very readable. I'm completely new to this and i'm not able to find an answer. I would like to spread the part following the append over multiple lines, but what is the correct syntax for this?
'buildHtml': function(data) {
$('.visibility-attributes').append('<div class="div-table-row js-table-row"><div class="div-table-cell js-div-table-cell">Bestand</div><div class="div-table-cell js-div-table-cell-bolt"><span class="tab-product-attribute-name">' + data.stock.stocklevel + '</span></div></div><div class="div-table-row js-table-row"><div class="div-table-cell js-div-table-cell">Bestellbar</div><div class="div-table-cell js-div-table-cell-bolt"><span class="tab-product-attribute-name">' + data.stock.orderable + '</span></div></div>');
},
I suppose you are looking for this
var myHtmlString = "<div class='div-table-row js-table-row'>\
<div class='div-table-cell js-div-table-cell'>\
Bestand\
</div>\
<div class='div-table-cell js-div-table-cell-bolt'>\
<span class='tab-product-attribute-name'>" + data.stock.stocklevel + "</span>\
</div>\
</div>\
<div class='div-table-row js-table-row'>\
<div class='div-table-cell js-div-table-cell'>Bestellbar</div>\
<div class='div-table-cell js-div-table-cell-bolt'>\
<span class='tab-product-attribute-name'>" + data.stock.orderable + "</span>\
</div>\
</div>";
$('.visibility-attributes').append(myHtmlString )
Just write a backslash char at the end of every new line to consider the whole thing as one string. (Prevents head ache from + and "" )
Alternatively :
You can write the structure in a hidden div (as a template)
and fill the values in required html elements and copy the template to output div
$("#hiddenDiv").find(".tab-product-attribute-name").html(data.stock.stocklevel);
//blah
//blah
$('.visibility-attributes').append($("#hiddenDiv").html());
Be careful to replace the single quote ' with `
'buildHtml': function(data) {
$('.visibility-attributes').append(`
<div class="div-table-row js-table-row">
<div class="div-table-cell js-div-table-cell">Bestand</div>
<div class="div-table-cell js-div-table-cell-bolt">
<span class="tab-product-attribute-name">${data.stock.stocklevel}</span>
</div>
</div>
<div class="div-table-row js-table-row">
<div class="div-table-cell js-div-table-cell">Bestellbar</div>
<div class="div-table-cell js-div-table-cell-bolt">
<span class="tab-product-attribute-name">${data.stock.orderable}</span>
</div>
</div>
`);
},
here is my codepen link
my html code
<div id="main">
<h1>Wikipedia Viewer</h1>
<form class="form-inline">
<div class="container">
<div class="row">
<div class="col-sm-6 col-sm-offset-4 col-lg-7 col-lg-offset-4">
<div class="form-group">
<label class="sr-only" for="search">search</label>
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="button" class="btn btn-primary"><i class="fa fa-search"></i></button></form>
</div>
</div>
</div>
Surprise me!
</div>
<div id="search">
</search>
jquery code for making wikipedia api search call and then displaying title and overview.i want to associate links to respective article on dynamically created p element
$(document).ready(function() {
$("button").click(function() {
var article = $("input").val();
$.ajax({ //wikipedia api call
url: "https://en.wikipedia.org/w/api.php?action=query&list=search&srsearch=" + article + "&format=json",
dataType: "jsonp",
success: function(data) {
for (var i = 0; i < data.query.search.length; i++) { //displaying titles and snippets accroding to search query. i want to associate link to each dynamically created p element.
var title = data.query.search[i].title;
var snippet = data.query.search[i].snippet;
$("#search").append("<p>" + title + "<br>" + snippet + "</p>");
}
$("#main").attr({
'style': 'display: none'
});
},
error: function() {
$("h1").html("oops");
}
});
});
});
Change your $("#search").append() as follows:
$("#search")
.append("<p><a href='https://en.wikipedia.org/wiki/" + title + "'>" + title + "</a>" +
"<br>" + snippet + "</p>"
);
Codepen
I am trying to list my github repos through their api but its not showing up on my page but by using the exact same code its working here on JSFiddle
Debugging shows that the script is being called but its just not loading in its <div>:
<div id="repos">
<ul id="repo_list">
</ul>
</div>`
Here is the markup in my source code:
<section id="git-hub">
<div class="container">
<div class="box">
<div class="center">
<h2>GitHub</h2>
<p class="lead">Go on! Take a look through my repos!</p>
<div id="repos">
<ul id="repo_list">
</ul>
</div>
<div id="repo_content"></div>
<script>
$.ajax({
type: "GET",
url: "https://api.github.com/users/google/repos",
dataType: "json",
success: function(result) {
for( i in result ) {
$("#repo_list").append(
"<li><a href='" + result[i].html_url + "' target='_blank'>" +
result[i].name + "</a></li>"
);
console.log("i: " + i);
}
console.log(result);
$("#repo_count").append("Total Repos: " + result.length);
}
});
</script>
</div><!--/.center-->
</div>
</div>
</section><!--/#pricing-->
Does anybody know what could be the reason?
You're putting this script tag above where you're loading your jQuery. Place this script tag below where you're loading your jQuery.
I have a html code which displays ads ,but the ads are display like a coloumn vise, but I want them to display in a horizontal row .How can we display the horizontal rows.And ads are which are coming dynamically based on the user selection.How can we display these ads in a row wise fashion .
Html code is :
<div class="row">
<div class="col-md-3" id="adsid"></div>
</div>
Code snippet from JS:
<input type="checkbox" id=' + s[i]['id']['0'] + ' />
<a href="#" class="list-group-item ">
<input type="hidden" id="adsid" name="adsrunning" value=' + s[i]['id']["0"] + '/>
<h4 class="list-group-item-heading">
<font color="blue">' + s[i]['hea']["0"] + '</font>
</h4>
<p class="list-group-item-text">' + s[i]['desc']["0"] + '</p>
<p class="list-group-item-text">' + s[i]['desc2']["0"] + '</p>
<p class="list-group-item-text">
<font color="green">' + s[i]['url']["0"] + '</font>
</p>
</a><br/>
And JS is :
$("#groupid").change(function () {
$("#adsid").html("");
var grpvalue = $("#groupid").val();
var accid = $('#accountid').val();
var adsarray = [];
$.ajax({
type: "post",
dataType: 'json',
url: "pages/ads.php",
data: "adgroup=" + grpvalue + "&accid=" + accid,
success: function (s) {
for (var i = 0; i < s.length; i++) {
var head = s[i]['hea']["0"];
//alert(head);
var adid = s[i]['id']["0"];
var desc1 = s[i]['desc']["0"];
var desc2 = s[i]['desc2']["0"];
var url = s[i]['url']["0"];
var p = document.createElement('p');
var txt = document.createTextNode(head);
p.appendChild(txt);
//$('adsid').append(p);
adsarray.push(head, adid, desc1, desc2, url);
$("#adsid").append("");
$("#adsid").append('<input type="checkbox" id=' + s[i]['id']['0'] + ' /><input type="hidden" id="adsid" name="adsrunning" value=' + s[i]['id']["0"] + '/><h4 class="list-group-item-heading"><font color="blue">' + s[i]['hea']["0"] + '</font></h4><p class="list-group-item-text">' + s[i]['desc']["0"] + '</p><p class="list-group-item-text">' + s[i]['desc2']["0"] + '</p><p class="list-group-item-text"><font color="green">' + s[i]['url']["0"] + '</font></p><br/>');
}
}
});
});
And Json Data is:
[{
"hea": {
"0": "Kidney Stone Removal"
},
"id": {
"0": "40602813172"
},
"desc": {
"0": "Get treated at top kidney center"
},
"desc2": {
"0": "Take a free advice from our experts"
},
"url": {
"0": "www.ainuindia.com"
}
}]
I think your questions i answered here:
http://www.w3schools.com/css/css_float.asp
Use float to place the "rows" next to each other.
Though i would recommend you to change your "row" class to something more appropriate if possible. Since row are explicitly saying that it's a row, in other words a vertical alignment.
You can use ul li tag as bellow give style to li as list-style:none
<div class="row">
<ul >
<li class="col-md-3 col-sm-3 col-xs-6"><img src="" /><span class="badge">Lorem ipsum</span></li>
<li class="col-md-3 col-sm-3 col-xs-6"><img src="" /><span class="badge">Lorem ipsum</span></li>
<li class="col-md-3 col-sm-3 col-xs-6"><img src="" /><span class="badge">Lorem ipsum</span></li>
<li class="col-md-3 col-sm-3 col-xs-6"><img src="" /><span class="badge">Lorem ipsum</span></li>
</ul>
</div>
If you can modify the html of ad, try replacing col-md-3 by col-sm12 so the whole thing would read:
<div class="row">
<div class="col-sm-12" id="adsid">
</div>
</div>
I'm assuming you're using bootstrap, so having col-md-3 makes it float left with width 33%. On medium screen.
Not able to use Struts2 tags in jQuery as String.
This is my div:
<div class="row">
<div class="form-group col-xs-12 col-sm-6 col-lg-3">
<label>Expensed Type</label>
<s:select name="expenseList[0].param"
list="'advertisement','food'"/>
</div>
<div class="form-group col-xs-12 col-sm-6 col-lg-3">
<label>Amount</label>
<s:textfield name="expenseList[0].value" value="%{expenseList[0].value}"/>
</div>
<div class="form-group col-xs-12 col-sm-6 col-lg-3">
<label>Date</label>
<s:textfield name="expenseList[0].dt" value="%{expenseList[0].dt}"/>
</div>
</div>
<div class="col-xs-4 right">
<span class="glyphicon-plus"></span>
<button type="submit" class="btn btn-default">Save</button>
</div>
I would like to use above as String in JavaScript, so that whenever a user clicks on add button It must generate a new row. I am adding above to a jQuery click event
As below:
<script type="text/javascript">
$(document).ready(function() {
$(document).on('click', '#add', function(event) {
event.preventDefault();
$(".row").append("< /div <div class=\"row\">"
+ "<div class = \"form - group col - xs - 12 col - sm - 6 col - lg - 3\">"
+ "<label> Expensed Type </label>"
+ "<s:select name=\"expenseList[1].param\" list=\"'advertisement','food'\"/>"
+ "</div>"
+ "<div class = \"form - group col - xs - 12 col - sm - 6 col - lg - 3\">"
+ "<label> Amount </label>"
+ "<s:textfield name=\"expenseList[1].value\" value=\"%{expenseList[1].value}\"/>"
+ "</div>"
+ " <div class = \"form - group col - xs - 12 col - sm - 6 col - lg - 3\">"
+ "<label> Date </label>"
+ "<s:textfield name=\"expenseList[1].dt\" value=\"%{expenseList[1].dt}\"/>\"/> "
+ "</div>"
+ "</div>"
);
});
});
</script>
It is showing following exception:
org.apache.jasper.JasperException: /pages/expense/AddExpense.jsp (line: 88, column: 43) quote symbol expected
org.apache.jasper.compiler.DefaultErrorHandler.jspError(DefaultErrorHandler.java:42)
org.apache.jasper.compiler.ErrorDispatcher.dispatch(ErrorDispatcher.java:443)
org.apache.jasper.compiler.ErrorDispatcher.jspError(ErrorDispatcher.java:89)
org.apache.jasper.compiler.Parser.parseAttribute(Parser.java:222)
org.apache.jasper.compiler.Parser.parseAttributes(Parser.java:162)
org.apache.jasper.compiler.Parser.parseAttributes(Parser.java:153)
org.apache.jasper.compiler.Parser.parseCustomTag(Parser.java:1236)
org.apache.jasper.compiler.Parser.parseElements(Parser.java:1452)
org.apache.jasper.compiler.Parser.parse(Parser.java:138)
org.apache.jasper.compiler.ParserController.doParse(ParserController.java:242)
org.apache.jasper.compiler.ParserController.parse(ParserController.java:102)
org.apache.jasper.compiler.Compiler.generateJava(Compiler.java:198)
org.apache.jasper.compiler.Compiler.compile(Compiler.java:373)
org.apache.jasper.compiler.Compiler.compile(Compiler.java:353)
org.apache.jasper.compiler.Compiler.compile(Compiler.java:340)
Line 88 is `+ "<s:select name=\"expenseList[1].param\" list=\"'advertisement','food'\"/>"`
Since you are using javascript only to append HTML (and not to manipulate it nor the DOM), consider returning a JSP snippet instead.
You can find the the complete example here.
Also remember to map keypress too, or users using keyboard won't fire the event.
It would be something like:
<script type="text/javascript">
$(document).ready(function() {
$("#add").on('keypress click', function(event) {
$.ajax({
url: "<s:url action='loadNewRowTemplateWithAjaxAction'/>",
}).done(function(result) {
$(".row").append(result);
});
});
});
</script>
This let you keep a clean JSP and perform operations server-side, like checking if it's possible to add a new row, or updating a row counter in session, and so on...
You can't use Struts tags that generate HTML in the javascript variable as string, because the generated code should escape quotes.
javascript string requires quotes around the content and every quote inside the content should be escaped, so it doesn't end a string content.
You can also try with single or double quotes to delimit a string value, but without properly escaping it will fail before it's rendered.
Instead of generating HTML from the Struts tags in javascript variable use Ajax to load HTML returned as Ajax response.