I am building a page where a user (teacher) can assing students homework tasks. Depending on how many tasks are assigned, the number of comment boxes will change.
I have a page in which multiple forms are created. The number of textareas vary as described above. All student answers are shown on the same page. A comment box is shown for each individual task, in order to enable the teacher to respond to every type of mistake (if any) the student make.
Each comment field is related to a specific ID (the student answer for that specific task), but how do I most economically go about creating an array and submitting the specific textarea 'on change'. I.e. I want the database comment field to be dynamically updated when a teacher is done commenting on a specific student answer.
I am not a complete novice, but far from being proficient in java (jquery and ajax, which I use to handle most of my site). I use php and MySQL for serverside and jquery for client side data handling.
I have not really begone coding yet as I am looking for a good and viable approach. I have between 30-40 tasks assigned on avarage.
<div id="defaultPortlet<?php echo $portL; ?>" class="panel-collapse collapse">
<div class="portlet-body clearfix">
<form>
<textarea class="col-lg-12" rows="3">
<?php echo $row_dbResponce['ten_notes']; ?>
</textarea>
</form>
</div>
</div>
I would like to update the database on change (i.e. usig ajax handle data and calling a php database update page).
Any help on how to approach this problem would be usefull.
change
<textarea class="col-lg-12" rows="3">
to
<textarea class="col-lg-12" rows="3" id="descriptor<?php echo $portL; ?>">
Then in your jquery...
$("textarea[descriptor^='news']").each(function( index ) {
$(this).change();
})
Related
I have a slideshow on a webpage, the user clicks through to next one. When the user clicks through, the ID changes inside of the URL address. I need a way of updating a table each time the user changes onto the next slide. I want to save where the user is, to then reload their progress at a later date. The slideshow code is all in one html page. Snippet of 2 sections (slides) below:
<section class="aligncenter">
<span class="background light" style="background-image: url('istudy_slides_images/abstract2.jpg')"/></span>
<div class="wrap" id="slide=6">
<div class="wrap">
<h1>Stress is often defined as when an individual perceives the demands upon them to exceed there perceived ability to cope</h1>
</div>
</section>
<!-- SLIDE 6 -->
<section>
<span class="background" style="background-image:url('istudy_slides_images/balance.jpg')"></span>
<div class="wrap" id="slide=7">
<div class="alignright size-50 bg-trans-dark">
<p class="text-subtitle text-serif">"In the end, it's all a question of balance" - Rohinton Mistry</p><br>
<h3><strong>Balance</strong></h3>
<p>A common source of stress and anxiety is when we lack balance within our lives.</p>
<p><strong>Task Two:</strong> Consider whether you have the correct balance in you're life.<br>Are there any improvements you can make to your life work balance to improve your wellbeing?</p>
</div>
</div>
</section>
Screenshot of the URL which shows the id (can I use this to update the table in my database checkPointMod each time the id changes? Any help at all would be greatly appreciated I've been stuck on this one for a while. If the best way to do this is with cookies/sessions please could someone give me some guidance?
Using: Webslides.tv for the slides https://webslides.tv/#slide=2
I can give a general approach to rather than exact code. So what you can do, you can get that hash parameter in the URL using the JavaScript like this,
let slideID = window.location.hash
Then you can use local storage to store that id so that you can use that to navigate the the user to current slide like this,
localStorage.setItem('slideid', slideID);
Then on reload of page you can retriev that slideID like this
localStorage.getItem('slideid');
Im making a control panel for my site that will dynamically display posts made by the user logged in. How i have it planned in mind is the MySQL server has all posts made by all members in one table. When the control panel loads, a PHP script will run and query from that table all the posts made by the logged in user in the form of a table displaying the Title of the post, an Edit and Delete button.
My idea to get the Edit and Delete button working is to have each post display as a form. The issue i have is how to display the title of the post.
i dont want the title of the post (as a form) to be as an input field but rather have it be say <p value="My Post" name="mypost">My Post</p>. Then have the Edit button, when clicked, $_POST['mypost'] the <p> tag as if it were an input.
In example:
<form method="post" action="edit_post.php">
<p name="title" value="My Post">My Post</p>
<input type="submit" value="Edit"></input>
<input type="submit" formaction="delete_post.php" value="Delete"></input>
</form>
And for the mean time, just have edit_post.php echo the content/value of the <p>:
<?php
echo $_POST['mypost'];
?>
If i use a regular input field instead of the <p> tag, it works, of course. but as i said, i dont want to display the title of the post as an input field. Im not sure what the "professional" way of doing this is, im just coming up with an idea of my own.
Thanks in advance!
In short - You can't do this. Only input tags pass data through the form. As a workaround, you could use a hidden input:
<form method="post" action="edit_post.php">
<p>My Post</p>
<input name="title" type="hidden" value="My Post">
<input type="submit" value="Edit"></input>
<input type="submit" formaction="delete_post.php" value="Delete"></input>
</form>
I know where your getting but this is to much for what you want.
To get the content of <p>: And by the way it would be better to use one of the h1/h2/h3 tag instead since search engine will recognize it as being what it is, a title. But let's just call it an element.
With JavaScript you can get the content of an element using html() mostly used with JQuery. http://api.jquery.com/html/
And you are posting data. You probably want the Ajax with it so JQuery will deal with it easy. Quick search on Google should get you started with Jquery.
And Json is really nice and easy to use once you get a grasp.
But you can do that pretty much any way you want, You could just use CSS and hide all the borders and such and make it disabled so it would blend in or take a particular style.
Or the edit link could be a get instead of a post. processor_page.php?title="my_post_title"
And if you plan on going with JavaScript I recommend AngularJS
Warning: This is a long read as there is a lot of information pertaining to the problem in question, so prepare yourself, and thanks for taking the time to go through this if you do!
I'm in the process of writing a very large WebApp for a client and have built numerous interactive applications for this using jQuery, but one which I have developed has left me wondering: is there a standard way to do this, or perhaps just a better way?
This is where I come to you guys, to gain some insight on whether there is a certain way that this should be done, as I'm always looking to build optimal applications.
The Task I had to complete
The app I'm building requires the user to be able to build an invoice of products. This invoice can have any number of products added to it via a search box. Each product is pulled from the database and stored inside that search box, and each product can be added multiple times.
The way the user adds a product is by typing the name of the product in the search box, and pressing an Add Product button. This prepends a processed template to the list of products. Pretty simple right?
The Problem
The big problem I came across was that not only was the invoice able to contain a list of products, but each of these products contained varying customizable details. This meant that each product had a number of it's own fields on it, which the user could edit, which modified a number of things. For instance, one type of product has a quantity, which needs to be multiplied by the cost price of that product to return a total price. Another product has a length, which needs to be multiplied by the width, which then needs to be multiplied by the cost price of that product to return a total price.
As you can imagine, there are many different types of products with many different fields with many different calculations to be made, which, at the end of creation, need to be parsed to a PHP page whilst maintaining full modifiability where the user can add/remove/edit products on the same invoice page without jumping around.
This, to me, was a nightmare, as I needed to have a way to keep this clean and have a bunch of different inputs/jQuery objects not colliding with each other one way or another. I also had to differentiate loaded from newly created products, as some would have grabbed information from the database
The Solution I Built
So when a product is prepended to the list, the product contains a number of fields, a number of details, and a remove button. The first thing I did was make templates with replaceable tokens for each different type of product. That was easy and worked perfectly fine, and when a product was prepended to the list, to every element that was related to that product, I added a rel attribute to it (which I called a "hook") so that I could add handlers that only modified elements with that specific hook.
For the inputs I used input arrays, in the form of <input name="Products[%HOOK%][%PRODUCTDATAKEY%]" value="%PRODUCTDATAVALUE%" />. Where my main problem arised was where I had to differentiate the products loaded that had already been saved in the database, from the newly added products that had just been added. The way I did this was by adding [Loaded] before all of the input name arrays, so that my PHP script would be able to deal with the [Loaded] array separately.
What is my concern?
My largest concern is how messy everything ended up looking, from the markup to the code. Hooks flying all over the place, Extremely long input names, A couple of thousand lines of code and a headache of different keys and tokens to be replaced. It works perfectly fine, it just feels horrible when I look at it as a developer. Take this "added product" for example:
<div class="item product special-order" rel="7" style="">
<input type="hidden" name="products[7][id]" value="17">
<input type="hidden" name="products[7][item_id]" value="">
<input type="hidden" name="products[7][type]" value="Special Order Flooring">
<input type="hidden" name="retail_price" class="invoice-base-cost" value="18.49">
<h4>Carpet Brand<a name="action" rel="7" class="btn btn-mini btn-danger remove-product initialized" style=""><i class="icon-remove"></i> Remove</a>
</h4>
<div class="item-details">
<div class="detail-column">
<div class="detail">
<span class="detail-label detail-label-medium"> Type:</span>Carpet
</div>
<div class="detail">
<span class="detail-label detail-label-medium">Range:</span> Carpet Brand
</div>
<div class="detail">
<span class="detail-label detail-label-medium">
Colour:</span><input required="" class="detail-input-large left-align" value="" type="text" name="products[7][colour]">
</div>
<div class="detail">
<span class="detail-label detail-label-medium">
Length:</span><input type="text" name="products[7][length]" rel="7" class="length-field initialized" placeholder="Enter the length..." value="1.000"><span class="detail-unit">m</span>
</div>
</div>
<div class="detail-column">
<div class="detail">
<span class="detail-label detail-label-large">Manufacturer:</span>
<select class="detail-input-large" required="" name="products[7][manufacturer_id]">
<option value="14">Manufacturer 1</option>
<option value="16">Manufacturer 2</option>
</select>
</div>
<div class="detail">
<span class="detail-label detail-label-large">Width supplied:</span><input type="text" name="products[7][width]" class="width-field" value="5.000"><span class="detail-unit">m</span>
</div>
<div class="detail">
<span class="detail-label detail-label-large">Retail price per/m:</span> £18.49
</div>
<div class="detail">
<span class="detail-label detail-label-large">Room:</span><input class="detail-input-large left-align" type="text" name="products[7][room]" value="" required="required">
</div>
</div>
<div class="item-cost">
<h5>Item cost</h5>
£<span class="invoice-cost" rel="7">92.45</span>
</div>
</div>
</div>
Is that not overkill? Could I have not mapped these to JSON objects to make it much cleaner somehow? Or is this the right way to do this?
That product had about 5 different event binds on it too, which was messy due to the fact that if the length field was changed, the price had to be recalculated by the width and the base price, and the same with the width just backwards, and this was all done by looking for fields with the same rel (hook)... It just looks like a mess to me. It'd be great to get an expert opinion on how this should have been approached.
I second the first two answers : use a framework meant to handle this.
Before going there however, here is a first step towards modularizing your code : from what you describe, you seem to have a list of .special-order items, and each of these items has some life of its own.
Try to reflect this in your markup and your code :
1- markup : use meaningful class names to identify the items which will have an active role (you seem to already have : .special-order, .length-field, .remove-button ...). Be sure to have one single node which wraps your whole html "bundle" (in your case : .special-order seems to play this role).
2- event hooks : use these class names to bind your hooks :
$('.remove-button').click(function(){ ... });
$('.length-field').change(function(){ ... });
3- If your items' list is dynamic (e.g, you can add/remove items through javascript without reloading the whole page), use event delegation to bind your events :
$('.special-order-list').on('click', '.remove-button', function(){ ... });
$('.special-order-list').on('change', '.length-field', function(){ ... });
4- Inside your handlers, follow the modularity represented in your markup. Two nodes are related if they are the children of the same .special-order node. That way you can represent a relation between nodes, which does not depend on the explicit value of a "rel" field :
$('.special-order-list').on('change', '.length-field', function(){
var $masterNode = $(this).closest('.special-order');
var basePrice = $masterNode.find('.base-price').val();
var length = $(this).val();
$masterNode.find('.total-price').val( basePrice * length );
});
5- Obviously, use functions where appropriate :
function recomputePrice($masterNode){
var basePrice = $masterNode.find('.base-price').val();
var length = $masterNode.find('.length-field').val();
$masterNode.find('.total-price').val( basePrice * length );
});
$('.special-order-list').on('change', '.length-field, .base-price', function(){
var $masterNode = $(this).closest('.special-order');
recomputePrice( $masterNode );
});
Organizing your page into modules and submodules (some will call them components, or widgets ...) is considered a "best practice" for page layout. Is is mentionned in SmaCSS, and it underlies several css/js frameworks, such as Bootstrap or many others.
As spez86 suggested; you should make use of framework to generate your HTML as well as to bind events to the elements present within your each HTML section. I will suggest you to take a look at backbonejs and handlebarsjs. When you use these 2 in combination, you need put minimal effort to achieve your goal. You can refer following URL to know more about their usage. I will recommend you to first work on UI, i.e. create separate templates for your different-different kind of product and then on your Add Product button click try appending backbone view to your product list container. Once you are able to successfully add HTML onto page then you can proceed with binding of event to child element present within product template. This can be done inside Backbone.View class's events function. The event handler registered here will only gets attached to elements present within this View and not to any other element present within page DOM having same CSS class. So you will get rid of [rel] mechanism and also from long input names. Hope this will help you a bit.
Honestly, with the amount of data you are talking about and the number of ways it could be modified, you should look into a framework that is more robust and was designed to make data binding much easier. There are many out there, but my personal favorite is AngularJS.
http://angularjs.org/
Start looking into this as it may save you a lot of time in developing the app and then of course maintaining it down the road.
How do I store the position of box in a sortable row fluid? For example, every time a user drag a box from category 1 to category 2 then when he refreshes the page, it will remember the position?
Here's the HTML code for the interface you might wanna look at:
<div class="row-fluid sortable">
<div class="box span3">
<div class="box-header well">
<h2>Category1</h2>
</div>
</div>
<div class="box span3">
<div class="box-header well">
<h2>Category2</h2>
</div>
</div>
</div>
As you can see, it uses a class in CSS file for the style. Or Is there any better way to do this by using jQuery?
There are at least two ways to store the data
Use a client-side cookie to store the data. You can use a plugin like jquery-cookie to read and write cookies on the client side.
Store the data on the server side. This will require an AJAX call to a backend script to store the data. You can then query the database for the stored positions on each new page load, or create a new AJAX call to retrieve the data as needed.
You will need some kind of persistent storage as George points out, you could do this with cookies or a database.
Below is a link to an example that uses jquery to serialize the order once dragging has finished and then passes the result on to a server side script via ajax. The server side script then updates the database and gives you a means to persist the order.
I stress that this example is one of my own from several years back. It's a site I no longer maintain, but this post has a good number of comments that highlight some issues that may arise.
The example uses a list rather than divs. It also uses a database for persistent storage, but you could alter the server side script to save cookies.
http://www.wiseguysonly.com/2008/12/07/drag-and-drop-reordering-of-database-fields-sortables-with-jquery/
It should be simple enough to adapt to your exact needs.
I'm using php,html,javascript,mysql.
My functionality goes like this. I have a division made in html which have the data retrieved from database as a list. So, if there are 5 list items each will be having an onclick event, clicking a popup window will be shown. Popup window is shown by javascript. So, i'm finished up to this part. The stage i'm stuck up is i have to get data into that popup window from my mysql tabe. How can i accomplish this,
Guys, please help me out.
I also have a sample site whic looks exactly like my application. Please check it out.
http://yale.roammeo.com/main/#!/list/2011-11-09/12-30/
Popup is not showing any physically existing page. Its just showing a new html page with two divisions in it. How to retrieve data from mysql into this division?
<div id="blanket" style="display:none;"></div>
<div id="popUpDiv" style="display:none;width:500px;height:400px;">
<div align="left" class="popup_head">
<div align="right" style="float:right;width:10%">
X
</div>
<div style="clear:both"></div>
</div>
<div align="center" style="padding:10px;">
<form action="" onSubmit='search()' method="post" name="frmSendMsg">
</form>
</div>
</div>
Well, it depends on how exactly your javascript popup works.
If the popup shows some physically existing page, then this page should fetch data from mysql just like your main page.
If the popup shows some dynamically js-generated page, you should probably use AJAX techniques, i.e. have some PHP backend which is able to fetch data from mysql and address this backend from javascript. Most modern JS frameworks can do it any way you want (XML, JSON etc.).