I am just starting with PHP. What i am trying to get to do is change the color of a div from a function that's in an included page. I was able to do this in jquery using load() function.
Here is my current work:
index.php:
include 'functioncontainer.php';
<div style="background-color:#ffff00;">I want this back. color changed</div>
functioncontainer.php:
`<script>
$(document).load(function() {
$('.change').click(function() {
$('div').css('background-color','#06C');
});
});
</script>`
I don't know php but I think you need to echo
echo "<script>
$(document).load(function() {
$('.change').click(function() {
$('div').css('background-color','#06C');
});
});
</script>";
Related
I am having name, email in content of a html page. i have to validate it on clicking continue button. and also the content in the content div has to change. how can i do both on clicking the continue button. help me with some suggestions. thanks.
am using the following code for changing div content.
<script>
$(document).ready(function () {
$("#button").click(function () {
$("#content").load("<?php echo base_url().'survey/categories' ?>");
});
});
$(document).ready(function () {
$("#button1").click(function () {
$("#content").load("<?php echo base_url().'survey/budget_overview' ?>");
});
});
</script>
As i understand your question, i think what you want is to do the two tasks at the same time on click of the button. So here's some sample code assuming this is what you want. If you have any doubts just ask. And i have added just sample Email Validation Using RegExp in JavaSript at the end of the code as a function.. Get the idea, Hope this helped you,,
//
$(document).ready(function() {
//Button1 Click
$("button").click(function(){
//initialize inputs here
var email =$("#email").val;
var input1=$("#input1").val;
//Validate Inputs Here
if(IsEmail(email)==true && input1!=""){
return true
}
else{
return false;
}
//Loading the first content after validating inputs
$("#content").load("<?php echo base_url().'survey/categories' ?>");
//To Trigger the other button
$('#button1').trigger('click');
});
//Button1 Trigger Will fire Click event
$("#button1").click(function () {
$("#content").load("<?php echo base_url().'survey/budget_overview' ?>");
});
});
//Email Validation In JavaScript
function IsEmail(email) {
var regex = /^([a-zA-Z0-9_\.\-\+])+\#(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
return regex.test(email);
}
I think the problem is with your syntax. You have to specify a file URL in the load method like this:
$(document).ready(function(){
$("form").submit(function(){
$("#content").load("myfile.php");
return false;
});
});
You can have a look on the load documentation.
I created a jquery function in a js file that is included in a php page.
Js file
$( function() {
function disab(){
$('input#idname').attr('disabled', 'disabled');
}
});
In my php file I tried to call the disab function in this way but with no success.
echo "<script>";
echo "$(function(){";
echo "disab();";
echo "});";
echo "</script>";
How can I do this? thanks
first of all put your funciton outside the document.ready function in your js file...so that it is global and can be accessed from anywhere.
function disab(){
$('input#idname').attr('disabled', 'disabled');
}
$( function() { .. }); //use if needed..
and call the function inside <script> tag in php file
<?php
//all you php related codes
...
?>
<script>
$(function(){
disab();
});
</script>
and most important, use prop() instead of attr() ... if you are using latest version of jquery (jquery 1.6+ )
$('input#idname').prop('disabled', true);
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.
Hi and thanks for taking some time to look at my question. I have a part of the page where content is dynamicly loaded into from another file. Reason for this is it needs to be live updated. Now I want to be able to apply jquery effects that are usually used for show/hiding content (slide, fade etc) to animate the difference between the current data and the new data. This is the code used to get the content and load it into the div:
function k() {
$.post("../includes/ajaxAgenda.php", {
limit : value
}, function(data) {
$('#tab-agenda').html(data);
});
};
$(document).ready(function() {
k();
$('#tab-agenda').scroll(function() {
loadMore();
});
});
var refreshId = setInterval(function() {
k();
}, 1000);
So I guess my question is how do I animate what gets loaded in so it doesn't just "pop" from one content to another?
edit: I tried using the .live instead of .scroll but it doesn't seem to work:
$(document).ready(function() {
$('#tab-agenda').live("scroll",function() {
alert("hi");
loadMore();
});
});
You need to use live function of jquery to bind the dynamically added elements.
Ref: http://api.jquery.com/live/
Try this :
$('#tab-agenda').live("scroll",function() {
loadMore();
});
I suggest you to add the ajax loader image with proper css over the content/ div as like below.
function loadmore(){
$("#loader").css('display','block');
//your
//code
//here
$("#loader").css('display','none');
}
html
<img id="loader" src="ajax-loader.gif" style="display:none" />
<div id="content">
your cont to display
</div>
I have two files: index.php and cart.php
In cart.php I have few three functions - products_all(), products_shirts(), products_hoodies(). Those functions get info from my database and outputs it if called.
I want each of those functions to be called by clicking on hyperlinks and then to be outputed in a div tag, so that only the div tag is being refreshed not the whole site.
I read about jQuery/AJAX function load, but I can't get it to work.
If you don't want the whole page to be refreshed, there is no way around using ajax.
But it's not that hard. When using a library like jQuery, you can do it in a few lines.
Your HTNL + javscript code:
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
function callFunction(yourfunction)
{
$.post('cart.php', { "function": yourfunction }, function(data) {
alert(data);
});
}
$(document).ready(function()
{
$("#functionOne").on("click", function()
{
callFunction(1)
});
$("#functionTwo").on("click", function()
{
callFunction(2)
});
});
</script>
</head>
<body>
<a id="functionOne">function one</a>
<a id="functionTwo">function two</a>
</body>
</html>
And on the server side (cart.php) something like this:
<?php
if (isset($_POST['function']))
{
switch ($_POST['function'])
{
case 1:
functionOne();
break;
case 2:
functionTwo();
break;
}
}
function functionOne()
{
echo "hi, i am func1";
}
function functionTwo()
{
echo "hi, i am func2";
}
This should get you started!