jquery - load different divs from a external page - javascript

I have this code and I want load from page load.php the text for each div in this page
only with a load request from page load.php.
The example below load the page load.php twice :(
$('#div1').load('load.php #div1');
$('#div2').load('load.php #div2');
<div id="div1"></div>
<div id="div2"></div>
load.php page I have the code code:
<div id="div1">test to load1</div>
<div id="div2">test to load2</div>
How can I do it?

You could load the php using jQuery.get and then insert each fragment in to the desired elements:
$.get({
url: 'page.php',
dataType: 'html',
success: function(response) {
var html = $($.parseHTML(response));
$('#div1').text(html.filter('#div1').text());
$('#div2').text(html.filter('#div2').text());
}
});
Edit/note if the elements (#div1 and #div2) are at the top level of the loaded html, use: html.filter('#div1'); otherwise use html.find('#div1') to select the desired node.
More about jQuery.get.

Related

HTML button to load data and refresh UI

Here the situation:
In my html page I have a link, which onclick runs a PHP script.
<iframe style="display:none;" name="target"></iframe>
Load new tasks
I use an invisible iframe to execute the script but I stay on the same page.
This link executes script.php which updates mysql database, but in order to see new content the page must be reloaded.
Of course I can always create a separate button/link that reloads current page.
But I wonder if there is a way to execute the PHP script and reload current page with one html button.
Better use it this way:
1: Use a common Javascript Framework, for example JQuery
2: Create your Link and a Div for your Content:
Update my Data and reload my new Content
<div id="result"></div>
3: Use Jquery to add the click event to your link:
$('#reload').click(function(e) {
// Prevent from going to the link provided in href
e.preventDefault();
// make POST Request to script
$.post( "myScriptHandler.php", { value1: "1", value2: "2" })
.done(function( data ) {
// if done, refresh my Div with html content from your PHP Script
$('#result').html('')
$('#result').load('mydata.php');
});
}
You don't need AJAx - just return a script into the iframe which updates the toplevel page...
<?php
....
$new=run_updates();
print "<div id='newcontent'>$new</div>\n";
?>
<script>
var dest=parent.document.getElementById('oldcontent');
var src=document.getElementById('newcontent');
dest.innerHTML=src.innerHTML;
</script>
(not tested, YMMV)
I show you how to use Ajax in this case:
here is your html and js code:
<script type="text/javascript">
$(".link").on("click", function() {
$.ajax({
url: "your_php_script.php",
dataType: "json",
cache: false,
success: function(data) {
location.reload(true);
}
});
});
</script>
<html>
<body>
<a class="link" target="target">Load new tasks</a>
</body>
</html>
When you click the 'a' tag, the jQuery Ajax script call your php script, and when it return with success, then your page will be refresh.

Load content from same page into a div instead of external link on click

I use the code below to load contents from external link but it is slower depending on the network speed. I want to host the content on same page and load it from it or any idea on how it can load faster irrespective of the internet speed.
<script>
function dynamic_Select(ajax_page, currency) {
$.ajax({
type: "GET",
url: ajax_page,
data: "ch=" + currency,
dataType: "html",
//dataType: "text/html", //<--UPDATE: DELETING THIS LINE FIXES EVERYTHING
//<--UPDATE2: DON'T DELETE; REPLACE "test/html" with "html"
success: function (html) {
$("#txtResult").html(html);
}
});
}
</script>
My html code is
<input type="radio" name="currency"
id="perfectmoney" value="Perfect Money"
onChange="dynamic_Select('fetchbuy.php', this.value)" />
Did you try load of JQuery?
$('#your_div').load(url);
Of course you need that the url will be a controller path where you can render the page with the html code that you want to load

script does not load while using jquery/ajax

I'm trying to add through ajax/jquery a script into a div seconds after the page has loaded. The script itself is from a CPM network and loads a banner.
When I load it right when the page loads, the script is loaded, but if I add it through ajax, the script stays like this:
<script>content here...<script>
I get the following information after loading it by ajax: "Resource interpreted as Script but transferred with MIME type text/html"
I searched for some solutions but can't find one that works.
Here is the ajax call:
function showAds(){
$.ajax({
url:"pub-horizontal.php",
type:"POST",
async: false,
data: {link:link},
success:function(result){
$("#p1").html(result);
}
});
}
Here is pub-horizontal.php file
<div class="col-xs-12">
<div id="pub-horizontal" class="pub-horizontal">
<?php
$url = $_POST['link'];
if(!strpos($url,"article")){
include("****-horizontal.php");
}else{
include("cpmfun-horizontal.php");
}
?>
</div>
</div>
I tried to output something into the console using the script and it worked! Seems like that the problem is with the script of the CPM network that does not load after the document has loaded...
Thanks in advance.
Try adding header("content-type: application/javascript");
at the top of the php file

loading content from php file with jQuery

The following code fetch all data (by clicking a.info link) from a php file "info.php" and prints in the #content div. The problem is that it prints everything from info.php file. Can I possibly select only some part of data from info.php file to load in #content?
The reason to ask this question is that, I want to load different data from the same php file for the different links.
$("a.info").click(function(){
var id=$(this).attr("id");
$("#box").slideDown("slow");
$.ajax({
type: "POST",
data: "id="+$(this).attr("id"),
url: "info.php",
success: function(html){
$("#content").html(html);
}
});
});
Html where content is loading:
<div id="box">
<div id="content"></div>
</div>
info.php
paragraph1.
paragraph2.
For example, In the above info.php file, i only want to load paragraph1 in the #content.
I hope my question is clear. Any help will be appreciated.
Assuming paragraph1 is a div element, change accordingly:
success: function(html){
var p1 = $(html).find("div#paragraph1");
$("#content").html(p1);
}

I need some help with the Load function in JQuery

I currently have links w/ class="ajax" that I want to retrieve the element with id="test" from the file "data.html" in the same directory, and put that content into the id="content" div on my page:
<script>
$(document).ready(function(){
$("a.ajax").click(function(event){
$("#content").load("/data #test");
});
});
</script>
<a class="ajax" href="#">Text</a>
<div id="content"></div>
and externally, but in the same directory, I have data.html:
<div id="test">Will this show up?</div>
On the clicking of the anchor, Safari reports "page loading interupted", and no change occurs.
I definitely have JQuery called in the header. Can I get some help with this function? Thanks!
You have /data but the file is /data.html, assuming you're in the root. :)
I just tested what you have with this change and it works fine for me. I also recommend you get a tool like Firebug so you can easily see what your AJAX requests are doing.
$.ajax({
url: "data.html",
type: "POST",
success: function (answer) {
$("main_content").html($(answer).find("div#content_id").html());
}
});
I hope it will help you.

Categories