I have a summary view of a database table. When clicking on a row in the table, I'd like to have a popup showing the full data plus some controls for manipulating that item. I've attached a click handler to the item, which then grabs the primary key from one of the table cells in the row. How can I now pass this primary key to ASP.NET and run server code to query my database and update my UI?
If you're using jQuery, you probably want to use the jQuery.ajax() or jQuery.getJSON() functions to make ajax calls to your backend server which can then return data from your database.
You can then use that returned data to construct the popup and insert the popup into your page to show it to the user.
Within the click handler, you need to make a call to an exposed page /somepage.aspx?id={yourid} which should return the HTML blob that you want to render within the popup you've created.
You can use the JQuery.load method to do this for you, taking the html generated by your page and transferring it to your popup in one line.
$('#your-popup-id').load('database-summary.aspx?id=1');
There are other methods, where your page or generic handler can return JSON, which you then parse after making the callback, but this is not the way I would go if you're just starting out.
If you want help with the popup itself, then you can use a library like qTip2 which has built in Ajax > Popup methods, making the task even easier.
This question is very broad, so I'll keep my answer pretty general. The basic idea is that you want to make an AJAX call from your page to your server, include the key in that call, and then when the AJAX call returns use the response to update your UI.
Related
I have data being inserted into various divs collected from the backend.
This data gets updated, what i need is for the divs to also automatically update the data within the divs without actually refreshing the whole page.
Right now a page refresh would update the divs but I want the divs to auto update without affecting users experience.
Any suggestions.
As an example, I have a vote up/down button in the frontend, the vote gets sent to the backend then sent back through to the front and inserted into a div, however they wouldnt see their vote registered in the frontend unless they refreshed the page, So I would need the users vote result to be updated in the front end everytime then make a vote or change a vote ect automatically.
This is just one example, there is more data inserted in this table which could be updated at any time.
Update,
Not sure people understand fully what I need or trying to do.
Basically have and object coming through from back-end, on page load, data from that object is inserted into a table such as new posts, votes ect.
What I need to be able to do is check if the object has changed since the page load and if so to then update the data on the page without refreshing the page.
Ideally need this to happen instantaneously, so it recognises as soon as there is a difference between the object data and that being displayed in the browser and updates it.
Hope that makes it more clear as to what I want to do.
I have and object with information such as the suggestiontitle, description, votestatus, etc, these get inserted into a row, when a new. A new row gets added when a new object with main object comes through.
So I need to be able to check for changes in the main object so that I can then add the new objects as rows into the table and also Detect and update any changes with current objects already inserted.
If I understood correctly, all you want is a way to interact with the backend without refreshing the page, correct? If that's the case, you should look into AJAX. Here's a simple way to use it for the voting system example(requires jQuery):
$.post(url_to_interact_with,{key: 1232,vote:1}, function(data){
console.log(data);
}
In this case you sent a post request with key=1232 and a vote of 1. The variable in the function (data) is the output of the request.
However, if this isn't such a simple matter for you, I would recommend looking into websockets. To summarize what they are: A back and forth interaction between backend and front end. The back end can send info at any time without refreshing the page. If websockets are too confusing, then use this: https://pusher.com/
But honestly, you shouldn't try to go for the approach of knowing all info of div in real time unless absolutely necessary. Good luck! :)
What I Understood is that you need to update the div whenever Vote is updated? If I understood correctly then I would like to go with delegate and call a function to the server once you get a response from Vote stuff call.
If you want to get an event from the server-side then I would suggest you go for SignalR, for real-time communication, which will give you an event called the server-side.
I am writing a web app using PHP, MySQL, jQuery, and some miscellaneous add-ons like jEditable and DataTables. On most pages, the user will submit a form which will query the DB and bring back records matching my query rules. This works for 95% of my users 95% of the time. It's the other 5%/%% I am trying to help.
I am excluding records that are no longer being processed (completed/cancelled/accepted/rejected/etc.), leaving only "live" records. However, sometimes the leadership team needs to see the records I exclude. I could write a whole other page or report for each case, but that seems a huge waste of time.
Is there a way to add a "show all records" checkbox or button to my page? When clicked, the button would get and display the rest of the data, so users don't have to refresh/go to another page/etc.
you should add a toggle switch - it could be just a check box, or you could use something fancy like this: http://simontabor.com/labs/toggles/
Bind an event to it that preforms a table.ajax.reload() in datatables to pull in the new records. Also, for the datatables ajax request, provide a callback that returns the toggled state of the toggle control as a post variable, then handle the filtering in your sql on the back end.
Note, this solution means you will have to configure datatables to source data via ajax, which, from what you described sounds like you should be doing anyway.
I want to build a UI where a user selects several products, and those products are shown to the user, and then various computations are made on those selected products. So:
div1: area where user selects products
div2: current product selections are shown
div3: results (showing results of computations made on user selections)
I am primarily a back-end PHP programmer, and by no means a JS of front-end programmer programmer, so nuances of jQuery, JavaScript or working knowledge of them, and such are not my area of expertise. I can probably implement this without JS, and have it work, without all the dynamic content. It maybe not be as immediate but it will work. Although, this is a good opportunity to try dynamic content, and when it comes to the world of JS, I figure gotta start somewhere.
I think ideally this can be implemented by using an autosuggest->select widget in div1, where I can preload existing products from DB. Then, something in div2 to show current user selections. Results in div3 can then be either computed on the fly with JS, but since majority of the computations are done in PHP I figure I will do those on the back end, and display results wither via AJAX or via page reload (form submit).
So, while I figure I can make it all completely dynamic (aka JS), rewriting existing PHP code into JS is probably not exactly beneficial.
Question: How do I do UI to support features for div1 and div2 keeping in mind that I am not an expert on JS or jQuery. And how do I pipe those selections via POST to my PHP script? After that my intentions is to reload the page with results in div3, keeping div1/div2 same as user left them before page reload. I
Use jQuery & Ajax Calls to achieve this. You need to follow something like this -
Add jQuery to your application
Assign some event listeners to your product selection in div 1
Using the even listeners, upon selection of some product in div 1, show it in selected items in div 2.
At this point you can make an ajax call to your server where your PHP code does the computation & send the list of products you selected via an Ajax call.
The server can then process stuff & respond back to you with the data you need to show.
You capture this data in your ajax request response & then populate your div 3 with this.
Showing how to do the whole thing would be a lot of code, let me show you some references that will help you -
How to start using jquery - http://learn.jquery.com/about-jquery/how-jquery-works/
Event handling in jQuery - http://learn.jquery.com/events/
Ajax Calls in jQuery - http://api.jquery.com/jquery.ajax/
Hope this helps.
Since JS is event driven. We just need to attach event handler to the products.
Let this be the 3 divs
<div id="a">
<div onclick="show('p1');">p1</div>
<div onclick="show('p2');">p2</div>
</div>
<div id="b"></div>
<div id="c"></div>
We've attached the onclick listeners to each product, which will trigger the show function
function show(ele) {
$('#b').html(ele + " was selected");
$.ajax("http://fiddle.jshell.net/favicon.png").done(function( data ) {
$('#c').html("data: " + data);
});
}
It will first update div b, then does an ajax call and update div c. You just need to replace the ajax URL to your php for processing(, and add some POST or GET request params)
Here's the fiddle: http://jsfiddle.net/5h8RV/4/
I'm very new with JavaScript and I'm struggling to implement something which I don't think should be very complicated.
What I want to do is:
form is open in browser with a drop-down list of records in a database
if the desired option is not in the list, the user can click on a link next to it to add a new entry to the database
this will open a new window with an additional form for this entry
on clicking submit the processing script will run to insert this information into the database
when the processing script has completed, the window will close and the drop-down list will refresh so that it includes the new option (but without losing any other information in the form)
Maybe that last thing with the list refreshing is quite complicated (unless the list only in fact loads from the db on click?) but everything else should be simple enough, I think. I've tried all sorts of things but nothing that's got close enough to working to be worth posting here.
Could someone please give me some sort of idea of the sort of functions I should be using and roughly how to implement them? I don't necessarily need precise code, just a framework to work from. (I'll learn more in that case anyway.)
ETA: I should add that I've been trying to work with window.open() and window.close(). I don't even really know if this is the best method?
No, that's not(at least relatively) complicated. What you'll need is jQuery and jQuery UI(these frameworks are just suggestions, you may chose any other if you like) to achieve that. So...
form is open in browser with a drop-down list of records in a database
This part is easy, just a simple html form with a select tag and a add link/button on it. You will need a JavaScript function to refresh the select options from database. For that I suggest this or this -there are many others on the web- post.
if the desired option is not in the list, the user can click on a link
next to it to add a new entry to the database
this will open a new window with an additional form for this entry
The easy way to do this is using jQuery UI Dialog Widget to open the popup with the new form.
on clicking submit the processing script will run to insert this information into the database
On that form you'll have to use jQuery Ajax to send data to database through your server language(PHP, ASP.Net, JSP, whatever...). Some examples here and here.
when the processing script has completed, the window will close and the drop-down list will refresh so that it includes the new option (but without losing any other information in the form)
So when data processing was complete, you call the refresh select function that you created before and close the dialog on the ajax success callback. Example here.
And this is it. Now it's up to you. Hope it helps.
When I open a blank form to add new row to the grid, I need some fields on the form to be dynamically updated by going to the database to search for data if I change a field on the form.
I found the code in the javascript to create a form for adding new row, may I change it to read from an external file (like an asp, php page) or is there any way to do it properly??
You must use ajax to make calls to proper functions and change your html according to response data.
More info about ajax
Jquery supports ajax and have many nice features for ajax usage and let you have nice page alteration based on html DOM. So i advice you to have a look at it...