Search the Community
Showing results for tags 'jquery'.
-
EDIT: In the meantime I solved this - the answer is at the end Hi, First of all - I apologize - my English is bad. I have this JSON data in file mydata.json: [ {"name": "Aster", "product": "aster", "stock": "10", "price": "2.99"}, {"name":"Daffodil","product":"daffodil","stock":"12","price":"1.99"}, {"name":"Rose","product":"rose","stock":"2","price":"4.99"}, {"name":"Peony","product":"peony","stock":"0","price":"1.50"}, {"name":"Primula","product":"primula","stock":"1","price":"3.12"}, {"name":"Snowdrop","product":"snowdrop","stock":"15","price":"0.99"} ] I want to use this JSON to create the following HTML elements (using jQuery/Ajax): <div class="dcell"> <img src="images/aster.png"/> <label for="aster">Aster:</label> <input type="text" id="aster" name="aster" value="0" stock="10" price="2.99" required> </div> <div class="dcell"> <img src="images/daffodil.png"/> <label for="daffodil">Daffodil:</label> <input type="text" id="daffodil" name="daffodil" value="0" stock="12" price="1.99" required > </div> <div class="dcell"> <img src="images/rose.png"/> <label for="rose">Rose:</label> <input type="text" id="rose" name="rose" value="0" stock="2" price="4.99" required> </div> <div class="dcell"> <img src="images/peony.png"/> <label for="peony">Peony:</label> <input type="text" id="peony" name="peony" value="0" stock="0" price="1.50" required> </div> <div class="dcell"> <img src="images/primula.png"/> <label for="primula">Primula:</label> <input type="text" id="primula" name="primula" value="0" stock="1" price="3.12" required > </div> <div class="dcell"> <img src="images/snowdrop.png"/> <label for="snowdrop">Snowdrop:</label> <input type="text" id="snowdrop" name="snowdrop" value="0" stock="15" price="0.99" required> </div> but I'm not sure how to solve this problem (using jQuery/Ajax). I started this: <script type="text/javascript"> $(function() { $("<button>Ajax</button>").appendTo("#buttonDiv").click(function(e) { $.getJSON("mydata.json", function(data) { ///?????????????????????????????? }); e.preventDefault(); }); }); </script> ... and I don't know how to do it. Do you know how I could do this, is there a simple and elegant way to do this? Thank you in advance! Solution (it's so easy // embarrassed): $.getJSON("mydata.json", function(data) { var html = ''; $.each(data, function(key, value){ html += '<div class="dcell">'; html += '<img src="images/'+value.product+'.png"/>'; html += '<label for="'+value.product+'">'+value.name+':</label>'; html += '<input type="text" id="'+value.product+'" name="'+value.product+'" value="0" stock="'+value.stock+'" price="'+value.price+'" required>'; html += '</div>'; }); $('#yourContainerId').html(html); });
-
I have an HTML table generated by PHP querying from MySQL table. <table> <tr> <th>Sl</th> <th>ID</th> <th>Article Name</th> <th>Publish Status</th> </tr> <?php $i = 1; foreach ($obj->showAllFromTable('pattern') as $pattern) { extract($pattern); ?> <tr> <td><?php echo $i++; ?></td> <td><?php echo $id; ?></td> <td><?php echo $pattern_name; ?></td> <td id="publish_<?php echo $id; ?>" class="status_pattern"> <?php echo $publish; ?> </td> </tr> <?php } ?> </table> I want to change the status of any article by clicking on the 'publish' cell of the corresponding article row. I am trying to use ajax method of jquery for this purpose as shown in the following: <script type="text/javascript"> $(document).ready(function(){ $('.status_pattern').click(function(){ var thisid = $(this).attr('id'); $.ajax({ url: "status_change_pattern.php", data: { id: thisid }, success: function (response) { alert(response); } }); }); }); </script> In the "success" block, instead of "alert", I want to create a functionality to change the text of the specific cell which I clicked. The "status_change_pattern.php" has just a text "Hey Hey". Can anyone help? Please. Thanks.
-
Hi Larry, After moving along through the chapter, I had a generic question. For the calculator.js and calculator.html, should my webpage still run even though I do not have calculator.php linked to the HTML? The code is exactly how the book laid out, but when I attempt to test the calculator in a browser and press "Calculate!" I receive a message that calculator.php does not exist and the request cannot be completed. In essence, my question is "Is there something in the browser (Mercury Firefox) that is not loading properly or installed?" or "Does the HTML need both the php and JS to run?". I am currently under the assumption that JS is separate from PHP and can essentially take over the functionality of PHP but keep the requests on the client side. Thanks!
-
Hi, I am hoping that someone can advise me how to force a simple page refresh when a new script loads. I have tried: $(document).ready(function() { adjust_wrapper_size(); // to stop it from being too big! //adjust_sidebar_font_size(); // to simulate scalable text font window.location.href = window.location.href; }); // end document ready function within <script type="text/JavaScript"> but it just goes into a loop. Is there a way to force the window.location.href to fire only once? Thanks in anticipation for any advice. Cheers, Necuima
-
I'm learning from various sources and can usually puzzle out what's going on, but this has me a bit stumped. I came across this code at http://www.webdeveloper.com/forum/showthread.php?224180-JQuery-how-does-it-s-insides-work: function X(css){ //dom utility //a couple of node harvesters, using id and tag name... function el(id){ return document.getElementById(id);} function tags(elm){return document.getElementsByTagName(elm);} //collect output: var out=[]; if(css[0]=="#"){//id out.push(el(css.slice(1))); }else{//tags out=out.concat([].slice.call(tags(css))); };//end if id or tagName //define some methods for the utility: var meths={ hide:function(a){a.style.display="none";}, show:function(a){a.style.display="";}, remove:function(a){a.parentNode.removeChild(a);}, color:function(a){a.style.color=this||a.style.color;}, size:function(a){a.style.fontSize=this||a.style.fontSize;} };//end meths //bind the methods to the collection array: for(var meth in meths)(function(n,m){ out[n]=function(x){out.map(m,x); return out;} }(meth, meths[meth]));//next method return out; }//end X dom utility For the life of me, I am having a hard time figuring out how the Javascript is running in the for loop binding the methods to the collection array. I realize this is advanced, but if someone could walk through what is happening, and how the methods are being called with variables correctly linked to their respective methods, it would be appreciated. This is cool, if only I could understand how it is occurring.
-
Per instructions and examples in the book, I am using javascript to initiate use of mysql within a php file to populate the data in a grid within my original javascript file. Everything works fine! However, sometimes, it takes a few seconds for the php file to complete running. I am finding that I need to disable the grid until the php file has completed. I know how to disable the grid using jquery $.blockUI(); and re-enable the grid using $.unblockUI(); using javascript commands in my javascript file. But I cannot figure out how to delay the $.unblockUI(); until the php file has completed. How can I do that? Thank you.
- 1 reply
-
- javascript
- php
-
(and 3 more)
Tagged with:
-
I've been trying to get this for a while (includes jQuery) and somehow nothing seems to work. The image gallery works fine but won't display title. $(document).ready(function() { var pics=[]; for (var x=0; x<preLoadPics.lenght;x++) { pics[x]=new Image(); pics[x].src=preLoadPics[x]; } var newPix=new Image(); newPix.src=preLoadPics[0]; $('#thumbPix a').click(function(evt){ evt.preventDefault(); var pixFile=$(this).attr('src'); var pixLink=$(this).attr('href'); var pixTitle=$(this).attr('title'); var oldPix=$('#pix img'); var newPix=$('<img src="'+pixLink+'">'); if(pixLink==oldPix.attr('src')){ return; }else{ $('.selected').removeClass('selected'); //add highlight to this thumbnail $(this).addClass('selected'); //make new image invisible newPix.show(); //add to the #pix div $('#pix').prepend(newPix); newPix.show(); //fade out old image and remove from DOM oldPix.fadeOut(0,function(){ $(this).remove(); }); //fade in new image newPix.fadeIn(0); oldPix.remove(pixFile,'^Lg+\w\.'); } }); //end click $('#thumbPix a:eq(0)').click(); }); //end ready </script> this is body section <div id="thumbPix"> <li><a href="LgPicture.jpg" id="pix"title="Picture"> <img src= "smallPicture.jpg" border="2" bordercolor="#cccc99"/>Picture<br /></a></li> One option that doesn't break it completely is adding pixTitle to the .prepend in the Javascript code. I got it to display title, but then it just builds the titles instead of replacing it. $('#pix').prepend(newPix,pixTitle); newPix.show(); any ideas? Thanks
- 6 replies
-
- image gallery
- title
-
(and 2 more)
Tagged with:
-
Hi. I was just wondering how facebook does it's continious updates on the wall if you know what I mean, I take it after a certain amount of time it calls a scripts which then gets the latest round of updates. So what technologies would be used here ? and also how would you stop it from repeating it's-self(i.e. calling the same data from before) ? Also does anyone know of any examples of this ? Regards
-
Hi there everybody. I've only recently started experimenting with the Yii framework and must say that I'm loving it. I have however run into a slight dilemma which I just can't seem to figure out. I must admit that my javascript (jQuery) knowledge probably isn't up to scratch but I would prefer to make that part of my Yii learning experience. The problem: I want to include a search function in my header. This search function should behave exactly the same as a normal autocomplete dropdown textbox and the values of autocomplete options should be retrieved from two or more MYSQL database attributes (In this case I want to have a table for products and this one autocomplete field should enable me to search for product matches via the product_name, product_serial and product_color attributes). I have gotten a database search to work from http://www.yiiframework.com/extension/database-live-search/ . This however does a render_partial to a part of the page whereas I want possible results to be represented as a dropdown list. I would like to be able to click on one of the dropdown options and then go to this option specific page content after clicking a search button or perhaps if clicking on the specific option. To illustrate, I want to build a search box similar to that of Amazon.com (now by no means am I aiming to build such a complex underlying system, but this is just the idea of what I want to do.) http://www.amazon.com/ Now like I said I want to search through multiple attributes within my table. Ex. if I search for the string 'red', product_name, product_serial and product_color attributes will be scanned for all of the entries containing this string and if none are found the a sorry message will be displayed on the dropdown. BTW. I'm mainly using the Bootstrap extension for my UI if it might be of any additional help in building a typeahead or search form. Please if anybody can give me some assistance or point me to some sort of tutorial that will help me master this problem as it is really important to me to be able to do it exactly in the way described above! Thank you very much in advance. Kind regards, Hermann.
-
Hey, everyone. Currently working on a project that requires a lot of Javascript. This includes Ajax requests, some event listeners, Google maps integration, a Wysiwyg-editor and probable some more. I'm currently working with JQuery as I'm not much of a Javascript developer. I will group the code by usage, show an example and tell you if I experience weird behavior. 1. Drop-down search functionality (SOLVED) 2. Multiple file uploads as attachments Intro: The system is based around offers. These offers should allow attachments and possibly a main image. (Think like Wordpress' main article image) Problems/questions/etc: 1) I want the uploading to be done with Ajax. I found a good script that handles this. The problem is that the attachments must be tied to the ID of an offer. This ID, however, does not exists before an offer is published or saved as a draft. How can I tie these two together? 2) As users must be logged in, I create a folder for the user if one does not already exists. This folder is named by the User-ID. This is done because I remember reading about a problem occuring when too many files are lookated in the same folder. Is this neccasary or good, or would you recommend something else? Table structures and data flow: (Only the key structure) Offers ( offer_id, status, user_id* ..... ) Offers_attachments ( offer_id, path, extention.... ) Users ( user_id, ...info... ) Upload script used: (Not that it really matters) valums file-uploader Help me pick a solution: 1.) A two-step process. The users fill out vital information first, click next, (and the article is saved) then add attachments and save with a status. 2.) An empty offer is inserted to the DB when a user clicks "Add new offer". We now have an offer ID to tie attachments to. A daily cron job deletes offers/attachments that were never "Saved" by clicking "Save the offer" by the user. 3.) Attachments are tied to the user instead. The users can then add uploaded attachments found in the database related to their user.
-
I have file "phone.csv" for Phone number details and want to get the required phone though forms. Please help me. "phone.csv" contains four columns without header name: like - "James", "Cat", "26", " 99556745" . The list contains around 60 rows. <html><head></head><body> <?php $file = fopen("phone.csv","r"); while(! feof($file)) { print_r(fgetcsv($file)); } fclose($file); ?> <form action="check.php" method="post"> <p>Enter Name: <br> <input type="text" name="username" size="10" /> <input type="submit" name="submit" value="Enter" /></p> NAME: $col1 <br> NICK NMAE: $col2 <br> AGE: $col3 <br> PHONE: $col4 </form></body></html> I am unable to write the php code for the "check.php" and link to the form. Kindly help me out.
-
Hello -I'm trying to build a datepicker which only allows certain dates in my database to be selected.. Below are the codes...and the datepicker widget shows up but the "AvailableDate" (which is listed in the database as "2012-05-09") are not showing up in different color. Please can someone help to see where the error is? Thank you! [left]<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>Untitled Document</title> <link href="css/jquery-ui-1.8.14.custom.css" rel="stylesheet" type="text/css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"></script> <script type = "text/javascript"> $(function(){ $.ajax({ url: "dates2.php", data: "action=showdates&id=1", dataType: "json", success: function(calendarEvents){ $(".calendarwidget").datepicker({ // [rows, columns] if you want to display multiple calendars. numberOfMonths: [1, 1], showCurrentAtPos: 0, beforeShowDay: function (date){ for (i = 0; i < calendarEvents.length; i++) { if (date.getMonth() == calendarEvents[i][0] - 1 && date.getDate() == calendarEvents[i][1] && date.getFullYear() == calendarEvents[i][2]) { //[disable/enable, class for styling appearance, tool tip] return [false,"ui-state-active","Event Name"]; } } return [true, ""];//enable all other days } }); } }); }); </script> </head> <body> <div class="calendarwidget"><!--calender widget is loaded here--> </div> </body> </html>[/left] [left] [/left] <?php [left]//DB CONFIG $hostname_logon = '***'; //Database server LOCATION $database_logon = '****'; //Database NAME $username_logon = '***'; //Database USERNAME $password_logon = '***'; //Database PASSWORD //Table config $tablename = "venue_room_availability"; //Name of the DB table $event_id = "AvailableID"; //Primary Key field of the table //Connect to the DB $connections = mysql_connect($hostname_logon, $username_logon, $password_logon) or die ('Unabale to connect to the database'); mysql_select_db($database_logon) or die ("Error in query: $qry. " . mysql_error()); /****** Bread & Butter *************/ $action = $_REQUEST['action']; switch ($action){ case 'showdates': $qry = "SELECT * FROM ".$tablename.""; $result = mysql_query($qry) or die ("Error in query: $qry. " . mysql_error()); echo '['; while($row = mysql_fetch_assoc($result)); //$row['AvailableDate'] =rtrim($row['AvailableDate'], ","); echo $row['AvailableDate']; echo ']'; break; } ?>[/left] [left] [/left]
- 4 replies
-
- datepicker
- jquery
-
(and 2 more)
Tagged with:
-
Hi, I have a couple of questions regarding PHP and JavaScript. 1) What I would like to know is once I do a SELECT COUNT Query I want to then do a For-Loop to out put the same number of input boxes but with a PHP variable as the value so that JavaScript could pick that value up, Is that possible to be done, I mean can JavaScript/JQuery read PHP variables. They will be Hidden Input boxes as well. PHP 6 MySQL 5.2 HTML5 CSS3 Chrome / IE 8
- 4 replies
-
- php
- javascript
-
(and 2 more)
Tagged with: