Develop Reference

Update HTML content after a webpage has been loaded without reload

I'm using php and jquery and trying to get a notification to appear after a user submits a form. I'm using ajax for the form submission so that the page does not reload. I want the notification to contain some of the information from the form so they know if it has been entered already. The notification is just a hidden div that is shown when the ajax data is sent. Is there any PHP statements or something in javascript or JQuery that can do this?

Use ajax like this:
ajaxCall("formHandler.php", yourForm);
function ajaxCall(url, postData){
$.ajax(url, {
dataType: "json",
method: "post",
data: {postData}
success: function(data) {
// your Code, example:
document.getElementById("yourDIV").style.display="block";
});
return true;
}

Ajax call when user presses back button

I have a problem in my current application. I load lots of page content via ajax and it works always as expected. However, every time user visits another page of my application and clicks back button, those ajax calls is sent every time. I found myself deleting all of the content before ajax call and load it after that. Is there a simple way for such a case ? I mean, I would like to know if there is a way that I can be informed as back button is clicked so I don't need to make another ajax call ?
This is html file:
<div id="contentToBeLoaded">
</div>
It's my current java script now:
$(document).ready(function(){
$("#contentToBeLoaded").empty(); // This is to the handle back button is clicked
$.ajax({
type: 'GET',
url: '/pageToLoadContent',
dataType: 'html',
success: function(html) {
$("#contentToBeLoaded").html(html);
},
error: function(error) {
console.log(error);
}
});
}

How to use $.ajax() function to get URL from a search bar and display the HTML response in a DIV

HTML:
<div id="browse-container">
<input type="search" id="search-bar" placeholder="Search URL..."></input>
<button id="search-button">Search</button>
</div>
Above I have a search input where the user should be able to type in any URL.
Script:
$('#search-button').click(function(){
var HTMLresp = $('#search-bar').val();
$.ajax({
url: HTMLresp,
dataType: "jsonp",
type: 'GET'
});
$('body').append('<div id="result-window"></div>');
$("#result-window").html(HTMLresp);
});
Now when the user clicks on the button the specified url is to be placed in a variable 'HTMLresp' and then that URL should be placed inside of the ajax function. After ajax function is done the HTML response of the specified URL should be displayed in a the result window div on the page.
But right now the page just displays the string version of the URL.
JsFiddle

Try as follows:
$('#search-button').click(function(){
var HTMLresp = $('#search-bar').val();
$('body').append('<div id="result-window"></div>');
$.ajax({
url: HTMLresp,
dataType: "jsonp",
type: 'GET',
success: function(data) {
$("#result-window").html(data);
}
});
});
This way, when your request finishes, and is succesfull, the response data will be placed inside your div. You should put an error handler as well, this is just a rough example.
Keep in mind the following line:
$('body').append('<div id="result-window"></div>');
This will be executed each time the user clicks the #search-button element, You should place the div #result-window directly in your dom, or append it on document load, otherwise you will end up having a lot of divs with id #result-window
I also recommend you to read about CORS and JSONP a little, because what you want to do as a lot of limitations, you cannot ask for resources from different domains (You can, with jsonp as you do, but it has its limitations as well).
http://en.wikipedia.org/wiki/Cross-origin_resource_sharing
http://en.wikipedia.org/wiki/JSONP

Passing php variables on click without refresh

The problem:
I have a series of 'accept' buttons, on click it opens a lightbox (a modal- using bootstrap), of course this is done without refreshing the page.
On the lightbox I need to show information regarding what is being accepted (therefore I need to pass a PHP variable to the lightbox). So the problem is how can I pass on a variable on click without refreshing the page? I tried using javascript, but the thing is once I set up a variable in JS I can't get that variable to PHP without refreshing the page.
The button has this code.
<button class="btn btn-acceptColor m-t-lg">Accept</button>
The other code isn't relevant for the purpose of this question. I just need the concept of how to actually do it.
Any help!?

there are many examples.
I provides some links, you can use them in your code as you suitability..
1). Ajax Tutorial
2). jQuery Ajax POST example with php
3). jQuery Ajax POST example with php
4). show data in lightbox
5). How to add jquery lightbox to content added to page via ajax?
I hope above links helpful for you
$(".btn-acceptColor").click( function (){
var person = {
name: $("#id-name").val(),
address:$("#id-address").val(),
phone:$("#id-phone").val()
}
$.ajax({
type: "POST",
url: "exaple.php",
data: person,
success: function(msg) {
var msg = $.parseJSON(msg);
if(msg.success=='yes')
{
return true;
// fill you light-box form get value from example.php page
}
else
{
alert('Server error');
return false;
}
}
});
});

Refreshing div content (php content) with ajax

i am trying to be able to edit my custom cms blog posts without leaving the page.
The way it works is each post has a edit button which when clicked hides the post text, and displays a ckeditor and also a save button.
All the code works correctly behind the scenes as to say, when saved an ajax call is made to another php page which updates the posts content. Now the issue is i want to on save, show again the text and hide the editor.
I can get this working, but i cant get the div text to update to the new content until the page is refreshed.
So the ajax looks like so:
// ... goes after Validation
if (check == true) {
$.ajax({
type: "POST",
url: "process/updatepost.php",
data: $targetForm.serialize(),
dataType: "json",
success: function(response){
if (response.databaseSuccess)
$targetForm.find('.editor').toggle('hide'),
$targetForm.find('.buildtext').load('http://localhost/buildsanctuary/viewbuild.php?id=134 +bt+'),
$targetForm.find('.buildtext').toggle('show'),
$targetForm.find('.edity').toggle('show'),
$targetForm.find('.saveupdatebutton').toggle('hide');
else
$ckEditor.after('<div class="error">Something went wrong!</div>');
}
and this is how im trying to use a variable in the selector...
var bt = $(this).attr(".buildtext");
hope this all makes sense?
Craig.