I have a url containing a hash e.g http://www.acme.com/home.xsp#key=1234
When the url above loads in the browser I need to call a serverside javascript based on the value in the hash.
I have found a few ways of retriving the hash client side like this
var key = getHashUrlVars()["key"];
so I have the key available in my client side script in the onclientload event.
So in the same onClientLoad event I now need to call my server side javascript method so I have tried the following
'#{javascript:doStuff(key)}'
'#{javascript:doStuff(' + key + ')}'
..and a few other ways. but I can't get it to work.
maybe there is an XSP command I can use instead?
any ideas how to solve this?
You could do a XSP.partialRefreshPost in CSJS and use parameters to send your data to the server:
var p = { "key": getHashUrlVars()["key"] }
XSP.partialRefreshPost( '#{id:_element_to_refresh_}', {params: p} );
To access the parameters in SSJS just try this:
doStuff( param.key )
You could use an empty div-element as a target execute the SSJS code. Or you can use the executeOnServer - method: http://xpages.info/XPagesHome.nsf/Entry.xsp?documentId=88065536729EA065852578CB0066ADEC
Hope this helps
Sven
Related
I was following along Programming Phoenix but using Elm for my front end, rather than Javascript. The second part of that book describes how to use websockets. The book's running example has you create an authentication token for the client side to pass to Phoenix at connection creation time. The Javascript Socket class provided with Phoenix allows that, but there's no obvious way to do it in Elm (as of 0.17 and the date of this question).
As in the book, make the token visible to Javascript by attaching it to window.
<script>window.auth_token = "<%= assigns[:auth_token] %>"</script>
In web/static/js/app.js, you'll have code that starts Elm. Pass the token there.
const c4uDiv = document.querySelector('#c4u-target');
if (c4uDiv) {
Elm.C4u.embed(c4uDiv, {authToken: window.auth_token});
}
On the Elm side, you'll use programWithFlags instead of program.
Your init function will take a flags argument. (I'm using the Navigation library for a single-page app, which is why there's a PageChoice argument as well.)
type alias Flags =
{ authToken : String
}
init : Flags -> MyNav.PageChoice -> ( Model, Cmd Msg )
Within init, tack on the token as a URI query pair. Note that you have to uri-encode because the token contains odd characters. Here's the crude way to do that. Note: I am using the elm-phoenix-socket library below, but the same hackery would be required with others.
let
uri = "ws://localhost:4000/socket/websocket?auth_token=" ++
(Http.uriEncode flags.authToken)
in
uri
|> Phoenix.Socket.init
|> Phoenix.Socket.withDebug
|> Phoenix.Socket.on "ping" "c4u" ReceiveMessage
I got here by a Tweet by Brian, about encoding from Elm.
In this case I like to handle it from the JavaScript side.
I tried to replicate the way the Phoenix client sets it up.
Instead of passing the token I passed the complete endpoint...
I've put the token in JSON a hash
<script id="app-json" type="application/json"><%= raw #json %></script>
Which I read on the client, and pass to the Elm embed
var data = JSON.parse(document.getElementById("app-json").innerHTML)
var token = encodeURIComponent(data.token)
var elm = window.Elm.App.embed(document.getElementById("elm-container"), {
socketEndpoint: "ws://" + window.location.host + "/socket/websocket?token=" + token
})
In my application, I'm building a query object some thing like below
Object {pointType: /analog/i, _id: Object}
I tried to store it in session variable,
Session.set("currentPointsQueryObject",queryObj);
Then on click event I'm getting this object
var res= Session.get("currentPointsQueryObject");
console.log(res);
but here I'm getting like below
Object {pointType: Object, _id: Object}
Meanwhile, I sent group_id to the server
by geting it from session variable like
var group_id=Session.get("currentGroupId");
which is working fine(it is displaying id in server log)
Then, I've tried storing it in global variable, which returning as expected
like below on click event
Object {pointType: /analog/i, _id: Object}
but when I sent it to server side method (Immediate line after console.log() )
Meteor.call("updateGroupPoints",res,function(err,data){
console.log("updated points");
console.log(data);
});
when I log res in server console, it is showing
{ pointType: {}, _id: { '$nin': [] } }
Althoug I have something in pointType, It is not passed to the server.
Anyone had idea, Is this the thing related storing?
You cannot directly serialize RegExp to EJSON, but you can:
var regexp = /^[0-9]+$/;
var serialized = regexp.source;
Send serialized and then deserialize:
new RegExp(serialized)
Take a look at : Meteor: Save RegExp Object to Session
/analog/i is a regular expression, right? Values stored in Session and values sent to methods must be part of EJSON values. Regular expression aren't.
There's a handy way to teach EJSON how to serialize/parse Regular Expressions (RegExp) as of 2015 documented in this SO question:
How to extend EJSON to serialize RegEx for Meteor Client-Server interactions?
Basically, we can extend the RegExp object class and use EJSON.addType to teach the serialization to both client and server. Hope this helps someone out there in the Universe. :)
Simply stringify your RegExp via .toString(), send it to the server and then parse it back to RegExp.
I'm loading some posts though AJAX and my WordPress pagination is using the following function to calculate paging:
get_pagenum_link($paged - 1)
The issue is that the pagination is getting created through AJAX so it's making this link look like: http://localhost:1234/vendor_new/wp-admin/admin-ajax.php
However the actual URL that I'm trying to achieve is for this:
http://localhost:1234/vendor_new/display-vendor-results
Is there a way to use this function with AJAX and still get the correct URL for paging?
I can think of three options for you:
To write your own version of get_pagenum_link() that would allow you to specify the base URL
To overwrite the $_SERVER['REQUEST_URI'] variable while you call get_pagenum_link()
To call the paginate_links() function, return the whole pagination's HTML and then process that with JS to only take the prev/next links.
#1 Custom version of get_pagenum_link()
Pros: you would have to change a small amount of your current code - basically just change the name of the function you're calling and pass an extra argument.
Cons: if the function changes in the future(unlikely, but possible), you'd have to adjust your function as well.
I will only post the relevant code of the custom function - you can assume everything else can be left the way it's in the core version.
function my_get_pagenum_link( $pagenum = 1, $escape = true, $base = null ) {
global $wp_rewrite;
$pagenum = (int) $pagenum;
$request = $base ? remove_query_arg( 'paged', $base ) : remove_query_arg( 'paged' );
So in this case, we have one more argument that allows us to specify a base URL - it would be up to you to either hard-code the URL(not a good idea), or dynamically generate it. Here's how your code that handles the AJAX request would change:
my_get_pagenum_link( $paged - 1, true, 'http://localhost:1234/vendor_new/display-vendor-results' );
And that's about it for this solution.
#2 overwrite the $_SERVER['REQUEST_URI'] variable
Pros: Rather easy to implement, should be future-proof.
Cons: Might have side effects(in theory it shouldn't, but you never know); you might have to edit your JS code.
You can overwrite it with a value that you get on the back-end, or with a value that you pass with your AJAX request(so in your AJAX request, you can have a parameter for instance base that would be something like window.location.pathname + window.location.search). Difference is that in the second case, your JS would work from any page(if in the future you end-up having multiple locations use the same AJAX handler).
I will post the code that overwrites the variable and then restores it.
// Static base - making it dynamic is highly recommended
$base = '/vendor_new/display-vendor-results';
$orig_req_uri = $_SERVER['REQUEST_URI'];
// Overwrite the REQUEST_URI variable
$_SERVER['REQUEST_URI'] = $base;
// Get the pagination link
get_pagenum_link( $paged - 1 );
// Restore the original REQUEST_URI - in case anything else would resort on it
$_SERVER['REQUEST_URI'] = $orig_req_uri;
What happens here is that we simply override the REQUEST_URI variable with our own - this way we fool the add_query_arg function into thinking, that we're on the /vendor_new/display-vendor-results page and not on /wp-admin/admin-ajax.php
#3 Use paginate_links() and manipulate the HTML with JS
Pros: Can't really think of any at the moment.
Cons: You would have to adjust both your PHP and your JavaScript code.
Here is the idea: you use paginate_links() with it's arguments to create all of the pagination links(well - at least four of them - prev/next and first/last). Then you pass all of that HTML as an argument in your response(if you're using JSON - or as part of the response if you're just returning the HTML).
PHP code:
global $wp_rewrite, $wp_query;
// Again - hard coded, you should make it dynamic though
$base = trailingslashit( 'http://localhost:1234/vendor_new/display-vendor-results' ) . "{$wp_rewrite->pagination_base}/%#%/";
$html = '<div class="mypagination">' . paginate_links( array(
'base' => $base,
'format' => '?paged=%#%',
'current' => max( 1, $paged ),
'total' => $wp_query->max_num_pages,
'mid_size' => 0,
'end_size' => 1,
) ) . '</div>';
JS code(it's supposed to be inside of your AJAX success callback):
// the html variable is supposed to hold the AJAX response
// either just the pagination or the whole response
jQuery( html ).find('.mypagination > *:not(.page-numbers.next,.page-numbers.prev)').remove();
What happens here is that we find all elements that are inside the <div class="mypagination">, except the prev/next links and we remove them.
To wrap it up:
The easiest solution is probably #2, but if someone for some reason needs to know that the current page is admin-ajax.php while you are generating the links, then you might have an issue. The chances are that no one would even notice, since it would be your code that is running and any functions that could be attached to filters should also think that they are on the page you need(otherwise they might mess something up).
PS: If it was up to me, I was going to always use the paginate_links() function and display the page numbers on the front-end. I would then use the same function to generate the updated HTML in the AJAX handler.
This is actually hard to answer without specific details of what and how is being called. I bet you want to implement that in some kind of endless-sroll website, right?
Your best bet is to get via AJAX the paginated page itself, and grab the related markup.
Assume you have a post http://www.yourdomain.com/post-1/
I guess you want to grab the pagination of the next page, therefore you need something like this:
$( "#pagination" ).load( "http://www.yourdomain.com/post-1/page/2 #pagination" );
This can easily work with get_next_posts_link() instead of get_pagenum_link().
Now, in order for your AJAX call to be dynamic, you could something like:
$( "#pagination" ).load( $("#pagination a").attr('href') + " #pagination" );
This will grab the next page's link from your current page, and load its pagination markup in place of the old.
It's also doable with get_pagenum_link() however you'd need to change the $("#pagination a").attr('href') selector appropriately, in order to get the next page (since you'd have more than one a elements inside #pagination
I'm using a script exactly like the one on the tutorial here, https://developers.google.com/apps-script/reference/ui/file-upload
However, despite using the syntax I keep getting e is undefined in the statement:
var fileBlob = e.parameter.dsrFile;
I think that means my function doPost(e) is probably wrong somehow. Here is my entire script below.
// Create Menu to Locate .CSV
function doGet(e) {
var app = UiApp.createApplication().setTitle("Upload CSV");
var formContent = app.createVerticalPanel();
formContent.add(app.createFileUpload().setName("dsrFile"));
formContent.add(app.createSubmitButton("Start Upload"));
var form = app.createFormPanel();
form.add(formContent);
app.add(form);
return app;
}
// Upload .CSV file
function doPost(e)
{
// data returned is a blob for FileUpload widget
var fileBlob = e.parameter.dsrFile;
var doc = DocsList.createFile(fileBlob);
}
e is undefined because you are not passing anything to doPost. You have to pass the needed object to doPost. Check where you call the function and what parameters do you pass to it if any. Even if you pass a parameter to that function, it holds undefined value. Make sure that you are passing the correct objects to your functions.
Your script should work perfectly. e is defined by Google Apps Script, not need to pass anything in particular is contains the fields of your form, in particular in this case the file you uploaded.
I would suspect you may be falling foul to the dev url vs publish url syndrome, where you are executing an old scrip rather that the code you are currently working on.
Be sure you script end with 'dev' and not 'exec'
https://script.google.com/a/macros/appsscripttesting.com/s/AKfyck...EY7qzA7m6hFCnyKqg/dev
Let me know if you are still getting the error after running it from the /dev url
I want to make an AJAX call to an HTML-returning page, extract part of the HTML (using jQuery selectors), and then use that part in my jQuery-based JavaScript.
The AJAX retrieval is pretty simple. This gives me the entire HTML document in the "data" parameter of the callback function.
What I don't understand is how to handle that data in a useful way. I'd like to wrap it in a new jQuery object and then use a selector (via find() I believe) to get just the part I want. Once I have that I'll be passing it off to another JavaScript object for insertion into my document. (This delegation is why I'm not using jQuery.load() in the first place).
The get() examples I see all seem to be variations on this:
$('.result').html(data);
...which, if I understand it correctly, inserts the entire returned document into the selected element. Not only is that suspicious (doesn't this insert the <head> etc?) but it's too coarse for what I want.
Suggestions on alternate ways to do this are most welcome.
You can use your standard selector syntax, and pass in the data as the context for the selector. The second parameter, data in this case, is our context.
$.post("getstuff.php", function(data){
var mainDiv = $("#mainDiv", data); // finds <div id='mainDiv'>...</div>
}, "html");
This is equivalent to doing:
$(data).find("#mainDiv");
Depending on how you're planning on using this, $.load() may be a better route to take, as it allows both a URL and a selector to filter the resulting data, which is passed directly into the element the method was called on:
$("#mylocaldiv").load("getstuff.php #mainDiv");
This would load the contents of <div id='mainDiv'>...</div> in getstuff.php into our local page element <div id='mylocaldiv'>...</div>.
You could create a div and then put the HTML in that, like this…
var div = $("<div>").html(data);
...and then filter the data like this…
var content = $("#content", div.get(0));
…and then use that.
This may look dangerous as you're creating an element and putting arbitrary HTML into it, but it's not: anything dangerous (like a script tag) will only be executed when it's inserted into the document. Here, we insert the data into an element, but that element is never put into the document; only if we insert content into the document would anything be inserted, and even then, only anything in content would be inserted.
You can use load on a new element, and pass that to a function:
function handle(element){
$(element).appendTo('body');
}
$(function(){
var div = $('<div/>');
div.load('/help a', function(){handle(div);});
});
Example: http://jsbin.com/ubeyu/2
You may want to look at the dataFilter() parameter of the $.ajax method. It lets you do operations on the results before they are passed out.
jQuery.ajax
You can do the thing this way
$.get(
url,
{
data : data
},
function (response) {
var page_content = $('.page-content',response).get(0);
console.log(page_content);
}
)
Here in the console.log you will see the inner HTML of the expected/desired portion from the response. Then you can use it as your wish