Search the Community
Showing results for tags 'jquery'.
-
Guys i'm trying to create a infinite scroll feature for a project of mine and i couldn't make it work in the infinite scroll fashion any inputs would be appreciated. Jquery code: $(document).ready(function(){ var load=0; var sess_uname="<?php echo $session_uname;?>"; var f_uname="<?php echo $f_uname;?>"; var sess_count="<?php echo $total_sess_count;?>"; var f_count="<?php echo $total_friend_count;?>"; if(sess_uname==f_uname){ $(window).scroll(function(){ if($(window).scrollTop()==$(document).height()-$(window).height()){ load++; alert('hai1'); if(load *5 >sess_count){ $(".message").text("no more posts to show"); }else{ $.post("st&com.php", {load:load},function(data){ // $(".status_area").append(data); alert('hai'); }); } } }); } }); here is the php code: $load= (int)($_POST['load'])*2; $sess_id=(int)$_SESSION['id']; $friends = array(); $stmt= $conn->prepare("select friend_one, friend_two from friends where (friend_one=:session OR friend_two=:session) and accepted='1'"); $stmt->bindparam(":session",$_SESSION['uname']); $stmt->execute(); $fetch=$stmt->fetchAll(); $count=count($fetch); if($count==0){ $totalids=$project->totalUpdates1($sess_id,$load); here is the class: public function totalUpdates1($id, $load) { $sql2="SELECT * FROM updates WHERE user_id_u=:id order by time desc limit $load,5"; $stmth= $this->_db->prepare($sql2);//Check here syntax of $db $stmth->bindValue(":id",$id); //$stmth->bindValue(":load",$load); $stmth->execute(); return $stmth->fetchAll(); } -
Basically I have a very long form select option drop down list. What I would like to do is that for each option "value", I want to remove the spaces and instead add dash to it. Doing each option value by hand would take me a very long time, so I thought I might try jquery for short cut. If you have another method, let me know. Here's what I have so far. Doesn't seem to work. <script> $(document).ready(function () { $('#model').change(function(){ var str = $(this).val(); str = str.replace(/\s+/g, "-"); }); }); </script> // here's an example of select options <select id="model" name="model"> <option value="john doe" >John Doe</option> <option value="john smith lu" >John Smith Lu</option> </select> -
I have a php file in a iframe from where I take a form result to the parent with following jquery code. In the example there is both appendTo to a <p> and an input element. Anyway works fine on desktop browsers as far as I have tested, but not on my phone . <script> $('#order').click(function() { var free = $('#iframeid').contents().find('#free').text(); $("<span>"+free+" </span>").appendTo("#g"); $('.g').val($('.g').val() + vapaa); }); </script> <button id="order">'order domain</button> <p> <div id="wrap"> <p id="g"></p><p> <input type="text" class="g" id="inputbox" name="input" placeholder="www.example.com" width="100px"/> </div> Any other solutions? I managed only to make these. Preferable I use input text element. The span was just for a test. Thanks.
-
http://www.tirerack.com/content/tirerack/desktop/en/wheels.html See the window where it says "Shop by Vehicle"? Is there a script already out there that does the dropdown search by make/model/year? I am only looking for the front-end code; javascript/jquery code in particular.
-
Hello I would like to populate the select onload. or document ready with jquery I dont see why not working' <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>xml to select</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> <script> $(document).ready(function() { $.ajax({ type: "GET", url: "test.xml", dataType: "xml", success: function(xml) { $("#myDiv").append("<select id='mySelect'>"); $(xml).find('value').each(function(){ var a = $(this).text(); $("#mySelect").append("<option class='nice' value='" + a + "'>" + a + "</option>"); }); $("#myDiv").append("</select>"); } }); }</script> </head> <body> <div id="myDiv"></div> </body> </html> Thank you for your advice.
-
Hello there friends I have an select box and I would like to define the alue of the selects with array. Like this: var price_list= new Array(); price_list["-"]=0; price_list["bronze"]=5; price_list["silver"]=10; price_list["gold"]=15; The I have a Selectbox where <form action="" id="metal" onsubmit="return false;" <select id="a" name="metals" class="form-select"> <option value="-">-</option> <option value="bronze">bronze</option> <option value="silver">silver</option> <option value="gold">gold</option> </select> And performig calculations with following script (that works fine if the value is directly in select). And obviously there is another select (#b) but that is just numbers so I didn show it here. $(document).ready(function() { function compute() { var a = $('#metals').val(); var b = $('#b').val(); var total = a * b * 1.22; $('#result').text(total); } $('#metals, #b').change(compute); }); I just get returned NaN If you have an answer then please hit
-
I've got a bit of jQuery that is getting the bit of data that I want to search the page for. This is posted below. $(".pagelink").click(function(){ var myClass = this.className; var number = myClass.substr(myClass.length - 1); }); This bit is working ok. It gets the last bit of the element's class name which is a number incremented by the PHP that echoes it out. Now I want to search the page for a div that has a class that contains that var number. There will be a div somewhere on the page with a class that contains that number. It will be called either row0, row1, row2, row3 etc etc. The div is not a descendant element of the pagelink class, it is somewhere else so I don't think the find() variable is suitable. Any help will be greatly appreciated, thanks! -
Hi everyone Im having a nightmare with javascript again grrrr, I'm just not great with javascript / jquery so basically I have a table with inputs to create an invoice, the reason im using javascript to post the form is because i have to allow for infinite items to be added into the database using json stringify as an array, the problem I have is im trying to force that atleast 1 item be added to the table before posting the data. I am using bootstrap and this hasn't been a problem for all of my other forms because i can just add required to the input but because i have to do this one differently using an a href button This form just wont validate (but it will post the data to the php script) so here is my code: Table with inputs: <tbody style="" class="item ui-sortable-handle"> <tr> <td rowspan="2" class="td-icon"> <i class="glyphicon glyphicon-resize-vertical cursor-move"></i> </td> <td class="td-text"> <input type="hidden" name="invoice_id" value="<?php echo $invoiceNo;?>"> <input type="hidden" name="item_id" value> <div class="input-group"> <span class="input-group-addon">Item</span> <input type="text" name="item_name" class="input-sm form-control" required> </div> </td> <td class="td-amount td-quantity"> <div class="input-group"> <span class="input-group-addon">Quantity</span> <input type="text" name="item_quantity" class="input-sm form-control amount"> </div> </td> <td class="td-amount"> <div class="input-group"> <span class="input-group-addon">Price</span> <input type="text" name="item_price" class="input-sm form-control amount"> </div> </td> <td class="td-amount"> <div class="input-group"> <span class="input-group-addon">Item Discount</span> <input type="text" name="item_discount_amount" class="input-sm form-control amount" data-toggle="tooltip" data-placement="bottom" title data-original-title="£ Per Item"> </div> </td> <td class="td-amount"> <div class="input-group"> <span class="input-group-addon">Tax Rate</span> <select name="item_tax_rate_id" class="form-control input-sm"> <?php //this section may update based upon selections but for now We have none echo "<option value='0'>None</option>"; ?> </select> </div> </td> <td class="td-icon text-right td-vert-middle"></td> </tr> <tr> <td class="td-textarea"> <div class="input-group"> <span class="input-group-addon">Description</span> <textarea name="item_description" class="input-sm form-control"></textarea> </div> </td> <td colspan="2" class="td-admount td-vert-middle"> <span>Subtotal</span> <br> <span name="subtotal" class="amount"></span> </td> <td class="td-amount td-vert-middle"> <span>Discount</span> <br> <span name="item_discount_total" class="amount"></span> </td> <td class="td-amount td-vert-middle"> <span>Tax</span> <br> <span name="item_tax_total" class="amount"></span> </td> <td class="td-amount td-vert-middle"> <span>Total</span> <br> <span name="item_total" class="amount"></span> </td> </tr> </tbody> </table> </form> </div> </div> <!-- End of items Tables--> The Save button at the top of the page before the table: <a href="#" class="btn btn-success ajax-loader" id="btn_save_invoice"> And lastly my attempt at the javascript / jquery / ajax: <script type="text/javascript"> $('#btn_save_invoice').click(function () { $('#item_form').validate({ rules: { item_name:{ required: true, message: 'This is required' } }, }); var items = []; var item_order = 1; $('table tbody.item').each(function () { var row = {}; $(this).find('input,select,textarea').each(function () { if ($(this).is(':checkbox')) { row[$(this).attr('name')] = $(this).is(':checked'); } else { row[$(this).attr('name')] = $(this).val(); } }); row['item_order'] = item_order; item_order++; items.push(row); }); $.post("<?php echo url()."Clients/invoice_ajax.php"; ?>", { invoice_id: <?php echo $invoice_id; ?>, invoice_number: $('#invoice_number').val(), invoice_date_created: $('#invoice_date_created').val(), invoice_date_due: $('#invoice_date_due').val(), invoice_status_id: $('#invoice_status_id').val(), invoice_password: $('#invoice_password').val(), items: JSON.stringify(items), invoice_discount_amount: $('#invoice_discount_amount').val(), invoice_discount_percent: $('#invoice_discount_percent').val(), invoice_terms: $('#invoice_terms').val(), custom: $('input[name^=custom]').serializeArray(), payment_method: $('#payment_method').val() }, function (data) { var response = JSON.parse(data); if (response.success == '1') { window.location = "<?php echo url()."Clients/invoice_ajax.php"; ?>/" + <?php echo $invoice_id; ?>; } else { $('#fullpage-loader').hide(); $('.control-group').removeClass('has-error'); $('div.alert[class*="alert-"]').remove(); var resp_errors = response.validation_errors, all_resp_errors = ''; for (var key in resp_errors) { $('#' + key).parent().addClass('has-error'); all_resp_errors += resp_errors[key]; } $('#invoice_form').prepend('<div class="alert alert-danger">' + all_resp_errors + '</div>'); } }); }); </script> Please bare in mind the actual posting section of the form Works perfectly! the only issue is the inputs will not validate before post. here is what the page looks like (i have highlighted the parts that I am referring to in the post: I really am thankful for all the help i get, a huge thank you in advance to anyone who helps with this.
-
Hi Peeps So basically im creating a "customer page" i have 2 tabs, 1 is customer info which is the primary and the invoicing tab I have a date picker in the invoicing tab which im hoping will populate a table below. I tried having the form post to php but this resets the page which then goes to the customer info tab so im guessing this will have to be done with jquery and ajax. could someone please point me in the right direction to do this? here is the current page for better explanation: All help is greatly appreciated in advance Mooseh
-
Hey guys, i am trying to create a box to show images or content once a user selects a link within a gallery. So for example i have an image --> user scrolls over --> image overlay shows a link ---> link actions to a jquery action to where a hidden field shows more data. right now i have everything to the point to where the links default action is disabled and the "overlay" div that will show the content is hidden. when i then go ahead and add some jquery to add a class when the link is clicked nothing seems to happen. <section class="work_area" id="WORK"> <div class="container"> <div class="row"> <div class="col-md-12 text-center"> <div class="work_title wow fadeInUp animated"> <h1>demo<span style="color: #64bdec; font-weight: bolder;">33</span> PORTFOLIO</h1> <img src="images/arrow486.png" alt=""> </div> <div id="dataBox"></div> </div> </div> </div> <div class="container-fluid"> <div class="row"> <div class="col-md-2 no_padding"> <div class="single_image"> <img src="images/REGISTERE.png" alt=""> <div class="image_overlay"> <h2>Lorem ipsum</h4> <a id="link" href="portfolio.php" >Popup link</a> </div> </div> </div> </div> </div> </section> CSS #dataBox{ width: 800px; height: 500px; margin: auto; padding: 100px 100px; position: relative; border: 2px solid black; margin-bottom: 10px; } #pData{ background: red; width: 800px; height: 500px; margin: auto; padding: 100px 100px; position: relative; border: 2px solid black; } JS. $(document).ready(function(){ $('#dataBox').hide(); $('#link').click(function(e){ e.preventDefault(); $('div #dataBox').removeClass().addClass('pData'); console.log("link is working"); }); }); everything works other than the div showing up. -
Hey guys, i am trying to create a contact form that by passes the page refresh and uses Jquery and Ajax to direct to a php file server side. So far i have everything work fine. until the final part where i pass the json data type into PHP and look to catch an error, success, or completion value. Currently i have an error coming back with the following: SyntaxError: Unexpected token < error due to a parsererror condition I do not see any errors in the console of of chrome, and i have no idea why i am getting this syntax error. These does not seem to be any conflicting data going into the json or out to php. really been stuck on this for a day now This is my .js file $(document).ready(function(){ $('form #alertMessage').hide(); $('#submit').click(function(e){ e.preventDefault(); var valid = ''; var name = $('form #name').val(); var email = $('form #email').val(); var subject = $('form #subject').val(); var message = $('form #message').val(); var honeypot = $('form #honeypot').val(); var humancheck = $('form #humancheck').val(); if(name = '' || name.length <= 5 ){ valid += '<p>Sorry, Your name is required!</p> '; } if(!email.match( /^([a-z0-9._-]+@[a-z0-9._-]+\.[a-z]{2,4}$)/ )){ valid += '<p>A Valid Email is required</p> '; } if(subject = '' || subject.length <= 2 ){ valid += '<p>A Valid name is required</p> '; } if(message = '' || message.length <= 5 ){ valid += '<p>A brief description of you is required.</p> '; } if(honeypot != 'http://'){ valid += '<p>Sorry spambots not allowed.</p> '; } if(humancheck != ''){ valid += '<p>Sorry only humans allowed past this point.</p> '; } if(valid != ""){ $('form #alertMessage').removeClass().addClass('error') .html('<br><br>' + valid).fadeIn('fast') }else{ $('form #alertMessage').removeClass().addClass('processing') .html('<br><br>We are processing your form now...').fadeIn('fast') var formData = $('form').serialize(); submitForm(formData); } }); }); function submitForm(formData){ $.ajax({ type: 'POST', url: 'feedback.php', data: formData, dataType: 'json', cache: false, timeout: 7000, success: function(data){ $('form #alertMessage').removeClass().addClass((data.error === true) ? 'error' : 'success' ) .html(data.msg).fadeIn('fast'); if($('form #alertMessage').hasClass('success')){ setTimeout("$('form $alertMessage').fadeOut('fast')", 5000); } }, error: function(XMLHttpRequest, testStatus, errorThrown){ $('form #alertMessage').removeClass().addClass('error') .html(' <p>There was an ' + errorThrown + ' error due to a ' + testStatus + ' condition.</p>').fadeIn('fast'); }, complete: function(XMLHttpRequest, status){ $('form')[0].reset(); } }); }; Here is the php script. <? sleep(3); $name = trim($_POST['name']); $name = trim($_POST['email']); $name = trim($_POST['subject']); $name = trim($_POST['message']); $name = $_POST['honeypot']; $name = $_POST['humancheck']; if ($honeypot == 'http://' && empty($humancheck)){ $errorMsg = ''; $reg_exp = "/^([a-z0-9._-]+@[a-z0-9._-]+\.[a-z]{2,4}$/ "; if(!preg_match($reg_exp, $email)){ $errorMsg .= "<p>A valid email is required</p>"; } if(empty($name)]){ $errorMsg .= '<p>Please provide your name</p>'; } if(empty($message)]){ $errorMsg .= '<p>Please provide a message</p>'; } if(!empty($errorMsg)){ $return['error'] = true; $return['msg'] = 'Sorry the request was successful but your form was not correctly filled.' . $errorMsg; echo json_encode($return); exit(); }else{ $return['error'] = false; $return['msg'] = 'Thank you for your feedback ' .$name . ' ' . $errorMsg; echo json_encode($return); } } else { $return['error'] = true; $return['msg'] = 'Oops...there was a problem with your submission. Please try again' ; echo json_encode($return); } ?> HTML side. <form id="contact_us" class="contact-form" action="feedback.php" enctype="multipart/form-data" method="post"> <div id="alertMessage"> </div> <div class="row"> <div class="col-md-6"> <input type="text" name='name' class="form-control" id="name" placeholder="Full Name"> <input type="email" name='email' class="form-control" id="email" placeholder="Your Email"> <input type="text" name='subject' class="form-control" id="subject" placeholder="Company or Project name"> </div> <div class="col-md-6"> <textarea class="form-control" name="text" id="message" rows="25" cols="10" placeholder=" Brief Description"></textarea> <input id='submit' name='submit' type="submit" class="btn btn-default submit-btn form_submit"> </div> <input type="hidden" name="honeypot" id="honeypot" value="http://" /> <input type="hidden" name="humancheck" id="humancheck" value="" /> </div> </form> Image of the error output
-
Hi Guys, I have created a calendar view with this plug in. http://fullcalendar.io/ The calendar view will show calendar view by Start Date and End Date. So I have some problem with some of the event, the start date is from 01-January-2015 until 15-Jan-2015, but in between actually there is a break. For example, 01-January-2015 until 03-January-2015 13-January-2015 until 15-January-2015 So, because of the start date and the end date is so long, so in the calendar view, it block the calendar from 01/Jan until 15/Jan. Its look weird. Actually i have actual dates column in my database column in this format: 01-01-2015,02-01-2015,03-01-2015,13-01-2015,14-01-2015,15-01-2015Start Date column 01-01-2015 End Date column 15-01-2015So, i was wondering is there any script to detect each of date to separate the break in between the start date and end date. Thank You
-
links in header looks like.. <link rel="icon" href="images/favicon.ico"> <link rel="shortcut icon" href="images/favicon.ico" /> <link rel="stylesheet" href="css/style.css"> <script src="js/jquery.js"></script> <script src="js/jquery-migrate-1.1.1.js"></script> <script src="js/jquery.easing.1.3.js"></script> <script src="js/script.js"></script> <script src="js/superfish.js"></script> <script src="js/jquery.equalheights.js"></script> <script src="js/jquery.mobilemenu.js"></script> <script src="js/tmStickUp.js"></script> <script src="js/jquery.ui.totop.js"></script> <script src="js/validjs.js"></script> <script src="//code.jquery.com/jquery-1.11.3.min.js"></script> <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script> <link rel="stylesheet" href="css/homestyle.css"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <link href="css/side-slider.css" rel="stylesheet" type="text/css" media="screen"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="js/jquery.side-slider.js"></script> if i comment the below jq library.. <script src="//code.jquery.com/jquery-1.11.3.min.js"></script> <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script> then my stuck-container works on scroll down the page.. but my "username checker" plugin does not work.. and... VICE-VERSA... Please help me to get out of this prob...
-
I am trying out a new script for image upload and resize using ajax method. All the ones I've found so far process the php file through the form action="". Since I am inserting other data into the database and calling the other php code directly on the same page as a the html form, I would like to know if there is another way I can run that specific image upload php code through ajax. This is one the scripts I have looked at . http://www.sanwebe.com/2012/05/ajax-image-upload-and-resize-with-jquery-and-php This is what their html form looks like. <form action="processupload.php" method="post" enctype="multipart/form-data" id="MyUploadForm"> <input name="image_file" id="imageInput" type="file" /> <input type="submit" id="submit-btn" value="Upload" /> <img src="images/ajax-loader.gif" id="loading-img" style="display:none;" alt="Please Wait"/> </form> <div id="output"></div> I would like to process the "processupload.php" above through the ajax code below and leave the form action="" empty, as I am running other php code on the same page to insert other data as well. How would you do that? <script> $(document).ready(function() { var options = { target: '#output', // target element(s) to be updated with server response beforeSubmit: beforeSubmit, // pre-submit callback success: afterSuccess, // post-submit callback resetForm: true // reset the form after successful submit }; $('#MyUploadForm').submit(function() { $(this).ajaxSubmit(options); // always return false to prevent standard browser submit and page navigation return false; }); }); function afterSuccess() { $('#submit-btn').show(); //hide submit button $('#loading-img').hide(); //hide submit button } //function to check file size before uploading. function beforeSubmit(){ //check whether browser fully supports all File API if (window.File && window.FileReader && window.FileList && window.Blob) { if( !$('#imageInput').val()) //check empty input filed { $("#output").html("Are you kidding me?"); return false } var fsize = $('#imageInput')[0].files[0].size; //get file size var ftype = $('#imageInput')[0].files[0].type; // get file type //allow only valid image file types switch(ftype) { case 'image/png': case 'image/gif': case 'image/jpeg': case 'image/pjpeg': break; default: $("#output").html("<b>"+ftype+"</b> Unsupported file type!"); return false } //Allowed file size is less than 1 MB (1048576) if(fsize>1048576) { $("#output").html("<b>"+bytesToSize(fsize) +"</b> Too big Image file! <br />Please reduce the size of your photo using an image editor."); return false } $('#submit-btn').hide(); //hide submit button $('#loading-img').show(); //hide submit button $("#output").html(""); } else { //Output error to older browsers that do not support HTML5 File API $("#output").html("Please upgrade your browser, because your current browser lacks some new features we need!"); return false; } } //function to format bites bit.ly/19yoIPO function bytesToSize(bytes) { var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB']; if (bytes == 0) return '0 Bytes'; var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024))); return Math.round(bytes / Math.pow(1024, i), 2) + ' ' + sizes[i]; } </script> -
There are two parts to my question. Part 1. I have a form. You know when you submit a form and if there is an error, the form will reset the input values unless you have the them "selected"? Well I have an issue with one of those inputs. Here is the code. For some reason the input value doesn't get selected on form reset. It inserts to the database fine. <fieldset> <label>Expiry Date</label> <select name="expiry_date"> <?php $date = date('Y-m-d H:i:s'); $expiry_1 = date("Y-m-d H:i:s", strtotime("$date + 1 week")); $expiry_2 = date("Y-m-d H:i:s", strtotime("$date + 2 weeks")); ?> <option value="0">Expires In</option> <option value="<?php echo $expiry_1; ?>" <?php if(empty($_POST['expiry_date'])) {} else { if($_POST['expiry_date'] == $expiry_1) { echo 'selected'; } } ?> >1 week</option> <option value="<?php echo $expiry_2; ?>" <?php if(empty($_POST['expiry_date'])) {} else { if($_POST['expiry_date'] == $expiry_1) { echo 'selected'; } } ?> >2 weeks</option> </select> </fieldset> This is another example of select drop down. But this one below works fine. // this select option's input values get selected on form reset. <fieldset> <label>City</label> <select name="city_id"> <option value="0">Select City</option> <?php $get_city = $db->prepare("SELECT city_id, city_name FROM cities WHERE city_id > :city_id"); $get_city->bindValue(':city_id', 0); $get_city->execute(); $result_city = $get_city->fetchAll(PDO::FETCH_ASSOC); if(count($result_city) > 0){ foreach($result_city as $row) { $get_city_id = intval($row['city_id']); $get_city_name = $row['city_name']; ?><option value="<?php echo $get_city_id; ?>" <?php if(empty($_POST['city_id'])) {} else { if($_POST['city_id'] == $get_city_id) { echo 'selected'; } } ?> ><?php echo $get_city_name; ?></option><?php } } else {} ?> </select> </fieldset> Part 2. This relates to my previous topic. I am trying to do the same thing as above, which is show input values on form reset. But this is slightly more complicated as it is an array. Looking at the code, you can see that you can add more fields through jquery. That all works. Inserting their values from multiple groups of fields into the db also works fine. But once again, if the form resets or submits, only the 1st group of fields show the selected values in the input fields. The 2nd or 3rd group of fields generated through the jquery disappear after submit. But again, their values do insert into the db fine. Here's the html and jquery code. <div id="options-parent"> <h2>Add Options</h2> <button class="add_field_button">Add More Fields</button> <div class="options-child-row"> <div class="option-float"> <label>Quantity</label> <input type="number" name="option_quantity[]" multiple min="1" max="1000000" step="1" value="<?php if(!empty($_POST['option_quantity'])) { echo $_POST['option_quantity'][0]; } else {}; ?>" /> </div> <div class="option-float"> <label>Retail Price</label> <input type="number" name="option_retail_price[]" multiple min="5" max="1000000" step="1" value="<?php if(!empty($_POST['option_retail_price'])) { echo $_POST['option_retail_price'][0]; } else {}; ?>" /> </div> <div class="option-float"> <label>Discount Price</label> <input type="number" name="option_discount_price[]" multiple min="1" max="1000000" step="1" value="<?php if(!empty($_POST['option_discount_price'])) { echo $_POST['option_discount_price'][0]; } else {}; ?>" /> </div> </div> </div> <script> $(document).ready(function() { var max_fields = 20; //maximum input boxes allowed var wrapper = $("#options-parent"); //Fields wrapper var add_button = $(".add_field_button"); //Add button ID var x = 1; //initlal text box count $(add_button).click(function(e){ //on add input button click e.preventDefault(); if(x < max_fields){ //max input box allowed x++; //text box increment $(wrapper).append( '<div class="options-child-row">'+ '<div class="option-float">'+ '<label>Quantity</label>'+ '<input type="number" name="option_quantity[]" min="1" max="1000000" step="10" value="" />'+ '</div>'+ '<div class="option-float">'+ '<label>Retail Price</label>'+ '<input type="number" name="option_retail_price[]" min="1" max="1000000" step="10" value="" />'+ '</div>'+ '<div class="option-float">'+ '<label>Discount Price</label>'+ '<input type="number" name="option_discount_price[]" min="1" max="1000000" step="10" value="" />'+ '</div>'+ '</div>' ); //add input box } }); $(wrapper).on("click",".remove_field", function(e){ //user click on remove text e.preventDefault(); $(this).parent('.options-child-row').remove(); x--; }) }); </script> What do you think?
-
Limit selection of check box My code looks like... foreach($res as $res) echo '<div class="ediv"><input type="checkbox" class="echeck" name="pr[]" value="'.trim($res['product']).'"/>'.trim($res['product']).'</div>'; How to set limit of selection of dynamically created checkboxes...??
-
Hello, So I have this program I'm trying to create where there are 9 articles (the html tag) and I want 3 random ones to display at any one time. When you click the link in the article, it should bring up that link in an iframe. A skip button then appears and when you click it, the iframe should disappear and three different random articles should come up. It works fine for the first time you click, but any time after that it just gets more and more messed up. If anyone can look at my code and tell me where I've gone wrong, it would be a great help. <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>New Path Page</title> <meta name="description" content="The HTML5 Herald"> <meta name="author" content="SitePoint"> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <!-- CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous"> <!-- JavaScript --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script> <style> article { color: white; } article a, article a:visited, article a:hover { color: white; } .offer-one, .offer-two, .offer-three, .offer-four, .offer-five, .offer-six, .offer-seven, .offer-eight, .offer-nine { height: 300px; padding-top: 18px; text-align: center; font-size: 20px; } .offer-one { background-color: #93104d; } .offer-two { background-color: #285b6c; } .offer-three { background-color: #368a2c; } .offer-four { background-color: #93104d; } .offer-five { background-color: #285b6c; } .offer-six { background-color: #368a2c; } .offer-seven { background-color: #93104d; } .offer-eight { background-color: #285b6c; } .offer-nine { background-color: #368a2c; } iframe { width: 100%; border: none; } </style> </head> <body> <div class="container"> <iframe></iframe> <a class="skip">SKIP</a> <div class="offers"> <div class="row"> <article class="col-md-4 offer-one"> <h2>test</h2> <a href="/newpath-sample.php">CLICK HERE</a> </article> <article class="col-md-4 offer-two"> <h2>test2</h2> <a href="/newpath-sample.php">CLICK HERE</a> </article> <article class="col-md-4 offer-three"> <h2>tes3</h2> <a href="/newpath-sample.php">CLICK HERE</a> </article> <article class="col-md-4 offer-four"> <h2>test4</h2> <a href="/newpath-sample.php">CLICK HERE</a> </article> <article class="col-md-4 offer-five"> <h2>test5</h2> <a href="/newpath-sample.php">CLICK HERE</a> </article> <article class="col-md-4 offer-six"> <h2>tes6</h2> <a href="/newpath-sample.php">CLICK HERE</a> </article> <article class="col-md-4 offer-seven"> <h2>test7</h2> <a href="/newpath-sample.php">CLICK HERE</a> </article> <article class="col-md-4 offer-eight"> <h2>test8</h2> <a href="/newpath-sample.php">CLICK HERE</a> </article> <article class="col-md-4 offer-nine"> <h2>tes9</h2> <a href="/newpath-sample.php">CLICK HERE</a> </article> </div> <? // end of row ?> </div> </div> <? //end of container ?> </body> </html> and the Jquery: <script> $(window).load(function() { $('.offers article').hide(); $('iframe').hide(); $('.skip').hide(); var offers = [".offer-one",".offer-two",".offer-three",".offer-four",".offer-five",".offer-six",".offer-seven",".offer-eight",".offer-nine"]; var offerOne = ""; var offerTwo = ""; var offerThree = ""; while (offerOne == offerTwo || offerOne == offerThree || offerTwo == offerThree) { var offerOne = offers[Math.floor(Math.random()*offers.length)]; var offerTwo = offers[Math.floor(Math.random()*offers.length)]; var offerThree = offers[Math.floor(Math.random()*offers.length)]; } $(offerOne).fadeIn(1); $(offerTwo).delay(200).fadeIn(1); $(offerThree).delay(400).fadeIn(1); $('.offers article a').click(function(e) { e.preventDefault(); var setSRC = $(this).attr('href'); $('iframe').attr('src',setSRC); $(offerOne).fadeOut(1); $(offerTwo).delay(200).fadeOut(1); $(offerThree).delay(400).fadeOut(1, function() { $('iframe').fadeIn(1, function() { $('.skip').show(); }); }); }); $('.skip').click(function(e) { e.preventDefault(); $('.offers article').hide(); $('.skip').hide(); $('iframe').fadeOut(1); $('iframe').hide(); var offerOne = ""; var offerTwo = ""; var offerThree = ""; while (offerOne == offerTwo || offerOne == offerThree || offerTwo == offerThree) { var offerOne = offers[Math.floor(Math.random()*offers.length)]; var offerTwo = offers[Math.floor(Math.random()*offers.length)]; var offerThree = offers[Math.floor(Math.random()*offers.length)]; } $(offerOne).fadeIn(1); $(offerTwo).delay(200).fadeIn(1); $(offerThree).delay(400).fadeIn(1); }); }); </script>
-
I am having a bit of an issue with ob_flush in particular. What's happening is I am using jquery UI to create a tabbed div. With in one of the DIV's I print out the live output on an apache ant command using ob_flush, however that also seems to flush jquery as well which breaks all of my formating. Once the ant command is complete, the formatting returns to normal. Does any one know any way around this issue? I am assuming that jquery is being flushed as well. Here is the page I am running, the live output of ant is displaying like I would like but like I said the formatting get's flushed <html> <head> <link rel="stylesheet" href="css/jquery-ui.css"> <link rel="stylesheet" type="text/css" href="css/style.css"/> <script src="scripts/jquery-ui.min.js"></script> <script src="scripts/jquery-ui.js"></script> <script language="javascript"> function clearform() { document.getElementById("json").value=""; } </script> <script> $(function() { $( "#tabs" ).tabs(); }); </script> <title>Add Manual Event Data</title> <?php if (empty($_POST["comment"])) { $comment = ""; } else { $cleaned = test_input($_POST["comment"]); $comment = ($_POST["comment"]); } function test_input($data) { $data = trim($data); $data = addslashes($data); return $data; } ?> </head> <body> <div id="tabs" class="body-check"> <ul> <li><a href="#tabs-1">Event By String</a></li> <li><a href="#tabs-2">Add Event Form</a></li> </ul> <div id="tabs-1"> <form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>"> <center><h1>Add Event Data:</h1></center> <p> <textarea id="json" name="comment"><?php echo $comment;?></textarea> </p> <input type="submit" name="submit" value="Submit"> </form> <?php if (isset($cleaned)){ echo '<div id="ant">'; $json_arg = escapeshellarg($cleaned); $proc = popen("sudo /var/www/html/scripts/set_vars.sh $json_arg 2>&1", 'r'); echo '<pre>'; while (!feof($proc)){ echo fread($proc, 1024); @ob_flush(); @flush(); } echo '</pre>'; echo '</div>'; echo '<script>'; echo 'setTimeout( function ( ) { alert( "Event Added!" ); }, 2000 );'; echo 'clearform();'; echo '</script>'; } ?> </div> <div id="tabs-2"> <h1>Hello!</h2> </div> </div> </body> </html>
-
im trying to load tinymce dynamically in my script when the edit button is clicked but its not loading. please help with simple and working example as im new to javascript. code for tinymce : tinymce.init({ menubar:false, selector: "textarea#wall_edit_1", theme: "modern", resize: false, height: 200, plugins: [ " autolink link image preview hr anchor pagebreak spellchecker", "searchreplace wordcount visualblocks visualchars insertdatetime media nonbreaking", "save table contextmenu directionality emoticons paste textcolor" ], content_css: "css/content.css", toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | l ink image | print preview media fullpage | forecolor backcolor emoticons", style_formats: [ {title: 'Bold text', inline: 'b'}, {title: 'Red text', inline: 'span', styles: {color: '#ff0000'}}, {title: 'Red header', block: 'h1', styles: {color: '#ff0000'}}, {title: 'Example 1', inline: 'span', classes: 'example1'}, {title: 'Example 2', inline: 'span', classes: 'example2'}, {title: 'Table styles'}, {title: 'Table row 1', selector: 'tr', classes: 'tablerow1'} ] }); jquery code in home page to show the editor dynamically: $(".session_edit").hide(); $(".friend_edit").hide(); $(".hidden_text_edit").click(function(){ var id=$(this).attr("type"); $(".hidden_edit_4_session"+id).show(); var hide_status=$(".statusboxes").attr('type'); var title=$(".title_s_2copy").attr('type'); var data=$(".data_s_2copy").attr('type'); $(hide_status).hide(); tinyMCE.get('.hidden_edit_4_session').setContent(data); $(".title_s_edit").val(title); }); $(".close_edit").click(function(){ $(".hidden_edit_4_session").hide(); var hide_status=$(".statusboxes").attr('div', 'type'); $(hide_status).show(); }); html code that was generated using php which i want to edit: <div class='jumbotron'><input type='text' class='form-control title_s' name='status_title' placeholder='Title ' ><br><textarea id='wall_id_1' class='update_session' placeholder='whats up qwerty'></textarea><button style='float:right;' type='a' class='btn btn-warning btn btn-large btn-lg post-s'>Post</button></div><div attr='7' class='hidden_edit_4_session7 session_edit jumbotron'><a href='#' class='pull-right close_edit' title='Close without editing'>Close X</a><input type='text' class='form-control title_s_edit' name='status_title' value='hello shan!' placeholder='Title' ><div> </div><textarea id='wall_edit_1' class='session_edit 7' placeholder='whats up qwerty'> <p>what's up.</p></textarea><br><button style='float:right;' type='a' class='btn btn-warning btn btn-large btn-lg post-s-edit'>Update</button></div><div id="7" type="7" class="statusboxes jumbotron"><h3 style="color:black; margin-bottom:5px; margin-top:5px;" class="pull-left"><div id="7" class="title_s_2copy" value="hello shan!">hello shan!</div></h3><span class="pull-right"><div class="dropdown"><button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" ><span class="glyphicon glyphicon-edit"></span></button><ul class="dropdown-menu"><li><a href="#" id="7" type="7" class="edit_4_session hidden_text_edit glyphicon glyphicon-pencil" title="Edit this status" >Edit</a></li><li><a href="#" id="7" class="delete_4_session hidden_text_delete_7 glyphicon glyphicon-trash delete_reply_btn" title="Delete this status and its replies">Remove</a></li></ul></div></span><br><hr><span class="pull-left data_s_2copy" id="7" value="<p>what's up.</p>" style="font-size:9px; margin-bottom:0px; margin-top:0px; text-align:left; color:black;"><p>what's up.</p></span><br><br><hr><b style="text-align:right; color:black;"><small>Posted by:- <a href="search_results.php?u=qwerty">qwerty</a> 2015-10-20 10:13:18</small></b><br><br><textarea id="7" class="status_update input-custom2" placeholder="comment's"></textarea><button id="7" type="b" class="btn btn-warning pull-right btn-sm">Reply</button></div><div attr='6' class='hidden_edit_4_session6 session_edit jumbotron'><a href='#' class='pull-right close_edit' title='Close without editing'>Close X</a><input type='text' class='form-control title_s_edit' name='status_title' value='pen test' placeholder='Title' ><div> </div><textarea id='wall_edit_1' class='session_edit 6' placeholder='whats up qwerty'> <p><script type="text/javascript">alert("hooya hacked")</script></p></textarea><br><button style='float:right;' type='a' class='btn btn-warning btn btn-large btn-lg post-s-edit'>Update</button></div><div id="6" type="6" class="statusboxes jumbotron"><h3 style="color:black; margin-bottom:5px; margin-top:5px;" class="pull-left"><div id="6" class="title_s_2copy" value="pen test">pen test</div></h3><span class="pull-right"><div class="dropdown"><button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" ><span class="glyphicon glyphicon-edit"></span></button><ul class="dropdown-menu"><li><a href="#" id="6" type="6" class="edit_4_session hidden_text_edit glyphicon glyphicon-pencil" title="Edit this status" >Edit</a></li><li><a href="#" id="6" class="delete_4_session hidden_text_delete_6 glyphicon glyphicon-trash delete_reply_btn" title="Delete this status and its replies">Remove</a></li></ul></div></span><br><hr><span class="pull-left data_s_2copy" id="6" value="<p><script type="text/javascript">alert("hooya hacked")</script></p>" style="font-size:9px; margin-bottom:0px; margin-top:0px; text-align:left; color:black;"><p><script type="text/javascript">alert("hooya hacked")</script></p></span><br><br><hr><b style="text-align:right; color:black;"><small>Posted by:- <a href="search_results.php?u=qwerty">qwerty</a> 2015-10-18 21:53:31</small></b><br><br><textarea id="6" class="status_update input-custom2" placeholder="comment's"></textarea><button id="6" type="b" class="btn btn-warning pull-right btn-sm">Reply</button></div><div attr='5' class='hidden_edit_4_session5 session_edit jumbotron'><a href='#' class='pull-right close_edit' title='Close without editing'>Close X</a><input type='text' class='form-control title_s_edit' name='status_title' value='pen test' placeholder='Title' ><div> </div><textarea id='wall_edit_1' class='session_edit 5' placeholder='whats up qwerty'> <p><script type="text/javascript">alert("hooya hacked")</script></p></textarea><br><button style='float:right;' type='a' class='btn btn-warning btn btn-large btn-lg post-s-edit'>Update</button></div><div id="5" type="5" class="statusboxes jumbotron"><h3 style="color:black; margin-bottom:5px; margin-top:5px;" class="pull-left"><div id="5" class="title_s_2copy" value="pen test">pen test</div></h3><span class="pull-right"><div class="dropdown"><button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" ><span class="glyphicon glyphicon-edit"></span></button><ul class="dropdown-menu"><li><a href="#" id="5" type="5" class="edit_4_session hidden_text_edit glyphicon glyphicon-pencil" title="Edit this status" >Edit</a></li><li><a href="#" id="5" class="delete_4_session hidden_text_delete_5 glyphicon glyphicon-trash delete_reply_btn" title="Delete this status and its replies">Remove</a></li></ul></div></span><br><hr><span class="pull-left data_s_2copy" id="5" value="<p><script type="text/javascript">alert("hooya hacked")</script></p>" style="font-size:9px; margin-bottom:0px; margin-top:0px; text-align:left; color:black;"><p><script type="text/javascript">alert("hooya hacked")</script></p></span><br><br><hr><b style="text-align:right; color:black;"><small>Posted by:- <a href="search_results.php?u=qwerty">qwerty</a> 2015-10-18 21:53:30</small></b><br><br><textarea id="5" class="status_update input-custom2" placeholder="comment's"></textarea><button id="5" type="b" class="btn btn-warning pull-right btn-sm">Reply</button></div><div attr='3' class='hidden_edit_4_session3 session_edit jumbotron'><a href='#' class='pull-right close_edit' title='Close without editing'>Close X</a><input type='text' class='form-control title_s_edit' name='status_title' value='this is not working' placeholder='Title' ><div> </div><textarea id='wall_edit_1' class='session_edit 3' placeholder='whats up qwerty'> <p>wht to do???</p></textarea><br><button style='float:right;' type='a' class='btn btn-warning btn btn-large btn-lg post-s-edit'>Update</button></div><div id="3" type="3" class="statusboxes jumbotron"><h3 style="color:black; margin-bottom:5px; margin-top:5px;" class="pull-left"><div id="3" class="title_s_2copy" value="this is not working">this is not working</div></h3><span class="pull-right"><div class="dropdown"><button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" ><span class="glyphicon glyphicon-edit"></span></button><ul class="dropdown-menu"><li><a href="#" id="3" type="3" class="edit_4_session hidden_text_edit glyphicon glyphicon-pencil" title="Edit this status" >Edit</a></li><li><a href="#" id="3" class="delete_4_session hidden_text_delete_3 glyphicon glyphicon-trash delete_reply_btn" title="Delete this status and its replies">Remove</a></li></ul></div></span><br><hr><span class="pull-left data_s_2copy" id="3" value="<p>wht to do???</p>" style="font-size:9px; margin-bottom:0px; margin-top:0px; text-align:left; color:black;"><p>wht to do???</p></span><br><br><hr><b style="text-align:right; color:black;"><small>Posted by:- <a href="search_results.php?u=qwerty">qwerty</a> 2015-10-17 19:32:35</small></b><br><br><textarea id="3" class="status_update input-custom2" placeholder="comment's"></textarea><button id="3" type="b" class="btn btn-warning pull-right btn-sm">Reply</button></div><div attr='2' class='hidden_edit_4_session2 session_edit jumbotron'><a href='#' class='pull-right close_edit' title='Close without editing'>Close X</a><input type='text' class='form-control title_s_edit' name='status_title' value='im grateful to mother nature and god' placeholder='Title' ><div> </div><textarea id='wall_edit_1' class='session_edit 2' placeholder='whats up qwerty'> <p>as the title says im grateful</p></textarea><br><button style='float:right;' type='a' class='btn btn-warning btn btn-large btn-lg post-s-edit'>Update</button></div><div id="2" type="2" class="statusboxes jumbotron"><h3 style="color:black; margin-bottom:5px; margin-top:5px;" class="pull-left"><div id="2" class="title_s_2copy" value="im grateful to mother nature and god">im grateful to mother nature and god</div></h3><span class="pull-right"><div class="dropdown"><button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" ><span class="glyphicon glyphicon-edit"></span></button><ul class="dropdown-menu"><li><a href="#" id="2" type="2" class="edit_4_session hidden_text_edit glyphicon glyphicon-pencil" title="Edit this status" >Edit</a></li><li><a href="#" id="2" class="delete_4_session hidden_text_delete_2 glyphicon glyphicon-trash delete_reply_btn" title="Delete this status and its replies">Remove</a></li></ul></div></span><br><hr><span class="pull-left data_s_2copy" id="2" value="<p>as the title says im grateful</p>" style="font-size:9px; margin-bottom:0px; margin-top:0px; text-align:left; color:black;"><p>as the title says im grateful</p></span><br><br><hr><b style="text-align:right; color:black;"><small>Posted by:- <a href="search_results.php?u=qwerty">qwerty</a> 2015-10-17 19:29:15</small></b><br><br><textarea id="2" class="status_update input-custom2" placeholder="comment's"></textarea><button id="2" type="b" class="btn btn-warning pull-right btn-sm">Reply</button></div><div attr='1' class='hidden_edit_4_session1 session_edit jumbotron'><a href='#' class='pull-right close_edit' title='Close without editing'>Close X</a><input type='text' class='form-control title_s_edit' name='status_title' value='hello world' placeholder='Title' ><div> </div><textarea id='wall_edit_1' class='session_edit 1' placeholder='whats up qwerty'> <p>this is my 1st post</p></textarea><br><button style='float:right;' type='a' class='btn btn-warning btn btn-large btn-lg post-s-edit'>Update</button></div><div id="1" type="1" class="statusboxes jumbotron"><h3 style="color:black; margin-bottom:5px; margin-top:5px;" class="pull-left"><div id="1" class="title_s_2copy" value="hello world">hello world</div></h3><span class="pull-right"><div class="dropdown"><button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" ><span class="glyphicon glyphicon-edit"></span></button><ul class="dropdown-menu"><li><a href="#" id="1" type="1" class="edit_4_session hidden_text_edit glyphicon glyphicon-pencil" title="Edit this status" >Edit</a></li><li><a href="#" id="1" class="delete_4_session hidden_text_delete_1 glyphicon glyphicon-trash delete_reply_btn" title="Delete this status and its replies">Remove</a></li></ul></div></span><br><hr><span class="pull-left data_s_2copy" id="1" value="<p>this is my 1st post</p>" style="font-size:9px; margin-bottom:0px; margin-top:0px; text-align:left; color:black;"><p>this is my 1st post</p></span><br><br><hr><b style="text-align:right; color:black;"><small>Posted by:- <a href="search_results.php?u=qwerty">qwerty</a> 2015-10-17 19:25:09</small></b><br><br><textarea id="1" class="status_update input-custom2" placeholder="comment's"></textarea><button id="1" type="b" class="btn btn-warning pull-right btn-sm">Reply</button></div> </div>
-
hi guys im trying to hide a specific class selector in jquery. where the id and the type attributes are generated dynamically. but dont know how to select and hide it so, as to do a ajax call. can anyone help. here is the code for the jquery: $(".hidden_text_area").click(function(){ $(".hidden_edit_4_session").show(); var hide_status=$(".statusboxes").attr('type'); $(hide_status).find(".statusboxes").hide(); }); and here is the code where the type attribute is which i want to select and hide if the user clicks edit button. $status_list='<fieldset><div class="jumbotron"><div id="'.$updateid.'" type="'.$updateid.'" class="statusboxes">' . '<h3 style="text-align:left; color:black;" class="pull-left">'.$title.'</h3>' . '<span class="pull-right">' . '<div class="dropdown">' . '<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" >' . '<span class="glyphicon glyphicon-edit"></span></button>' . '<ul class="dropdown-menu">' . '<li><a href="#" class="hidden_text_area glyphicon glyphicon-pencil" title="Edit this status" >Edit</a></li>'.$statusdeletebutton.'</ul></div></span><br><hr><span class="pull-left"style="font-size:14px; text-align:left; color:black;"><legend>' . $data.'</legend></span><br><b style="text-align:right; color:black;"><small>Posted by:- <a href="search_results.php?u='.$author.'">'.$author. '</a> '.$post_date.'</small></b>' . '<br>'.$status_replies . '</div></div>'.$statusui_edit ; -
loading image during ajax process not working properly: my code smthing like this... div to show content and loading image- <div id="adS" style="float: left; width: 70%"> <div id="loading-image" style="background-image: url('images/processing.gif'); display: none;"> </div> </div> jquery code- $(function() { $("#lets_search").bind('submit',function() { var gen = $("input[name='radGen']:checked").val(); var mt = $('#selMtQ').val(); var agf = $('#agf').val(); var agt = $('#agt').val(); var rel = $('#religQ').val(); var cast = $('#selCstQ').val(); $('#loading-image').show(); $.post('adSearch.php',{gen:gen,mt:mt,agf:agf,agt:agt,rel:rel,cast:cast}, function(data){ $("#adS").html(data); $('#loading-image').hide(); }); return false; }); }); The loading image show only one time on click event.. not every time when i click search li... Need help...
-
I am retriving records from mysql database that has expiry time limit. The time in the database is saved in "minutes". So for one hour, it'll be "3600" minutes. That's all fine. Now what I am trying to do is create a countdown clock using Javascript/jquery and I have ran into a bit of a problem. 1. I am retriving multiple records from the database that all have a countdown timer. Currently, it's only taking the time value of the first record and using that for all the records. I would like to know how I can make it so that each record will have it's own countdown timer value? 2. Everytime I refresh a page, it will reset the timer. How can I fix this? Here's my code. <?php foreach($rows as $row) { $get_expiry_time = $row['expiry_time']; <div class="record"> <div class="timer"> </div> </div> } ?> <script> $(document).ready(function(){ var countDownTime = <?php echo $get_expiry_time; ?>; function countDownTimer() { var hours = parseInt( countDownTime / 3600 ) % 24; var minutes = parseInt( countDownTime / 60 ) % 60; var seconds = countDownTime % 60; var result = (hours < 10 ? "0" + hours : hours) + ":" + (minutes < 10 ? "0" + minutes : minutes) + ":" + (seconds < 10 ? "0" + seconds : seconds); $('.timer').html(result); if(countDownTime == 0 ){ countDownTime = 60*60*60; } countDownTime = countDownTime - 1; setTimeout(function(){ countDownTimer() }, 1000); } countDownTimer(); }); </script>
-
I am using this for multi image upload. https://github.com/CreativeDream/jquery.filer Since it doesn't show example of how to use it with a database, I am having a bit of an issue. The following is my code. Couple things. 1. It won't insert into database with the "tokens". If I remove the token code, then it'll work. The same token works in other forms that I use. 2. Yes It inserts into the database. The issue is that it inserts only 1 file at a time and not all the selected files. <?php require_once ($_SERVER['DOCUMENT_ROOT'] . '/home/templates/header.php'); if(isset($_POST['submit'])) { if($_POST['token'] === $_SESSION['token']) { if(isset($_FILES['files'])){ $date_added = date('Y-m-d H:i:s'); // Setting up folder for images $user_dir = $_SERVER['DOCUMENT_ROOT'] .'/home/members/images/'.$db_userid.'/records/'; if(!is_dir($user_dir)){ mkdir($_SERVER['DOCUMENT_ROOT'] .'/home/members/images/'.$db_userid.'/records/', 0775, true); } else { $uploader = new Uploader(); $data = $uploader->upload($_FILES['files'], array( 'limit' => 10, //Maximum Limit of files. {null, Number} 'maxSize' => 10, //Maximum Size of files {null, Number(in MB's)} 'extensions' => null, //Whitelist for file extension. {null, Array(ex: array('jpg', 'png'))} 'required' => false, //Minimum one file is required for upload {Boolean} 'uploadDir' => '../uploads/', //Upload directory {String} 'title' => array('auto', 10), //New file name {null, String, Array} *please read documentation in README.md 'removeFiles' => true, //Enable file exclusion {Boolean(extra for jQuery.filer), String($_POST field name containing json data with file names)} 'perms' => null, //Uploaded file permisions {null, Number} 'onCheck' => null, //A callback function name to be called by checking a file for errors (must return an array) | ($file) | Callback 'onError' => null, //A callback function name to be called if an error occured (must return an array) | ($errors, $file) | Callback 'onSuccess' => null, //A callback function name to be called if all files were successfully uploaded | ($files, $metas) | Callback 'onUpload' => null, //A callback function name to be called if all files were successfully uploaded (must return an array) | ($file) | Callback 'onComplete' => null, //A callback function name to be called when upload is complete | ($file) | Callback 'onRemove' => 'onFilesRemoveCallback' //A callback function name to be called by removing files (must return an array) | ($removed_files) | Callback )); if($data['isComplete']){ $files = $data['data']; print_r($files); } if($data['hasErrors']){ $errors = $data['errors']; print_r($errors); } function onFilesRemoveCallback($removed_files){ foreach($removed_files as $key=>$value){ $file = '../uploads/' . $value; if(file_exists($file)){ unlink($file); } } return $removed_files; } for($i = 0; $i < count($_FILES['files']['name']); $i++) { $name = $_FILES['files']['name'][$i]; $temp = $_FILES['files']['tmp_name'][$i]; $ext = pathinfo($name, PATHINFO_EXTENSION); $upload = md5( rand( 0, 1000 ) . rand( 0, 1000 ) . rand( 0, 1000 ) . rand( 0, 1000 )); $image_thumb_path = $user_dir . 'thumb_' . $upload . $ext; try { $insert_image = $db->prepare("INSERT INTO images(user_id, image_path, date_added) VALUES(:user_id, :image_path, :date_added)"); $insert_image->bindParam(':user_id', $db_userid); $insert_image->bindParam(':image_path', $image_thumb_path); $insert_image->bindParam(':date_added', $date_added); $result_image = $insert_image->execute(); if($result_image == false) { $error = 'There was a problem inserting images!'; } else { move_uploaded_file($temp, $image_thumb_path); $success = 'Your images has been saved.'; } } catch(Exception $e) { $error = die($e->getMessage()); } } } } } } ?> <h1>Upload Images</h1> <?php include_once ($dir_path . '/home/snippets/success-errors.php'); ?> <form action="" method="post" enctype="multipart/form-data"> <fieldset> <input type="file" multiple="multiple" name="files[]" id="input2"> <fieldset> <input type="hidden" name="token" value="<?php echo $_SESSION['token'] = md5(rand(time (), true)); ?>" /> <input type="submit" name="submit" class="red-btn" value="upload" /> </fieldset> </form> <?php require_once ($_SERVER['DOCUMENT_ROOT'] . '/home/templates/footer.php'); -
Hi i have stuck with the ajax return success. Firstly let me explain what i going to do. i have a input form, the form have 3 field text. 1) start Date 2) end Date 3) quarter the "quarter" field is a drop down list. i have a database to store the date of period of Q1,Q2,Q3,Q4. so i want to have, when a user select a drop down, the date will return the Q1 Period. For now, i'am able to return the result like this: [{"qstartDate":"11/1/2014","qendDate":"1/31/2014"}] But, when i wanted to return the date into my form, it fail. So, Here is my Code $("#slc-quarter").change(function () { var quarter = $(this).val(); $.ajax({ url: "searchQuarterDetails.asp?term=" + quarter, success: function (data) { var a = qstartDate; alert(a) } //$("#qstartDate").val(ui.item.qstartDate); //$("#qendDate").val(ui.item.qendDate); }) }) The result that i get from this code after i change the drop down menu is: [object htmlinputelement]
-
I have divs which can be clicked and then another div will pop out with few colors for users to choose. After choosing the colors in the div that pop out the div that is clicked will change into that background. I used class to determain which div is clicked. function works fine but I realized when I try console.log the class I used as global to findout which div to change the background. the console.log keeps adding up also multiplying too. Can I have a pair of eye to see where it's adding things up? var colorHolder = null; //used to store the location where color is picked function colorFieldPicker(onClickSide, xValInput, yValInput,side){ onClickSide.on('click', function(event){ colorHolder = $(this).attr('class'); var yVal = (event.pageY - yValInput) + "px"; var xVal = (event.pageX / xValInput) + "px"; $('.colorSelectBox').css({"left": xVal, "top": yVal}).toggle(); colorPickerOnClick(side); }); } function colorPickerOnClick(side){ $('div.black').add('div.yellow').on('click', function(){ var colorAttr = $(this).attr('value'); var splitClass = colorHolder.split(" "); side.closest('div').find('.'+splitClass[0] + '.'+splitClass[1]).css({"background": colorAttr}).attr('value', colorAttr); console.log(colorHolder); //this is where it's displaying in console that it'll keep on adding up. $('.colorSelectBox').css({"display": "none"}); }); } Thanks everyone in advance.
