I am currently working on a "split-screen" web application. It uses selenium to retrieve the html of a webpage then sends and displays it in iframes using srcdoc. I want, when someone presses a link in the first screen, for the second screen to display a simple "Loading" while an ajax request is sent to the backend to retrieve the html of the url (as it might take a couple of seconds to load) then display the retrieved html in the second screen.
To do so, I "inject" a JQuery event code into the src code of the first screen in the backend (shown below) right before the end body tag (as the retrieved source is a string, that is easy to do). The second screen has id="oframe".
For some reason, the JQuery event wont trigger. Any ideas why?
<script>
$("a").on("click",function(e){
e.preventDefault();
if(e.target.href){
let link = e.target.href;
parent.document.getElementById("oframe").srcdoc="<html><head></head><body>
<p>Loading</p></body></html>";
$.ajax({
url: "/newOrigin",
data: {"link":link},
type: "POST",
success: function(response) {
parent.document.getElementById("oframe").srcdoc=response.site;},
error: function(error) {console.log(error);}
});
}});
</script>
Note that the event works if I only have
parent.document.getElementById("oframe").srcdoc="<html><head></head><body>
or
$.ajax({
url: "/newOrigin",
data: {"link":link},
type: "POST",
success: function(response) {
parent.document.getElementById("oframe").srcdoc=response.site;},
error: function(error) {console.log(error);}
});
inside the if statement.Together they stop the event, I know that because preventDefault() is not working (link opens in a new tab).
Example <a> tag:
<a class="gdpr-modal-link" target="_blank" ref="http://www.politifact.com/privacy/">cookies</a>
You cannot have a line break in the middle of JavaScript string.
So, put this:
parent.document.getElementById("oframe").srcdoc="<html><head></head><body>
<p>Loading</p></body></html>";
all on one line:
parent.document.getElementById("oframe").srcdoc="<html><head></head><body>p>Loading</p></body></html>";
Related
I'm writing a little bot for a page and I need to click on a button. But that button would link me to another page so that I'd had to reenter my script to the browser's console. That's why I want to send an ajax request and set $("body") to its result.
The problem is, I don't know where the button links to and it's not as simple as $("#btn").prop("href"). It's a <button> tag. Of course I tried to find out what happens when the button is clicked so I can do the same, but it turned out that this is very difficult.
Can I do something like $.ajax({ url: $("#btn").click() }) ?
Or do you know a way to simply debug what exactly gets triggered when clicking on that button?
<div id="checkoutNextbottom" class="checkoutNext">
<button name="buttonNext" id="nextbottom" class="linkAsButton processButtonNext">Weiter</button>
<!---->
</div>
try like this ...
$(document).ready(function(){
$("#nextbottom").click(function(e){
e.preventDefault();
$.ajax({type: "method type",
url: "url",
data: data,
success:function(result){
}
});
});
});
Currently I have a page (index.php) where user can click on a link which links to another page with GET parameters (upload.php).
index.php
Content A (Link to upload.php?id=123&name=abc)
Content B (Link to upload.php?id=456&name=efg)
Content C (Link to upload.php?id=789&name=hij)
upload.php
Clicking on one of the links above will get the user to upload.php which will parse the GET parameters and put it into a HTML form, and then auto submits. Thus putting the parameters into the database.
My Question
It is troublesome to click many times just to do this auto submit.
I wish to click on a "BATCH UPLOAD" link in index.php, and it would automatically loads the 3 links in background, and upload all the parameters into the database.
Is there any way to do this using AJAX or any better way?
This should do the trick with jQuery, but you need to write the values directly to the database in upload.php not auto submit a form in between...
function batchUpload(){
$.ajax({
type: "GET",
url: "upload.php?id=123&name=abc"
});
$.ajax({
type: "GET",
url: "upload.php?id=456&name=efg"
});
$.ajax({
type: "GET",
url: "upload.php?id=789&name=hi"
});
}
I'm currently in the midst of creating a generator which echoes a random line from a .txt file. All is well and good however I need to have this certain part of the page which echoes the random line refresh when a button is clicked. I've tried multiple methods to no avail and I'm running out of ideas - I'm still quite new to JavaScript/AJAX and have no idea on how to go about it. Any help would be brilliant, thanks!
Use Jquery Ajax to get contents from the file and display the contents into a div
$.ajax({
type: "GET",
url: "yourfilename.txt"
}).done(function( msg ) {
$("#YOURDIVID").html(msg.d);
});
Bind click event of your button
$(function(){
$("#YOURBUTTONID").on("click",function(){
//do your work
});
});
Refreshing logic can be wrapped into a function and called on click of button OR you can use javascript settimeout method.
I'm trying to when a link is clicked on the side of the page grab a another page from my site thats in the same directory and show it into a div called content.
::Optionally:: if i could figure out an easy way to do it without a refresh otherwise refresh the page.
link is
Service Call
my jquery was...not sure if it would work
$("#servicecall").click(function() {
$("#content").load("servicecall.php");
});
Content is my div on the right side where the servicecall.php form would be.
All that seems to happen is my page does a refresh and nothing shows up in content.
When you click the button it gives back an error or something? For example here: http://jsfiddle.net/9839Q/4/
When i click the Service Call link it gives me an error with the following line (Chrome):
GET http://fiddle.jshell.net/_display/index.php 404 (NOT FOUND)
Be sure you added the jQuery Library to your page ! Maybe you just forgot it
<script src="http: //ajax.googleapis.com/ajax/libs/jquery/1.8/jquery. min .js"></script> //without spaces
If none of them, you can try $.ajax (hope it works :)) :
$.ajax({
url: "servicecall.php",
type: "GET",
cache: false,
success: function (html) {
//place servicecall.php's content to the content div
$('#content').html(html);
}
});
I have an issue on a website where a page content (results) are updated via AJAX. Contained within this AJAX returned content is a script tag which renders the LinkedIN "share" button.
When the page first loads with the initial resultset the layout looks like this:
Each of these buttons is within a left-floated div, and the HTML looks like this in Chrome developer tools:
As you can see the script tag is appearing where it is supposed to be, in the div, and the dynamically generated span containing the button is just above.
Now, when i append more results via an AJAX request, things go a bit haywire, and look like this:
As you can see the LinkedIN button is way out of place, and the reason is apparent when looking at the HTML in developer tools:
The script tag is not within the div where it appears in the code file, instead appearing after the closing tr tag - and the span with the button is just above.
So, why is this, and more importantly what can be done to ensure that the script tag is where it belongs so that the layout is correct?
FYI - At the foot of the body is javascript which loads the LinkedIn .js file and after the AJAX request for more results completes there is an invocation of the LinkedIn .parse() method which is supposed to parse the full document and render the buttons.
EDIT
The application is built using ASP.NET MVC and the response returned uses the same .ascx control to format the results as the initial page load does.
EDIT - AJAX request used to retrieve extra data
function LoadMore(uri, last, loader, end)
{
isLoading = true;
$(loader).show();
$.post(uri, function(data)
{
if (data != "")
{
$(last).after(data);
isLoading = false;
// re-do social media share initialisation on the new AJAX-added content
gapi.plusone.go('container');
twttr.widgets.load();
FB.XFBML.parse();
IN.parse(document.body);
}
else
{
$(end).show();;
}
$(loader).hide();
});
}
EDIT
The actual HTML returned from the server is correct. Viewing the source shows the script tag in the correct location, but viewing the page in Chrome developer tools, as shown in the images above, shows the script in the wrong place in the DOM. This occurs in both IE9 and Chrome.
Are you building the html dynamically ? Maybe it has something to do with misconfigured callbacks. If you are using $.ajax({...}), make sure that the next iteration is specified into the "success:" property to prevent unordered render.
Use ajax call like this
$.ajax({ url: 'url',
type: 'POST',
data: json,
dataType: 'json',
contentType: 'text/html',
success: function (data) {
//you response will be data
}
});