Reputation: 12711

PopUp Dialogs not working after form submit in jquery mobile

I'm doing a simple form submit.On the form submit i have the form action="Facility.aspx".on Facility.aspx i'm using dialog popups.after the form submit those dialogs are not working but they are working before submitting the form.

First Form HTML:

<html> 
    <head> 
    <title>Facility</title> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
</head> 
<body> 

<div data-role="page" id="arealistpage">

  <div data-role="header" data-theme="b">
      <a href="Facility.aspx" class='ui-btn-left ui-btn-back' data-icon='arrow-l' rel="external">Back</a>
   </div><!-- /header -->

    <div data-role="content">  
  <form id="form1" method="post">
    <div id="AreaNoDiv" data-role="fieldcontain" class="field">
        <label for="Facility">Facility*</label>     
        <input id="Facility" name="shipNo_r" type="text" required/>
    </div>

     <div id="desDiv" data-role="fieldcontain" class="field">

        <label for="des" id="Label1" name="fnameLabel">Description*</label>     
        <input id="des" name="fname_r" type="text" required/>

    </div>
     <div id="submitDiv" data-role="fieldcontain" style="width: 30%">    
     <button class="btnLogin" data-theme="b" type="submit" id='mysubmit'>submit</button>
    </div>

    </form>

    </div><!-- /content -->

    <div data-role="footer" data-theme="b" data-position="fixed">

            <div data-role="navbar">
            <ul>

               <li><a href="" data-role="tab" data-icon="arrow-u" class="returnTopAction">Top</a></li>
            </ul>
        </div>
    </div>
</div><!-- /page -->
<script src="Submitscript.js" type="text/javascript"></script>
</body>
</html>

Script:

$('#arealistpage').live('pageshow',function(event){
var serviceURL = 'service1.asmx/SubmitList';
    $('#mysubmit').bind('click', function(e){
            $.ajax({
            type: "POST",
            url: serviceURL,
            data: '{"name":"' + name + '"}',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: successFunc,
            error: errorFunc
        });
    });

    function successFunc(data, status) {

        // parse it as object
       // var outStr = JSON.parse(data.d);
       // alert(outStr);
    }

    function errorFunc() {
        alert('error');
    }
});

My Second From where the dialogs are not working after form submit.

<html> 
    <head> 
    <title>Facility</title> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
 <script type="text/javascript">
     $('#arealistpage').live('pageshow', function (event) {
         $('div[id="primaryList"] ul[data-role="listview"] a').bind("click", function () {
             var facilityid = $(this).data("facilityid");
             sessionStorage.facilityid = facilityid;
            });
     });
</script>

</head> 
<body> 

<div data-role="page" id="arealistpage">

  <div data-role="header" data-theme="b">
        <h1><a name="top"></a>Facility</h1>
       <a href="../MenuePages/Dictionaries.aspx" class='ui-btn-left ui-btn-back' data-icon='arrow-l' rel="external">Back</a>
   <a href="AddFacility.aspx" data-role="button" data-icon="plus" data-theme="d" style="float:left;"  rel="external" data-transition="slide" data-ajax="false">Add</a>
    </div><!-- /header -->

    <div data-role="content">  
     <div id="primaryList">
    <ul data-role="listview" data-inset="true" data-theme="c"  data-filter="true" id="areaList" data-split-icon="gear" data-split-theme="d">

    </ul>

        </div>
    </div><!-- /content -->

    <div data-role="footer" data-theme="b" data-position="fixed">

            <div data-role="navbar">
            <ul>

               <li><a href="" data-role="tab" data-icon="arrow-u" class="returnTopAction">Top</a></li>
            </ul>
        </div>
    </div>
   <script src="FacilityScript.js" type="text/javascript"></script>

</div><!-- /page -->
  <div data-role="page" id="dialog">
  <div data-role="header" data-theme="b">
    <h1>Options</h1>
  </div>   
 <ul data-role="listview" data-inset="false"
                data-theme="c">
               <li data-icon="false"><a href="UpdateFacility.aspx"  data-ajax="false">Edit</a></li>

              <li data-icon="false"><a href="#divMsg" data-rel="dialog" data-transition="pop">Delete</a></li>

            </ul>   
</div> 
<div data-role="page" id="divMsg">
  <div data-role="header" data-theme="b">
    <h1>Confirmation</h1>
  </div>   

  <div data-role="content">  
  <a href="Facility.aspx" onclick="DeleteFacility(); return true" data-role="button"  data-ajax="false">Delete Record?</a>
  </div>
   <script src="FacilityScript.js" type="text/javascript"></script>
</div>
</body>
</html>

Facility.js

$('#arealistpage').live('pageshow', function (event) {
    $.mobile.showPageLoadingMsg();
    var serviceURL = '../ServiceScripts/FacilityWebService.asmx/GetFacilityList';

    $.ajax({
        type: "POST",
        url: serviceURL,
        data: param = "",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: successFunc,
        error: errorFunc
    });

    function successFunc(data, status) {

        // parse it as object
        var lankanListArray = JSON.parse(data.d);

        // creating html string
        var listString = ""; //'<ul data-role="listview" id="areaList">';
        var htmlList = "";

        // running a loop
        items = [];
        $.each(lankanListArray, function (index, value) {
            items.push('<li><a href="#dialog" data-rel="dialog" data-transition="pop" data-facilityid=' + this.FacilityID + '><p>Facility: ' + this.FacilityN + '  |&nbsp;&nbsp;Description: ' + this.FacilityDescription + '</p></a><a class="deleteMe"></a></li>');

        });

        $('#areaList').empty();
        $('#areaList').append(items.join(''));
        $('#areaList').listview('refresh');
        $.mobile.hidePageLoadingMsg();

    }

    function errorFunc() {
        alert('error');
    }
});

$('#arealistpage').live('pageshow', function (event) {

    $.mobile.showPageLoadingMsg();
    var serviceURL = '../ServiceScripts/FacilityWebService.asmx/InsertFacility';

    $('#btnAdd').bind('click', function (e) {
        var Facility = $("#Facility").val();
        var Description = $("#des").val();
        // e.preventDefault();
        $.ajax({
            type: "POST",
            url: serviceURL,
            data: '{"Facility":"' + Facility + '","FacilityDescription":"' + Description + '"}',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: successFunc,
            error: errorFunc
        });
    });
    function successFunc(data, status) {
        var lankanListArray = JSON.parse(data.d);

    }

    function errorFunc() {
        alert("Form Submit Error");

    }
});

Upvotes: 0

Answers (4)

Christian Bocaz

Reputation: 9

I had a similar problem. The issue is about the ID of the popup. My aproach was generate a random suffix and concatenate de string ID with this suffix.

Upvotes: 0

Muhammad Tanweer

Reputation: 912

I had a similar problem. I was adding a script outside the data-role="page" element in the html page for specific page. So my popup was not working when page was changed because JQM only renders the content inside the data-role="page" container (or inside body tag is page is not available in the html document). So I added my code in pageinit in my starting page of the application (i.e. index.html). This is how i did

$( document ).delegate("#addseat-page", "pageinit", function() {
  $("#vipPopup").popup(); //vip popup
  $("#popup-reservedseat").popup(); // reserved seat popup
});

It worked for me.

Reference : http://jquerymobile.com/demos/1.2.1/docs/pages/page-scripting.html

Cheers

Upvotes: 0

chamara

Reputation: 12711

 <a href="AddFacility.aspx" data-role="button" data-icon="plus" data-theme="d" style="float:left;"  rel="external" data-transition="slide" data-ajax="false">Add</a>

I solved the issue by removing rel="external" and data-ajax="false" tags. in the above line of code from my web form

Upvotes: 1

Jaya Mayu

Reputation: 17247

As a thumb rule in jQuery Mobile you need to have unique ID for each of yoru page. I see that you have used same ID for both your pages. Change the ID of your page and change the relevant ID in the JS file.

It should work fine. All looks ok to me. check and update me.

update

You can navigate to your new page using $.mobile.changePage('yourpage.html');

so you should call above method in your success function after form submit.

Upvotes: 0

PopUp Dialogs not working after form submit in jquery mobile

Answers (4)

Related Questions