I have two pages, say page1.jsp and page2.jsp and a common javascript file script.js.
I have an onclick call in page1.jsp like this:
<td>004</td>
and this method is in script.js defined as:
<script>
function onTab_ServiceTypes() {
// Here I want to hide a div of page2.jsp, like this
$("#div_of_page2JSP").hide();
}
</script>
How can I do this?
you can't do that if both pages are independent(page2 is loaded via a page reload).
What you can do is to store the clicked state using a cookie/web-storage(local storage/session storage) then when the second pages is loaded check the state of the stored value and then hide/show those elements.
If I understand your question right this is not possible. You won't be able to manipulate elements not within the current DOM with JavaScript. You could probably pass a variable in your URL like page2.jsp?hideDiv=true (You would have a better name for this variable...) when you click the link and navigate to page2.jsp and hide div on page load.
Related
Background: I'm running A/B tests for a website via VWO. I can write a script that is run when the page loads, but I cannot access any of the website's preexisting scripts or alter their code in any way besides "overwriting" in JS (e.g. remove divs, change CSS properties, append divs) after their page loads.
Problem: When the page loads, there is an empty <div id="priceinfo"></div>. Elsewhere on the page, there is an <img ...>. Inside RequestPriceInfo(), the function outputs HTML to div#priceinfo based on certain form field values on the page. It also appends an "order" button (which is actually not a button at all, but an image nested in anchor tags). I'm trying to change the source for the "button" image using JQuery's attr() function.
Progress: None. I have tried using $('a#requestPrice').click(function() {...} ); but it is not working to change the source of the image, I presume because the content has not yet loaded onto the page immediately when a#requestPrice is clicked and my function runs. I need a way to tell when RequestPriceInfo() has been fired and completed, but there is no callback parameter on RequestPriceInfo() and I don't have access to the script to alter it and add one.
Potentially Useful Info: There is a variable, priceRequested, which is changed from false to true when RequestPriceInfo() runs. Though I realize nothing about this solution is going to be elegant, it seems unreasonable to use Object.prototype.watch() to monitor the variable, but I'm running out of ideas.
How can I detect when RequestPriceInfo() has completed to execute my function without editing the function to add a callback parameter?
What about using CSS... your script could add a class to <div id="priceinfo"></div>, like maybe <div id="priceinfo" class="newButton"></div>. Then, in the CSS, you'd hide the img for #priceInfo.newButton and insert your new image as a background image for the anchor.
Here's one way
var oldRequestPrice = RequestPriceInfo;
RequestPriceInfo = function(){
oldRequestPrice();
// Function completed, handle here
}
EDIT
As the question seems to imply that RequestPriceInfo is an asynchronous API call, have a look at this question: Add a "hook" to all AJAX requests on a page
This will keep track of all Ajax requests happening on the page. You can pick out the one you need and fire your function/code on its success.
I'm trying to make a simple site with two pages, "Search" and "Results".
At first, I had a multi-page template working fairly well. I would change the page, and on page change I would use ajax to get the results. The problem was that I wanted to be able to load the results page without first going back to the search page.
I want to pass parameters to the results page via the querystring so that I can have something like this:
search.html + "some search terms" -> results.html?q=some+search+terms
The problem is that I can't seem to get anything to work right when I split up the html into two files.
I try calling
$.mobile.changePage("results.html?q=" + escape(search))
on the search page, but the $(document).ready function is not firing. I kind of get why it doesn't, since changePage is loading the second page into the DOM?
I also tried manually redirecting, in which case the $(document).ready function does fire on results.html, but using the back button or going back to the search page doesn't fire THAT $(document).ready.
I tried wiring up the pagechange function to search.html, assuming that this would fire when I load the second page, but nothing happened.
Does anyone have suggestions as to how I would pull this off? Or the best way to get the results page to act more independent of the search page?
I've been bitten by this too, it really isn't a good idea to pass parameters through the query string and it makes jQueryMobile behave in an odd way.
Instead I've been using sessionStorage which works perfectly. You could also use a cookie.
I'm not 100% sure where you're actually having issues, but here is some important jQuery Mobile specific info that can help you.
First, read the big yellow section at the top of this page: http://jquerymobile.com/demos/1.1.0/docs/api/events.html
document.ready does not fire when a page is brought into the DOM from an external document. Instead you need to use event delegation and the page-events specified in the link above. Most likely you want to use pageinit as a replacement for document.ready.
Then read the top section of this page: http://jquerymobile.com/demos/1.1.0/docs/api/methods.html (the part about $.mobile.changePage()).
The important part about the second link is that you can pass data via the $.mobile.changePage() function like so:
$.mobile.changePage('results.html', { data : { q : search } });
You can even set the type option to post so there will not be a query-string sent (this should ensure you don't get multiple of the same page in the DOM at a time).
$.mobile.changePage('results.html', { data : { q : search }, type : 'post' });
Another fix would be to manually add the data-url attribute to the <div data-role="page" id="results"> page. When you grab a page like this:
$.mobile.changePage("results.html?q=search+term+here");
It's data-url gets set to: results.html?q=search+term+here. If you manually set the data-url to results.html then you can navigate to the page like this:
$.mobile.changePage("results.html", { data : { q : 'search+term+here' } });
Which will look first for the data-role="page" element that has the data-url attribute set to results.html before re-loading the pseudo-page via AJAX.
Thanks for the input guys. I used a plugin that allows me to use faux-query parameters in the hash for a multi-page layout.
https://github.com/jblas/jquery-mobile-plugins/tree/master/page-params
I just added this in and ran the search on page change, getting those page parameters for the search.
I perform a function which loads content into a div. I am using innerHTML, I GET a php file, which updates the innerHTML of the div with the php file's content.
This div contains another div inside it with the class and id of "tweet". This div is updated with actual tweets of a specific hashtag, passed to the function through a $variable
It works fine when it is simply an onclick event, such as this:
<p>activity</p>
<div class="tweet" id="tweet"></div>
However, what I want to do is have it automatically load tweet('') once the "tweet" div has loaded.
The tweet(hashtag) function is:
function tweet(hashtag) { $("#tweet").load('tweet.php?hashtag='+hashtag); }
which loads a php file that calls the jquery tweet function.
jQuery(function($){
$(".tweet").tweet({
avatar_size: 32,
count: 3,
query: "<?echo $hashtag;?>",
loading_text: "loading tweets...",
refresh_interval: 3
});
});
Based on the hashtag passed, it shows 3 tweets.
The hashtag is called when the page is loaded, as a session variable.
It all works fine when I click the link. What do I need to do to have this load automatically. so that I don't need to click the link? I have tried a number of autorefresh options but couldn't quite get it. I would really appreciate assistance.
I know that, if this was just a regular page being loaded, I can simply use $(document).ready and call the jquery function. However, due to the way the div is populated with the new php file contents, it doesn't work. I have tried a few times using autorefresh intervals, window onload, etc. They don't seem to work either.
There are two ways to try this:
Run the code somehow from the function which you call to load the div. (Guaranteed to work. You may even put together some kind of plugin concept. "eval" may be useful.)
Add a tag after the div. If things work as you hope, that code will execute immediately.
I have a US HTML image map with the states highlighted with coordinates. Each state when clicked will bring up a modal window with facilities locations.
Right now I have it where each state has an ID, the user clicks on the hotspot and then it loads the facilities locations with external HTML via jQuery .load() to lighten the document load.
Here's an example in the JS
$('#Alabama').load('locations/Alabama.html');
and then the container that will load Alabama html in the main document is
<div class="overlay" id="Alabama"></div>
As you can see I have to enter these in for each state. Obviously this is tedious and probably not the best method. DRY comes to mind but I'm not good at writing Javascript from the ground up.
What would be the best way to access the state IDs without writing each state instance? I'm thinking a JSON object with a click function that constructs the markup and calls the modal window. I'm just not sure where to begin.
If it's a modal window, then you could probably just use the same overlay each time a state is clicked. So basically just do this...
$(".overlay").load("locations/alabama.html");
A full example might look something more like this though...
$("area").click(function(){
var url = $(this).attr("href");
$(".overlay").load(url);
});
You may have to do something to prevent the browser default behavior of navigating on the clicked area. You could remove the href values and put them somewhere else...
$("area").each(function(i, area){
$(area).data("old-href", $(area).attr("href");
$(area).attr("href","#");
});
//Then you do the same as above, but you get your url from the data method.
$("area").click(function(){
var url = $(this).data("old-href");
$(".overlay").load(url);
});
I am using this code to refresh the data inside of the div:
<script>
$(function() {
$("#refresh").click(function() {
$("#new").load("/new.php")
})
})
</script>
Except it loads the who page inside of the div, instead of just the information that is inside of the div.
How do I make it refresh only the data that is inside of the div? Is there a way of doing it other than putting the information for that div in a seperate page?
If you mean that new.php is a script that returns the entire page, the answer is no.
You have to send just the html fragment you need for refreshing the div.
You can always get the result from new.php, take the good part and discard the rest but it is inefficent.
You can load page fragments with 'load'. Say the information you need is inside a div called "#info" on new.php, change the load line to this:
$("#new").load("/new.php #info")
If you were refreshing data from the server you have to reload the whole page/frame (you could request the client to cache images, CSS, etc.) or use Ajax.