I'm trying to get a value from combobox inside a formPanel to pass it to a protocol url (of openlayers.protocol.http). This is the url, based on http://jsbin.com/ireqed/2/edit, that I want to get (in the case I'd choose "cars" in the combobox and enter "cool" in textfield):
http://www.mop.org/fs/cars?format=GeoJSON&comments__ilike=cool&queryable=comments
after testing, I finally can get the URL I want after choosing one value in combobox and entering a word in textfield (as above).
To send this new URL in the protocol in formPanel, I use an autoLoad call in the handler function of my search button, I think this is sending the url but it's not catched by the protocol itself (ie. XMLHttpRequest.js) but for ExtJS. So, the GeoJSON output is displayed in the formPanel. I attached three PNGs to show this: , , .
In firebug, once 'search' button is pressed two URLs are called, the first one is the URL I want to replace in the url of the protocol, but it goes to ext-base.js, which is the wrong place. The second one, I actually don't know why is sent, goes to XMLHttpRequest.js which is the right place, but it shouldn't be sent.
So, before the url must be sent in the first place, I need to change it, how could I do it? btw it seems to me it is replacing an inexistent url which belongs to ExtJS, pls help, thanks
UPDATE #1:
getting closer... because adding OpenLayers.loadURL(myurl, {}, null, function(response){}); in the handler function sents the url to XMLHttpRequest.js (right place), but just immediately another url (from the formpanel) is sent to the same place and this covers the right one, is there a way to add some timing to the openlayers.loadurl function? I understand this function works asynchronously (that's why is faster and gets submitted first than the second one), is there a way to just overwrite the second one?
The solution was to take the protocol outside the formPanel and use only "protocol.options.url = newUrl;", a complete explanation is here
Related
I have designed a page to be used as a tool. I am getting some challenges here since my experience is very little in the field and im only new.
- my goal is to change values of an element on a page that is not open yet.
- is there a function i can make on current page to change the values of the element on the next page to preset it to some static numbers or some of them are dynamic
I dont know how to manipulate something that is not open yet, i dont even know if that's something possible. I was able to change elements on my open current page, but dont know how to change something on the next page if i click on one of the links
Park Property Management
Millgate Manor
Weston Towers
Kingston
Region Of Peel
so i expect to click on one of the links and when the link opens some elements in the links i need them to be filled with some values that are static always
You can't directly influence the content of another page with JavaScript in the current page. That would have very big security concerns.
However, you could indirectly influence the content if you have access to the source for both pages, and can add JavaScript to both of them. Then, as some comments suggested, you can for example use search paramaters in the link url to pass along information.
(Search parameters are the stuff that comes at the end of a url sometimes and looks something like ?name=john&id=555)
You can read more about about working with search parameters in JavaScript here:
https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams
Don't get discouraged! You're capabilities will grow as you try to make things work. (That's almost the only time they will grow.)
A word of caution!
Please be very careful when using search parameters to modify or display content on a page as there are some real security concerns involved. Never display anything from the search parameters directly on the page without validating the input first. A good way to handle dynamic content based on search parameters, at least if you know the possible options available, is to have some if .. else statements or maybe a switch block that you try to match the search parameters against, and simply not display anything at all if the content of the parameter does not match any input that you're expecting.
I use Select2 as an auto suggest. That means, I fetch options from a remote source via ajax. This works perfectly.
Now, the customer wants to have all options loaded before he starts typing. That kind of defeats the purpose of an auto suggest, but if he wants it that way, he shall have it.
Anyways, I would need to display the first 50 or 100 elements before the user starts typing and after the third typed character the Select2 input should fetch the options again.
I tried prepopulating the select with option values (for example "aa","bb" and "cc"), but it only displays the placeholder. Is it possible to send a request as soon as the user clicks on the select? That would be a possibility too, since the remote source could send back the first 50 results. If anyone could steer me in the right direction, I would be thankful :)
A quick workaround if anyone will have the same issue:
set the "minimumInputLength" to 0. This way a request will be sent as soon as the user opens the Select2 input element. The search parameter will of course be an empty string.
in the "processResults" function add a logic to allow pagination. The returned object needs a "pagination" property with a boolean member called "loadMore". You can read more about that here: https://stackoverflow.com/a/29022107/430997
This way you just enabled infinite scrolling. Of course you need support for paginated results on the serverside too.
Optionally you can fetch sources from different locations. The "url" parameter of the ajax option can be a function. If you want to call different endpoints based on the number of characters (mostly to check, if the number of characters is 0), you can check for it inside the url function and return the appropriate endpoint.
This is just a workaround and only simulates initial values. If anyone has a real answer to my question, please post it :)
I am creating a website for a clothing brand but am still getting started with my web dev work. I have an index page with several clothing items on it. When a user hovers over the picture of the item then a hover over effect comes into play and a small "View Item" appears over the item. When the user clicks this "View Item" text it opens a new page with that particular page's info.
The part I am struggling with is how I send the parameter to this item page as I will need some way of knowing what item was clicked. Can I write a jQuery function that will fire when the text is clicked and perform a .post() method to the item.php page passing along the item ID ?
So it would be something like
$.(document).ready( function() {
$("#itemText").click( function() {
$.post("item.php", parameters);
});
})
POST isn't the proper protocol for that. Use GET instead.
GET is vary easy to use with HTML links; it is what happens every time you click a link on a website. Say the page is "products." If the user clicked on product 1, than the URL for that page could potentially be "products/?id=1" (or products/1 if you are using mod_rewrite). The "id" variable with a value of "1" will be available to the PHP via $_GET['id']. With that variable, you can retrieve the proper information based on the id.
POST is for forms where users are submitting fields of data or images. http://html.net/tutorials/php/lesson10.php
If you are attempting to build a pure Javascript solution, then that is an entirely different matter. In that situation you would use Hash tags or HTML5 History API to change the URL. When the URL changes, Javascript is notified, and then whatever actions can occur. However, based on the fact that you specifically said "POST" I am assuming you are using a server-side language like PHP.
If you are opening a new page, you should not POST. If you must POST, you should POST then Redirect, although since you are not actually performing an action I recommend just sticking with a GET request. This way the newly opened page can easily be refreshed and shared by the viewer.
The most elegant way is to use rewrite rules or a router on your server so you can communicate which item to display, for example: http://example.com/item/1/
However you can also just use a GET parameter: http://example.com/item/?id=1
If you need to communicate to Javascript that will be executed on a page you can also use a hash: http://example.com/item/#1
There are several options using GET depending on how you display the item information, and what server-side technology you use.
Facebook, Google+, and Twitter (I've not checked or tested any other platform, but if they provide a "share URL" then they should work as well) all provide pre-built JS buttons that, for many different reasons, a lot of people do not want to use. Whether it's because you want to use your own custom icon, or you don't like how much code they use, or you don't like how they function, or any other reason.
These social media platforms also, however, provide a simple alternative that allows you to use your own custom icon and are very very simple in how they work on the web developer side. (The Facebook documentation on their developer page does not reflect the method that I'll be using, as they no longer "support" the old "share URL". It does, however, still work for now, and the principle remains the same if you wish to use their new manual "share URL").
The way they work are quite simple in principle: They provide a URL with syntax on the end that allows you to manually type the URL that you would like to share. The problem with this solution is that you would have to manually type in the URL of each page every time. And if you are using PHP includes or SSI for your share button (which I am doing), then it's not only not feasible, but it's impossible because you only have one instance of the share button that exists.
So how would one be able to make their own simple social media sharing buttons that will automatically grab the current page's URL?
This solution should work on ANY social media platform that gives you a custom share URL (that is to say, a url that allows you to manually type in an address to share).
Here is how it all works (and if anyone has any suggestions or tweaks that have more experience with JS, please let me know).
I assign variables to the document.URL and document.titleproperties.
I write a named function (I called mine, socialShare) that is set to run via an anonymous function on the window.onloadevent.
The socialShare function assigns variables to the location of my social button's within the HTML. In my case, I used IDs to locate the elements. The purpose of these variables is purely for aesthetics (I use these variables to re-write the the HTML code dynamically, so that when you hover over the share button, it displays the correct URL for sharing the current page you are on)
var fbShare = document.getElementById("fbShare");
var gplusShare = document.getElementById("gplusShare");
twitterShare = document.getElementById("twitterShare");
I then write three separate anonymous functions, one for each social media platform. Each function has two statements. The functions work as follows: the first part is the variable assigned to the location of the HTML element with the ID fbShare. The second part tells it to run the function when that element is clicked; .onclick. The third part is the anonymous function that will run when that element is clicked. The first statement of this function will open a new window; window.open; and in that new window, it will open the URL that is specified by feeding the window.open method parameters. The parameters are as follows (URL,name,specs) where URL is the URL you want to share, name is optional and left blank as seen by the empty set of quotes, and finally specs is where you specify attributes of the window (IE: width and height). The first parameter, the URL: ("https://www.facebook.com/sharer.php?u="+currentURL, currentURL is the global variable that was assigned earlier and will place whatever the current documents URL is, in place of currentURL. The second parameter, the name: "", This is left blank, as it is optional. The third parameter, the specs: "height=368,width=600,left=100,top=100,menubar=0"); These are a comma-seperated list of items. In my case, I've specified a height, width, and the location of the window, as well as disabled the menubar. Finally, the second statement, return false; tells the browser NOT to follow the link inside the HTML code. If this was not specified, then the browswer would follow the URL in the HTML, AND open a new window. For more information on the window.open method, please see the link at the bottom of this new answer.
fbShare.onclick = function() {
window.open("https://www.facebook.com/sharer.php?u="+currentURL,"","height=368,width=600,left=100,top=100,menubar=0");
return false;
}
gplusShare.onclick = function() {
window.open("https://plus.google.com/share?url="+currentURL,"","height=550,width=525,left=100,top=100,menubar=0");
return false;
}
twitterShare.onclick = function() {
window.open("https://twitter.com/share?url="+currentURL+"&text="+currentTitle,"","height=260,width=500,left=100,top=100,menubar=0");
return false;
}
And finally, I modify the HTML href elements of each social media button so that when the user hovers over the share buttons, they see the correct Share URL displayed in their browsers status bar. The first part of this statement grabs the element id, fbShare and the second part tells it to set an attribute, .setAttribute. Then we pass in the attribute name that we want to change, ("href", in this case, and then we pass in what we would like the new attribute value to be, "http://www.facebook.com/sharer.php?u="+currentURL); currentURL is the same here, as earlier. It is the variable that holds the value for whatever the current page's URL is.
fbShare.setAttribute("href","http://www.facebook.com/sharer.php?u="+currentURL);
gplusShare.setAttribute("href","https://plus.google.com/share?url="+currentURL);
twitterShare.setAttribute("href","https://twitter.com/share?url="+currentURL+"&text="+currentTitle);
That's about all there is to it! I hope I wrote this well and I hope it is relatively easy to follow. If any pros out there have any suggestions, please feel free to toss in and give your advice! :)
My JS file
http://jrltest.host-ed.me/_js/share.js
Link to information on the window.open method at w3schools.com
http://www.w3schools.com/jsref/met_win_open.asp
Link to information on the .setattribute method at w3schools.com
http://www.w3schools.com/jsref/met_element_setattribute.asp
I hope that this will help someone!
I'm a student stuyding the bioinformatics.
I'm trying to make a crawler where I can put the lists of queries and get the results automatically.
The site I'm interested in is the GEO DataSet site.
www.ncbi.nlm.nih.gov/gds/
If I wish to send a query like 'lung cancer', I can use the following address.
http://www.ncbi.nlm.nih.gov/gds/?term=lung+cancer.
And there are 549 pages showing up.
I can get the results of the first page, but I don't know how to move to the next page.
I mean, how can I move to the next page by changing the URL?
The Next button is linked as "www.ncbi.nlm.nih.gov/gds/?term=lung+cancer#" and I don't think it's the actual URL that button is linked to.
I'm new to the JavaScript, but I heard the hash sign (#) is processed in the JavaScript
I wonder if there is something I can do like
"http://www.ncbi.nlm.nih.gov/gds/?term=lung+cancer&page=2"
so that I can move to the second page.
If you use any debugger tool (Firebug for Firefox, WebDeveloper for Chrome) you should be able to monitor the network traffic. If you do that, you'll see, that by clicking the next button a form is submitted, sending data via post method. However, when concatenating the post data to a get string you can also get to the next page. The following url lets you access to second page of the result set (warning: really, really long!):
http://www.ncbi.nlm.nih.gov/gds/?term=lung+cancer?term=lung+cancer&EntrezSystem2.PEntrez.Gds.Entrez_PageController.PreviousPageName=results&EntrezSystem2.PEntrez.Gds.Gds_ResultsPanel.Gds_DisplayBar.sPresentation=docsum&EntrezSystem2.PEntrez.Gds.Gds_ResultsPanel.Gds_DisplayBar.sPageSize=20&EntrezSystem2.PEntrez.Gds.Gds_ResultsPanel.Gds_DisplayBar.sSort=none&EntrezSystem2.PEntrez.Gds.Gds_ResultsPanel.Gds_DisplayBar.FFormat=docsum&EntrezSystem2.PEntrez.Gds.Gds_ResultsPanel.Gds_DisplayBar.FSort=&EntrezSystem2.PEntrez.Gds.Gds_ResultsPanel.Gds_DisplayBar.FileFormat=docsum&EntrezSystem2.PEntrez.Gds.Gds_ResultsPanel.Gds_DisplayBar.LastPresentation=docsum&EntrezSystem2.PEntrez.Gds.Gds_ResultsPanel.Gds_DisplayBar.Presentation=docsum&EntrezSystem2.PEntrez.Gds.Gds_ResultsPanel.Gds_DisplayBar.PageSize=20&EntrezSystem2.PEntrez.Gds.Gds_ResultsPanel.Gds_DisplayBar.LastPageSize=20&EntrezSystem2.PEntrez.Gds.Gds_ResultsPanel.Gds_DisplayBar.Sort=&EntrezSystem2.PEntrez.Gds.Gds_ResultsPanel.Gds_DisplayBar.LastSort=&EntrezSystem2.PEntrez.Gds.Gds_ResultsPanel.Gds_DisplayBar.FileSort=&EntrezSystem2.PEntrez.Gds.Gds_ResultsPanel.Gds_DisplayBar.Format=&EntrezSystem2.PEntrez.Gds.Gds_ResultsPanel.Gds_DisplayBar.LastFormat=&EntrezSystem2.PEntrez.Gds.Gds_ResultsPanel.Entrez_Pager.cPage=1&EntrezSystem2.PEntrez.Gds.Gds_ResultsPanel.Entrez_Pager.CurrPage=2&EntrezSystem2.PEntrez.Gds.Gds_ResultsPanel.Gds_ResultsController.ResultCount=10973&EntrezSystem2.PEntrez.Gds.Gds_ResultsPanel.Gds_ResultsController.RunLastQuery=&EntrezSystem2.PEntrez.Gds.Gds_ResultsPanel.Entrez_Pager.cPage=1&EntrezSystem2.PEntrez.Gds.Gds_ResultsPanel.Gds_DisplayBar.sPresentation2=docsum&EntrezSystem2.PEntrez.Gds.Gds_ResultsPanel.Gds_DisplayBar.sPageSize2=20&EntrezSystem2.PEntrez.Gds.Gds_ResultsPanel.Gds_DisplayBar.sSort2=none&EntrezSystem2.PEntrez.Gds.Gds_ResultsPanel.Gds_DisplayBar.FFormat2=docsum&EntrezSystem2.PEntrez.Gds.Gds_ResultsPanel.Gds_DisplayBar.FSort2=&EntrezSystem2.PEntrez.Gds.Gds_ResultsPanel.Entrez_Filters.CurrFilter=all&EntrezSystem2.PEntrez.Gds.Gds_ResultsPanel.Entrez_Filters.LastFilter=all&EntrezSystem2.PEntrez.Gds.Gds_ResultsPanel.Gds_MultiItemSupl.Taxport.TxView=list&EntrezSystem2.PEntrez.Gds.Gds_ResultsPanel.Gds_MultiItemSupl.Taxport.TxListSize=5&EntrezSystem2.PEntrez.Gds.Gds_ResultsPanel.Gds_MultiItemSupl.RelatedDataLinks.rdDatabase=rddbto&EntrezSystem2.PEntrez.Gds.Gds_ResultsPanel.Gds_MultiItemSupl.RelatedDataLinks.DbName=gds&EntrezSystem2.PEntrez.Gds.Gds_ResultsPanel.Discovery_SearchDetails.SearchDetailsTerm=%22lung+neoplasms%22%5BMeSH+Terms%5D+OR+lung+cancer%5BAll+Fields%5D&EntrezSystem2.PEntrez.Gds.Gds_ResultsPanel.HistoryDisplay.Cmd=PageChanged&EntrezSystem2.PEntrez.DbConnector.Db=gds&EntrezSystem2.PEntrez.DbConnector.LastDb=gds&EntrezSystem2.PEntrez.DbConnector.Term=lung+cancer&EntrezSystem2.PEntrez.DbConnector.LastTabCmd=&EntrezSystem2.PEntrez.DbConnector.LastQueryKey=1&EntrezSystem2.PEntrez.DbConnector.IdsFromResult=&EntrezSystem2.PEntrez.DbConnector.LastIdsFromResult=&EntrezSystem2.PEntrez.DbConnector.LinkName=&EntrezSystem2.PEntrez.DbConnector.LinkReadableName=&EntrezSystem2.PEntrez.DbConnector.LinkSrcDb=&EntrezSystem2.PEntrez.DbConnector.Cmd=PageChanged&EntrezSystem2.PEntrez.DbConnector.TabCmd=&EntrezSystem2.PEntrez.DbConnector.QueryKey=&p%24a=EntrezSystem2.PEntrez.Gds.Gds_ResultsPanel.Entrez_Pager.Page&p%24l=EntrezSystem2&p%24st=gds
This complete GET string contains all search parameters like items per page, search terms, display and way more. You should be able to figure out which parameter is used for the offset (cPage and CurrPage are your friends) and then alter it to your needs.
EDIT: Btw, to find javascript events bound to an HTML element, you can use the bookmarklet found at http://www.sprymedia.co.uk/article/Visual+Event+2