SimpleModal Problem in jQuery

Question

Dear all,

I am using simplemodal in jQuery. I used Ajax for displaying radio buttons. It should list the radio button and values, after the radio button click the page to be Redirected to page2.

When I tested it on localhost everything was fine. But it doesn't redirect the page on the web server.

Any change I should make?

My code:

 ..............
 $.ajax({ 
   url: 'test.php', 
   cache: false, 
   success: function(data) { 

       $('#resp').modal({
          close:false,
          position: ["4%",],
          overlayId:'confirmRespOverlay',
          containerId:'confirmRespContainer', 
          onShow: function (second) { 
                    second.data.find(".buttons .yes").hide();
                    var resp = $("<div/>").append(data);
                    var title = resp.find("#title").html(),
                    message = resp.find("#message").html();
                    second.data.find(".header span").html(title);
                    second.data.find('.info').append(message);
                    second.data.find('.yes').click(function () {
                     });
          }//onShow

        }); //Resp

    $("input:radio").click(function() {

            var url="http://page2"
            window.location.replace(url);


    }); //input 

  }//success 

}); //ajax

test.php returns following

   echo "<tr><td><input type=\"radio\" name=\"value_\" onClick=\"showUser(this.value)\" value=".$id1.">".$val1."</td><td>".$name."</td></tr>";

   echo "<tr><td><input type=\"radio\" name=\"value_\" onClick=\"showUser(this.value)\" value=".$id2.">".$val2."</td><td>".$name."</td></tr>";

The page stopped after clicking the radio button and doesn't move to next page. Any help?

Answer 1

It seems to me that your inputs haven't been added when you are registering the events.

There are two options one load your data into the modal before showing it (ie. bypassing your onshow method)

$.ajax({ 
   url: 'test.php', 
   cache: false, 
   success: function(data) { 
       var second = $('#resp');
       second.data.find(".buttons .yes").hide();
       var resp = $("<div/>").append(data);
       var title = resp.find("#title").html();
       message = resp.find("#message").html();
       second.data.find(".header span").html(title);
       second.data.find('.info').append(message);
       second.data.find('.yes').click(function () {
       }); // click

       $('#resp').modal({
          close:false,
          position: ["4%",],
          overlayId:'confirmRespOverlay',
          containerId:'confirmRespContainer'
        }); //Resp

       $("input:radio").click(function() {
            var url="http://page2"
            window.location.replace(url);
       }); //input 

  }//success 

}); //ajax

Or register your events inside the onshow method

$.ajax({ 
   url: 'test.php', 
   cache: false, 
   success: function(data) { 

       $('#resp').modal({
          close:false,
          position: ["4%",],
          overlayId:'confirmRespOverlay',
          containerId:'confirmRespContainer', 
          onShow: function (second) { 
                    second.data.find(".buttons .yes").hide();
                    var resp = $("<div/>").append(data);
                    var title = resp.find("#title").html();
                    message = resp.find("#message").html();
                    second.data.find(".header span").html(title);
                    second.data.find('.info').append(message);
                    second.data.find('.yes').click(function () {
                     });

                    $("input:radio").click(function() {
                      var url="http://page2"
                      window.location.replace(url);
                    }); //input 
          }//onShow

        }); //Resp

  }//success 

}); //ajax