So currently my website works like this; you post an update and through iframe your update gets added to the database and then shown in a list below. But the problem is that when you clicked "Submit" the text you wrote is still shown in the textarea because the website doesn't update completely. I have tried to have "onsubmit" and "onclick" but both remove the content of the textarea before it gets added to the database so it displays an empty message.
What should I do in order to delay it just a second or how do I make it wait for the iframe to "send" data to my PHP-script?
Give your textarea an id and supposing that iframe is an element of the page that contains the textarea you have done the following in the iframe page:
<?php
//code should be done after db add
?>
<script>
o = parent.document.getElementById('textareaID');
o.value = '';
</script>
<?php
//the end of code or something else
?>
You are able to see those demos on jsbin:
http://jsbin.com/ulOyiVo/1 The page with iframe. Supply the textarea with any text and then click on simulate submit link
http://jsbin.com/EyuBeLo/1/ The iframe page
If your only problem is to have a delayed response, you could trigger a setTimeout function to your onClick, with the given setTimeout:
setTimeout(
function() {
alert('hello');
},1250 //in milliseconds
);
You can define a click or a submit event using jQuery and send a request to your server. You can handle the event when the server responded using a callback. In that callback you need to do whatever it is needed to do. Using setTimeout in this case is an unnecessary hack. You will either set up a big time to wait harming the user experience or in case the page responds later than the specified time your page will work unexpectedly. So, instead of that try defining an event.
Related
I have a page where if you click on a link, it exposes a div that using ajax displays content from a dbase.
After a user edits this content on the server, I'd like to use PHP to return the user to that page. This is no problem using a redirect
header("location:page.php")
However, when the user comes back to the page, ideally, I'd like to have the content in the div open automatically so the user can immediately see edits without having to find the link to open the div and click on it.
Is this possible, either with something in the url to fire the javascript or alternaively, when you load the page with a certain parameter, triggering javascript to open the div.
The code to open the div is a simple javascript call:
View Content
showDiv just uses ajax to display something from the server using responsetext.
Thanks for any suggestions
header("location:page.php?show=1")
Then in page.php body tag:
<body <?php if($_GET['show']==1) { ?>onload="showDiv()"<?php } ?>>
I have a div with id=mydiv and inside of this div I have some content that I am grab it dynamically from database with a while.
Is there any way to use a button to refresh or reload the content of my div without using .load() ajax method?
$("#mydiv").load("index.html")
example:
<div id="mydiv">
<?php
$trtyb = mysql_query ("SELECT * FROM xxx WHERE xxx= '$getcat'");
while($fina = mysql_fetch_assoc($trtyb)) {
echo $fina['name'];
echo "<br>";
}
?>
</div>
You need to get the fresh content. The only way you can do it is with an http request. The only ways to make the http request are:
1) reloading the entire page.
2) using ajax - If you don't want a delay and that is why you don't want to use ajax, you could set up a javascript timer that would make periodic ajax calls and continuously update the data into a variable. Then when the user clicks the button to refresh the data, you can just pull the data from the stored variable.
3) put all of the content in an iframe, and that would need to be refreshed (I see no benefit to using this).
Yes you can load any div without refresh any page and without calling ajax
here is working example
// your code $("#mydiv").load("index.html")
Working code is here:
// $("#mydiv").load("'your url here + #your div name'")
$("#mydiv").load(url + "#mydiv")
Don't forget to add space in the div if you will not make space in div the program will not work anymore.
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 know I could use a php include to read the html from a file on the server but how do I write a file to the server once the user clicks to navigate to the next page?
I have a div that is changed by jquery on the 1rst page. I want to read the changed div when the user clicks to go to the 2nd page and write the html from the 1rst page to the 2nd page.
You can use combination of javascript and php code.
jquery
get the value of changed div and place it into a hidden field, wrapped within a form tag and submit the form to the next page
php
and on next page, get your hidden field value from $_post array and display it.
So you have a div that is changed via jQuery:
<div id="something">something here</div>
To access the HTML inside your div,
var myHTML = $('#something').html();
Then Use AJAX to send the value to the second page:
$.ajax({
url: 'secondpage.php',
data: {
'key' : myHTML
}
type: 'post'
});
In secondpage.php, check for $_POST['key'] as follows
if( isset($_POST['key']) ) {
// myHTML was sent successfully
}
Not sure if it's a good idea to do this as users are clicking because it would take a while for the document to get updated, and what if multiple users were trying to access the same page? You can use something called a cronjob, which basically executes PHP from your site's server at a specified time interval. I did this to update my website with my Twitter feed every 10 minutes, but doing it on every click would be too slow. What exactly are you trying to do?
When the user clicks on "go to next page" link, send AJAX request to
some PHP file.
The AJAX request should contain the div html (use
jQuery: $(this).html())
In the php file write the html, and return
information to AJAX (true/false).
When AJAX success go to the next page.
I'm trying to learn how make an AJAX script
for a LIKE button, on my website. I have the following questions:
if i'm sending 1 variable.... id.. I do this
data: "action=vote_up&id="+(this).attr("id")",
is this syntactically correct if i'm sending two variables id and id1 ?
data: "action=vote_up&id="+(this).attr("id")&id1="+(this).attr("id1")",
2) What goes into the href attribute? The php page or the AJAX?
<img scr="like.png">
3) which is run first.. The php page or the AJAX.
4) Is it mandatory for me to use jQuery or Pure Javascript for running AJAX
thanks for your time and patience. I most appreciate it.
1) Yes, you could simple undestand it as a PHP-Get request to a script, so multiple vars are possible, like Adam mentioned.
2) For backwards compatibility you should just link to a PHP/whatever-Script that provides the same functionality but doesn't rely on javascript (Not everyone has js enabled). In your javascript you just disable the defult click actione ( see: http://api.jquery.com/event.preventDefault/ ) otherwise it you only want to allow the like funktionality if js is enabled than you could just link to the page anchor '#'.
3) The page runs first. It is progressed by the server and than sent to your browser. In the browser the recieved javascript will start its action.
4) Everything you are using in jquery is based on simple javascript functions, but jquery is much more comfortable ;) The equivalent to the ajax method of jquery is XMLHttpRequest ( http://www.w3schools.com/xml/xml_http.asp )
Here is a idea, hope it helps.
If handle_vote.php is the URL responsible for the handle the up vote, you must do two things:
the a href is the URL with the query string for the up vote, your data, is this case. It must be generated for you server application. It will be used in case of no javascript.
you should put you event to handle the up vote in the a onclick event, to send the ajax request, and use the preventDefault jQuery function to avoid the default event. In this case, a href will never be used, the js will suppress the link click.
A code sample will be almost like this, in you php page:
<a class="like" href="handle_vote.php?action=vote_up&id=<?php echo $post_id; ?>"><img src="like.png"></a>
And it as your jQuery script:
$(function() {
$('a.like').on('click', function(e) {
e.preventDefault();
$.get($(this).attr("href"));
});
});
You can personalize as you like, it is only the idea of how to do it.
<img scr="like.png"> put onclick event on that link, and make AJAX request` to increment count, on success response update count clicks on button. And you forgot about one thing, you should save the state of that button. Because one user can go to your site and click 1000 times on it.