How to correctly put URL into jQuery load()? - javascript

What I want to do is, from example.com/page1, to load text of an ID from homepage example.com into class class.
What I've tried:
$('.class').load('example.com #ID');
But what this does is try to load from example.com/page1/example.com instead of just example.com
I've also tried:
var urltoload = 'https://example.com/';
$('.class').load(urltoload, '#ID');
which does load content but loads the entire page! instead of just the content from the example.com ID.
Then there's also the fact that I still haven't guessed the syntax for getting just the text from that ID. Maybe something like $('.class').load(urltoload, $('#ID').text()); ?
Thank you for any help here.

this code works for me:
Html:
<div class="class"></div>
<input id="id" value="3"/>
Script:
$(".class").html('<object data="http://validator.w3.org?id="+$("#id").val()/>');

You can do like this:
GET:
$('.class').load("template.html?Id = VALUE_TO_PASS");
POST:
$('.class').load("template.html",{Id = VALUE_TO_PASS});

Related

How to get the document of an embedded website with JS?

Im trying around with HTML and found the -tag.
I provided an url as src and the website does load without problems.
However I canot get the HTML-Code of this inner website. How can I access it with JS?
I already tried innerHTML, children, childNodes etc.
HTML
<div class="Webframe">
<embed id="webframe" src="http://testapp.galenframework.com/"></embed>
</div>
Console output of
let webframe = document.getElementById("webframe");
console.log(webframe)
can be seen here
https://imgur.com/JH2jzKr
If anyone has an idea how to access this #document, I would be happy to try it out
Thank you in advance
Your first problem is the lack of interface to do your task with <embed>. Better to use <iframe>.
The second is to try to access content from another domain without CORS. (See https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin)
Lets try a local page in a <iframe>. Now you can access the iframescontentDocument`:
<iframe id="webframe" src="test2.html"></iframe>
<script>
let webframe = document.getElementById("webframe");
webframe.onload = ()=> console.log(webframe.contentDocument.body.outerHTML);
</script>
If you have access to another domain server, you can add "Access-Control-Allow-Origin: *" to the HTTP header and try it.
<div class="Webframe">
<embed id="webframe" src="http://testapp.galenframework.com/" />
</div>
let webframe = document.getElementById("webframe");
console.log(webframe)

Can you switch html pages inside others using js?

https://www.w3schools.com/js/tryit.asp?filename=tryjs_dom_image
this is about changing html content with js, but it is about images. is it possible to do something like this too, so the same but doing it with a new html file so that you can switch pages inside a page?
So the plan is to replace the html underneath (with id="id") by another html file using js.
document.getElementById("id").src = "otherfile.html";
<html>
<body>
hey guys! here is my html page. If you click underneath, content will be changed.
<html id="id">
<body>
here is the text that will change if id="id" will be changed by a different html file
</body>
</html>
</body>
</html>
Of course, I know that this won't work.
But is there a way to archieve this?
Thank you if you are reading and trynna answer my post, I understand if it's a messy and shitty question so shoutout to you.
How about changing the contents of a div instead the whole HTML? Via jQuery.
<div id="dynamic-html">
here is the text that will change if id="id" will be changed by a different html file
</div>
$( "#btnChangeHTML" ).click(function() {
$( "#dynamic-html" ).html("<div class='myclass'>This is the custom HTML</div>");
});
Here's a fiddle:
https://jsfiddle.net/u8xsker2/2/
Read about iframe. Perhaps it is what you want.

How to set content to easyui panel with javascript

I have a problem in using easyui panel, so I am here needing somebody's help , even thought i find a few people use easyui in stackoverflow.
I have a panel in my page like:
<div class="easyui-panel" title="" id="pp" closed="true" style="width:100%">
</div>
And then, I want to put a value of a input value to this pp panel.
The input value and button code is :
<input type="text" style="width:97%;height:40px" id="drafterId" value='ths'>
bt
Now I want to use drafter function when clicking linkbutton to realize it :
function drafter()
{
var drf=$("#drafterId").val();
alert(drf);//works OK
var drfN="<tr>"+drf+"</tr>";
$('#pp').panel('refresh', 'drf'); //works fail
}
But unlucky, $('#pp').panel('refresh', 'drf');works fail. I have tried another way:
$('#pp').html(drf);
and
$('#pp').innerHTML(drf);
They both failed. Who can help me?
$('#pp').append(drf); works OK
Remove the quotes around the variable name ‘drf’.
So $('#pp').panel('refresh', 'drf');
Becomes$('#pp').panel('refresh', drf);

Javascript code to open a url on click in the same window

Im' stuck in a probably easy problem. Sorry I'm a beginner !
I have this
<div class="icon-1"></div>
<div class="icon-2"></div>
<script>
$(function() {
onclick('icon-1').openurl('http://acdefg.com');
onclick('icon-2').openurl('http://ghijkl.com');
}
</script>
...I mean, that if I click on "icon-1", then I go to URL "...."
If i click on "icon-2" then I go to URL "..."
etc.
Could you please help me ?
Well, you could define something like:
document.getElementByClassName("icon-1").onclick=function(){
window.location.href = 'http://abcdef.com';
};
You could also pull in an elements attribute (for examle, data-href) to full in the variable (instead of setting it specifically in JS, then you would only need 1 JS function for all occurrences).
However, can I ask - why don't you just use HTML a tags with href values?
Try this using jQuery (which is bundled with WordPress): https://jsfiddle.net/wu24bnbc/2/
<div class="icon-1">Icon 1</div>
<div class="icon-2">Icon 2</div>
<script>
jQuery(function() {
jQuery('.icon-1').click(function() {
window.location.href = 'http://acdefg.com';
});
jQuery('.icon-2').click(function() {
window.location.href = 'http://ghijkl.com';
});
});
</script>
Edit: I think you need to use jQuery instead of the $ shorthand with WP.

Dynamically generated script not working

I have a contenteditable div where you type javascript which gets outputted into an empty script tag.
<div contenteditable="true" id="script-generator"></div>
<div id="save-script">Save</div>
<script type="text/shorthand" id="script">
</script>
So you write your script in the div, click save and I have some JS which gets the html of the contenteditable div and adds it to an empty script tag.
$('#save-script').click(function() {
var script = $('#script-generator').html();
$('#script').html(script);
});
So far this works. But the generated script has no effect. The browser must not recognise the script because it wasn't there on page load? How do I make the script take effect without reloading the page?
Note: The type/shortand on the script is because I'm using a plugin which converts shortand words into actual Javascript. So the user would just need to write shorthand into the contenteditable div, and the plugin would convert that to JS. This might be adding to the problem?
I don't think it works to modify an existing <script> element. If you want the script to be executed you need to add a new element.
$('#save-script').click(function() {
var script = $('#script-generator').html();
$("#script").text(script);
ShortHand.parseScripts();
});
Correct - you need to create the script tag to have it execute after load.
$('head').append($('<script />', {html: script}));
...which means you can remove your empty script tag.
I have set up a test that's similar to what you have been looking for. Take a look and see if that helps.
Working Demo
Test code:
<div id="script" style="display:none">
alert(4+4);
</div>
<input id="sLoad" type="button" value="Load/Execute Script" />
$('#sLoad').click(function(){
//You may want to append to the head
$('<script/>').append( $('#script').html() ).appendTo('#script');
});

Categories