Im having problems with dialog box. I wanted to display inside the Dialog box the HTML content of the another page. for example.
index.php
var url = "/leave_ot/statistics.php?what="+type+"&item="+applicant;
//alert(url);
$.ajax({
type : 'GET',
url : url,
success : function(result)
{
$( "#dialog" ).dialog({
height: 140,
modal: true
});
}
})
applicant.html
some html codes
I wanted to put the html contents of applicant.html into the dialog box of index.php
Use the .html() method to insert the HTML result into the DIV.
$.ajax({
type : 'GET',
url : url,
success : function(result)
{
$( "#dialog" ).dialog({
height: 140,
modal: true
}).html(result);
}
});
Note that this only works if the URL is in the same domain; cross-domain AJAX prevents using it for other domains. If you need that, you'll have to use an IFRAME; see the answers in How do you open a URL in a dialog box JQUERY UI
Related
I have the following code:
HTML
<div id="resume-begin" style="background:#CCCCCC; display:inline-block;">
<img src="/images/plus-plus.png" style="display:inline;" class="trigger"/>
</div>
<div class="input-resume-data" style="display:none;">
<form id="project-form">
<label for="resume-create-name">Resume Project Name:</label>
<input type="text" id="resume-create-it" name="resume-create-it" class="text ui-widget-content ui-corner-all">
</form>
</div>
jQuery
<script>
$(document).ready(function() {
$('#resume-begin').click(function() {
('#resume-begin').hide();
$('.input-resume-data').dialog("open");
});
});
</script>
Once the div resume-begin is clicked, it opens my UI Dialog box, which is as follows:
<script>
$(function() {
$( ".input-resume-data" ).dialog({
title: 'Name your Resume Project',
autoOpen: false,
resizable: false,
height: 450,
width: 380,
show: { effect: 'drop', direction: "up" },
modal: true,
draggable: true,
buttons: {
"Submit": function() {
var $this = $(this);
var string = $('#resume-create-it').serialize();
$.ajax({
url: 'functions.php',
type: 'POST',
data: string,
success: function(data){
alert("Project created!");
$this.dialog('close');
}
});
},
Cancel: function() {
$( this ).dialog( "close" );
$( "#resume-begin" ).show( "slow", function() {
}); //end function
} //end cancel button
} //end buttons
}); //end dialog
}); //end jquery function
</script>
What I would like:
Once the user enters the text in the UI-input, and clicks Submit, I want to post the data to the PHP page, where I would save it to the database. Currently, if I enter in data and push submit, the success function works, but the data is not saved in the database.
In my PHP, I try to grab the data like:
//Sanitize the POST values
$resumeProjectname = $_POST['resume-create-it'];
I am unsure if I am passing the data correctly, which is through the variable "string" in jQuery, as well as if I'm retrieving the data correctly in the php file.
Any help would be greatly appreciated. Please let me know if you have any questions!
Thanks.
From my view i found two errors
('#resume-begin').hide();//$ missing
and another
var string = $('#resume-create-it').serialize();
should be
var string = $('#project-form').serialize();
As serialize applies to Form.
https://api.jquery.com/serialize/
To send your data do the following
data: {
resume_name: string
},
dataType: "json"
And then in PHP access it with
$resume_name = $_POST['resume_name'];
And as a final note, I wouldn't call a variable string since string is a keyword in many languages. At first I thought you were trying to tell it that the data you're sending is a string. Also don't call the response from the server data because you use the word data two lines above it. Use something like response.
I should mention
You don't have to use JSON. You can use other data types but that is one of the critical pieces that you are missing. You need to set the dataType so that jQuery knows how to format your response. I personally think that since you are using JavaScript to begin with it makes sense to use JavaScript Object Notation.
I have PHP page called (jQuery_puff.php) which only holds a javascript/jQuery in it.
The jquery in that PHP is this:
<?php
echo '<script>
$( "#myButton" ).click(function() {
$( "#myDiv" ).effect( "puff", "slow" );
$( "#myDiv" ).toggle( "puff" );
});
</script>';
?>
I have included this PHP page within another PHP file like so:
<?php include "jQuery_puff.php"; ?>
what the first code inside the jQuery_puff.php does is that it will apply a jquery puff effect to the #myDiv everytime the user clicks on the #myButton.
Everything works as they should. so far so good. but this is only happens for one user (client side).
Now My Question:
Is there any way to run this PHP page in real time for all the users using AJAX?
For example the USER 1 clicks on the #myButton and the USER 2, USER 3 etc will also see the puff effect being applied to the #myDiv ?
I thought about using something like this But this doesn't do anything!!
<script type="text/javascript">
$(document).ready(function() {
$("#myButton").click(function() {
$.ajax({
url: 'myOwn.php',
cache: false,
success: function(data) {
checkForNewData2();
}
});
});
var intervalID2 = setInterval(checkForNewData2, 500);
});
function checkForNewData2() {
$.ajax({
url: 'jQuery_puff.php',
dataType: 'json',
cache: false,
success: function(data) {
$("#data").html(data.data);
}
});
}
</script>
am I in the right direction? or...?
I have an issue at the moment regarding PHP, Jquery and Ajax.
I have a a div at the bottom of my page that has data in it from a database, now for every iteration of the data a new div is formed, the div has an id of 'pagestatus' and has an auto increment next to it so the id changes for each div like so: 'pagestatus0', 'pagestatus1' etc.
Now I'm not completely new to Jquery as I have used it to make pages more interactive and I've used Ajax to update a MySQL database.
I'm having trouble with the code though, I would like it go something like this:
Button is clicked in div
Button fades in (or div, which ever is easier)
A hidden div with a loading gif appears underneath
Ajax calls to the php file to make changes to the database
jquery then fades the loading gif back out and fades the button back in
I have wrote some code for it but I think I am going wrong somewhere, could someone see what I am doing wrong and let me know how to fix it.
Here is my Jquery:
$(document).ready(function(){
for(i=0;i<$('#changestatusoff').val();i++){
(function(x){
$('#changestatusoff'+x).click(function(){
$('#changestatusoff'+x).fadeOut('slow',function(){
$('#loadingstatus').fadeIn('slow',function(){
$.ajax
({
type: "POST",
url: '.php',
data: {'changestatusoff': changestatusoff},
success: function(data) {
return data;
},
error: function() {
alert('Error occured');
}
$('#loadingstatus').fadeOut('slow',function(){
$('#changestatusoff'+x).fadeIn('slow',function();
});
});
});
});
});
});
}
})(i);
});
And here is the button in the div:
<input type='button' value='Offline' id='changestatusoff".$count."' style='background: none repeat scroll 0% 0% rgb(0, 118, 188); color: rgb(255, 255, 255); border: 1px solid rgb(0, 0, 0); font-weight: bold; cursor: pointer; margin:5px;'/>
Any help is appreciated
As the others mentioned, we have no idea what you are submitting ;-)
Use a class, which means it dosent have to make a new bind for each item, it can do it all at once.
You could do something like:
$(function() {
//set loading
var $loading = $('#loadingstatus');
//on changeStatus click
$('.changeStatus').click( function(e) {
//since we dont have a form, disable default behaviour
e.preventDefault();
//set $this as the item clicked
var $this = $(this);
//fadeIn loading, fadeout the item
$this.fadeOut();
$loading.fadeIn();
//make ajax request
$.ajax
({
type: "POST",
url: 'yourPhpFile.php',
data: {'changestatusoff': $(this).val()},
success: function(data) {
//Do something with data?
$loading.fadeOut();
$this.fadeIn();
},
error: function() {
//Do nothing, and tell an error happened
alert('An error occured');
$loading.fadeOut();
$this.fadeIn();
}
});
});
});
I think you need to check data: {'changestatusoff': changestatusoff} and try changing it to data: {changestatusoff: 'changestatusoff'}
If you want to change loading gif back, then you should put the last two lines:
$('#loadingstatus').fadeOut('slow',function(){
$('#changestatusoff'+x).fadeIn('slow',function();
in completed callback, not after ajax call.
$.ajax
({
type: "POST",
url: '.php',
data: {'changestatusoff': changestatusoff},
success: function(data) {
return data;
},
error: function() {
alert('Error occured');
},
completed: function() {
$('#loadingstatus').fadeOut('slow',function(){
$.('#changestatusoff'+x).fadeIn('slow',function();
}
Try the following
$(function(){
$('#Your_Event_Source').click(function(){
$(this).fadeOut(600);
$('#loadingstatus').fadeIn(600);
$.post('you_file.php',{changestatusoff: 'yourValue'},function(data){
if(data.success == 'yes'){
alert(data.message);
$('#Your_Event_Source').fadeIn(600);
$('#loadingstatus').fadeOut(600);
}else{
alert('failed'+ data.message);
$('#Your_Event_Source').fadeIn(600);
$('#loadingstatus').fadeOut(600);
}
},'json');
});
});
I recommend to use 'success' in php:
$data = array('success'=>'yes','message' => 'your meaasage',...);
echo json_encode($data);
I created a conformation box from jquery. I want to submit the page and view PHP echo message when click the confirm button in the confirmation box. Can you help me with code that comes for the confirmation button?
My jQuery/javascript function is here:
$(document).ready(function(){
$('#click').click(function(){
//$(function() {
// a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore!
$( "#dialog:ui-dialog" ).dialog( "destroy" );
$( "#dialog-confirm" ).dialog({
resizable: false,
height:140,
modal: true,
buttons: {
"Ok": function() {
// I WANT THE CODE FOR HERE TO SUBMIT THE PAGE TO WIEW PHP ECHO MESSAGE
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
});
});
You can use jQuery Form submit library. This will give you many options.
And according to your requirement you can call
beforeSubmit: 'YOUR FUNCTION To OPEN DIALOG',
If this returns true your form will get post and you will definitely get response.
see example here : http://malsup.com/jquery/form/#ajaxForm
Use the jQuery Post function...
$.post("test.php", { 'choices[]': ["Jon", "Susan"] });
Here is a version with a callback when the post completed...
$.post("test.php", { name: "John", time: "2pm" },
function(data) {
alert("Data Loaded: " + data);
}
);
Or if you have an existing form that you want to post use the jQuery submit function...
$("form").submit();
But before you do this you need to make sure that you populated the input fields in the form.
try this code,
var parameter_1 = 'test';
var parameter_2 = 'test';
$.ajax(
{
type: "POST",
url: "/submit_url.php",
data: "parameter_1="+ parameter_1 +"& parameter_2 ="+ parameter_2,
success: function(html)
{
alert('Submitted');
}
});
So im working on a friend search function. The search function works great. When you search a name, each individual user pops up in separate div's with there picture and name and a box that says "request". Now what i want to do, is when you click the box itll run some jQuery to request the user, but it seems that jQuery isnt working inside my live loading JS div.
Heres my code:
$(document).ready(function(){
$('.request').mouseover(function() {
$(this).addClass('select');
});
});
$(document).ready(function(){
$('.request').mouseout(function() {
$(this).removeClass('select');
});
});
$(document).ready(function(){
$('.request.select').click(function() {
var name = $(this).attr('href');
$.ajax({
type: "POST",
url: "requestfriend.php",
data: {'name': name}
});
$(".request.select").load('checkmark.php', function(){ });
});
});
And Here is the HTML of the user div.
echo '
<div class="update miniuser" style="margin: 3px; width: 395px;">
<div><img src="http://myurl.com/' . $FRIENDS[$i] . '/user.png" /></div>
<div style="margin-top: 10px;">' . $FRIENDS[$i] . '</div><div class="request" href="' . $FRIENDS[$i] . '">Request</div>
</div></div>';
The add class isnt working. I believe its because its being loading live in the div? thats when i put the document ready functions on them. still no dice.
I'm guessing you want .live(), which adds the function to all elements with that selector, dynamically loaded or no.
$('.request.select').live("click", function() {
var name = $(this).attr('href');
$.ajax({
type: "POST",
url: "requestfriend.php",
data: {'name': name}
});
$(".request.select").load('checkmark.php', function(){ });
});
You're adding the mouseover/out event on document ready. The data you load doesn't get added to the DOM until much later. After you've done your AJAX request and the content is added to the DOM, attach the events.
$('.request').mouseover(function() {
$(this).addClass('select');
});
Means: find all elements with the class request and add a mouseover function. The handler doesn't magically appear on elements you add afterwards.