Need an alternative for iframes for jQuery ui tabs - javascript

I have a Spring based web app working with with jQuery Tabs.
I bulid up a data string (containg specific) and append to a URL
var hrefData = "?" + item1 + "&" + item2 + "&" + item3;
var href = "myURL";
href = href + hrefData;
basically I use the following to load the URL into my jQuery based tab:
$( ui.panel ).append( '<iframe frameborder="0" style="border:0px" src="'+href+'" width="100%" height="100%"></iframe>');
My servlet controller receives this URL and I get the paramaters from the string and process, returning the resulting data & page, which is displayed within the iframe stated above.
I dont want to use iframe for this. Can someone suggest an alternative solution or provide an example, to perhaps write the HTML to the tab panel instead, or something similar.
Thanks
I have also tried this:
$.get(href, function(data){
alert("Data Loaded: " + data);
$('ui.panel').append(data); // also tried .load(data);
});
But this doesn't work.
Please help

How about using jQuery load()?
$('ui.panel').load(href);
http://api.jquery.com/load/

How about using client side templates (handlebars.js, but many other very good alternatives).
The reply will be a simple JSON object that will be mapped into the client side template (instead of, say, a JSP page).

Related

Dynamically added path in URL going next to the variables. How can I move it before variables?

Just some intro:
In ecommerce template, "Symfony" based I'm loading all the products from available pages (Infinite scroll) using AJAX request. Everything working perfect when I have clear URL like this:
http://example.com/path
I'm loading products from available pages with ajax request, here some code to check (Note, not the whole functional code, but the part which affects URL):
$().ready(function(){
infiniteCollectionInit('{{ (request.url~'page1.ajax') }}');
});
function infiniteCollectionLoad(url, mode){
infiniteCollectionPage++;
url = url.replace('page1.ajax', 'page' + infiniteCollectionPage + '.ajax');
}
This simply adding page1.ajax, page2.ajax ... at the end of the URL
The problem starting at the point when filters are used in page, In that case the URL transforms to this:
http://example.com/path/?mode=grid&max=60&min=0&sort=newest
Now when scrolling down and it need to load next page's items the URL is:
http://example.com/path/?mode=grid&max=60&min=0&sort=newestpage1.ajax
Can anyone help me out to add the page1.ajax before variables like this:
http://example.com/path/page1.ajax?mode=grid&max=60&min=0&sort=newest
Thanks.
Should be something like this:
var u = new URL("http://example.com/path/?mode=grid&max=60&min=0&sort=newest")
var newUrl = u.origin + u.pathname + 'page.ajax' + u.search;
If URL is reused from the previous one than you might need to replace u.pathname with a fixed path. Otherwise you keep on adding to it.

Get title of page with link

I have a link in a texbox. When I click a button I want to take the title of the page of the link. How can do it with javascript or jQuery?
this post can give you a start
http://forum.jquery.com/topic/get-external-page-and-fetch-title-googled-a-lot-didn-t-find-any-solution
If the page is in the same domain, I'd say use an ajax request and get the title from the returned DOM object.
If it's a different domain, I'd say set a hidden IFrame to the location and when it's loaded get the title using something like:
document.getElementById('MyIframe').document.title
It is almost always done by backend script/crawler. It fetches webpage for You on server-side and returns parsed data by AJAX
try something like this
Google
<span id="titleGoesHere"></span>
--
$(document).ready( function() {
$('#googleLink').click(function(){
$.get(this.prop('href'), function(data) {
var $temp = $('<div id="tempData" />');
$temp.append(data);
var title = $('title', $temp);
$('#titleGoesHere').html(title.val());
});
});
});
For security reasons, browsers restrict cross-origin HTTP requests initiated from within scripts. And because we are using client-side Javascript on the front end for web scraping, CORS errors can occur.
...
Staying firmly within our front end script, we can use cross-domain tools such as Any Origin, Whatever Origin, All Origins, crossorigin and probably a lot more. I have found that you often need to test a few of these to find the one that will work on the site you are trying to scrape.
From this post, I wrote this working and self-contained fiddle:
function replaceAll(str, find, replace) {
return str.replace(new RegExp(find, 'g'), replace);
}
const url = "https://www.facebook.com/"
$.getJSON('https://allorigins.me/get?url=' + encodeURIComponent(url) + '&callback=?', function(data){
const content = replaceAll(data.contents, "<script", "<meta");
$("#content").append(content);
const d = $("#content");
$('#title').text(d.find('title').text());
$('#description').text(d.find('meta[name=description]').attr("content") || "None");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content" style="display: none;">
</div>
<h3 id="title">Waiting...</h3>
<br/>
<p id="description">Waiting...</p>
A few comments:
Use a cross-domain tool through https
Don't forget to encodeURIComponent your url
I replaced script tags with meta tags so that none of those are executed when appended to the DOM (replace function from this question)
To be used, parsed jQuery must be added to the dom (see this question)

How to run url from ".js" file?

Enviroment: Visual Studio 2012, MVC4, Razor, Internet Application.
I'm working with eBay API and I want to show the search results (JSON).
I have a view page with code...
<script>
function _cb_findItemsByKeywords(root)
{
var items = root.findItemsByKeywordsResponse[0].searchResult[0].item || [];
var html = [];
html.push('<table width="100%" border="0" cellspacing="0" cellpadding="3"><tbody>');
for (var i = 0; i < items.length; ++i)
{
var item = items[i];
var title = item.title;
var pic = item.galleryURL;
var viewitem = item.viewItemURL;
if (null != title && null != viewitem)
{
html.push('<tr><td>' + '<img src="' + pic + '" border="0">' + '</td>' +
'<td>' + title + '</td></tr>');
}
}
html.push('</tbody></table>');
document.getElementById("results").innerHTML = html.join("");
}
</script>
This line in ".js" file:
var url = "http://ebay.com?..."
How can I execute this url from ".js" file automatically, when I openning this View Page? (This url sending request to Ebay server and receiving data, which will be showed on this View Page.)
I will change a question a little...
If I'm running this code from the View page, everything works fine:
<script src=http://ebay.com?... </script>
How can I receive this part("http://ebay.com?..." as a variable) from ".js" file? Is it possible?
If you just want to send the request, you could add an image to the DOM with that as the src, for instance.
If you want to receive data from the request, you're going to have to do an AJAX call. This is handled quite differently in different browsers, so here's a good idea to use a framework, such as jQuery.
Since the URL is on a different domain than yours, however, you won't be able to access it with a regular AJAX request. You'd have to refer to what is called a JSONP request. This requires that the document you're fetched is formatted in a specific manner to allow this. If it isn't, JavaScript simply won't allow this interaction, due to the Same-Origin Policy.
JSONP requires that the remote document has the following format:
someCallbackFunction(javaScriptObjectWithData);
If it does, you'd be able to include a script file to the DOM with that URL as the src, the content of the document, once fetched, will be immediately executed in your browser. You should by then have specified a callback function with a name matching the callback being made in the document (this is usually something you can specify with through querystrings in the original request).
If none of these options are available for you, because of the format of the remote document, then you're going to have to request the document from server side. If you don't have access to a serverside environment yourself, in order to do this, there is the option of using somebody elses server. Yahoo's custom query language – YQL – can be used for querying the content of remote documents, and YQL is available through JSONP, so you could possibly relay your request through them.
See this post on using YQL with JSONP
Update, now that you've added more data, eBay API is available for JSONP, and I think that's the solution you're looking for.
Resolved...
<script src="/Scripts/ebay.js" type="text/javascript"></script>
<script>
s = document.createElement( 'script' );
s.src = url;
document.body.appendChild( s );
</script>

How to give variable link to the load function in javascript?

I am using javascript. I wanted to ask how can i pass variable link to the .load() function of javascript.
var current_link = location.href;
$('#alerts_div').load(current_link '#alerts_div');//to pass div content in page load
But this is not working? can anyone help please?
If you want to load a page fragment, you need to add an additional space:
$('#alerts_div').load(current_link + ' #alerts_div');
Please read: http://api.jquery.com/load/
It looks like you need to use string concatenation to assemble the URL you are trying to read:
$('#alerts_div').load(current_link + ' #alerts_div');

Creating consistent URLs in jQuery

I am creating a webapp and I have been using tag in my JSPs to ensure that all my links (both to pages and to resources such as images/css) are always consistent from the root of the application, and not relative to my current location.
Some of the content I am creating using jQuery, for example, I am creating a HTML table by parsing a JSON object and using jquery.append() to insert it in to a div.
My question is, if I want to dynamically create a link using jquery how can I achieve a consistent URL regardless of the page being executed? I have tried just building the html with the tag in it, but no joy.
Thanks!
var baseURL = "/* Server-side JSP code that sets the base URL */";
$("<a />", { href: baseURL+"/my/resource/here.jsp" }); //Your proper link
Or you could do:
var baseURL = "http://"+location.host+"/my/base/url/";
//Which gives you something like http://mySite.com/my/base/url/
Get the root value of your webapp into a string using a jsp tag inside your javascript.
var root = < %=myRootVariable%> //This evaluates to http://www.myapp.com
var dynamicBit = "/foo/bar"
var dynamicLinkUrl = root + dynamicBit
var $newa = $("Hello, world");
$someJQElement.append($newa)
Hopefully none of this will occur in the global namespace. Just sayin'

Categories