I have an iframe on my main page, and this iframe uses php code mostly (src is php file).
At the bottom of this iframe I have this:
window.parent.document.getElementById("qry_str").value='hey';
And in the main (parent) file, I have this hidden input which I am trying to set from the iframe with js:
<input type="hidden" id="qry_str" name="qry_str">
Nothing happens when I try to set the value of this hidden input from inside the iframe.
(Nothing shows up in the src code that is)!
I have also tried setting the hidden inputs 'OnChange' event to an alert, but it won't alert because it isn't changed I guess!
I know it finds the element because I have tried to alert the elementId and it works, the element is found!
Thankful for any help!
If the iframe is on the same domain you want to use window.top to access the parent window.
window.top.document.getElementById("qry_str").value='hey';
View source shows the source code for the page, not a serialization of the current DOM. Use something like Firebug for that.
The onchange event won't fire because the content is being changed from a script, not from the user editing it.
Your tests show you are selecting the element, so that doesn't leave much else to go wrong except how you perform the tests to see if the code is working.
Related
I am trying to load a specific portion of an article with using of jquery load() function when a tab is clicked. The tab is inside an article and trying to show another article within the first article from where the tab is being clicked. The jquery code I have put inside the template.php of choosen template. The main problem is that when I click nothing is comming inside the first article under the tab. I am using joomla2.5.11 version. Please give some suggestion.The jquery code what I am trying is shown below:
$(function(){
$("h3.menuheader").click(function(){
$(".active-tab").removeClass("active-tab");
$(this).addClass("active-tab");
$(".tabcontent-ul").slideUp();
$(".tabcontent").load("http://www.mpsinfoservices.com/projects/teamzstudio/web-application-development#link1",function(){
$(".tabcontent").slideToggle();
});
});
});
Unfortunately I don't think you've provided enough to diagnose this issue. But perhaps I can help with how I would diagnose.
To start with, try this instead:
// http://www.mpsinfoservices.com/projects/teamzstudio/web-application-development#link1
$(".tabcontent").load("http://www.google.co.uk",function(){
$(".tabcontent").slideToggle();
});
Then open up your developer tools and see if a call is being made to load that data.
If it is, then you need to consider that it might be loading the data and putting it in another element you can't see.
So to test, create a new container on the page near your footer, which you know will be visible with a specific #ID like <div id="testID"></div> and load into that. Once that is working, look to confirm your .tabcontent element is the one you want using something like console.log().
I have a php application in which the web page displayed to the user. The page has some links "Edit", "Rename", etc.
When the user clicks on the link a dialogbox prompts. The dialogbox is nothing but a HTML <div> form that gets instantly displayed when the user clicks on the "Rename" or "Edit" link.
When I looked at the html source code (i.e. view -> source in Internet Explorer) I found the following Javascript and HTML code
<a class="update renameButton" href="javascript:void(0);">Rename</a>
I'm unable to understand how the dialogbox gets promted with the above code.
I expected the code to be something like the following:
<a class="update" onclick='rename();' href="javascript:void(0);">Rename</a>
Can someone help me understand this?
Some JavaScript loaded from a <script> element probably binds an event handler function to the element.
The event handler is most likely bound to the element elsewhere (from an included JavaScript file perhaps). For example:
document.getElementsByClassName("update")[0].addEventListener("click", function () {
// Do something on click of the first `.update` element
}, false);
you should not setup event listeners in html anymore like with onclick.
the page registers an event listener to the Object. e.g. with a library like jQuery.
You are absolutely correct! That is very natural to expect such a thing except that there are other ways to bind an event to an object as well.
If you check the JavaScript code on the page I am sure you will find perhaps something that looks like $('a.renameButton').click(function(){}); (if the site is using jQuery) or something similar that binds the onclick event of that particular tag to perform some specific actions.
I'm using a simple script to reload a div
$('#mydiv').fadeOut('300').load('# #mydiv').fadeIn("300");
The problem is that the div I'm reloading has the Facebook like button inside it. After the DIV reloads, I can see it updated inside the source, but the button is hidden for some reason.
Is there any way to force the button to re-draw?
As I stated in my comment, I think the .load is misunderstood, as you stated in your question
I can see it updated inside the source, but the button is hidden for some reason
.. so with that in mind, I assume you have load functioning with the correct parameters.
You have a synchronistic problem here. Everything you use in the chain uses a timescale, and .load() for that matter is asynchronous.
So instead of just chaining everything, you have to use the callbacks in order to know when the time scale ends for a particular function.
$('#myDiv').fadeIn('300', function() {
// callback when #myDiv is faded out (display:none;)
$(this).load('url', function() {
// callback when #myDiv is loaded with new content from the given 'url'
$(this).fadeIn('300');
})
});
The facebook button won't display because it is configured normally just AFTER document.load.
If you load the div content while the document is already loaded and the Facebook javascript SDK has already initialized. It won't work.
If facebook is not required UNTIL the div loads. You may just try to load the "all.js" script inside the div.
Otherwise, if you've come to that, you'll certainly have to review the application's design.
I am doing file upload async with jquery/php using the target attribute of a form. The target is my iframe named "uploads"; To manage error in the php file, I return string like "ERR_TOO_LARGE_FILE" with an echo which will be inside the iframe body.
The problem is I don't know how to detect when the iframe is ready and access its content to see if there's an error. I tried the following code but it didn't work:
$("#uploads").on("load", function() {
alert($(this).html());
});
an alert box did appear, but nothing inside. I also tried using the ready event instead but this time, nothing appears.
Would like to know a way to achieve this or an alternate solution if you have a better one.
Because you're not allowed to modify the content of an iframe, at least you're not suppose to, you can't directly access it using jquery. Use .contents() & .find() to get the html from the iframe so you can get the info you need.
So,
$("#uploads").on("load", function() {
alert($(this).contents().find('html').html());
});
should return the contents of the html in the iframe. You can swap out the 'html' for a tag id if you know the specific element you're looking for.
I have this form and I would like to read the uploaded file and then fill out the form using this read information without refreshing the page.
For example the first word might be "Bob" and so I would want that to go in my input text "First_name." I've been trying to searching online for a way to do this using JQuery or Ajax but I can't seem to find a solution.
Can this be done using the two methods previously mentioned? If so and if not can someone point me to a link or to where I can learn how to do this? The instances I have found include where one uses JQuery to upload the file and display the size without refresh (which is not exactly what I want).
I have also found how one can use an iFrame but this again is not what I want. I suppose I could always just submit the part of the page containing the textfile related information and show the same form but with the filled out information. But I feel as if this is kind of sloppy and I want to know if there is a better way.
Thanks.
Firefox has a method to do this, the File and FileList API provide a way to get at the files selected by a file input element and have a text retrieval method.
A very basic example:
NB. Not all browsers support this code.
[I think Chrome, Firefox and Opera do at time of writing.]
HTML:
<form>
<input type="file" name="thefile" id="thefile" />
</form>
<div id="text"></div>
JS (using jQuery):
$(document).ready(function() {
$('#thefile').change(function(e) {
if (e.target.files != undefined) {
var reader = new FileReader();
reader.onload = function(e) {
$('#text').text(e.target.result);
};
reader.readAsText(e.target.files.item(0));
}
return false;
});
});
Demo: http://jsfiddle.net/FSc8y/2/
If the selected file was a CSV file, you could then process it directly in javascript.
.split() will be useful in that case to split lines and then fields.
the only way I know would be to submit the form to a hidden iframe. this will upload teh file without refreshing the page. you can then use any returned info using javascript. this is what they use for fake ajax style image uploads that let you preview an image before uploading. the truth is it already has been uploaded via a hidden iframe. unfortunately however iframes are not xhtml 1.0 compliant.
something like this article may help:
http://djpate.com/2009/05/24/form-submit-via-hidden-iframe-aka-fake-ajax/
The question you might ask is :
why should I use this method instead of real ajax ?
Well they’re is numereous answer to that but one good reason it that
is doesnt require any type of ajax libs and you can start using it
even if you never used ajax before.
So here it goes.
<form method=”post” action=”formProcess.php” target=”hiddenIFrame”>
<input type=”text” name=”test” /> </form>
<iframe style=”width:0px;height:0px;border:0px;” name=hiddenIFrame />
This is just a normal form but you’ll notice the target in the form
tag, this tells the form to submit in the iframe instead of the
current page.
It’s works exactly as the target attribut on the A tag.
Also the iframe is hidden from the user using
style=”width:0px;height:0px;border:0px;”
now the file formProcess.php is not different from your normal form
processing file but if you want do something on the main page you have
to use JS like that :
window.parent.whatEverYouWannaDoInParentForm();
You can also upload file with this method !
Please checkout the formphp for full example.
Cheers !
Nb : You will see the status bar acts like the page is reloading but
it’s really not.