|
PHP - Php Or Jquery Or Should I Use Something Else????
Hi
I am in the process of teaching myself web development, coming from a vb and mssql background. I am building a small page that will display my film library, I just want something quick and simple that gets things working. I have three img tags on my page that display the film posters. The current film and the one previous and next. What I would like is a left and a right arrow that just scroll through the library. I am thinking I need to read the sub folder of D:\movies and story the full path name into an array, and then when the user presses a arrow it moves forward or back. Everything is local and I am unsure about how to handle the event of the left/arrow being pressed. Does PHP handle that kind of event or would Jquery be more suitable or something else completely?? thanks for any pointers. Similar TutorialsHi All (Again) I am looking to pick up variables in jquery from a string created: function search_by() { var search_term = $('#search_for', $(this).attr('value')); alert(search_term); } I cant seem to get the value i am trying to into a "var". This is the code on the page i am using a onClick="search_by();" i.e: <a class="show_cats" search_cat="PDAs & Accessories" search_for="fire" onclick="search_by();" href="#"> I am trying to get the value inside the "search_for" field. Any ideas???? I keep saying I'm going to have to learn javascript and then the library jQuery but find myself learning Swift now instead.
Short one today. I want these two functions to occur back to back. Second function only begins after the first function is complete.
$(function() {
$('.tlt').textillate();
})
$(function() {
$('.tlt1').textillate();
})
If you can please help me with this not only in just code to make that happen but also an explanation of what you did I sure would appreciate it. I've read all morning on promises etc. but have yet to be successful in implementing this.
As you can tell I'm using the plug-in textillate to fade text out one letter at a time. Works great! But I have multiple paragraphs I'm wanting to apply this too so I can't make the div class .tlt since I then lose all paragraphs since it's strips it into spans. That would be ideal of course but I think I forced into making different classes for each paragraph. This will become problematic in the future though since the content is generated dynamically and I will have no idea how many paragraphs that dynamic content will contain. So if there was a way to keep my <p> and </p> that would be even better.
Thanks!
Alright guys, I have a bit of a problem here. I am deleting records using isset($_POST) on the current page but when it submits the records i deleted are still visible. I was thinking of echoing some jquery/ajax to re-load the div that displays the records. Has anyone ever done this before? I dont want the entire page to re-load just that specific area. Hey, I have a foreach loop displaying some data from my table, what i need to do is run a Jquery each function on the repeated element so it fadesIn each element one at a time. I am guessing i need to set somesort of interval for this to work. I have been messing with it for a good hour or so now and i cant seem to get it working. Has anyone done this before or seen it done else were? Im wondering if i should use jQuery or Php. and how about i would go about doing this. Code: [Select] <?php print "<table border=\"0\" cellpadding=\"0\" width=\"100%\" height=\"100\"cellspacing=\"0\" style=\"border-collapse:collapse\"bordercolor=\"grey\" bgcolor=\"white\" valign=\"top\"> <td align=\"left\" width=\"100%\" onclick=\"I3.location.href='getuserdetail.php?prop=$ownerid'\"><b>Property Name</b></td><td><b>Tenant</b></td><td><b>Property Status</b></td><td>Rent Amount</td>"; $connect = mysql_connect("localhost","root",""); mysql_select_db("magic"); $query = "SELECT * FROM props WHERE ownerid = '$ownerid' ORDER BY name ASC "; $result = mysql_query($query); while($row = mysql_fetch_assoc($result)) { $propertyid = $row['propid']; $propertyname = $row['name']; $propertydesc = $row['description']; $propertycity = $row['city']; $propertystate = $row['state']; $propertyzip = $row['zip']; $active = $row['active']; $lease = $row['lease']; $leaseamt = $row['leaseamt']; if($active == "1"){ $propertystatus = "Active"; } else { $propertystatys = "Unknown"; } print"<tr onMouseOver=\"this.bgColor = '#CEE3F6'\" onMouseOut =\"this.bgColor = '#FFFFFF'\"> <td align=\"left\" width=\"25%\" onclick=\"window.open('viewpropdetail.php?prop=$propertyid','mywindow','width=1200,height=600,scrollbars=1')\">$propertyname</td><td>$ownerfirstname $ownerlastname</td><td>$propertystatus</td><td>$$leaseamt</td> "; } print"</td></table>"; ?> Basically i have a link under that is add property. it pops up a box. with a form you fill it out, and it inserts the record into database. What I'm trying to do. is get it to "Refresh" the property list ( ex. code above). so it shows the new property in the table. i have never used jQuery. but was wondering if i could do that with php. Is there a way to say if records are changed.. update? This topic has been moved to Ajax Help. http://www.phpfreaks.com/forums/index.php?topic=316223.0 Hello all,
So I found this html and jquery example online. Works great if I just copy the below code in a file call test.html and run it from the browser, however if I create a PHP project in netbeans and create a file called index.php and put the same code and the jquery.min.js in the same directory, for some reason it doesn't work. The java script portion give strange behavor. I am new to all these, can someone please help?
<!DOCTYPE html> <!--Code by Chris Youderian, ContactMetrics.com, http://contactmetric...act-form-jquery, Code released under an MIT license, http://opensource.org/licenses/MIT --> <html lang="en"> <head> <script type='text/javascript' src='jquery.min.js'></script> </head> <!-- Styles --> <style> #contact label{ display: inline-block; width: 100px; text-align: right; } #contact_submit{ padding-left: 100px; } #contact div{ margin-top: 1em; } textarea{ vertical-align: top; height: 5em; } .error{ display: none; margin-left: 10px; } .error_show{ color: red; margin-left: 10px; } input.invalid, textarea.invalid{ border: 2px solid red; } input.valid, textarea.valid{ border: 2px solid green; } </style> <!-- JavaScript Code --> <script> $(document).ready(function() { <!-- Real-time Validation --> <!--Name can't be blank--> $('#contact_name').on('input', function() { var input=$(this); var is_name=input.val(); if(is_name){input.removeClass("invalid").addClass("valid");} else{input.removeClass("valid").addClass("invalid");} }); <!--Email must be an email --> $('#contact_email').on('input', function() { var input=$(this); var re = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/; var is_email=re.test(input.val()); if(is_email){input.removeClass("invalid").addClass("valid");} else{input.removeClass("valid").addClass("invalid");} }); <!--Website must be a website --> $('#contact_website').on('input', function() { var input=$(this); if (input.val().substring(0,4)=='www.'){input.val('http://www.' input.v...substring(4));} var re = /(http|ftp|https):\/\/[\w-]+(\.[\w-]+)+([\w.,@?^=%&:\/~+#-]*[\w@?^=%&\/~+#-])?/; var is_url=re.test(input.val()); if(is_url){input.removeClass("invalid").addClass("valid");} else{input.removeClass("valid").addClass("invalid");} }); <!--Message can't be blank --> $('#contact_message').keyup(function(event) { var input=$(this); var message=$(this).val(); console.log(message); if(message){input.removeClass("invalid").addClass("valid");} else{input.removeClass("valid").addClass("invalid");} }); <!-- After Form Submitted Validation--> $("#contact_submit button").click(function(event){ var form_data=$("#contact").serializeArray(); var error_free=true; for (var input in form_data){ var element=$("#contact_"+form_data[input]['name']); var valid=element.hasClass("valid"); var error_element=$("span", element.parent()); if (!valid){error_element.removeClass("error").addClass("error_show"); error_free=false;} else{error_element.removeClass("error_show").addClass("error");} } if (!error_free){ event.preventDefault(); } else{ alert('No errors: Form will be submitted'); } }); }); </script> <body> <form id="contact" method="post" action=""> <!-- Name --> <div> <label for="contact_name">Name:</label> <input type="text" id="contact_name" name="name"></input> <span class="error">This field is required</span> </div> <!-- Email --> <div> <label for="contact_email">Email:</label> <input type="email" id="contact_email" name="email"></input> <span class="error">A valid email address is required</span> </div> <!--Website --> <div> <label for="contact_website">Website:</label> <input type="url" id="contact_website" name="website"></input> <span class="error">A valid url is required</span> </div> <!-- Message --> <div> <label for="contact_message">Message:</label> <textarea id="contact_message" name="message"></textarea> <span class="error">This field is required</span> </div> <!-- Submit Button --> <div id="contact_submit"> <button type="submit">Submit</button> </div> </form> </body> </html> i have two scripts i am using in one file. one is for an image slider and the other is a drop-down menu. both jquery driven. one seems to break the other. if i remove the first line of code from one script (
jQuery.noConflict()), it seems to fix the problem and both scripts work. can someone explain to me what is going on? :/ fyi, i tried renaming variables for one script, hoping their was a naming conflict but that didnt work for me either.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="initial-scale=1" /> <!-- Apple mobiles -->
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="keywords" content = "<?php echo $keywords; ?>" />
<meta name="description" content="<?php echo $description; ?>" />
<title><?php echo $page_title; ?></title>
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel="stylesheet" type="text/css" href="bmw_styles.css" />
<link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="css/flexdropdown.css" />
<!-- homepage slider -->
<link rel="stylesheet" type="text/css" href="slider/css/default.css" />
<link rel="stylesheet" type="text/css" href="slider/css/component.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!--<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>-->
<script type="text/javascript" src="scripts/global.js"></script>
<!-- navigation -->
<script type="text/javascript" src="scripts/flexdropdown.js"></script>
<!-- homepage slider -->
<script src="slider/js/modernizr.custom.js"></script>
<script src="slider/js/jquery.cbpFWSlider.js"></script>
<!-- initialize jquery when the DOM is ready -->
<script type="text/javascript">
$( function() {
$( '#cbp-fwslider' ).cbpFWSlider();
$( '#cbp-fwslider' ).cbpFWSlider('interval');
} );
</script>
</head>
I'm using jQuery webcam to capture a photo of the client. I need to send it to the server just when the form is submitted (It's a form with information, and I need to have the photo attached to it). I have everything working except the part of saving the image encoded with base64 to the database like blob. Here is what I have so far: Code: [Select] <script type="text/javascript"> var pos = 0; var ctx = null; var cam = null; var image = null; jQuery("#webcam").webcam({ width: 320, height: 240, mode: "callback", swffile: "/../../js/jscam_canvas_only.swf", onTick: function(remain) { if (0 == remain) { jQuery("#status").text("Sorria!"); } else { jQuery("#status").text(remain + " segundo(s) restante(s)..."); } }, onSave: function(data) { var col = data.split(";"); var img = image; for(var i = 0; i < 320; i++) { var tmp = parseInt(col[i]); img.data[pos + 0] = (tmp >> 16) & 0xff; img.data[pos + 1] = (tmp >> 8) & 0xff; img.data[pos + 2] = tmp & 0xff; img.data[pos + 3] = 0xff; pos+= 4; } if (pos >= 4 * 320 * 240) { ctx.putImageData(img, 0, 0); var canvas = document.getElementById("canvas"); var save_image = canvas.toDataURL("image/png"); save_image = save_image.replace(/^data:image\/(png|jpeg);base64,/, ""); $('input[name=save_image]').val(save_image); pos = 0; } }, onCaptu function () { jQuery("#flash").css("display", "block"); jQuery("#flash").fadeOut(100, function () { jQuery("#flash").css("opacity", 1); }); jQuery("#canvas").show(); webcam.save(); }, onLoad: function () { var cams = webcam.getCameraList(); for(var i in cams) { jQuery("#cams").append("<li>" + cams[i] + "</li>"); } jQuery("#canvas").hide(); } }); function getPageSize() { var xScroll, yScroll; if (window.innerHeight && window.scrollMaxY) { xScroll = window.innerWidth + window.scrollMaxX; yScroll = window.innerHeight + window.scrollMaxY; } else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac xScroll = document.body.scrollWidth; yScroll = document.body.scrollHeight; } else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari xScroll = document.body.offsetWidth; yScroll = document.body.offsetHeight; } var windowWidth, windowHeight; if (self.innerHeight) { // all except Explorer if(document.documentElement.clientWidth){ windowWidth = document.documentElement.clientWidth; } else { windowWidth = self.innerWidth; } windowHeight = self.innerHeight; } else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode windowWidth = document.documentElement.clientWidth; windowHeight = document.documentElement.clientHeight; } else if (document.body) { // other Explorers windowWidth = document.body.clientWidth; windowHeight = document.body.clientHeight; } // for small pages with total height less then height of the viewport if(yScroll < windowHeight){ pageHeight = windowHeight; } else { pageHeight = yScroll; } // for small pages with total width less then width of the viewport if(xScroll < windowWidth){ pageWidth = xScroll; } else { pageWidth = windowWidth; } return [pageWidth, pageHeight]; } window.addEventListener("load", function() { jQuery("body").append("<div id=\"flash\"></div>"); var canvas = document.getElementById("canvas"); if (canvas.getContext) { ctx = document.getElementById("canvas").getContext("2d"); ctx.clearRect(0, 0, 320, 240); var img = new Image(); img.onload = function() { ctx.drawImage(img, 320, 240); } image = ctx.getImageData(0, 0, 320, 240); } var pageSize = getPageSize(); jQuery("#flash").css({ height: pageSize[1] + "px" }); }, false); window.addEventListener("resize", function() { var pageSize = getPageSize(); jQuery("#flash").css({ height: pageSize[1] + "px" }); }, false); </script> Then I have just a normal form that the customer has to fill it in, followed by this: Code: [Select] <div id="webcam"> </div> <p style="width:250px;text-align:center; "><input type="button" value="Tirar Fotografia" onclick="webcam.capture(3);void(0);"/></p></td><td><p><canvas id="canvas" height="200" width="200"></canvas></p> in php i have: Code: [Select] $image=file_get_contents(base64_decode($_POST['save_image'])); Hi, I am working on a project to help me learn more about JSON and JQuery and how they interact. I am able to pull in my JSON data fine and it displays in an HTML table. What isn't working is I want the tables rows to be striped, and normally this works, but I didn't know if it isn't working b/c it is AJAX or if I have something wrong with my JQuery. Also, I was hoping to add a reference to an image path in the JSON file as well, but wasn't sure how that is done or if it could be done at the JSON level.
Here is my code that I am working on:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>JSON Presidents</title>
<style type="text/css">
body{
font-family:arial, helvetica, sans-serif;
text-align:center;
width:100%;
margin:200px 0 0 0;
}
#PresidentInfo{
width:75%;
margin:0 auto;
}
table#data{
width:100%;
}
table#data th{
background:#333;
color:#fff;
text-align:center;
text-shadow:1px 1px 1px rgba(0,0,0,1);
padding:5px;
}
table#data td{
border:1px solid #333;
border-collapse:collapse;
padding:10px;
margin:0 5px 0 5px;
text-align:center;
}
.odd {
background: #ccc;
}
</style>
</head>
<body>
<div id="PresidentInfo">
</div>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>
(function ($) {
$(document).ready (function(){
$("tr:odd").addClass("odd");
});
});
})(jQuery);
</script>
<script>
$.getJSON('data.json', function(data) {
var output="<table id='data'><tr><th>First Name:</th><th>Last Name:</th><th>Month of Inauguration:</th><th>Year of Inauguration:</th></tr>";
for (var i in data.Presidents) {
output+="<tr><td>" + data.Presidents[i].firstName + "</td><td>" + data.Presidents[i].lastName + "</td><td>" + data.Presidents[i].YearInauguratedPresident.month + "</td><td>" + data.Presidents[i].YearInauguratedPresident.year + "</td></tr>";
}
output+="</tr></table>";
document.getElementById("PresidentInfo").innerHTML=output;
});
</script>
</body>
</html>
{"Presidents":[
{
"firstName":"Barack",
"lastName":"Obama",
"YearInauguratedPresident": {
"month":"January",
"day":20,
"year":2009
}
},
{
"firstName":"George W",
"lastName":"Bush",
"YearInauguratedPresident": {
"month":"January",
"day":20,
"year":2001
}
},
{
"firstName":"Bill",
"lastName":"Clinton",
"YearInauguratedPresident": {
"month":"January",
"day":20,
"year":1993
}
},
{
"firstName":"George",
"lastName":"H.W Bush",
"YearInauguratedPresident": {
"month":"January",
"day":20,
"year":1989
}
}
]}
I am using this to open contents into a modal window, but in the process I am passing it through loop.php to check if the page exists and then load. Is there a way to completely skip the loop.php file and load my clicked link?
$(document).ready(function(){
///////LINK in a Modal Window////////
$('#all').delegate('a.pop-lnk', 'click', function(){
var page = $(this).attr('id');
$('#gr-out').css({ opacity: 0.7, 'width':$(document).width(),'height':$(document).height()}).show();
$('#popup').css({'display': 'block'});
$('#popup').load("../help-file/loop.php?page="+ page);
});
});
The id attr I am getting from this code is my page's name but I need to add the .php extension if is possible so I can load the page.
Edited by Pavlos1316, 18 November 2014 - 03:04 PM. This topic has been moved to Ajax Help. http://www.phpfreaks.com/forums/index.php?topic=342757.0 I am using jQuery to post the contents of a html form to a php file which process them then returns a result. jQuery then catches this result and either logs you in or displays an error. This is working fine. It logs me in if i specify the right details and doesnt if i specify wrong details. However when i am redirectd to the home page I have a line which says welcome {username}. However username displays an undefined. Here is the form(cut down) <form name="login_form" id="login_form" method="post"> <input id="user_name" class="field" type="text" name="user_name_field" /> </form> next is the jquery which posts the form data(cut down): jQuery("#login_form").submit(function() { jQuery.post("./modules/login_process.php",{ user_name:jQuery("#user_name").val() } ,function(data) { if (data == 1) { document.location="./index.php"; } else { } }); }); then is the login_process.php if (isset($_POST['user_name'])) { $user_name = asf_escape(trim($_POST['user_name'])); $login_query = mysql_query("SELECT * FROM ".TBL_PREFIX."members WHERE user_username = '$user_name' ") or die (mysql_error()); $result = mysql_num_rows($login_query); if ($result != 0) { $_SESSION['logged_in'] = 1; $_SESSION['user_username'] = $user_name; echo $result; } else { if(!empty($user_name)) { $error .= "No Records Found for Username: $user_name "; } echo $error; } As I said it works fine logging in, the username is checked against the database but when i return the session which is equal to the posted username i get "undefined". Anyone see where i am going wrong? I am trying to create a webpage and I've added some jQuery to it but it is not working, can you help me out?
JS File:
$(document).ready(function() {
$('#button').click(function() {
var toAdd = $('input[name=add]').val();
$('.message').append("<li>" + toAdd + "</li>")
});
});
HTML:
<html> <head> <title> Test page </title> <link rel="stylesheet" type="text/css" href="style.css"> <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script> <script type='text/javascript' src='script.js'></script> </head> <body> <div class="top-section"> <div class="top-back"> <div class="tcontent"> <div class="tcontent-body"> <h1>Welcome to the Forum Pioneer Test Page</h1> <ul> <li>This will be a list of to do's.</li> <li>Add your own list below</li> </ul> <form> <input type="text" name="add" value="Type Here"> </form> <div id="button">Add</div> <div id="message">d</div> </div> </div> </div> </div> </body> </html>I've put only the elements that are affected. I try clicking the button, but the content isn't appended. Edited by PrinceTaz, 13 December 2014 - 12:55 PM. I have a while loop fucntion displaying a list of records, each while records contains a hidden div with additional infomation and a button that will call JQuery slideToggle() function. each button on each record toggles alll the hidden divs. Does anyone have any ideas on how to sort this issue? I am trying to limit comments and replies to comments and display an error message once the limit is reached. I have successfully limited comments and comment replies, and successfully provided the error message when prompted ONLY for the comments, and not the comment replies. The comment replies have a little bit of jquery working with them, so that's the only thing I can see that would be causing the message not to display. I have tried other methods then the one currently being used. https://gist.github.com/8972a8343c6fd2b878b1 thanks in advance. Hi,
Have a look this menu
http://jsfiddle.net/GBkMB/6/
I want the same mune but with click function (its using hover function now)
Please help me with this
Hello everyone, im make a website for my final school project. My header is a image slider made in jQuery with a time interval to change to images. At the moment when you press a link, the URL changes (example: index.php?page=contact). Then I use the $_GET to know what html file needs to be included, for this example: contact.html. The problem is when the URL changes (after clicking a link), the page refreshes and my jQuery header also refreshes to image[0]. Is there a way to include the right content when clicking on a link, without refreshing the page/header? Thanks in advance Gucco. |
|||||||