I have a piece of code in jQuery that I use to get the contents of an iFrame after you click a link and once the content is completed loading. It works, but I have a problem with it repeating - at least I think that is what it is doing, but I can't figure out why or how.
jQuery JS:
$(".pageSaveButton").bind("click",function(){
var theID = $(this).attr("rel");
$("#fileuploadframe").load(function(){
var response = $("#fileuploadframe").contents().find("html").html();
$.post("siteCreator.script.php",
{action:"savePage",html:response, id: theID},
function(data){
alert(data);
});
});
});
HTML Links ( one of many ):
<a href="templates/1000/files/index.php?pg=0&preview=false"
target="fileuploadframe" class="pageSaveButton" rel="0">Home</a>
So when you click the link, the page that is linked to is opened into the iframe, then the JS fires and waits for the content to finish loading and then grabs the iframe's content and sends it to a PHP script to save to a file. I have a problem where when you click multiple links in a row to save multiple files, the content of all the previous files are overwritten with the current file you have clicked on. I have checked my PHP and am pretty positive the fault is with the JS.
I have noticed that - since I have the PHP's return value alerted - that I get multiple alert boxes. If it is the first link you have clicked on since the main page loaded - then it is fine, but when you click on a second link you get the alert for each of the previous pages you clicked on in addition to the expected alert for the current page.
I hope I have explained well, please let me know if I need to explain better - I really need help resolving this. :) (and if you think the php script is relevant, I can post it - but it only prints out the $_POST variables to let me know what page info is being sent for debugging purposes.)
Thanks ahead of time,
Key
From jQuery .load() documentation I think you need to change your script to:
$(".pageSaveButton").bind("click",function(){
var theID = $(this).attr("rel");
var lnk = $(this).attr("href");//LINK TO LOAD
$("#fileuploadframe").load(lnk,
function(){
//EXECUTE AFTER LOAD IS COMPLETE
var response = $("#fileuploadframe").contents().find("html").html();
$.post("siteCreator.script.php",
{
action:"savePage",
html:response,
id: theID
},
function(data){alert(data);}
);
});
});
As for the multiple responses, you can use something like blockui to disable any further clicks till the .post call returns.
This is because the line
$("#fileuploadframe").load(function(){
Gets executed every time you press a link. Only add the loadhandler to the iframe on document.ready.
If a user has the ability via your UI to click multiple links that trigger this function, then you are going to run into this problem no matter what since you use the single iframe. I would suggest creating an iframe per save process, that why the rendering of one will not affect the other.
Related
I have taken a text-box to input the content and after the input , I have created refresh() btn to refresh. My code is working fine. But the part is On the click of refresh() button , only the page should get refreshed , but my code is refreshing the complete window. I tried using $route.reload(), but it din't work properly. I browsed through some sites, but I din't got the appropriate result. I tried my best to do it. But hopefully, I couldn't continue further.
My plunker : https://plnkr.co/edit/0r7DXPWWtXmFYsHwY6Q3?p=preview
Here you can check it out.
Why you want reload the whole page? You can do just clear the fields instead of reload the whole page.
$scope.reloadPage = function(){
$scope.name = '';
}
or trigger your page load function or code
$scope.reloadPage = function(){
//You should call the function as what you did when the page load.
}
EDIT:
I know that functionality. But I have n number of text-fields. So its not an good practice to carry it
Then you should use with an object like $scope.objectname={textboxes1,2.....};
So you can easily clear the object like $scope.objectname={};
I have update your plunkr. please take a look that.
https://plnkr.co/edit/UxTNY1zgD4CrUEvERcHT?p=preview
jQuery Core 3.1.0
Chrome, Firefox
Below is a model of jquery.ajax() success behaviour.
Shortly: I managed to fetch data via AJAX. In this model example the data is represented by "Just something" placeholder. Now I want to add the data to the document.
<script>
var add_date = $("#add_date");
function add_date_ajax(){
$('.frame_date').append("Just something");
debugger; // 1
}
debugger; // 2
add_date.click(add_date_ajax);
</script>
A problem: the data appear and then disappear in half a second.
I placed breakpoints.
When the page is loading, it stops at breakpoint 2. That is correct.
When I click #add_date element, the script stops at breakpoint 1. That is also correct.
But when I click "resume script execution", the script again goes to breakpoint 2. This seem strange to me. As if the page is reloaded. Maybe that is why the added text disappears.
Could you help me cope with the problem?
Added later:
https://jsfiddle.net/mv1yu3zw/1/
It disappears because you are reloading the page. The html
Add date
should be
Add date
To bind all your events, you should use the ready on document.
To avoid the reloading of your page (because of the href of the a tag), you have to call preventDefault or use a button.
You should write your code like this:
$(document).ready(function() {
$("#add_date").on("click", add_date_ajax);
});
function add_date_ajax(event) {
event.preventDefault();
$('.frame_date').append("Just something");
}
Hello all have a div1 which contains many other divs2,div3.....
and i want to reload div div1 after every 13 sec but without affecting the process that we are doing on other divs process may be typing messages ,viewing image etc..
can anyone please help me with this..
this is thepiece of code that i have used yet..
the code is working fine it reloads the div1 but every time it loads i need to type the message again if i have not posted it ..and some times it scroll down too..
var auto_refresh = setInterval(
function ()
{
$('#div1').load('home.php #div1').fadeIn("slow");
}, 13000);
You can pass arguments via load, Say draft for not saved and post for saved one. Suppose $('#myContent') contains your post content then the following code can be used:
$("#myDiv").load("home.php?post="+$('#myContent').val())//send posted data
OR
$("#myDiv").load("home.php?, {draft:$('#myContent').val() })//send draft data
I've build up an menu with jQuery.jsTree and every item should contain a link to a specific page. With jsTree it isnt possible to click these links due to the prevention of the standard behaviour of
<a href="index.php?content=example" ... >....</a>
links (this is actually an example of one of my links. The index.php is my standard page and just the content will be replaced). In order to fix that I found this solution:
jQuery(".tree").bind("select_node.jstree", function (e, data) {
document.location = data.rslt.obj.children("a").attr("href");
});
This solution works partly for me, which means the clicked link works but in the opened window Firebug tells me that jQuery is not defined. Is it possible that on document.location the browser "forget" the library imports (as I mentioned I stay on the index.php page and just replace the content)?
and the other question is: does anyone may know a better solution for the enabling of the links in jsTree without edit the library itself ?
thanks in advance!
If your links at first look like:
<a href="index.php?content=example" ... >....</a>
And you want to load the content into a div with ID maincontent
You can do something like:
$(".tree a").each(function(){
var $this = $(this);
$this.click(function(){
$("#maincontent").load($this.href, function(){
// this callback functions fires once load is complete,
// incase you need to do post-load operations
});
return false;
});
});
This will byposs loading the new page as a normal link would, and fetch the page via AJAX and load the returned HTML into the DIV with ID maincontent.
Code is untested, but I've done this in the past so should work as is.
I am using jQuery Mobile to create a site, in the index page I placed here a form for a search. I hooked submit event for ajax post. When ajax success get the resource
(html,<ul>...</ul>), placed in the target container, then trigger the create event for enhance the view. This work fine in the first time. When I click back to index page and search again I got a raw listview without enhance, who can tell me why? ps: I have tried many methods but there is more and more problem, the official document was so poor.
$(document).bind('pageinit',function(){
$("#search").submit(function(){
var searchdata = $("#search").serialize();
$.ajax({
'type':"POST",
'url':"/server/jnulib.php?action=search",
'data':searchdata,
'success':function(data){
$("#searchresultfield > ul").remove();
$("#searchresultfield").html(data).find('ul').trigger('create');
try{
$("#searchresultfield > ul").listview('refresh');
}catch(e){
}
$.mobile.changePage("#searchresult");
//$("div[data-role='header'] > a").
}
});
return false;
});
});
EDIT： Test Url： http://ijnu.sinaapp.com
Another problem: the second ajax request failed and the browser navigate to the ajax target straightly.
You could try changing:
$("#searchresultfield").html(data).find('ul').trigger('create');
to:
$("#searchresultfield").html(data).find('ul').listview().listview('refresh');
Anytime you append or remove elements you need to refresh, and if you remove the whole list, you need to reinitialize it.
Also I have had issues with listview('refresh') rendering improperly if it was not visible.
$(document).on('pageshow','div',function(event, ui){
if($("#searchresultfield > ul").is(":visible")) $("#searchresultfield > ul").listview('refresh');
});
For me, .trigger('create'); always works if applied to the element with data-role="page"
For example
HTML Code
<div data-role="page" id="somePage">
...
</div>
Javascript Code
$('#somePage').trigger('create');
Hope it helps
Try:
$("#searchresultfield > ul").empty();
instead of
$("#searchresultfield > ul").remove();
I think the problem is that jquery mobile loads all pages despite all being from different files into one big page and navigation is based off going to different points in this page, so that when you go onto it the first time the page you access is considered created however when clicking the back button and navigating away from the page that page is still considered created so the event well not fire again,
What I used was:
$('#oppList').live('pageshow',function(event){
getList();
});
Where #opplist is the id of the data-role="page" for the page I just load, this does not matter whether this happens the first time the page is loaded or after because the event is fired whenever the page is displayed.
See Here foe jquery mobile events
Also see here for jquery mobile navigation
Hope this helps !
Maybe you should try to unhook the submit event once it's been handled. And initiate it again once you go back to the page where you were before. Adding eventhandlers multiple times can cause a lot of problems.