jQuery Forum

download PDF from web service using json
[13Replies]
- 11-Jun-2015 12:59 AM
- Forum: jQuery Mobile
Hi, I have a WCF service that creates a report in PDF, it works, since I have a C# app that use it, however I need to use the same method to obtain the same document in my jquery mobile application. This is the method that generates the document:
2. public void exportToPDF()
3. {
4. SqlConnection conn = DbManagement.getConnection();
5. conn.Open();
6. SqlCommand objCmd = null;
7. String sql = "";
8. String fileName = "";
10. DataSet ds1 = new DataSet();
11. SqlDataAdapter da;
12. DataSet1 ds = new DataSet1();
13. CrystalReport1 cr1 = new CrystalReport1();
15. sql = "SELECT productId " +
16. "FROM isProductReport " +
17. "WHERE userId = 'dev1'";
18. objCmd = new SqlCommand(sql, conn);
19. objCmd.ExecuteNonQuery();
21. da = new SqlDataAdapter(objCmd);
23. ds1.EnforceConstraints = false;
24. da.Fill(ds1, "isProductReport");
26. cr1.SetDataSource(ds1);
28. fileName = "reporte de inventario " + DateTime.Now.ToString("dd/MM/yyyy hmmtt");
29. cr1.ExportToHttpResponse(ExportFormatType.PortableDocFormat, System.Web.HttpContext.Current.Response, true, fileName);
30. }
And this is the code that I normally use to consume web services:
2. function exportToPDF()
3. {
4. var userIdValue = $("#username").val();
6. $.ajax({
7. type: "POST",
8. contentType: "application/json",
9. url: "http://localhost/Service1.svc/exportToPDF",
10. data: JSON.stringify({ userId: userIdValue }),
11. dataType: "json",
12. success: function (data){
13. },
14. error: function(result){
15. alert(result.status + ' ' + result.StatusText);
16. }
17. });
18. }
The method does not return anything since it's void, I'm sure that for this kind of operation, what I'm doing is not correct, but I don't know how to solve this issue, I'm able to read and retrieve any value from the database, but this is completely different. I would appreciate your help, thanks!

Send decimal number as json parameter to web service
[2Replies]
- 09-Jun-2015 05:53 PM
- Forum: Using jQuery
Hi, I have a json call that consumes a web service, it request several parameters, all of them string, but one of them is a decimal, something like this for example "2.21" as string, however, jQuery keeps crashing with error "500 undefined" if that parameter contains a dot, however if I change it to comma, it works, but the number is stored in the database as integer, with no coma, this my my code:
2. function addReportLine()
3. {
4. var productVal = $("#productCode").val();
5. var nameVal = $("#productName").val();
6. var unitVal = $("#unitPrice").val();
7. var qtyVal = $("#qty").val();
8. var totalVal = $("#totalPrice").val();
9. var whVal = "";
10. var userVal = $("#username").val();
12. $.ajax({
13. type: "POST",
14. contentType: "application/json",
15. url: "http://IP/Service1.svc/testMethod",
16. data: JSON.stringify({ productId: productVal, productName: nameVal, warehouse: whVal, unitPrice: unitVal, totalPrice: totalVal, qty: qtyVal, currentUser: userVal }),
17. dataType: "json",
18. success: function (data){
19. populateReportGrid();
20. },
21. error: function(result){
22. alert(result.status + ' ' + result.StatusText);
23. }
24. });
25. }
It works great if the parameter "unitPriceVal" does not contain dots, but I need that so I can store the right number in the database, is there any way to send the value with the dot and save it in the server? Thanks a lot!

Column toggle popup not showing correctly the first time
[7Replies]
- 06-Jun-2015 05:19 PM
- Forum: jQuery Mobile
Hi, I'm working in a jquery mobile site, where I have an ajax method that creates a table dinamically and then I use html() to add it to a div, a button renders the table each time, from 10 to 10 records, the very first time that the table is generated, the column toggle popup looks weird, right after I access #page1 but the following times, it shows correctly, when using the button, this is pretty much the code:
2. function populateGrid()
3. {
4. var data1 = "<table data-role='table' data-mode='columntoggle' class='ui-responsive table-stroke' id='table1' data-column-btn-theme='b'>";
5. data1 += "<thead>";
6. data1 += "<tr>";
7. data1 += "<th data-priority='1'>header1</th>";
8. data1 += "<th data-priority='1'>header2</th>";
9. data1 += "<th data-priority='2'>header3</th>";
10. data1 += "</tr>";
11. data1 += "</thead>";
12. data1 += "<tbody id='myBody'>";
14. $.ajax({
15. type: "POST",
16. contentType: "application/json",
17. url: "http://url/service.svc/method1",
18. data: JSON.stringify({ clientType: 'IS', from: fromValue, to: toValue}),
19. dataType: "json",
20. success: function (data){
21. $($.parseJSON(data.d)).each(function(index, element) {
23. data1 += "<tr><td><a href='#' class='linkTest'>" + element.field1 + "</a></td><td>" + element.field2 + "</td><td>" + element.field3 + "</td></tr>";
24. });
26. data1 += "</tbody>";
27. data1 += "</table>";
29. $("#table1-popup").remove();
30. $("#tableDiv").html(data1).enhanceWithin();
31. },
32. error: function(result){
33. alert(result.status + ' ' + result.StatusText);
34. }
35. });
36. }
This works ok, but the result the first time is:

I would appreciate your help, thanks!

How to resize div in page loaded using jquery.load() ?
[3Replies]
- 07-Feb-2014 06:21 PM
- Forum: Using jQuery
Hi, I have a page loading in a div using jquery.load(), however when the main page is resized, I'd like to resize the loaded page as well, because it contains a div, is there any way to accomplish that? I already setup the $(window).resize function in the loaded page, but it does not work, I will appreciate your help, thanks!

How can I load different html pages without refreshing, but changing the url?
[9Replies]
- 25-Jun-2013 07:00 PM
- Forum: Using jQuery
Hi, I'm trying to use a navigation system for a website where there is no refresh at all, through jQuery, I don't know if using ajax is possible, but I'd prefer that approach, however, this is what I have so far:

jQuery script
2. $(document).ready(function(e){
4. var page;
5. var prevPage;
7. $('ul#nav li a').click(function(){
9. prevPage = getPrevUrl(window.location.href);
11. page = $(this).attr('href');
13. $('#content').load(page + '.html');
15. if(page + '.html'!= window.location){
16. window.history.pushState({path:page + '.html'},'',page + '.html');
17. }
19. return false;
20. });
22. });
HTML
2. <body>
3. <ul id="nav">
4. <li><a href="dynamicLoad_TEST2"><b style="color:white;">Click here 1</b></a></li>
5. <li><a href="dynamicLoad_TEST"><b style="color:white;">Click here 2</b></a></li>
6. </ul>
7. <div id="content"></div>
8. </body>
It works, and it changes the url, the called page is loaded into the div, however, the back button in the browser does not work, and I think there's a better way by using ajax, but I don't know how to start, I've seen a few tutorials using ajax and php, and the returned data is being sent using echo, but if I do it with only html, I don't know how to return the html to ajax. I will appreciate any help, thanks!

Can I return a json object when the data being sent using ajax is an image?
[2Replies]
- 25-Apr-2013 10:12 AM
- Forum: Using jQuery
Hi, I have a problem while using jQuery, Ajax and a Servlet in java, I'm sending an image through Ajax and uploading it to a SQL table, that works, but, I'd like to return a JSON object, to be honest, I'm fairly new in sending image data through Ajax but I guess the problem why I'm not receiving the JSON object back is because the ContentType and the ProcessData are false in the ajax call(which needs to be used this way since I'm sending an image):
2. $("#upload").click(function(){
3. var data = new FormData();
4. for(var i = 0; i < selectedFiles.length; i++){
5. data.append(selectedFiles[i].name, selectedFiles[i]);
6. }
8. $.ajax({
9. type:"POST",
10. url:"FileHandlerAlt?test=" + $("#paramTest").val(),
11. contentType:false,
12. processData:false,
13. data:data,
14. sucess: function(result){
15. alert(result);
16. var output = $.parseJSON(result);
17. $('#outputDiv').html(output.result);
18. },
19. error: function(){
20. alert("There was an error uploading files!");
21. }
22. });
23. });
The thing is that the image is being uploaded, but it never enters in the success function, could you guide me please? I'd like to send the image to the servlet, upload it to the database(this already works) and return a JSON object back to the JSP, thanks!!

How can I pass parameters using JSON, Ajax and JSP?
[8Replies]
- 29-Mar-2013 07:00 PM
- Forum: Using jQuery
Hi, I'm trying to use JSON to get some values from a database using Ajax, I'm working with JSP, this is what I'm doing:
2. $.ajax({
3. type: "POST",
4. url: "cutDateEvents.jsp",
5. //data: "{cCardDropDown: document.getElementById('cCardDropDown').value, selection: 'FCDT'}",
6. success: function(data){
7. var output = $.parseJSON(data);
8. $("#cutDateTable").append(output.table);
9. alert(output.table);
10. alert(output.dropDown);
11. }
12. });
I'm sending two values, one which is a select value and the other a static string value, if I comment that line, it works with no problem, but if I don't nothing happens, I guess it's giving me an error but I can't see it in the Chrome debugger, nothing shows up, any help? thank you!!

Display a dynamic created element while others being hidden?
[3Replies]
- 29-Nov-2011 06:13 PM
- Forum: Using jQuery
Hello, I have a problem, I have a table which dynamically create <tr> elements with a unique numerical id, this is created on a while loop from a database statement, when I click on a hyperlink on each <tr> I use this:

function checkRequest(codigo){
$("#" + codigo).fadeToggle("fast");
}

So in this way, I'm sending the unique code (codigo) and I fadeToggle the <tr> identified with that specific id, it works, no problem, it display with one click, hides with another one, BUT, now I need that, when you click on a hyperlink, if any other <tr> is being displayed at the moment, close all of them, and open the clicked one, is there any way I can do this? thanks, I hope I was clear, have a nice day!

Resize div and follows scrollbar, help!
[0Replies]
- 14-Oct-2011 07:21 PM
- Forum: Using jQuery
This is what I have so far, the div is being resized properly depending on window.height() and follows the scrollbar BUT, it does not work on Internet Explorer 8, when I go to the bottom and then resize the window to any resolution, the div stays at the bottom and that makes the scrollbar larger and larger......
1. $j(document).ready(function(){
3. if($j("#sections").height() > $j(window).height()){
4. $j("#images_gallery").css("height",$j(window).height() - 50);
5. } else{
6. $j("#images_gallery").css("height",$j("#sections").height() + 20);
7. }
9. $j(window).resize(function(){
10. if($j("#sections").height() > $j(window).height()){
11. $j("#images_gallery").css("height",$j(window).height() - 50);
12. } else{
13. $j("#images_gallery").css("height",$j("#sections").height() + 20);
14. }
15. });
17. $j(window).scroll(function(){
18. $j("#images_gallery").stop().animate({"marginTop": ($j(window).scrollTop()) + 5 + "px"}, "slow" );
19. });
20. });
#sections: div used as a base to set a proper size
#images_gallery: resizable div

Thanks in advanced, I hope I made it clear!!

How can I create a div that follows a horizontal scrollbar across the window?
[0Replies]
- 11-Oct-2011 05:31 PM
- Forum: Using jQuery
I'm trying to do it, and it works with Firefox and Chrome, but IE8 does not set any "bottom limit" so I can scroll the site all over and never stops, any idea? thanks!
1. $j(document).ready(function() {
3. $j(window).scroll(function(){
4. $j("#images_gallery").stop().animate({"marginTop": ($j(window).scrollTop() + 30) + "px"}, "slow" );
5. });
6. });
Thanks in advanced!!!

Is there a way to stylize scrollbars?
[2Replies]
- 10-Oct-2011 10:24 AM
- Forum: Using jQuery
I was checking on jQuery plugins, but most of the scrollbar ones are using like 4 - 5 div classes just to stylize one scrollbar and most of the classes names must be specific to make it work with the plugin, is there any way to give some style to a scrollbar without doing all that coding? I understand it's not an easy task, but maybe there's a workaround, thanks!! :D

How to verify browser type and redirect to another page according to it?
[3Replies]
- 08-Oct-2011 05:42 PM
- Forum: Using jQuery
I have a website with a lot of jQuery effects and functions which is not working properly under Internet explorer 8 and below, it works excellent on Chrome, Firefox, Opera and Safari however, I'm planning to make a light version of the website for Internet explorer, is there a way to verify browser type and version and redirect the user either to the light or normal version of the site according to those parameters? thanks in advanced!!!

How can I properly display a "loading" screen before all images are loaded?
[0Replies]
- 06-Oct-2011 11:21 AM
- Forum: Using jQuery
Hello, this is my first post, I've been using jQuery for about 1 month and now I want to display a full div with a loading gif that hide itselft after all the images in the site are loaded sin these are a lil bit heavy, this is what I have:

For this example, let's say we have two images, that I need to display only after they are fully loaded, that's why I need a blocking div with opacity showing a loading gif in the meantime.
1. styles.css
3. .loadingBar{
4. background-color:#FFF;
5. background-position:center center;
6. width:100px;
7. height:100px;
8. top:100px;
9. position:absolute;
10. z-index:2;
11. background-image:url(images/AjaxLoader.gif);
12. background-repeat:no-repeat;
14. -webkit-border-top-left-radius:10px;
15. -webkit-border-top-right-radius:10px;
16. -webkit-border-bottom-left-radius:10px;
17. -webkit-border-bottom-right-radius:10px;
18. }
19. .fullScreen{
20. background-color:#000;
21. width:100%;
22. height:100%;
23. top:0px;
24. left:0px;
25. position:fixed;
26. opacity:0.75;
27. filter:alpha(opacity=75);
28. z-index:1;
29. }
31. index.php
33. <body>
34. <div class="fullScreen"></div>
35. <div style="margin:0 auto; width:100px;">
36. <div class="loadingBar"></div>
37. </div>
38. <img class="img1" src="images/bg.png" />
39. <img class="img2" src="images/bg2.png" />
40. </body>
42. jQuery code
44. $(document).ready(function(){
45. $(".fullScreen").show("fast");
46. $(".loadingBar").show("fast");
47. $(".img1").hide("fast");
48. $(".img2").hide("fast");
49. $(window).load(function(){
50. $(".fullScreen").fadeOut("slow");
51. $(".loadingBar").fadeOut("slow");
52. $(".img1").fadeIn("slow");
53. $(".img2").fadeIn("slow");
54. });
55. });
So, I hide the images and show the div containing the full screen and the loading image when the document.load() happens, then, when the images are fully loaded (window.load()) I hide the div with the full screen and the loading image and show the images again.
This works perfectly on Chrome, Firefox, and Opera, but Internet Explorer 7 - 8 is not hiding the loading image div after the window.load happens, and also the loading image repeats itself on the div, it's like ignoring the no-repeat sentence, is there a better way to accomplish this? I'm running out of ideas, please enlight me, thanks in advanced!!!

Response title

Attachments

jQuery Forum

Activity Trend