I am trying to remove all the links from a parsed site which has then had a div removed and placed in the main code. The problem is that I am trying to remove all the 'href' links in the extracted div but am unable to get anywhere. I have tried using 'CSS' and works but only in chrome and I have to use IE. I have looked at 'php simple html dom' parser to see if i could do it before the file is saved but can't get anything to work. so my last resort is to use 'jquery' but the problem is that the links to remove is being extracted from the file and is not directly in the code. If anyone could help me I would really appreciate it. below is the code I am using.
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<meta http-equiv="content-language" content="en">
<meta name="viewport" content="width=500" />
<title>example News</title>
<link rel="stylesheet" type="text/css" href="site/wwwRand1.css">
<?php
include( 'site/simple_html_dom.php');
$html=file_get_html( 'http://example.com/home.php');
$html->save('site/result.htm')
?>
<script type="text/javascript" src="site/jquery.js"></script>
<script type="text/javascript">
$('document').ready(function() {
$('#postsArea').load('site/result.htm #postsArea');
});
</script>
</head>
<body>
<div id="wrap">
<div id="postsArea"></div>
</div>
</body>
Just remove the href attribute from the <a /> tags
$("#postsArea").load( "site/result.htm", function() {
$("#postsArea a").removeAttr("href")
});
If you still want the tags to appear clickable...
$("#postsArea a").removeAttr("href").css("cursor","pointer");
Hope this helps
Try this:
$('document').ready(function () {
$.ajax({
url : 'site/result.htm',
dataType: 'html',
success : function(html){
$html = $(html).find(a).attr("href", "");
$("#postsArea").html($html);
},
error : function(){
$("#postArea").html("<div>No Data Found.</div>");
}
})
});
Here's how I did it:
$(function() {
$('a[href]').each(function() {
var link = jQuery(this);
link.after(jQuery('<span/>').text(link.text()));
link.remove();
});
});
It replaces Foo with <span>Foo</span>.
Related
I'm using Divi and I can't seem to update the email that shows up in the topbar in the header on the Spanish version of the site. My JS is a little rusty.
The URL is domainofclient.com/es/inicio
The element is <span id="et-info-email">sales#domainofclient.com</span> which needs to change to <span id="et-info-email">ventas#domainofclient.com</span>
What I've tried
<script type="text/javascript">
if(document.URL.indexOf("/es/inicio/") >= 0){
document.getElementById('et-info-email').innerHTML = 'ventas#domainofclient.com'
}
</script>
I've also tried the following JQ
<script type="text/javascript">
if(window.location.href === "https://domainofclient.com/es/inicio/") {
jQuery('#et-info-email').text('ventas#domainofclient.com');
}
</script>
You are almost there. I would although try to first of all wrap the code into a function and run it only when the page is ready.
function replaceEmail() {
if(document.location.pathname.indexOf("/es/inicio") !== -1){
document.getElementById("et-info-email").innerHTML = "ventas#domainofclient.com"
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="author" content="Author">
<title>#[[$Title$]]#</title>
</head>
<body onload="replaceEmail()">
<span id="et-info-email">sales#domainofclient.com</span>
</body>
</html>
I figured it out!
<script type="text/javascript">
jQuery(document).ready(function() {
if(window.location.href === "https://domainofclient.com/es/inicio/") {
jQuery('#et-info-email').text('ventas#domainofclient.com');
}
});
</script>
I am trying to place some Javascript code inside a .js file so that I can call it from multiple HTML pages. The problem is, my Javascript code works fine if I place it in a script within the HTML page, but when placed in a external .js file, it simply does not work. I've looked at these questions quite a few times and still cannot find the error.
Here's the HTML page:
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/global.css" />
<link rel="stylesheet" type="text/css" href="css/contacts.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src ="js/contactsModule.js"></script>
<title>Hall of Heroes</title>
</head>
<body onload = "contactsModule.getContacts();">
<!-- Global Header Starts Here -->
<div class="header">
<div class="cancel">
<img src="img/cancel.png" /><!-- if screen is triggered from onboarding, then go back to onboarding screen instead of home -->
</div>
<h1>My Contacts</h1>
</div>
<div class="wrapper">
<h3>A</h3> <!-- letter header goes here -->
<!-- Begin Contact Unit -->
<div class="feed">
</div>
<!-- End Contact Unit -->
</div>
</body>
</html>
And here is the .js file:
var contactsModule = (function($){
function getContacts()
{
dbContacts();
}
function displayContacts(contactArray){
window.alert('displayContacts now running!');
var jsonObject = $.parseJSON(contactArray);
jsonObject.forEach(function (dat) {
//Begin Contact Unit
$('.feed')
.append('<div class="feed-img"><img src="' + dat.avatarUrl + '"/>\
</div><div class="feed-text"><p><span class="name_highlight">\
' + dat.firstName + ' ' + dat.lastName + '</span></p></div>');
//End Contact Unit
});
}
function dbContacts() {
var avatarUrl;
var firstName;
var lastName;
$.ajax({
type: "GET",
url: "http://www.hallofheroesapp.com/php/contacts.php",
data: {avatarUrl: avatarUrl, firstName: firstName, lastName: lastName},
success: function (response) {
window.alert('AJAX ran successfully!');
displayContacts(response);
},
error: function(response){
alert("Error:" + response);
}
});
}
}(jQuery));
Thank you for your help!
You aren't returning anything from your IIFE. contactsModule will then not contain anything, ie equal undefined. Also just defining functions doesn't make those functions part of some object, with the exception of globally defined functions. You have to assign them, or define them as part of an object literal
Your code should be something like
var contactsModule = (function($){
return {
getContacts: function() {
/* code */
},
displayContacts: function(contactArray){
/* code */
}
dbContacts function() {
/* code */
}
};
}(jQuery));
How about using
$(document).ready(function(){
///// your code here...
});
... change ...
<body onload = "contactsModule.getContacts();">
... to ...
<body>
... and add event handler using jquery ...
(function($){
function getContacts()
{
dbContacts();
}
/* ... etc ... */
// use jquery's onready handler
$(getContacts);
}(jQuery));
Had the same problem. Easy thing when you research on google.
Your Js code loads before the DOM loads. Which should be the other way around. So you have to use this
$(document).ready(function(){
//only jQuery is recommended, global JavaScript functions outside!
});
Also JavaScript
document.addEventListener("DOMContentLoaded", function(event) {
//global function outside!
});
Only this way you can be sure that your DOM is loaded before your jquery finds your elements.
I would like to know what can I do to show a list into a html page using jquery.html and $getJson,
I have a server.js running on http:localhost:8080/list and I want to show the list between html tags
the html code
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Demo</title>
</head>
<body>
jQuery
<script src="jquery.js"></script>
<script>
$.get( "http://localhost:8080/clubs", myCallBack );
</script>
</body>
</html>
The myCallBack is where you define a function which can take the data as a parameter.
$.get("http://localhost:8080/clubs", function (data) {
$("#myDiv").html(data);
});
HTML
<div id="myDiv"></div>
The jQuery Documentation for jQuery.get() includes the following example:
$.get("ajax/test.html", function(data) {
$(".result").html(data);
alert("Load was performed.");
});
How can i update a webpage and url without reloading the web page. I saw this at SoundCloud and i want to use this at my own project.
This is an idea of what i want:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="./js/jquery.min.js"></script>
</head>
<?php
$url = $_SERVER['REQUEST_URI'];
if (url == /login){
include 'php/login.php';
echo"<script>
$(document).ready(function() {'
history.pushState(null, null, '/login')
});
</script>"
}
if (url == /home){
include 'php/home.php'
echo"<script>
$(document).ready(function() {'
history.pushState(null, null, '/home')
});
</script>"
}
?>
</html>
the problem is, when i enter www.mydomain.com/home for example i get (of course) a server error that the file not exists. How can i fix this problem?
Try window.location.hash=your_hash_string in JavaScript
That file doesnt exist. Error occur when some php script on ur server is utilizing those file locations.
Try something like this:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="./js/jquery.min.js"></script>
</head>
<body>
<div id="navigation">
<ul>
<li>Login</li>
<li>Home</li>
</ul>
</div>
<div id="content"></div>
</body>
<script type="text/javascript">
function _load_content(url) {
$("#content").slideUp("slow", function() {
$("#content").html('<p align="center">Loading...</p>');
}
$.ajax({ type: "get", url: url,
success: function(response) {
$("#content").html(response);
$("#content").slideDown("slow");
},
error: function() {
alert("An error occured");
}
});
}
$(document).ready(function() {
_load_content("php/home.php");
});
</script>
</html>
NOTE: This is the very basic function I made... You should really learn jQuery AJAX.
If I have some hidden element on a page, that contains some content, how can I create a link and when user clicks it, browser would open a new window and show the content (only the content, for example some json data)?
ps. I know that's probably bad idea to have some hidden content on the page. It's better to put an action link that will get the content from the server.. But it involves many other headaches and it wasn't me who created the page, so please just let me know if there's a comparatively easy solution...
Please use http://okonet.ru/projects/modalbox/index.html with inline content setting
You could pass the (URL encoded) contents of the hidden element as an argument in the URL when opening the second page. That argument could then be (unencoded and) inserted into the body of the second page when it loads.
The following example works locally on OS X. On other operating systems, the example may need to be placed on an actual web server before it will work:
page1.html:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Page 1</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
function openwindow(){
window.open("page2.html?html="+escape($("#myDiv").html()));
}
</script>
<style>
.hidden {
visibility: hidden;
}
</style>
</head>
<body>
Click Me!
<div class="hidden" id="myDiv">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/6/6e/HTML5-logo.svg/200px-HTML5-logo.svg.png">
<p>See the HTML5 specification</p>
</div>
</body>
</html>
page2.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Page 2</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
jQuery.extend({
// from: http://paulgueller.com/2011/04/26/parse-the-querystring-with-jquery/
parseQuerystring: function(){
var nvpair = {};
var qs = window.location.search.replace('?', '');
var pairs = qs.split('&');
$.each(pairs, function(i, v){
var pair = v.split('=');
nvpair[pair[0]] = pair[1];
});
return nvpair;
}
});
</script>
<script>
$(document).ready(function(){
$(document.body).html(unescape(jQuery.parseQuerystring().html));
});
</script>
<style>
.hidden {
visibility: hidden;
}
</style>
</head>
<body>
<!-- this will be replaced -->
</body>
</html>