I am completely new to all of this coding.. so I apologies for my ignorance in advance.
I have this jquery function (button) which changes the size of the table of where my Post.php is loaded, (to alternate between portrait and landscape). the function itself works great in changing the size however i am stuck in reloading the post.php page.
$("#cSize").toggle(
function () {
$('#p_CWidth').animate({width:720});
$('#p_SWidth').animate({width:110});
}, function() {
$('#p_CWidth').animate({width:520});
$('#p_SWidth').animate({width:310});
});
what i need to add to this code is away of changing the variable p_Type to true or false and reloading the post.php or the div p_Post
<div id="p_Post">
<? $p_type = true;
include 'profile/post.php'; ?>
</div>
post.php with the above code is loaded fine and i tested it by manually changing p_type to false/true and it loaded ok. But how can i get this automated with the jquery functoin above?
I have tried .load('profile/post.php') however this brings me an error for db access!!
any help is really appreciated
AB
UPDATE
I have changed my php file to just a simple php without any link to mysql for testing, and i have tried the suggested code:
var p_type = false;
$("#cSize").toggle(function () {
$("#p_post").load('profile/post.php',{ 'p_type' : p_type }, function {
p_type = !p_type; //toggle the value for automation
});
$('#p_CWidth').animate({width:720});
$('#p_SWidth').animate({width:110});
});
and sadly that doesnt seem to work?!!
but with some trial and error i have manged to get change in size working again, and the php reloaded for the first time with the new right variable (p_type), however for some reason the php file only loads once! so it doesnt go back to the normal size with (p_type as true after being set as false)??? here is the code:
$("#cSize").toggle(
function () {
$('#p_CWidth').animate({width:720});
$('#p_SWidth').animate({width:110});
$("#p_Post").load('profile/p_post.php',{ p_type : false });
}, function() {
$('#p_CWidth').animate({width:520});
$('#p_SWidth').animate({width:310});
$("#p_Post").load('profile/p_post.php',{ p_type : true });
});
Thank you again in advance
ps. here is the toggle example i followed http://jsfiddle.net/6FMZY/
You can add additional data to your jQuery snippet like this
$("#p_post").load('profile/post.php',{ p_type : false });
But since you are trying to automate this, while relaoding
var p_type = false;
$("#p_post").load('profile/post.php',{ 'p_type' : p_type }, function(data) {
'p_type' = !p_type; //toggle the value for automation
});
Update:
Here is a simulation of sending the data on toggle
Soooorted!
I have edited the p_post.php to make it easier by adding get function:
<?
if(isset($_GET['p_type'])){
$p_type=$_GET['p_type'];
}
if($p_type == "normal"){
// what happen here
} if($p_type == "wide"){
// what happen here
}
?>
for the jquery i used:
$("#cSize").toggle(
function () {
$('#p_CWidth').stop(true).animate({width:720});
$('#p_SWidth').stop(true).animate({width:110});
$("#p_Post").load('profile/p_post.php?p_type=wide');
}, function() {
$('#p_CWidth').stop(true).animate({width:520});
$('#p_SWidth').stop(true).animate({width:310});
$("#p_Post").load('profile/p_post.php?p_type=normal');
});
Now its working perfect and just need to sort the denied access issue for php!!
Thank you again for the help
Related
I’m using Zend framework (php) and I’m trying to submit a from using ajax/jquery.
Here’s the .phtml:
<form id="find">
<input type="text" name="name">
<input type="submit" id="submit" value="Submit">
</form>
Here’s the ajax/jquery part:
$(document).ready(function() {
$("#submit").click(function(){
$.ajax({
type:'POST',
url: "<?php echo SITE_URL;?>Training/test",
data:$('#find').val(),
success: function(response) {
alert (response);
}
});
});
});
Here, “Training” is the controller and “test” is the action inside the controller. The action has just 1 line of code which is echo “hello”. After the user types a number in the box and clicks on “submit”, the control has to go to the controller thus displaying “hello” on success. However, nothing happens when I click on it. Please help me. Thanks in advance.
You didn't name parametr in Ajax call
data:$('#find').val(),
change it to
data:{'param': $('#find').val()},
About Zend it doesn't matter if it's zend or not. You can handle request just providing proper URL. You can access param value in Zend via $this->getParam('param') method.
Also you don't prevent default submit action. Change your function to:
$("#submit").click(function(ev){
ev.preventDefault();
or use in the end of function return false;
I did not test your jQuery. But note you need the instruction event.preventDefault to ensure you haven't the normal form submit action.
The main problem is at your zend Controller because you need a
special response. I suppose you have a controller to perform the request logics. I'll name it AjaxController and I'll name the action ajaxrecuestAction to illustrate how to send a proper response.
<?php
// Filename: yourProject/module/ModuleName/src/Controller/AjaxController.php
namespace ModuleName\Controller;
use Zend\Mvc\Controller\AbstractActionController;
use Zend\View\Model\ViewModel;
class AjaxController extends AbstractActionController {
public function ajaxrecuestAction(){
// This function is called by zend to procces your ayax request
// you must test if it's an xmlHttpRequest
$request = $this->getRequest();
$is_xmlHttpRequest = ($request->isXmlHttpRequest()) ? 1 : 0;
if(!$is_xmlHttpRequest){
// If not you must return a normal page, a message page
// perhaps a forgiven message page, etc. It depends on your site
// logics
}else{
// The solution's KEY
// You must disable the zend's normal output
$viewmodel = new ViewModel();
$viewmodel->setTerminal($is_xmlhttprequest);
// Proccess the input and prepare your output
$output = CallTheLogicsToPrepareIt($request->getContent());
// send your response
$response = $this->getResponse();
$response->setContent($output);
return $response;
}
}
**EDIT: Just noted that, in your HTML, you didn't give an ID attribute to the "find" field. Therefore $('#find').val() will give you an error, something like "cannot find method val() of undefined. Add the id=find tag to your and it should work.
** Other Edit: Sorry about the confusion. Your form has id=find but what you want to send to the server (I believe), is the value of the fields. So give an ID=name to your input then use:
var data = {find: $('#name').val()};
You should start by using your console to see if the event is triggered. Something like:
<script>
$(document).ready(function() {
$("#submit").click(function(e){
e.preventDefault ? e.preventDefault() : e.returnValue = false; //This will prevent the regular submit
console.log('Hello');
});
});
</script>
(You do use Fire bug or the Chrome dev tools, right) ? If not, look at the end of this post.
If you can see the Hello in your console, you're on the right path. Then try to set your url in a variable and try to check it in your console:
<script>
var url = "<?php echo SITE_URL;?>Training/test";
$(document).ready(function() {
$("#submit").click(function(e){
e.preventDefault ? e.preventDefault() : e.returnValue = false; //This will prevent the regular submit
console.log(url);
});
});
</script>
Then you should see the url in the console, meaning you're still doing good.
If that works, try to set the data and check the output in the same way:
<script>
var url = "<?php echo SITE_URL;?>Training/test";
var data = {
find: $('#find').val()
};
$(document).ready(function() {
$("#submit").click(function(e){
e.preventDefault ? e.preventDefault() : e.returnValue = false; //This will prevent the regular submit
console.log(data);
});
});
</script>
Hoping everything still works (you saw the data), then try the actual full code and see if you have an error or something. Also, be sure to include an error function to your ajax call so you will have a response if something went wrong on the server.
<script>
var url = "<?php echo SITE_URL;?>Training/test";
$(document).ready(function() {
$("#submit").click(function(e){
e.preventDefault ? e.preventDefault() : e.returnValue = false; //This will prevent the regular submit
var url = "<?php echo SITE_URL;?>Training/test";
var data = {
find: $('#find').val()
};
$.ajax({
type:'POST',
url: url,
data: data,
success: function(response) {
alert (response);
},
error: function(resp) {
alert(resp.responseText);
}
});
});
});
</script>
Some tools to help you out:
If you are using FireFox, use FireBug for your debugging: https://addons.mozilla.org/fr/firefox/addon/firebug/
If you are using Chrome (my personal favorite), learn a bit more about Chrome Developer Tools: https://developers.google.com/chrome-developer-tools/?hl=fr
If you are using IE, please switch to something else for development purposes, then try it in IE to make sure you code is compatible (most likely won't be but it will be easier to find out why it doesn't work afterwards).
As for the line e.preventDefault......, look into this SO post for more details: https://stackoverflow.com/a/15913969/1483513
Hope this helps !
I am trying to update the content of a div with a $.get call but it is failing in ie(9).
the js is this
function UpdateElementOfParent(box_id, page_ref, template_ref)
{
$.get("get_content.php", { box_id: box_id, page_ref: page_ref, template_ref:template_ref } )
.done(function(data) {
$('#'+box_id).html(data);
});
}
and the get_content.php is this
<?php
include("connect.php");
$page_ref = $_GET['page_ref'];
$template_ref = $_GET['template_ref'];
$box_id = $_GET['box_id'];
$sql = mysql_query("SELECT * FROM site_content WHERE page_ref='$page_ref' AND template_ref='$template_ref' AND box_id='$box_id' AND box_type='text'");
while($row=mysql_fetch_array($sql))
{
echo stripslashes($row['content']);
}
?>
it works fine in firefox/chrome/safari and opera.
the php updates the db but the div ("#"+box_id) doesnt update in ie (only have ie9 at hand so dont know if its just 9 or other versions also)
any clues?
QUICK UPDATE
it seems that ie is holding some data from a previous $.get call in the cache. Basically I have a div on the screen and when the user clicks a button, a layer opens with a textarea that is editable with nicedit.
The textarea is populated with a $.get, then the user clicks save, the layer is hidden and the original div on the parent page is updated with the same $.get call.
In ie, if I change the content, the db is updated but the div is not and when I open the layer, it still shows the old data.
the first $.get call is this
$.get("get_content.php", { box_id: box_id, page_ref: page_ref, template_ref:template_ref } )
.done(function(data) {
document.getElementById("edit_content").value=data;
area1 = new nicEditor({fullPanel : true}).panelInstance("edit_content",{hasPanel : true});
});
the alerted data doesnt show the updated text in IE so its definately something to do with the $.get call
I figured out the problem. Nothing to do with the selector, but with the scope of the parameter variable box_id.
Change your function to:
function UpdateElementOfParent(box_id, page_ref, template_ref) {
myBox = box_id;
$.get("get_content.php", { box_id: box_id, page_ref: page_ref, template_ref:template_ref })
.done(function(data) {
$('#'+myBox).html(data);
});
}
Explanation:
The AJAX callback function does not have access to the local variable in UpdateElementOfParent
This isn't an answer, as the question is incomplete, but I need to post a code comment to assist OP.
As you mentioned that the PHP works just fine, the problem might be that IE doesn't like dynamic selectors in jQuery. Do try these few options:
1) Change $('#'+box_id).html(data); to:
var id = '#'+box_id;
$(id).html(data);
2) Try logging or alert-ing the element out, to see if IE actually got the element right:
var elem = $('#'+box_id);
alert(elem);
elem.html(data);
This would display as [HTMLDivElement] or something similar if the element is there.
3) If all else fails, see if this vanilla JS works in IE, to verify that it isn't a jQuery selector problem.
var elem = document.getElementById(box_id);
alert(elem);
elem.innerHTML = data;
ok problem solved and I knew it was something very obvious.
inside the original $.get function call I have to set the document.ready state
function get_edit_content(box_id,page_ref,template_ref)
{
$(document).ready(function() { <<<<<HERE
if(area1) {
area1.removeInstance('edit_content');
area1 = null;
document.getElementById("edit_content").value="";
}
$.get("get_content.php", { box_id: box_id, page_ref: page_ref, template_ref:template_ref } )
.done(function(data) {
document.getElementById("edit_content").value=data;
document.getElementById("page_ref").value=page_ref;
document.getElementById("template_ref").value=template_ref;
document.getElementById("box_id").value = box_id;
area1 = new nicEditor({fullPanel : true}).panelInstance("edit_content",{hasPanel : true});
});
});
}
thanks for all the input
I need to be able to replace a php file with another php file based on screen resolution. This is what I have so far:
<script type="text/javascript">
function adjustStyle(width) {
width = parseInt(width);
if (width = 1920) {
$('book.php').replaceWith('book2.php');
}
}
$(function() {
adjustStyle($(this).width());
$(window).resize(function() {
adjustStyle($(this).width());
});
});
</script>
which obviously isn't working-- any ideas? Thank you in advance for any help received.
UPDATE
Is this at all close (to replace the book.php line)?
{ $("a[href*='book.php']").replaceWith('href', 'book2.php'); };
Second Update to reflect input gathered here
function adjustStyle(width) {
width = parseInt(width);
if (width == 1920) {
$('#bookinfo').replaceWith(['book2.php']);
$.ajax({
url: "book2.php",
}).success(function ( data ) {
$('#bookinfo').replaceWith(data);
});
$(function() {
adjustStyle($(this).width());
$(window).resize(function() {
adjustStyle($(this).width());
});
});
}
}
I have not seen the use of replaceWith in the context you put it in. Interpreting that you want to exchange the content, you may want to do so my using the load() function of jQuery.
if(width == 1920){
$("#myDiv").load("book1.php");
} else {
$("#myDiv").load("book2.php");
}
Clicking on the button replaces the content of the div to book2.php.
The first problem is I don't think that you are using the correct selectors. If you have the following container:
<div id="bookContainer">Contents of book1.php</div>
The code to replace the contents of that container should be
$('#bookContainer').replaceWith([contents of book2.php]);
In order to get [contents of book2.php] you will need to pull it in by ajax using the following code I have also included the line above so that the data from book2.php will be placed into the container:
$.ajax({
url: "http://yoururl.com/book2.php",
}).success(function ( data ) {
$('#bookContainer').replaceWith(data);
});.
I haven't tested this so there might be an issue but this is the concept you need to accomplish this.
First off... using a conditional with a single = (equal sign) will cause the condition to always be true while setting the value of variable your checking to the value your checking against.
Your condition should look like the following...
if (width == 1920) { // do something }
Second, please refer to the jQuery documentation for how to replace the entire tag with a jquery object using replaceWith()... http://api.jquery.com/replaceWith/
I would use a shorthand POST with http://api.jquery.com/jQuery.post/ since you don't have the object loaded yet...
In short, my code would look like the following using $.post instead of $.ajax assuming I had a tag with the id of "book" that originally has the contents of book.php and I wanted to replace it with the contents of book2.php...
HTML
<div id="book">*Contents of book.php*</div>
jQuery
function onResize(width) {
if (parseInt(width) >= 1920) {
$.post('book2.php',function(html){
$('#book').html(html).width(width);
});
}
else {
$.post('book.php',function(html){
$('#book').html(html).width(width);
});
}
}
Hope this helps.
I'm currently writing a php script that is checking if there's no image in a array.
If there is no images, i need a messagebox (i use jquery msgbox) that ask if you wan't to create a product without an image.
If the user clicks yes, how do i then return true so the php code can be executed?
I know php is server side, so I "just" need your suggestion, what's the best solution here.
Currently my code is something like:
<?php if(!isset($_POST['img'] //imagearray)){?>
<script>
$.msgBox({
title: "Sure?",
content: "Add product without images?",
type: "confirm",
buttons: [{ value: "Yes" }, { value: "No" }, { value: "Cancel"}],
success: function (result) {
if (result == "Yes") {
return true;
}else{
return false;
}
}
});
</script>
<?php } ?>
Ok, here is an example,
<script>
$("#my-super-form").submit(function(event) {
if($("#id-of-your-image-input").val()=="")
if(confirm("Add product without image?")) {
return true;
} else {
return false
}
}
return true;
});
</script>
Its not tested, but I think you can figure out how it works.
If you use jQuery, you want to check if image is set after the post.
When user click is sent button, you can use your confirm messageBox, if image not found ^^
it's more intuitive for user.
A button click fires my function that fetches image data via an AJAX-call:
$("#toggle_album").click(function () {
album_id = $("#album_id").val();
$.post('backend/load_album_thumbnails.php', {
id: album_id
}, function(xml) {
var status = $(xml).find("status").text();
var timestamp = $(xml).find("time").text();
$("#album_thumbs_data_"+album_id+"").empty();
if (status == 1) {
var temp = '';
var output = '';
$(xml).find("image").each(function(){
var url = $(this).find("url").text();
temp = "<DIV ID=\"thumbnail_image\">[img-tag with class="faded" goes here]</DIV>";
output += temp;
});
$("#album_thumbs_data_"+album_id+"").append(output);
} else {
var reason = $(xml).find("reason").text();
var output = "<DIV CLASS=\"bread\">"+reason+"</DIV>";
$("#album_thumbs_data_"+album_id+"").append(output);
}
$("#album_thumbs_"+album_id+"").toggle();
});
});
The data is returned in XML format, and it parses well, appending the data to an empty container and showing it;
My problem is that my image overlay script:
$("img.faded").hover(
function() {
$(this).animate({"opacity": "1"}, "fast");
},
function() {
$(this).animate({"opacity": ".5"}, "fast");
});
... stops working on the image data that I fetch via the AJAX-call. It works well on all other images already loaded by "normal" means. Does the script need to be adjusted in some way to work on data added later?
I hope my question is clear enough.
Okay, apparantly I hadn't googled it enough. Surfing my own question here on stackoverflow pointed me to other questions, which pointed me to the JQuery live() function: live().
However, it does not work on hover(), so I rewrote the script to use mouseover() and mouseout() instead:
$("img.faded").live("mouseover",function() {
$(this).animate({"opacity": "1"}, "fast");
});
$("img.faded").live("mouseout", function() {
$(this).animate({"opacity": "0.5"}, "fast");
});
... and now it works flawlessly even on the content I fetch from the AJAX-call.
Sorry if anyone has started writing an answer already.
You have to bind the new events each time you add a DOM element to the page.
There is a built-in function in jquery called live that does that for you.
I noticed you add the images from your xml; you can add there the new binds too.
$(xml).find("image").each(function(){
//this actually creates a jquery element that you can work with
$('my-img-code-from-xml-goes-here').hover(
function() {
$(this).animate({"opacity": "1"}, "fast");
},
function() {
$(this).animate({"opacity": ".5"}, "fast");
}
//i did all my dirty stuff with it, let's add it where it belongs!
).appendTo($('some-already-created-element'));
});
EDIT: corrected a wrong sentence.