As we know that react doesn't load the window on click of an anchor. That's why react web apps are fast. I want the same functionality in jQuery. I want to Load a page in Jquery Without Loading the head, header, and footer. How can I do it? I don't know if I can even do it or not.
$(document).on("click", function (e) {
let anchor = $(e.target);
var url = anchor.attr("data-url-redirect");
if (e.target.nodeName == "A") {
// console.log(anchor, url);
$.ajax({
url: url + '.html',
success: function (result) {
$(".pageWrapper").html(result);
console.log(result, url);
if (history.pushState) {
var newurl =
window.location.protocol +
`//` +
window.location.host +
window.location.pathname +
"/" +
url;
window.history.pushState({ path: newurl }, "", newurl);
}
},
});
}
});
});
This is the code I wrote. I can load the page and change the URL. But when I refresh the page breaks. Please let me know if it is possible with jQuery or not. If it is possible then how can I achieve it?
Related
I am developing an addon for firefox using addon-SDK method. I would like to know if there is anyway to change the html(contentURL) displayed in that panel to a new webpage upon clicking a link in that contentURL. Thanks in advance.
Vignesh here's code that receives the url clicked on:
https://developer.mozilla.org/en-US/Add-ons/SDK/High-Level_APIs/panel#Scripting_panel_content
var myScript = "window.addEventListener('click', function(event) {" +
" var t = event.target;" +
" if (t.nodeName == 'A')" +
" self.port.emit('click-link', t.toString());" +
"}, false);"
var panel = require("sdk/panel").Panel({
contentURL: "http://www.bbc.co.uk/mobile/index.html",
contentScript: myScript
});
panel.port.on("click-link", function(url) {
console.log(url);
});
panel.show();
So then you can change that to be instead of console.log(url) you can make it find your panel and changes its iframes location to that url. Im not sure how to do this with sdk methods, maybe someone else can share. I would try to do this though:
panel.port.on("click-link", function(url) {
panel.contentURL = url;
});
edit:
panel.contentURL = url may not work so you have to do it like this:
const { getMostRecentBrowserWindow } = require('sdk/window/utils');
var aXULBrowser = getMostRecentBrowserWindow();
aXULBrowser.getElementById('ID OF YOUR PANEL, probably same as id to your widget here').getElementsByTagName('iframe').contentWindow.location = url;
I am trying to build a site that dynamically loads the pages. Certain pages have extra javascript that they load. I need to be able to unload this javascript when the page changes. Is that possible? My code so far (work in progress still):
//When page loads...
$("ul.toggle li:first").addClass("active").show(); //Activate first tab
var taburl = $("ul.toggle li:first a").attr("href").substr(1);
$(document).ready(function(e) {
$.ajax({
type: "POST",
url: taburl+'.php',
data: '',
dataType: "html",
success: function(d){
$('#main').html(d);
}
});
});
//On Click Event
$("ul.toggle li").click(function() {
$("ul.toggle li").removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
$("#main").fadeOut(500);
$("#main").html('');
var activeTab = $(this).find("a").attr("href").substr(1) + '.php'; //Find the href attribute value to identify the active tab + content
$("#main").load(activeTab).fadeIn(500); //Fade in the active ID content
});
Let me know if any other info is needed.
I have a strange issue with my jquery mobile application. Below screen shot from Chrome Developer Tools Snapshot.
Why does my Pages or Scripts are cached even thiugh Have added
$.ajaxSetup ({
cache: false
});
Also in every ajax call which loads my ul > li have set cache:false.
Kindly let me know how can I overcome this scenario coz of this my Mobile cache is growing on every single click driving me nuts.
Thanks
Update :
Every time I click to navigate to another page this scripts get executed :
$('body').on('click', '.menuClass', function(e) {
e.preventDefault();
e.stopImmediatePropagation();
var menuid = $(this).attr('id');
if (menuid == '100001') {
settings.get('setval', function(obj) {
if(obj.value.tableMode == "1"){
$.mobile.changePage('categories.html', {
transition : "slide"
});
return false;
}
else{
$.mobile.changePage('index.html', {
transition : "slide"
});
}
});
}
});
But for somereasons the URL for categories.html loads on every click changing the url to
below
http://localhost:8080/categories?_=1347279588477
http://localhost:8080/categories?_=1347279584203
http://localhost:8080/categories?_=1347279688227
I don't know why cache:false doesn't work but i'm adding a time created string to prevent caching of ajax pages.
Doing this by adding &ts="+ new Date().getTime() to end of url .
Here is my usage ;
$.ajax({
type: "GET",
url: "ajax.php?ajax_file=ajax_table_page&ts="+ new Date().getTime(),
success: function(data){
..................
}
});
I also use this to trace ajax errors (you may add after document is ready )
$.ajaxSetup({
error:function(x,e){
if(x.status==0){
alert('You are offline!!\n Please Check Your Network.');
}else if(x.status==404){
alert('Requested URL not found.');
}else if(x.status==500){
alert('Internel Server Error.');
}else if(e=='parsererror'){
alert('Error.\nParsing JSON Request failed.');
}else if(e=='timeout'){
alert('Request Time out.');
}else {
alert('Unknow Error.\n'+x.responseText);
}
}
});
I'm doing a Chrome extension and I got helped in this post here.
My problem now is how to open a new tab of chrome that has as URL the link I clicked in the popup.html. I tried to do like someone suggested in their answers in other similar question like setting <a>'s attribute target to _blank but the only result is that chrome does open a new tab but in the new tab is my popup.html.
Any idea how to solve this?
Thanks.
You should use chrome.tabs module to manually open the desired link in a new tab. Try using this jQuery snippet in your popup.html:
$(document).ready(function(){
$('body').on('click', 'a', function(){
chrome.tabs.create({url: $(this).attr('href')});
return false;
});
});
See my comment https://stackoverflow.com/a/17732609/1340178
I had the same issue and this was my approach:
Create the popup.html with link (and the links are not working when clicked as Chrome block them).
Create popup.js and link it in the page: <script src="popup.js" ></script>
Add the following code to popup.js:
document.addEventListener('DOMContentLoaded', function () {
var links = document.getElementsByTagName("a");
for (var i = 0; i < links.length; i++) {
(function () {
var ln = links[i];
var location = ln.href;
ln.onclick = function () {
chrome.tabs.create({active: true, url: location});
};
})();
}
});
That's all, links should work after that.
If you don't want to use JQuery, insert this into your popup.js and it will make all your links open in a new tab when clicked
Remember to declarer the "tabs" permission in the manifest.json
window.addEventListener('click',function(e){
if(e.target.href!==undefined){
chrome.tabs.create({url:e.target.href})
}
})
The other answers work. For completeness, another way is to just add target="_blank"
Or if you have want to "manually" add particular links, here's a way (based on the other answers already here):
popup.html
<a id="index_link">My text</a>.
popup.js
document.addEventListener('DOMContentLoaded', () => {
var y = document.getElementById("index_link");
y.addEventListener("click", openIndex);
});
function openIndex() {
chrome.tabs.create({active: true, url: "http://my_url"});
}
A bit more concise and actual syntax in 2020:
document.addEventListener('DOMContentLoaded', () => {
const links = document.querySelectorAll("a");
links.forEach(link => {
const location = link.getAttribute('href');
link.addEventListener('click', () => chrome.tabs.create({active: true, url: location}));
});
});
A bit more concise version in modern JS:
document.addEventListener('DOMContentLoaded', function () {
for (const anchor of document.getElementsByTagName('a')) {
anchor.onclick = () => {
chrome.tabs.create({active: true, url: anchor.href});
};
};
});
I had the same problem. Looked like Konrad's solution would worked, but it opened multiple tabs at once. This happened only after first extension install. So I changed it to
if (e.target.classList.contains("a-link")) {
chrome.tabs.create({url: $(e.target).attr('href')});
return false;
}
and all is working as expected.
Send tab url to share blog in new tab:
// popup.js
chrome.tabs.query({ active: true, currentWindow: true }, function(tabs){
var url = tabs[0].url;
var title = tabs[0].title;
document.getElementById('linkQZone').onclick = function () {
var url1 = 'https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=' + url + '&title=' + title + '&desc=&summary=&site=';
chrome.tabs.create({active: true, url: url1});
};
document.getElementById('linkQQ').onclick = function () {
var url1 = 'https://connect.qq.com/widget/shareqq/index.html?url=' + url + '&title=' + title + '&desc=&summary=&site=';
chrome.tabs.create({active: true, url: url1});
};
});
open with ctrl-click or middle-click
$('body').on('click auxclick', 'a', e => {
if (e.ctrlKey || e.button == 1) {
e.preventDefault();
chrome.tabs.create({ url: e.currentTarget.href, selected: false});
}
});
I'm developing an extension where I need to get the entire text content on the current tab. Now I've a plugin which retrieves selected text from the current tab. So, in essence I'm looking for the ctrl-A version of it :). This is what I've done so far taking the hint from #Derek.
This is in my event handler(this is just one, there are other listeners too for onUpdated etc):
chrome.tabs.onSelectionChanged.addListener(function(tabId,changeInfo,tab) {
chrome.tabs.getSelected(null,function(tab) {
chrome.tabs.sendRequest(tab.id, {method: "getSelection"}, function (response) {
selectedtext = response.data;
});
chrome.tabs.sendRequest(tab.id, {method: "getText"}, function (response) {
alltext = response.data;
});
});
});
This is what I've written in the content script:
chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {
if (request.method == "getSelection")
sendResponse({data: window.getSelection().toString()});
else if (request.method == "getText")
sendResponse({data: document.body.innerText});
else
sendResponse({});
});
However the document.body.innerText is returning undefined. I need the entire text of the current tab in alltext. Can someone help me out on this?
Thanks.
You can use document.body.innerText or document.all[0].innerText to do it in the content script.
It will get all the text content in the page, without any HTML code.
Or you can use document.all[0].outerHTML to get the HTML of the whole page.
Example
In the Content Script
function getText(){
return document.body.innerText
}
function getHTML(){
return document.body.outerHTML
}
console.log(getText()); //Gives you all the text on the page
console.log(getHTML()); //Gives you the whole HTML of the page
Added
So you want the content script to return the text to the popup. You can use:
chrome.tabs.getSelected to get the tab selected,
chrome.tabs.sendRequest to send request to the content script,
and chrome.extension.onRequest.addListener to listen to requests.
Popup page
chrome.tabs.getSelected(null, function(tab) {
chrome.tabs.sendRequest(tab.id, {method: "getText"}, function(response) {
if(response.method=="getText"){
alltext = response.data;
}
});
});
Content Script
chrome.extension.onRequest.addListener(
function(request, sender, sendResponse) {
if(request.method == "getText"){
sendResponse({data: document.all[0].innerText, method: "getText"}); //same as innerText
}
}
);
This should work.
Use executeScript: (requires permission activeTab)
chrome.tabs.executeScript(null, {
code: `document.all[0].innerText`,
allFrames: false, // this is the default
runAt: 'document_start', // default is document_idle. See https://stackoverflow.com/q/42509273 for more details.
}, function(results) {
// results.length must be 1
var result = results[0];
process_result(result);
});
In case the code is complex, it's possible to define a function in the content script and call that function in the code (or use file).