Here is the problem:
I have a page e.g www.app.com/home and I have some windows that are added in a slide way to the DOM via jquery. One of those windows has the functionality of looking into a gmail account for contacts.
This is done in this way:
User is in the home page.
Clicks the search Friends button, and a window with many options
slides in (added by jquery, rthe content is in another .gsp)
Clicks the option gmail and it redirects to googles oauth,
permissions and account selection, where he must accept the access
to his/her contact list.
Once accepted, it redirects to my home page again, where I have a
var to know if its the callback from google, so I ran the script
that shows the popup again.
The problem Im having, is that from the home page itself, I can access the model passed by the controller that has the ${friendList}, but when I add some code to the popup window, the ${friendList} is not detected.
I have used grails render templates to solve this problem in the past. You can have a hidden div that jquery unhides when it is popped up. e.g
<div id="theSlideWindow" style="display:none">
<g:render template="gsptemplate" collection="${friendList}" var="myfriend" />
</div>
Now when the button is clicked, jquery will unhide the div and animate it however you are animating it. Now this is not very efficient depending on the size of friendList because it is loaded with every refresh.
But you can still make jquery load work by doing the following:
add user id to a hidden input.
<input type="hidden" value="${userid}"/>
use jquery so send the id as a param:
$('button').click(function() {
var page = "gspurl/show?userid=" + $("#hidden").val();
$("div").load(page, function(response, status, xhr) {
//do something here
});
return false;
});
In your gsp use userid to load friendList.
Another alternative would be to use a controller that returns html or json instead of a gsp.
Obviously, there several different ways of passing friendList around but hope this gives you some ideas.
Related
Description:
I created this workflow: PHP loads content from a database to certain textareas. The user can edit and save content.
I created a HTML template which can be printed directly from the web browser.
So the user clicks on the "Print" button and gets a nice template which can be printed directly from the browser.
Goal:
I want jQuery or JavaScript to load / transfer the content from the input fields to another HTML document on the server, in certain div-classes.
Is this generally possible or a good idea?
Afterwards, this becomes loaded and the print dialogue of the web browser will be opened.
Present Code:
$(document).ready(function() {
$( ".print-button" ).click(function() {
$('html').load("./views/print/template-1.html");
setTimeout(function(){
window.print();
}, 1000);
})
window.onafterprint = function(e){
$(window).off('mousemove', window.onafterprint);
window.location.href = window.location.href;
};
});
So template-1.html should get the data.
First of all I think it would be a good idea to support the build in functionality of the browser. The user should be able to hit Ctrl+P or use the menu to open the print dialog.
My suggestion would be to create a <div> element that is hidden. On some event, like when the <textarea> is changed, update the <div> element with the content. Create a stylesheet for printing where the <div> element is visible and hide elements that are not for printing (like the <textarea>).
As per the description, you have mentioned that you are allowing PHP to load the data in certain text-areas and allows user to update that, so when you update this data, it'll be saving into the database for that particular text-area.
What best you can do here is keep one unique key for that shown data and when you redirect the page bind the unique key along with the page URL, so using that key on the new page where you have the template, you can get the data using select query and you can print the data wherever you want.
Afterwords on print click, the template will have the data filled in and so the user will be able to download/print the template with data, the way you wanted.
Or
If you don't want to use the PHP for getting data on the new document, you can simply pass the data object in localstorage by using below way :
var content= <your data Object>;
localStorage.setItem('print_content', content);
Now before loading the dialogue, get the data from localstorage variable and print it to div or area wherever you want. For getting data from localstorage use below way:
var printData = localStorage.getItem('print_content');
using printData var, you'll be able to get the data and using jQuery syntax you'll be able to append or display the data to div.
I have a homepage with a register button. When clicked it displays a hidden div where the form is. I have a "Register" button in one of my inner pages of my website. Whenever it's clicked I want it to open the homepage and display the hidden register form without it being hidden. How can I do this?
As #Barmar commented, a way could be to pass a parameter to the URL
Another possibility is to use HTTP referer
var x = document.referrer;
and checking on document.ready if you should hide or show your registration form, depending on referrer value.
Remember that HTTP referer is totally client side managed, so it could be hacked (if important in your case)
use css in your hidden <div id="reg"> display:none;
while click a link or button use onclick="showDiv();" to show that div
in js function
showDiv(){
document.getElementById("reg").style="display:block;";
}
first adding id on within <a> just like
and then use this script
$('#atagId').click(function() {
var someId = $(this).attr("id");
window.open('SECOND.html/#'+someId);
});
Got a page where users make comments on any desired post. Each post has a form with just one textarea field created dynamically from js and I'm wondering if anyone has an idea on how to save and restore the comment being typed by a user (i.e save whatever a user has typed so far before ajax refreshes the div holding all the post and comments and then restore back after the div refresh)
Tried creating something around this but not getting it to work:
<textarea id="comment_field" onKeyUp="return saveAndRestoreTypedStrings(this)"></textarea>
or
<textarea id="comment_field" onchange="saveAndRestoreTypedStrings(' + id + ');"></textarea>
The function:
function saveAndRestoreTypedStrings(id){
document.getElementById("post_comment").onchange = function() {
localStorage['post_comment'] = document.getElementById(id).value;
}
window.onload= function(){
if(localStorage['post_comment'])
document.getElementById(id).value = localStorage['post_comment'];
}
}
To identify the form a user is on, a unique id for that form had to be passed to the saveAndRestoreTypedStrings(id) function.
For clarity, ajax only refreshes the div holding all the posts and comments made on each post. So, that div is refreshed for latest posts and comment every 3 seconds and if a user is typing to make a comment on a post and ajax reloads the div content, the user loses whatever is being typed.
Would be pleased to get ideas around this....
window.onload fires up when the page is completly loaded soo i dont think this would apply for your case.
why dont you try using a callback function after AJAX is complete so you can "restore" the info by calling localStorage ?
Note: sorry, i cant comment yet.
I am trying to rerun a block of javascript when the user clicks on a button. The site was created in a CMS so I do not have access to the button to give it an id. However, in firebug I noticed it has these values ->
<input type="submit" value="Continue">
Is there anyway I can call to this by using the value of 'Continue'?
FYI: the button is coded with php and I want to rerun the following
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript">
$(window).load(function resizePole(){
var ht=($('#LayoutColumn2').height() > $('#LayoutColumn3').height()) ?
$('#LayoutColumn2').height() : $('#LayoutColumn3').height(); $('#lightPole').height(ht); }); </script>
and I am attempting to call this using:
onclick="return resizePole();"
Oh and I know next to nothing about javascript :)
Link to page working on - you may have to create a customer account. Enter some jibberish and I can delete it later
link to site
What the problem is: Ok let me explain what should be happening. I have created a div called 'lightpole' this div contains a background image of a lightpole that is coded with javascript to match the height of the 'content' div when the page loads. On the checkout_express page the creators of the CMS system have created expanding and collapsible divs that guide the user through the checkout process. On the third step 'Shipping Method' the user clicks on the 'Continue' button which expands the 'Order Confirmation Step'. This div causes the 'content' div to be longer than on initial loading but the lightpole was only sized to match the inital height of the content, not the added height of the Order Confirmation Step so it causes the lightpole to be shorter than it actually needs to be.
This will work.
$('[type="submit"][value="Continue"]').click(function () {
{
return resizePole();
});
EDIT
As pointed out in the comments, there is a more concise way to do this. I typically use the method above out of habit (makes it easier to add future logic to the click event).
$('[type="submit"][value="Continue"]').click(resizePole);
EDIT 2
To answer the question in the comments - yes, you can filter by the div ID as well. This will attach to the click event of all submit buttons inside a div with an id of DivIdHere and a value of Continue.
$('#DivIdHere [type="submit"][value="Continue"]').click(resizePole);
EDIT 3
This is a bit dirty, but after looking at your updated requirments, this should do the trick. Basically, it adds the click event to the last submit button on the page that has a value of continue (which appears to be the shipping section based on the link you provided).
$('[type="submit"][value="Continue"]:last').click(resizePole);
I'm trying to create a page on my site where the Like button should be hidden if the user already likes the page. If I can't hide it, then maybe there's a way to get a callback when the like button is rendered with a user who already likes the page. This way I can hide/reveal the iframe myself.
Any clues?
Howie
Assuming you can echo the ids of the like buttons to the page for the likes you want hidden/get from a JSON call.
var hideLikes = ["#like1", "#like2", "#like3", "#like4", "#like5"];
var hideLikesSelector = hideLikes.join(",");
$(hideLikesSelector).hide();
You should not hide the Like button as you're suggesting. It is against Facebook policy to hide it after the user has liked the thing in question, you should give them the opportunity to unlike it if they chose to do so.
#Graphain, why are you commenting? You have no valid input.
#Others, I have been trying this too and had it working by looking at the opacity of certain tag's classes but it no longer works again. You can make an api call to /me/likes and go through the returned array to look at each name or id...
Hope that helps.