jquery script to extract src from iframe - javascript

I want to extract the src of the iframe which are present in a html page and save those in a file. I wanted to use jquery for doing this. Is it possible to write a jquery . Which one of php /javascript /jquery should I use for this.
Thanks,
Vinay

Try this
var ifrms = [];
$("iframe").each(function() {
ifmrs.push(this.src);
});
$.ajax(function(){
url: "urlOfThePage",
data: { sources: ifmrs }
});

First retrieve the source of each iframe element on the page:
$(document).ready(function() {
$("iframe").each(function() {
//You'll want to persist this value somewhere instead of alerting it.
alert($(this).attr("src"));
});
});
Once you have the iframe source(s), it's up to you how to submit them to the server. You could persist the value(s) in a hidden element in the form or use the .ajax() method of jQuery to post the form via AJAX.

Related

Is this right way to call php file using jquery?

I am trying to call the php file onclick of button ,
i tried using ajax but many of them said not to use for downloading the file.
here is my code.
jQuery(document).ready(function($){
console.log("plugin script loaded3");
$('#csv').click(function()
{
alert("csv");
document.location.href = "/wp-content/plugins/est_collaboration/php/export_csv.php";
});
});
Even tried using $get but its not getting downloaded.
when i click the button it has to call php file which download csv format.
You can simply try this
Download
Change your jquery startup to simply:
$(function() {
$('#csv').click(function() {
alert("csv");
});
});
Alternatively, to download a "file", you can add it as the href to an anchor link, eg:
<a id='downloadlink' href='/wp-content/plugins/est_collaboration/php/export_csv.p‌​hp'>csv</a>
if you need to add parameters, you can change the href via jquery, eg:
$("#downloadlink")
.prop("href", "/wp-content/plugins/est_collaboration/php/export_csv.p‌​hp?param1=" + param1value);
Alternatively (again), it could be that you are adding the "#csv" button dynamically, after jquery startup has run, in which case you need event delegation. See this question for more info: Event binding on dynamically created elements?

Access DOM elements on HTML page loaded with AJAX

Im currently struggling with an AJAX related problem on a website.
The goal is as follows:
There is a "simple" HTML page containing some links and content.
If you click on a link I want to open the file that gets includes with the link (from href) within a new div overlayed to the page. The content from the page is of course loaded with AJAX into the new div (the overlayed one).
Within this new overlayed div I want to add some JS code which in general already works.
The problem anyway is that the DOM elements within the page loaded per AJAX cannot be accessed in a way that is comfortable to work with, in my specific case.
I got following piece of code so far:
$$('.add-exercise').addEvent('click', function(e) {
var request_exercise_add = new Request.HTML({
'method' : 'post',
'url' : e.target.get('href'),
onSuccess : function(responseTree, responseElements, responseHTML, responseJavaScript) {
// i know i can access responseElements here..
}
});
request_exercise_add.send('s=true');
return false;
});
I know I can access the elements returned within responseElements but the logic on the included website is somehow quite complex and therefore it should be
possible to add the JS within the HTML code in the dynamically loaded page.
Notice that the JS also cannot be added to the head section because it would not know the elements that are loaded after the dom-ready event.
have you tried iframe ?
or the website that you are trying to add does not have PPP cookie and AllowContentInIframe .. ?
If you want to add the script inside the ajax request you need evalScripts: true and you should remove the quotes around the request options.
$$('.add-exercise').addEvent('click', function (e) {
var request_exercise_add = new Request.HTML({
method: 'post',
url: e.target.get('href'),
evalScripts: true,
onSuccess: function (responseTree, responseElements, responseHTML, responseJavaScript) {
// i know i can access responseElements here..
}
});
request_exercise_add.send('s=true');
return false;
});
I don't know what is the content of the response but you might also want to use Mootools's .set() instead of innerHTML to append new elements (if you are not doing that yet). Maybe worth to check Dimitar's answer here about that.

Load event jQuery, can i append it

I want load a html part with ajax in the page. I have a html page. With ajax, i want load from a other page a part html.
I make this code:
$.get(/vision.html/, function(data){
$(data).find(".container-helper").appendTo(".wrapper");
});
From the vision.html page. I want load the container-helper div. And i want append that html to the .wrapper div in the page. But this code is not working.
what am I doing wrong?
Thanks!
I think you need to use filter rather than find. Like so:
$(data).filter('.container-helper').appendTo('.wrapper')
You have to replace your code with following:
$.get("vision.html", function(data){
$response = $(data);
$response.filter('.container-helper').appendTo('.wrapper');
});
vision.html should only return the .container-helper content.
<div class="container-helper">some content</div>
$.get('vision.html', function(data){
$(data).appendTo('.wrapper');
});

Jquery load function that will append onto HTML already present

I am trying to make an AJAX call which will append html i.e. add additional html to what is already present between the tags. Here is what my load function looks like.
<script>
$(document).ready(function(){
$(".tid-select").change(function(){
$(".tid-list").load("/saffron_main/test");
});
});
</script>
How would I modify this function in order to get it to append to the class .tid-list. Thanks in advance.
You have to get data via ajax and use $('.tid-list').append(data);
<script>
$(document).ready(function(){
$(".tid-select").change(function(){
$.get("/saffron_main/test",function(data){
$('.tid-list').append(data);
});
});
});
</script>
You may also use $('.tid-list').prepend(data); to insert before the current HTML.
Or instead of replacing the html you can just load the data into a variable and then add it to the DOM.
Example:
$.ajax({
url: '/saffron_main/test',
success: function (data) {
$('.tid-list').append(data);
}
});
This way events that have been bound to the existing html will stay bound.
Just change the change handler
$(".tid-select").change(function(){
$.get("/saffron_main/test", function(data){
$(".tid-list").append(data);
});
});
edit: yeah, the other guys are right that append makes more sense

How to get div from second page display in first page

In my main.html page I have a button. When that button is clicked, I need to get the content of another page.
The target page has five divs, I need to catch one div and display that div data in main.html page.
Use Javascript and JQuery. See http://docs.jquery.com/Manipulation or specifically http://docs.jquery.com/Ajax/load
To be precise use something like this:
$("#yourdiv").load("/yourpage.html #section");
jQuery can do this very elegantly:
<script type="text/javascript" src="/js/jquery/jquery-1.3.2.min.js"></script>
<script>
//only when the DOM has been loaded
$(document).ready(function() {
//bind to button id="myButton" click event
$('#myButton').click(function() {
//populate div id="myDiv" with specific div (div id="someDiv") from another page
$('#myDiv').load('/anotherPage.html #someDiv');
});
});
</script>
See jQuery Ajax/load
As long as the second page is on the same domain, you can use AJAX techniques. For example, using Prototype you could do something like this:
new Ajax.Request('http://url.of.second/page', {
method: 'get',
onSuccess: function(transport) {
//make a regular expression to grab the required HTML fragment
var re = /<div id="otherdiv">(.*)</div>/i;
//extract the fragment from transport.responseText
var found = transport.responseText.match(re);
//add the fragment to targetdiv on current page
$('targetdiv').innerHTML=found[1];
}
});
Jiri's answer is spot on.
http://docs.jquery.com/Ajax/load
is the exact jquery link.
Thanks Jiri...

Categories

Resources