I have a div in a page called firstpagemidle.php,
DIV id="news" data-pageNum_rsnews="1" data-totalRows_rsnews="9" class="new">
And I load this page in another page by this code:
$('#bigmidlecontent').load("../"+tab+"/"+stab+"midle.php",'',loadboth);
And now I want to access the variable PageNum from the page that is already loaded. How can I do that?
I use the function loadboth() exactly the same way as friends mentioned, but it didn't work.
After that I change the ID pagenum_rsnews to (pagenum) and now it works.
You'd do that in the callback function you're referencing, as the elements would be loaded then
$('#bigmidlecontent').load("../"+tab+"/"+stab+"midle.php",'',loadboth);
function loadboth() {
var pagenum = $('#news').data('pageNum_rsnews'); // 1
}
jQuery apparently converts data to lower case:
$('#bigmidlecontent').load("../" + tab + "/" + stab + "midle.php", '', loadboth);
function loadboth() {
var pagenum = $('#news').data('pagenum_rsnews'); // 1
}
For extracting all data, use:
$('#bigmidlecontent').load("../" + tab + "/" + stab + "midle.php", '', loadboth);
function loadboth() {
var pagenum = $('#news').data(); // {totalrows_rsnews: 9, pagenum_rsnews: 1}
}
Related
I want to change the url on scroll horizontally.
Used window.location.replace window.location.assignevent.preventDefault();
http://igv.org/web/examples/events/track-url.html#/locus/chr1:155,167,355-155,190,548 on scrolling, url changes to this
http://igv.org/web/examples/events/track-url.html#/locus/chr1:155,168,900-155,192,093
But it reloading or refreshing continuously
Used below steps
var myIgvBrowser = igv.createBrowser(div,options);
myIgvBrowser.on('locuschange', function (referenceFrame, label) {
var change_url = HASH_PREFIX + label + id + id_val;
alert(change_url);
// if (window.location.href !== redirectLocation) {
window.location.replace(change_url);
// return false;
});
&
var myIgvBrowser = igv.createBrowser(div,options);
myIgvBrowser.on('locuschange', function (referenceFrame, label, event) {
var change_url = HASH_PREFIX + label + id + id_val;
window.location.replace(change_url);
event.preventDefault();
});
alert(change_url); - working
on scrolling, alert shows changed positions but window.location.replace not working
How to solve this and if any help thanks guys in advance
Seems like you are doing a window.location.replace every time your page loads up and you don't check if you really need to do window.location.replace or not.
You need to check if location.replace is really required or not at first place, since you are only changing the hash value, replace it with
window.location.hash = label + id + id_val;
I'm trying to create a function where, on every button click, the ID at the end of the pages URL is added to by 1. So,
example.org/page -> (buttonclick) -> example.org/page#1 -> (buttonclick) -> example.org/page#2 etc. etc.
What I've got at the moment is:
var anchor = 0;
$('#bottom-right').click(function() {
var anchor += 1;
var anchorurl = "#" + anchor;
var currenturl = window.location.href;
var newurl = currenturl.slice(0, -1) + anchorurl;
window.location.replace(newurl);
});
But it doesn't really work & I imagine there is a cleaner solution...
Thanks in advance.
simply make it
$('#bottom-right').click(function() {
window.location.hash = ++anchor;
});
Make use of the built-in hash method.
So basically the url contains #.So you can also track this # and get the next number and increment it.
Code example:
var hashValue = window.location.href.substring(window.location.href.indexOf('#')+1);
window.location.hash = hashValue + 1;
I'm making a website to host artwork. The idea is that when the page loads I have JavaScript run a php file that makes a query to the server to get the names and IDs of the image files (artwork.jpg) and display them as thumbnails on a page.
When you scroll over the thumbnail, the artwork is displayed larger on a different part of the screen and the description, specs, etc for the piece of art fades in. My issue is that when I make this second AJAX call it appends the value of the previously moused over image to the screen and does nothing until you've moused over at least two images.
Here's my code for the first ajax call that appends thumbnails to the page and creates a form with the value of the thumnbnail's id:
function getArtDescriptions()
{
$.post('../../path/to/script/get_art.php', function(json)
{
if (json.art.length > 0)
{
$.each(json.art,function()
{
var info =
'<div class = "thumbnail_box">'
+ '<img src = "images/thumbnails/'
+ this['img']
+ '"id = "'
+ this['ID']
+ '"> '
+ '<form id = "art_descriptions'
+ this['ID']
+ '" '
+ 'name = "art_descriptions'
+ this['ID']
+ '">'
+ '<input type = "hidden" id = "descriptions" name = "descriptions" value = "'
+ this['ID']
+ '"></form>'
+ '</div>';
});
}
}, 'json');
}
And this is the code I'm using to make the second AJAX call that is giving me a problem:
setTimeout(function get_id()
{
var tooltipTimeout;
$(".thumbnail_box img").on("mouseenter", function()
{
tooltipTimeout = setTimeout(details(this.id),0);
console.log(this.id);
});
$(".thumbnail_box img").on("mouseleave", function()
{
hideTooltip();
});
function hideTooltip()
{
clearTimeout(tooltipTimeout);
$(".description").fadeOut().remove();
}
}, 800);
//GRAB DESCRIPTIONS FROM DATABASE AND
function details(art)
{
var formname = "#art_descriptions"+art;
var filename = '../../file/path/to/script/get_descriptions.php';
//console.log($(formname).serialize());
$(".thumbnail_box img").on("mouseenter", function()
{
$.post(filename, $(formname).serialize(), function(json)
{
if (json.descriptions.length > 0)
{
//MAKE SURE TO EMPTY OUT DIV CLASSES FOR EACH TAB
$(".description").empty();
$.each(json.descriptions,function()
{
console.log("art method"+this['ID']);
$(".description").append(this['description']+this['ID']).hide().fadeIn("fast");
});
}
}, 'json');
});
};
When I console.log(this['ID']) in the get_id() method the correct value is displayed in the console, but when I console.log("art method"+this['ID'] in the details method I get a value equal to the previously scrolled over thumbnail's ID. I'd really appreciate any insight on this issue.
Is it something to do with the use of setTimeout()? My code would not run without specifying a timeout for the method. For example if I load the page and then scroll over images with ID's 14 and then 13, my console will display:
14
13
art method 14
The issue is that you are appending more of the same events. After the first mouseenter event occurs the details function is called, which then appends another mouseenter event. So subsequent calls will be doing the same thing. You can see an example of this here: http://jsfiddle.net/6qre72fk/.
var counter = 0;
$('#container1').on('mouseenter', function(){
$('#container2').text('First mouseenter');
appendingAnotherMouseEnter();
});
function appendingAnotherMouseEnter(){
$('#container1').on('mouseenter', function(){
$('#container2').text(counter);
counter++;
});
}
You can see how the counter is incremented several times due to all appended the mouseenter events.
The code below works, but there is an issue with it.
That issue is that unless the alert(this.href); - (about line 11) is in the code the following function does not work.
//There are pages which make up 2 chapters in this content
//We shall attempt to grab all the links from these pages
var c;
var chapters = new Array();
chapters[0] = "original/html/0/ID0EFJAE.html";
//Loop through each page of links
$.each(chapters, function(key, value) {
$("#theContent").append("<div class='chapterindex" + key + "'>working</div>");
$(".chapterindex" + key).load(value + " .content");
alert(this.href);
$(".chapterindex" + key + " div.link a").each(function(intIndex) {
alert(".chapterindex" + key);
});
});
If I take the first alert out of line 11 then the last alert doesn't fire. What am I doing wrong?
The delay that the alert is causing is allowing the data in your load call to load. I suspect that when you remove the alert the data does not load in time.
Try using a callback with your load call, something like (code not tested) -
$(".chapterindex" + key).load(value + " .content",function () {
$(".chapterindex" + key + " div.link a").each(function(intIndex) {
alert(".chapterindex" + key);
});
});
The first alert is probably giving the load function enough time to finish so when you take it out the load function is not done when its trying to fire your second alert.
I need to change the href of any local link when it is clicked on.
I've worked out how to select the correct links and create the new url, but not sure how to change the location. I need to be certain that any other click events have also run, so I can't just change the location immediately.
var my_host = 'example.com';
$(document).click(function(e) {
if(e.target.hostname == my_host)
{
alert(e.target.protocol + "//" + e.target.hostname + "/#" + e.target.pathname + e.target.search);
//...
}
});
This is related to my earlier question.
You can bind the event on your local links like this and use the attr method to change the href:
$('a[href*="yourdomain.com"]').click(function(){
// your code before changing href
$(this).attr('href', 'new url here');
});
Replace yourdomain.com with your own domain so that the above code only targets your local links.
This is completely untested, but should get you where you're going:
var site = "http://yourdomain.com";
// Match anchor tags with an href value that starts with your
// site URL, or that start with / which are relative URLs (also
// your site).
$('a[href^="' + site + '"] a[href^="/"]').click(function(){
var url = $(this).attr('href');
if (url.indexOf(site) != -1) {
url = site + "/#" + url.replace(site, ""); // Quick dirty way to get the path component of the URL
} else {
url = "/#" + url;
}
$(this).attr("href", url);
});
Note that I read your other question, and I personally don't understand why you would do this on a click event, instead of just replacing all the href values as soon as the page is loaded.
Credit to Sarfraz: here is the answer without the bug.
var my_host = "example.com";
$('a[href^="/"], a[href^="http://' + my_host + '"], a[href^="https://' + my_host + '"]').click(function(e){
$(this).attr('href', e.target.protocol + "//" + e.target.hostname + "/#" + e.target.pathname + e.target.search);
});