In my code I have an iFrame which loads dynamic content it's like a webpage(B.html) inside a page(A.php). in "A.php" user can edit inline the "B.html" once the process of editing has completed. In my submission I am sending iframes information to another page (script.php). I tried everything but content is not comming up in "script.php".
In nutshell, I want to tranfer my big html text with all stuff to a PHP via AJAX. I have no idea how to do it... my code would be something like below :-
Code for "A.php" inscript :
"myframe" is the iframe which contains the big chunk of HTML.
sendString = $("#myframe").contents();//Tried everything here[JSON as well]
$.ajax({
url: "script.php",
type: "POST",
data: sendingString,
cache: false,
success: function (html) {
return html;
}
});
Any help would be appreciated.
Regards,
Amjad
$("#myframe").contents() will get you it's nodes as a jQuery object. Try $("#myframe").html() instead to get the contents as a string.
EDIT: Oh, and it also helps if you fix your variable names. Change data: sendingString to data: sendString.
Related
To sum up what I'm trying to achieve here:
Inside of index.php, when selecting an option in a dropdown list, a function is called with the onchange="displayData(this) event inside of <select>
This function performs an AJAX POST request to a PHP page (target.php) with the value of the selected option inside of data
The PHP page is displayed inside a div on the page
Here is the function, using jQuery:
function displayData(str){
$.ajax({
url: "target.php",
type: "POST",
data: {"value": str.value},
success: function(data){
console.log(data);
}
});
$('#my-div').load('target.php');
}
To make things easier, here is what the PHP page looks like: <?php echo $_POST['value']; ?>
When logging data on success, everything seems to work fine, the value of $_POST['value'] is displayed in the console correctly. In the page itself though, I get an error:
Notice: Undefined index: value
Sorry if it seems kind of dumb, but I can't figure out what I'm doing wrong... So I thought of asking the community. Thank you for your help guys! Cheers.
Please try this.
and you need to return the result from target.php page
function displayData(str){
$.ajax({
url: "target.php",
type: "POST",
data: {"value": str.value},
success: function(data){
$('#my-div').html(data);
}
});
}
If you use .load() your browser will make another GET request to target.php and display it, so your $_POST will be empty.
You can use $('#my-div').html(data) inside success: of ajax or you can use $_GET instead of $_POST in your php and pass variable in url like this
$('#my-div').load('target.php?value='str.value);
hey the problem is quite simple, if you are posting the data value getting from ajax to target.php then the $('#my-div').load('target.php') should be inside the ajax success function and you have to put the data using html function like this $("#my-div").html(data). it will directly load the data in html format inside the div.
I'm trying to call a function with a link in html. I found the following example:
click to run function!
if(isset($_POST['runfunction'])){
}
This works perfectly fine, the problem is that when I click the link, "?runfunction" keeps standing in my url bar. So when I submit a form on my page it goes totally wrong (it's way to long to upload here). I do some SQL queries and I'm getting weird values in my SQL database. When I type in just my normal url it works fine. So I'm pretty sure that's the problem. I found another example with ajax :
$("a").click(function(){
jQuery.ajax({
url: "path/to/controller",
type: "POST",
dataType: 'json',
data: {'mentod':'ExportExcel'},
success: successCallback,
error:failureCallback
});
});
I don't fully understand this example (because I never use AJAX) but my php script is included in the html page "include("")". So I can't type in url because it has to be the same page. Can someone give a little bit of info about this, or give an example of how I can fix this? Thanks in advance!
You can add a callback method then remove it from the url by javascript
function successCallback () {
url = window.location.href;
window.location = url.replace("runfunction", "");
}
Can I replace a <div> with external php script. Something like this:
$('#aside').replaceWith('blocks/filename.php');
Please be gentle I have just started to learn JavaScript.
UPDATE:
I want to replace that <div id="aside">. I want to remove it completely and place the new content there.
You can do this - if you want to replace #aside with new content
$.get("blocks/filename.php", function(data) {
$('#aside').replaceWith($(data));
});
Not that simply, you can load your PHP into said div tho with a simple .load call:
$("#aside").load("blocks/filename.php", function() {
console.log("I've been loaded!");
})
API Ref: http://api.jquery.com/load/
Per the edits, you'll want to use a $.get function with a callback to replace that div with the new content.
You want to load the contents from a PHP-file, and put it inside a <div> right?
The very easy way would be to send a AJAX GET-request to the file, and fill the contents as such:
$.ajax({
url: 'blocks/filename.php',
data: {},
success: function(data) {
$('#aside').replaceWith(data);
}),
dataType: 'html'
});
EDIT: Changed to replaceWith() instead, as suggested.
It is me again. I am getting so frustrated with this code it is not even funny. It's not that I am wanting to post it again. It is just that now I understand the where the problem was in the code and wanted to see if you guys can help me figure the last part out.
Basically I am trying to refresh a div without reloading the entire page. It's killing me. Here is some more information on it:
here is my js file first
$(function() {
$(".button").click(function() {
// validate and process form
// first hide any error messages
var email = $("input#email").val();
//var dataString = '&email=' + email; commented out
var dataString = email;
//try insted this //alert (dataString);return false;
$.ajax({ type: "POST", dataType:'HTML',
//or the appropiate type of data you are getting back
url: "http://www.edshaer.com/EdinburgCISD/Gorena/Gorena.php", data: {email:dataString},
//in the php file do $email = $_POST['email'];
//not a good practice but you can try with it and without it
success: function() {
$("#div").fadeOut($("#div").html());
$("#div").fadeIn($("#div").html());
$("#email").val('');
// Change the content of the message element
// Fade the element back in
} });
//ajax ends
return false; });
//click ends
});//document ready ends
Now the problem that I am running into with this code is on the Ajax part. After placing the alert(), I have relized that if I use the function() like this:
success: function(data)
Then the alert came out blank. The reason behind it is that my URL is going to my php file, but my div that I am trying to refresh is on my html file. Meaning if I do this:
success: function(data) {
$("#div").html(data)}
I am sending blank data because it's trying to get the div from my php file instead of my html file.
Now if I do this:
$("#div").html()
Then that gives me the div that is in my html file.
By knowing what is going on now, Can you guys please help me???
My dear you should generate some sort of html in your php file that you want to generate in your div. Then you will see that you are having some content in data in the success function. This is an easy approach.
But there is also some other approach that is more efficient but it needs some sort of search. This is the implementation of Client Side Scripting. You can do this with the help of a jquery plugin jquote2. I hope it will work for you.
You're using
$("#div").fadeOut($("#div").html());
$("#div").fadeIn($("#div").html());
Both are wrong, jQuery .fadeIn() and .fadeOut() arguments are either [duration,] [callback] or [duration,] [easing,] [callback]. None take HTML as input.
Try changing
$("#div").fadeOut($("#div").html());
to
$("#div").fadeOut();
and moving it outside the $.ajax call to hide the previously showed (if any) results before the post and also change
$("#div").fadeIn($("#div").html());
to
$("#div").html(result).fadeIn();
Also change
success: function()
to
success: function(result)
Hope it helps.
This might be a problem relating to the response from the php script. Jquery doesn't always correctly render the Ajax response as html.
Setting dataType: html in the $.ajax({ ... }) call can help. Also setting header("Content-Type: text/html"); at the top of your php ajax script.
I am currently using jquery ajax to POST data to a php file which uses that data to build and output a jQuery-based gallery.
the "links" that are clicked on to trigger the ajax are:
<li class="portfolioLink" id="identity">identity</li>
<li class="portfolioLink" id="mobile">mobile</li>
<li class="portfolioLink" id="web">web</li>
and a sample of the jQuery ajax is:
$("#identity").click(function(){
$.ajax({
url: 'portfolio.php',
type: "POST",
data: ({data: 'portfolio/design/identityDesign/*'}),
success: function(data){
$("#content_middle").html(data);
}
});
$("#identity").addClass('active');
$(".portfolioLink:not(#identity)").removeClass('active')
});
(this jquery is basically iterated 2 more times with different data:)
This is working fine, except that the output of portfolio.php (the gallery builder) is loaded into #content_middle as the output's JavaScript is being processed (so it looks like the gallery is being built live in #content_middle). Seeing it happen will probably make more sense: www.frende.me/design.php
What I want to happen is for the gallery to load fully built.
How about you hide the element, add the new html to it and show it again? Like this:
$("#identity").click(function(){
$.ajax({
url: 'portfolio.php',
type: "POST",
data: ({data: 'portfolio/design/identityDesign/*'}),
success: function(data){
$("#content_middle").hide();
$("#content_middle").html(data);
$("#content_middle").show();
}
});
$("#identity").addClass('active');
$(".portfolioLink:not(#identity)").removeClass('active') });
If I understand correctly, you would like to have the content appear completely once the page loads. Unfortunately the page is returned as soon as the DOM is created. So images will be considered constructed, but that does not mean that their src has been loaded.
Try using a image preloader like this one
Hope this helps, otherwise comment if you need more details.