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.).
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');
I am developing a hybrid app using intel xdk with PHP server. My app already had a login page(index.html). When the user logged in it will redirect to user.html page.
In user.html, It consists of different div's for user's data.
Example:
<div class="navigation">the navigation</div>
<div id="home"> -some data content here- </div>
<div id="user-account" style="display:none"> -some data content here- </div>
<div id="messages" style="display:none"> -some data content here- </div>
<div id="transactions" style="display:none"> -some data content here- </div>
<div id="products" style="display:none"> -some data content here- </div>
<div id="videos" style="display:none"> -some data content here- </div>
So when I logged in to the app the home will be the main page. And the data should be loaded in home page, user-account, messages, transactions etc..
I am thinking that I should run ajax request upon logging in of a user. Requesting to the server to get all the data of this logged in user.
This could be:
SELECT
`user`.*
, `user-transactions`.*
, `user_products`.*
FROM
`db`.`user`
INNER JOIN `db`.`user_transactions`
ON (`user`.`user_id` = `user_transactions`.`transaction_user_id`)
INNER JOIN `db`.`user_products`
ON (`user`.`user_id` = `user_products`.`uproducts_user_id`);)
Then the server respond the json data to the App. So now I have all the user's data I needed to display in the App.
So when the user go to other div page the data was already loaded. I am also thinking to save this data to localStorage so that when the remember me option was selected upon logging in, the user can still view the data in offline mode. And it can be updated(send ajax request again) by refreshing the page.
Am I going to the right direction? What are different approaches in dealing with data in a Hybrid app (in terms of displaying)?
There is a lot of frameworks to create hybrid mobile app. It's better to use one ;)
See : http://noeticforce.com/best-hybrid-mobile-app-ui-frameworks-html5-js-css
Maybe, if you can use a plugin to store your datas in SQLite database it will be better (and faster if you have a lot of datas) than localStorage.
Hope to be helpful !
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();
})
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.
edit: i found a solution using jquery and append()
from php, i build the array that contains all the information i want to insert into the tab divs. Then i send this array to jquery by encoding the array into json end echoing it, and catching the array using getJSON. Now i can successfully add my data into the respective divs. Thanks for the help
Here is my situation: on my main page, a user can input a link and send it to the database alongside the link's type (if it's a link about nature, news, technology, entertainment..)
Now on the same page, i have a div that is loaded up without refreshing the entire page, and inside this div i have a tabbed interface where each tab represents a link's type. Inside each tab resides a link of the respective type.
In my database, i store the link and the link's type
Here is my problem: how can i correctly fill the tabs with the links, knowing that the ID of a tab to fill is only known when reading the database in the PHP script
Here is the div with the tab interface
<div class="tabs">
<ul class="tab_nav">
<li>News</li>
<li>Technology</li>
<li>Sport</li>
</ul>
<div id="News">
</div>
<div id="Technology">
</div>
<div id="Sport">
</div>
</div>
What i want to do is insert a link of a certain type into the div with the corresponding ID. The link's type (and the div's ID) is only known when fetching the database.
I'm new to making websites, and i am completely stuck here. I don't know how to deal with this.
Thank you!
try this:
$('a').each(function(){
t = $(this).text();
$("#" + t).text($(this).attr("href"))
})
Is this what you want?
$('a').each(function(){
$(this).clone().appendTo("#" + $(this).text());
})
Here is the whole code: Click here!
Note: It uses jquery. Just want to say that since you said your new to the web thingy.