Search Articles/Question

Loading...
Best Interserver Web Hosting and VPS Plans

Tuesday, February 5, 2013

[javascript questions] Use of the :not selector

[javascript questions] Use of the :not selector


Use of the :not selector

Posted: 05 Feb 2013 01:22 AM PST

I have a website with different sections. I have jQuery to slide between these sections. But now I have a link in a section which points to another section.

HTML:

    <div class="section" id="one">          <div class="row">              <p>This is some text</p>          </div>          <div class="row">              <a href="#" onclick="scrollOrderNow()"><img src="button"/></a>          </div>      </div>      <div class="section" id="tow">          <div class="row">              <p>This is some text</p>          </div>          <div class="row">              <a href="#" onclick="scrollOrderNow()"><img src="button"/></a>          </div>      </div>      <div class="section" id="ordernow">          <div class="row">              <p>This is some text</p>          </div>          <div class="row">              <a href="#" onclick="scrollOrderNow()"><img src="button"/></a>          </div>      </div>      <div class="section" id="four">          <div class="row">              <p>This is some text</p>          </div>          <div class="row">              <a href="#" onclick="scrollOrderNow()"><img src="button"/></a>          </div>      </div>  

jQuery:

// onclick on an object with class "section" scroll to this object  $('div.section').click(function() {      $.scrollTo($(this), 800);  });    function scrollOrderNow(){      $('html,body').animate({          scrollTop: $("#ordernow").offset().top      }, 1000);  }  

The problem is that if I click on the link scrollOrderNow() the page slides to the order page and than back to the section because the link is in that section.

Could you please help me figure this out?

Thank You!

Get id of img inside selected li using document.activeElement

Posted: 05 Feb 2013 01:22 AM PST

Here is my html code

<li id="liButton_1" tabindex="2" class="activeli">  <a onclick="ShowVideo('1');">      <img id="ImageButton_1" title="Sister Teresa's Talk (Malayalam)" alt="Sister Teresa"      s="" talk="" (malayalam)      '="" src="http://www.braddockinfotech.com/demo/dvnonline/vod/timthumb/timthumb.php?src=wp-content/uploads/2012/11/Sr.-Teresa.jpg&amp;h=54&amp;w=109&amp;zc=1&amp;a=c" class="active"></a></li>  

Ok when this li is selected it is accessed like document.activeElement. How to select the id of the img inside the li using document.activeElement.(some thing)

Update a boolean cell in my table

Posted: 05 Feb 2013 01:22 AM PST

I have a form and I want to update the show_msg parameter (it's a boolean parameter) while the user press the submit button. if the user checked the box and press submit, I want to set it TRUE. otherwise: FALSE.

so I have the main html that has a popup window. in this popup window I wrote my form. (what should I have the write in 'action'? I just have to close this popup window):

<form name="input" action="#" method="post">     <input type="checkbox" id="mycheckbox">Don't show me again<br>     <input type="submit" id="Submit">  </form>   

this is my javascript:

$("#submit").click(function() {     $.ajax({       ## the url is the controller       url: '/welcome',       type: 'PUT',       data: {show_msg: $("#mycheckbox").is(":checked")}     });  });  

and this is my controller:

class WelcomeController < ApplicationController    def update      @user = User.find(params[:id])        respond_to do |format|          if @user.update_attributes(params[:show_msg])              format.html { redirect_to @user, notice: 'You will never see this message again.' }              format.json { head :no_content }          end      end  end  

any help appreciated!

Prevent all default gestures on iPad Safari

Posted: 05 Feb 2013 01:22 AM PST

How to disable all default gestures on Safari on iPad using plain javascript. I have tried using event.preventDefault(); for every event but it isn't working. I run the app in the Safari and I want to disable all default touch events(gestures) and override with my own. I've also tried using a popular library hammer.js which has an option prevent_default but that doesn't work.

in my code if i click order form it should display and other form should hide

Posted: 05 Feb 2013 01:22 AM PST

In this code i tried,if i click the order details that form should display, and if i click the shipping details address that form should display and the order form should hide.but here both the form is displaying in my code.anyone help me please

   <!DOCTYPE html>      <html>         <head>             <script>           function orderdetails() {      document.getElementById('orderdetails').style.display = "block";         }           function shippingdetails() {       document.getElementById('shippingdetails').style.display = "block";         }           function ordersummary() {            document.getElementById('welcomeDiv1').style.display = "block";             }            function payment() {            document.getElementById('welcomeDiv1').style.display = "block";              }          </script>       </head>         <body>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;        <a href="javascript:void(0);" value="Show Div" onclick="orderdetails()" >Order                                               Details</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;             <a href="javascript:void(0);" value="Show Div1" onclick="shippingdetails()">Shipping             Details</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;           <a href="javascript:void(0);" value="Show Div12" onclick="ordersummary()">Order Summary</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;             <a href="javascript:void(0);" value="Show Div12" onclick="payment()">Payment</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;           <div id="orderdetails"  style="display:none;" class="answer_list" >             <table width="200" border="0">       &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  <h3><u><b>Order Details</b></u></h3>               <tr>             <th scope="row"><label>Name*</label></th>           <td><input name="name" type="text"></td>            </tr>            <tr>             <th scope="row"><label>Email*</label>;</th>               <td><input name="mail" type="text"></td>              </tr>             <tr>                <th scope="row"><label>Mobile Number*</label></th>           <td><input name="mobile" type="text"></td>               </tr>             <tr>             <th scope="row"><label>Land Line</label></th>             <td><input name="phone" type="text"></td>             </tr>            </table>           </div>            <div id="shippingdetails"  style="display:none;" class="answer_list" >              <br/>               <table width="200" border="0">                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  <h3><u><b>Shipping Details</b></u></h3>                 <br/>           <tr>              <th scope="row"><label>Full Name*</label></th>              <td><input name="name" type="text"></td>             </tr>            <tr>                 <th scope="row"><label>Address*</label></th>           <td><textarea name="address" cols="" rows=""></textarea></td>           </tr>             <tr>              <th scope="row"><label>Nearest Land Mark*</label>;</th>             <td><input name="mail" type="text"></td>            </tr>             <tr>              <th scope="row"><label>City</label></th>             <td><input name="city" type="text"></td>             </tr>              <tr>               <th scope="row"><label>State</label></th>            <td><form name="form" id="form">             <select name="jumpMenu" id="jumpMenu" onChange="MM_jumpMenu('parent',this,0)">      <option>Tamil Nadu</option>      <option>Kerala</option>      <option>Orissa</option>      <option>Delhi</option>      <option>Andhrs</option>      <option>Karntaka</option>    </select>  </form></td>     </tr>           <tr>           <th scope="row"><label>Pin Code*</label></th>          <td><input name="code" type="text"></td>                 </tr><tr>            <th scope="row"><label>Mobile Number*</label></th>            <td><input name="city" type="text"></td>            </tr><tr>             <th scope="row"><label>Land Line</label></th>             <td><input name="city" type="text"></td>       </tr>         </table>       </div>         </body>        </html>   

jquery: select paragraphs that only contain "&nbsp;"

Posted: 05 Feb 2013 01:21 AM PST

Wordpress does this thing with adding <p>&nbsp;</p> when doing a line-break in the backend.

I wonder if it is possible to select those p's somehow with jquery.

enter image description here

I guess empty() wouldn't work since it isn't really empty but contains a &nbsp;. But contains() wouldn't probably work either since a lot of other paragraphs also contain a space, right?

I only want to select those paragpahs that have only this " " inside.

Convert string to Jquery datatable

Posted: 05 Feb 2013 01:21 AM PST

I want to covert this string to jquery data table. I can't do this.

var str = "96,xxx,212,xxxx||  100,yyy,123,yyyy";    My original datatable structure like this     var aDataSet = [['96','xxx','212','xxxx'],          ['100','yyy','123','yyyy']];  

This is my code what i tried;

var srchvalue = str.split('||');   for (var e = 0; e < srchvalue.length; e++) {                        alert(srchvalue[e]);                      aDataSet.push(srchvalue[e]);  }     

But it's not convert the actual format.

running a javascript with the help of vb inside of asp.net

Posted: 05 Feb 2013 01:20 AM PST

i want to know is there is way for running a javascript code with the help of vb

page:test1.aspx  <a href="#" onclick="Popup=window.open('testopen.aspx?jack=hello','Popup','toolbar=yes,location=no,status=no,menubar=no,scrollbars=no,resizable=no,width=420,height=400,left=430,top=23'); return false;">Test Window</a>  


page:test2.aspx.vb

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load      Dim check As String = "<a href='#' onclick='Popup=window.open('make_changes_form.aspx','Popup','toolbar=no,location=no,status=no,menubar=no,scrollbars=no,resizable=no,width=420,height=400,left=430,top=23'); return false;>Test Window from vb</a>"      Context.Response.Write(check)  End Sub  


the code in page test1.aspx works
now i want to if there is a way for it to work in page:test2.aspx.vbbecause the current method is not working for me. Thank you

Negative lookahead regex

Posted: 05 Feb 2013 01:20 AM PST

I have a string like so:

<p>Year: ={year}</p>\  <p>Director: ={director}</p>\  <ul>@{actors}<li class="#{class}">={actor}</li>{actors}</ul>\  

And I want to extract all ={match} that are NOT inside @{word}...{word}, so in this case I want to match ={year} and ={director} but not ={actor}. This is what I got so far but it's not working.

/(?!@.*)=\{([^{}]+)\}/g  

Any ideas?

Edit: My current solution is to find all ={match} inside @{}...{} and replace the = with something like =&. Then I grab the ones that are outside and finally I come back and replace the flagged ones back to their original state.

To show error message without alert box in Java Script

Posted: 05 Feb 2013 01:20 AM PST

Please correct the below code it is not working as expected i.e, i need a error message to be shown just beside the textfield in the form when user enters an invalid name

<html>    <head>    <script type="text/javascript">    function validate() {    if(myform.fname.value.length==0)    {     document.getElementById("fname").innerHTML="this is invalid name ";    }    }    </script>    </head>    <body>    <form name="myform">    First_Name    <input type=text id=fname name=fname onblur="validate()"> </input>      <br> <br>    Last_Name    <input type=text id=lname name=lname onblur="validate()"> </input>      <br>    <input type=button value=check>       </form>    </body>  </html>  

Remove all the comments from a javascript file?

Posted: 05 Feb 2013 01:19 AM PST

Can someone help me with a regular expression to use with sed to remove all the comments that start with // from a JavaScript file.

Code not running when using ".remove()" function

Posted: 05 Feb 2013 01:19 AM PST

I'm writing this jquery code :

$('form').after('<p id="suc"></p>');  $('#suc').html('success !');  $('#suc').show(700);  setTimeout(function(){$('#suc').hide('slow')},2500);  $('#suc').remove();  

When i remove $('#suc').remove(); like this :

$('form').after('<p id="suc"></p>');  $('#suc').html('success !');  $('#suc').show(700);  setTimeout(function(){$('#suc').hide('slow')},2500);    

The code run succefuly, but when i put it, it dosen't run !!

What the problem with that ? it's illegal to but $('#suc').remove(); here ?

jQuery triggering custom event is causing unknown runtime error in IE

Posted: 05 Feb 2013 01:19 AM PST

I am using below code to bind a custom event to an element.

  jQueryelement.bind("custom",{}, funtion);  

and i am trying to trigger this with

   jQueryelement.trigger("custom");  

This is working fine in Firefox. But causing unknown runtime error in IE. Please help me in this. TIA

Time zone in Java

Posted: 05 Feb 2013 01:19 AM PST

This may be a very basic question, but i could'nt find any satisfactory answers.Hope my doubts gets clear on stackoverflow.

Q 1. Suppose i have time in a different timezone and i want to convert it to a different timezone, what is the way to do it in Java?

Q 2. Is there any way to get timezone using Java Script?

Q 3. A timezone is just the representation of time in a particular zone, but actually every zone is at the same time,just representation wise it may be different depending on geographical conditions. - Is this understanding Correct?

Jquery/Javascript Textbox change value when typed something and revert if unfocused

Posted: 05 Feb 2013 01:17 AM PST

I have no idea on what terms I should look for in this site nor in google, pardon me if my question has a duplicate topics on it. Really don't know what to type.

I'll provide screenshots let you understand my problem.

Here is my textbox that has (optional) value on it.

enter image description here

When I focused my cursor on it, the textbox will be on focus mode (it didn't changed the value of (optional) when I clicked on it..

enter image description here

When I typed something on textbox the (optional) value disappears and it shows the things that you're typing.

enter image description here

When I [<-Backspace] the hello and remove it completely, the output I desire is the (optional) will go back to the way it was.

enter image description here

So long story short, I have this textbox that has a default value of (optional) when I typed on it, it will disappear and will show the things that you're typing, and when I delete all of it, the (optional) will come back.

I just don't have any slightest idea on how to start off. Would be glad if you help me guys.

ajax Miltipart FormData - upload Data and Files in one Request

Posted: 05 Feb 2013 01:17 AM PST

I would like to upload both files(images and PDF files) and data(select box values and input fields) with one ajax call. Ive got to the stage where i can successfully upload the two files i need but i am having great difficulty appending the values within the input and select tags to the FormData object.

Been stuck on this for ages now so any help will be much appreciated.

Below is the ajax call its self - if this is not enough and you need more info then let me know.

$(function(){    $("#ajaxComm").submit(function(e){    e.preventDefault();    imageInput = document.getElementById("File-0")  pdfInput = document.getElementById("File-1")    imageFile = imageInput.files[0];  pdfFile = pdfInput.files[0];    var formdata = new FormData();        formdata.append('file-0[]', imageFile);  formdata.append('file-1[]', pdfFile);       $.ajax({      url: "upload.php",      type: "POST",      data: formdata,      processData: false,      contentType: false,      success: function (res) {      document.getElementById("response").innerHTML = res;      }      });    });    });  

Thanks kemil

Angular.js: set element height on page load

Posted: 05 Feb 2013 01:17 AM PST

I'm AngularJS newbie. I want to create grid (using ng-grid) which height depends on window height ie. $('.gridStyle').height($(window).height() - 100);

I have written directive:

app.directive('resize', function($window) {        return function(scope, element) {            function applyHeight() {              scope.height = $window.innerHeight;              $('.gridStyle').height(scope.height - 100);          }            angular.element($window).bind('resize', function() {              scope.$apply(function() {                  applyHeight();              });          });            applyHeight();      };  });  

This works well when I resize browser window but style is not applied when site is loaded for the first time. Where can I put code to initalize height?

Calling javascript method based on controller returned value

Posted: 05 Feb 2013 01:16 AM PST

I have two javascript method out of which i want call only one depending upon controller returned value. actually i want hide rich:popPannel if listSize > 0 and if listSize = 0 rich:popPannel should be there on focus which jsf component should i use which will help me to implement this type of criteria?

Javascript Alert Alternate with Jquery Message

Posted: 05 Feb 2013 01:14 AM PST

I am just a learner and don't have clue about javascript and jquery. What I want to ad an adblock detector script. What I found is this piece of code which gives a nasty alert message. What I want is to give an ajaxed message just not a message popping out of screen.

<script type="text/javascript">  function _enabled() {      alert('Hey Dude!!! You are using Adblock on this site? Please disable Adblock or Any other plugin blocking ads. Its the only way we cover the cost of the Servers and Website. Click OK to continue what you were doing');  }  function _disabled() {      alert('not detected');  }  var _abdDetectedFnc = '_enabled';  var _abdNotDetectedFnc = 'disabled';  </script>  <script type="text/javascript" src="http://www.adblockdetector.com/script.php"></script>  

Replacing this code can you please help me with an alternate to this code?

{          alert('Hey Dude!!! You are using Adblock on this site? Please disable Adblock or Any other plugin blocking ads. Its the only way we cover the cost of the Servers and Website. Click OK to continue what you were doing');      }  

I came along finding some solutions about getting it with jquery or jquery-ui but don't have the knowledge of what to put here and replacing the code. I tried code example from http://m0006.gamecopyworld.com/games/gcw_notice.shtml which gives a nice friendly Adblock Detect message. But it wasn't working at all. Only this Alert Message is working on my website.

How to change the value that a method is returning (JavaScript OOP)

Posted: 05 Feb 2013 01:13 AM PST

I'm trying to make a game in JavaScript using OOP and html5 canvas. I can not move on with the game beacuse I'm stuck in one place. My question is how can I change the value of method xPosition that is returning a value from a function. Below you find some code.

var myObject = {      //placing object in start position       xPosition : function(){           return Canvas.width / 2;      },      //if keycode pressed move myObject to the left      move : function(){           xPosition -= 10; //I know this wont work      }  };  

How to dynamically add new posts once they are created

Posted: 05 Feb 2013 01:12 AM PST

I am trying to design an application where users can make posts with django on the backend. Right now I have to refresh the page with javascript every 20/30 seconds to check for new posts that might be available for that page. I was wondering if there are other more effective ways to do this? maybe with json response? I am looking for a solution like twitter, where they show how many new posts are available that are not on the page, or even like facebook where they update the wall posts automatically.

Any push in the right direction will be highly appreciated.

PS: Please dont just down vote a post because of my lack of knowledge. That is the reason why I am here. To learn.

Get style in javascript

Posted: 05 Feb 2013 01:12 AM PST

Im trying to resize a div when the size of the div is 50% to 100%. But when i try to console.log the current size of the div it just logs whitespace.. Whats wrong ?

window.onload=function(){          //declare vars      var fullbox = document.getElementById('box');      var minBut = document.getElementById('down');        minBut.onclick = function(){          if(fullbox.style.width == "50%"){              fullbox.style.width = "100%";          } else {              fullbox.style.width = "50%";          }      }      }  

How to programatically change the about:config dom.max_script_run_time value in Firefox?

Posted: 05 Feb 2013 01:11 AM PST

I am just wondering if there is any way to programatically change the dom.max_script_run_time value in the Firefox about:config window.

When the default values in my Firefox is 10, I think its too less to run a script running for longer time in my website. On when the value is set to default(i.e.10) my firefox goes Not Responding and I get warning alert message like Warning: Unresponsive Script I just need to set the value to 20 or 30 to avoid any such alerts popping often and let the script to run for longer time.

So I just need to change the dom.max_script_run_time each time the page the loaded.

I have tested this in other browsers like Firefox, Chrome, Safari, Palemoon and Opera..

I have this problem only in FF

Or is there any other way rather than changing the settings and loading the page?

Any solution will be appreciated.

jQuery getJSON won't work on live url

Posted: 05 Feb 2013 01:11 AM PST

Anyone can let me know what am I doing wrong here will be appreciated.

This is the code with json file on local URL / localhost. And this work with no problem

(function() {      var json_url = 'http://localhost:8888/MOD/some-folder/app/mysql-to-json.php?page=index';        $.getJSON(json_url, function(data){          $.each(data, function(i, item) {              $('#state-list').append('<li><a href="display.html?state=' + item.d_state  + '" data-transition="slide" rel="external">' + see_abbrv(item.d_state) + '</a></li>');          });          $('#state-list').listview('refresh');       });  }) ();  

But when I do this, and I just updated the json_url to live url from json_url from localhost.

The data won't show up. And there is warning when I tried to inspect page:

Resource interpreted as Script but transferred with MIME type text/html: "http://www.live-server.com/app/mysql-to-json.php?page=index&callback=jQuery18201751285600475967_1360047415705&_=1360047415772".

updated code with live url:

(function() {      var json_url = 'http://www.live-server.com/app/mysql-to-json.php?page=index&callback=?';        $.getJSON(json_url, function(data){          $.each(data, function(i, item) {              $('#state-list').append('<li><a href="display.html?state=' + item.d_state  + '" data-transition="slide" rel="external">' + see_abbrv(item.d_state) + '</a></li>');          });          $('#state-list').listview('refresh');       });  }) ();  

Thanks!

Issue redirect parent of an iframe in Opera

Posted: 05 Feb 2013 01:10 AM PST

I have an issue when trying to redirect the parent from withing an iframe in Opera.

I'm loading an iframe with colorbox and when I click on a button in the iframe I want to reload the parent changing its URL arguments. So I've done this, which works in Chrome/FF:

window.parent.location.search = $.param(newArgs);  

But on Opera, it seems to reload the parent with the URL of the iframe instead. I have tried multiple things, adding return false; at the end of the click handler, accessing window.top too but without success.

The only thing that works is to reconstruct fully the URL like this :

window.top.location = window.top.location.pathname + '?' + $.param(newArgs);  

What have I done wrong or misunderstood about location and iframe?

AjaxMethod "Class" is undefined error

Posted: 05 Feb 2013 01:09 AM PST

I have an old project asp.net that uses Ajax.AjaxMethod() to call server side code from Javascript. It was working fine before (and by before I meant years ago) but now it has stopped working.

This is my C# code behind:

public partial class Signup : System.Web.UI.Page{      protected void Page_Load(object sender, EventArgs e){          Ajax.Utility.RegisterTypeForAjax(typeof(Signup));      }        [Ajax.AjaxMethod()]      public DataTable fillStateDdl(int countryid)      {        objState = new MyClass.State();        DataTable dtState = new DataTable();        objState.CountryId = Convert.ToInt32(countryid);        dtState = objState.GetStateCountry().Tables[0];        return dtState;      }  }  

And this is my JavaScript code:

function fillStates(countryid)  {    var cntryid=countryid.options[countryid.selectedIndex].value;    var response=Signup.fillStateDdl(cntryid);      var states=response.value;  }  

In javascript I am getting "Microsoft JScript error: 'Signup' is undefined" error message. Am I missing something here?

javascript button show/hide on text changed

Posted: 05 Feb 2013 01:09 AM PST

I want to show and hide a button by using java script.

My problem is that the button should be hide on page load and when I changed the text in text box then button should be show.

thanks!!!

jQuery accordion slides up multiple times

Posted: 05 Feb 2013 01:08 AM PST

I'm making a jquery accordion and I have some issues

My jQuery searches for a ul inside a class and if it has a certain class it slides down, but it slides down as many times as the element ul exists in the whole nav

Here is my jquery code so far:

if($(this).has("ul").length){     $(".menu ul li").on('click',function(e){      $(this).addClass('open').siblings().removeClass('open').children();      $('.menu ul li ul').slideUp();      if($(this).parents().find(".open").length){          $(this).children('ul').slideDown();      }      //$(this).parents().find(".open").children('ul').slideDown();      e.preventDefault();      });   };  

this is my html:

  <div class="menu">      <a id="jump" href="#"><p>Menu</p><span class="right">&#9660;</span></a>      <nav class="row">          <div class="page_wrapper">          <ul class="niveau_1">              <li class="active"><a href="#">Home</a></li>              <li><a href="#">Group</a>                  <ul class="sub-menu">                      <li><a href="#">QHSE/Awards</a></li>                      <li><a href="#">Vacatures/</a></li>                  </ul>              </li>              <li><a href="#">Nieuws &amp; Media</a>                  <ul class="sub-menu">                      <li><a href="#">Van Moer in de media</a></li>                      <li><a href="#">Nieuwsarchief</a></li>                  </ul>              </li>              <li><a href="#">Sport &amp; Events</a>                  <ul class="sub-menu">                      <li><a href="#">Casual Friday</a>                          <ul>                              <li><a href="#">Inschrijving</a></li>                              <li><a href="#">Foto's</a></li>                          </ul>                      </li>                      <li><a href="#">Thursday Lounge</a></li>                      <li><a href="#">Triatlon</a></li>                      <li><a href="#">Sponsoring</a></li>                      <li><a href="#">Beurzen</a></li>                      <li><a href="#">Kalender</a></li>                  </ul>              </li>              <li><a href="#">Vestigingen</a></li>              <li><a href="#">Contact</a></li>          </ul>          </div>  

How to use set() in OOjavascript

Posted: 05 Feb 2013 01:07 AM PST

How to set properties to a inherited class in javascript

Phonegap, jQueryMobile And Web service

Posted: 05 Feb 2013 01:06 AM PST

I created a native Android app using the Android SDK and java packages, using a ASP.Net Web service created by me, and it works fine. But now I want to make this cross-platform. I heard that Phonegap and jQuery Mobile will help with this, but I am still a bit confused.

  1. Is it necessary to host the HTML file that uses Javascript to work properly? OR
  2. Can I include the HTML and js file in my application and call the web service methods?

Can somebody please guide me?

MY Demo Code is

JAVA SCRIPT

<script type="text/javascript" charset="utf-8" src="phonegap.js"></script>   <script src="jquery-1.7.2.min"></script>   <script src="jquery.mobile-1.1.1.min.js"></script>  <script type="text/javascript" charset="utf-8"/></script>    <link rel="stylesheet" src="jquery.mobile-1.1.1.min.css"/>    <script type="text/javascript">      function onDeviceReady() {}  document.addEventListener("deviceready", onDeviceReady, false);    function LoginButton_onclick() {      $.ajax({  type: "POST",  contentType: "application/json; charset=utf-8",  dataType: "json",      url:    "http://182.72.192.18/webservicedemo/service.asmx/HelloWorld",      data: '{}',      success: function(msg) {     jsonArray = $.parseJSON(msg.d);      var $ul = $( '<ul id="details">' );      for(i=0; i < jsonArray.length; i++)      {    $("#details").append('<li id="'+i+'" name="head" >'+jsonArray[i].name+'</li>' );  } $('#details').listview('refresh');      },      error: function(msg) {           alert("Error");      }  });    </script>  

HTML

<div data-role="page" id="Page1">  <h1>DEMO PAGE</h1>    <div id="DEMO">   <input id="LoginButton" type="button" value="GET DATA" onclick="LoginButton_onclick()" /></div>    <div id="divList" data-role="content">  <ul id="details" data-role="listview" data-inset="true"></ul>  </div>    </div>       </body>  

and my ASP.NET Web Service is

[WebService(Namespace = "http://tempuri.org/")]  [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]  [System.Web.Script.Services.ScriptService]  public class Service : System.Web.Services.WebService{  JavaScriptSerializer serializer = new JavaScriptSerializer();  public Service () {}    [WebMethod]  [ScriptMethod(ResponseFormat = ResponseFormat.Json)]  public string HelloWorld() {        List<clsDetails> deailsList = new List<clsDetails>{      new clsDetails(1,"BOY","SCHOOL"),      new clsDetails(2,"GIRL","COLLEGE"),      new clsDetails(3,"MAN","OFFICE")};        string detail = serializer.Serialize(deailsList);      return detail;  }  }  

if i host the html file along with my web-service it provide me result . but when i try to call using a local html file from android app it fails. i can't figure out what went wrong.

Can anyone tell me what went wrong here? Look here is the response i get from web-service and i parse that to JSON

HTML HOSTED ALONG WITH WEBSERVICE

phonegap.xml

<phonegap>    <access origin="http://182.72.192.18" />   </phonegap>  

No comments:

Post a Comment