Results 1 to 6 of 6

Thread: anchor link not working in jquery mobile and ajax

  1. #1
    Join Date
    Aug 2013
    Posts
    86
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default anchor link not working in jquery mobile and ajax

    i created an ajax form page in jquery mobile but when a click on a link that will take me to the ajax page, it does not link well. it seems that jquery mobile uses the "#" sign to name pages.

    example, when a click on link
    <a href="http://localhost/data/insert_ajax.html">form page</a>

    i will end up having this links in my browser
    http://localhost/data/#/data/insert_ajax.html

    and as such, the page will not load.

    i have used data-ajax="false" or rel="external" it works by reloading the page and that is not what i want.

    I want the page to be linked normally and so i tried to eliminate "#" sign as in the code below but i cannot get it work.

    Code:
    <script>
     $('body').on('click', '.homeSet', function(ev) {
       // $.mobile.changePage('http://localhost/data/#/data/insert_ajax.html', {
    $.mobile.changePage('http://localhost/data/insert_ajax.html', {
            transition : "slide"
        });
        return false;
    
        });
    
    </script>
    in the body of form i have this


    <a href="#" class='homeSet'>ajax_form</a>


    any help please.

  2. #2
    Join Date
    Mar 2010
    Location
    Florida
    Posts
    512
    Thanks
    9
    Thanked 61 Times in 59 Posts

    Default

    I could be wrong but add this to the beginning of your code
    Code:
    ev.preventDefault();
    -DW [Deadweight]
    Resolving your thread: First Post: => EDIT => Lower right: => GO ADVANCED => Top Advance Editor drop down: => PREFIX:Resolved

  3. #3
    Join Date
    Aug 2013
    Posts
    86
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    i have added it but not working

  4. #4
    Join Date
    Mar 2010
    Location
    Florida
    Posts
    512
    Thanks
    9
    Thanked 61 Times in 59 Posts

    Default

    Not sure what you did but here is an example.
    HTML Code:
    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>event.preventDefault demo</title>
      <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    </head>
    <body>
     
    <a href="http://jquery.com">default click action is prevented</a>
    <div id="log"></div>
     
    <script>
    $( "a" ).click(function( event ) {
      event.preventDefault();
      $( "<div>" )
        .append( "default " + event.type + " prevented" )
        .appendTo( "#log" );
    });
    </script>
     
    </body>
    </html>
    -DW [Deadweight]
    Resolving your thread: First Post: => EDIT => Lower right: => GO ADVANCED => Top Advance Editor drop down: => PREFIX:Resolved

  5. #5
    Join Date
    May 2014
    Location
    Warsaw, Poland
    Posts
    12
    Thanks
    0
    Thanked 2 Times in 2 Posts

    Default

    There is a discussion about such a problem on forum.jquery.com/topic/jquery-mobile-anchor-linking and it is claimed that the following code should do the trick:
    Code:
    $('a.native-anchor').bind('click', function(ev) {
          var target = $( $(this).attr('href') ).get(0).offsetTop;
          $.mobile.silentScroll(target);
          return false;
    });

  6. #6
    Join Date
    Aug 2013
    Posts
    86
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    i have tried implementing what you said but i cannot get it to work.
    below is my ajax code so far

    display.html
    Code:
    <script type="text/javascript">
    $(document).ready(function() {
    
    
      var id = getUrlVars()["id"];
    
     $.ajax({ type: "POST", 
    url:'http://localhost/services/pass_count101.php',
     data:"id="+id+"&message="+message,
     success:function(data){
     $('#result_count').html(data); 
    } }) 
    
    
     
    
    });
    
    
     </script>

    insert.html

    Code:
    <script type="text/javascript">
    
    
    
     $(document).ready(function() {
    
    
      $("#msg").hide();
    	  $("#btn").click(function(){
    
    
    
    	 $("#response").slideUp("slow");
    	 //alert("hi");
    	 var jsonData = {};
       var formData = $("#myform").serializeArray();  
       $.each(formData, function() {
            if (jsonData[this.name]) {
               if (!jsonData[this.name].push) {
                   jsonData[this.name] = [jsonData[this.name]];
               }
               jsonData[this.name].push(this.value || '');
           } else {
               jsonData[this.name] = this.value || '';
           }
    	       
    	   
       });
    
    
    
       console.log(jsonData);
    	$.ajax(
    	{
    		url : "http://localhost/services/insert.php",
    		type: "POST",
    		data : jsonData,
    		success:function(data, textStatus, jqXHR) 
    		{
    		$("#response").text("");
    $("#response").append(data);
    $("#response").slideDown("slow");
    		}
    	});
    	$("#msg").show("slow");
    });
    });
    
    
    
    </script>
    helps will be appreciated. thanks

Similar Threads

  1. anchor link not working in javascript
    By mutago in forum JavaScript
    Replies: 1
    Last Post: 05-26-2014, 05:47 AM
  2. Replies: 0
    Last Post: 03-02-2014, 12:59 PM
  3. jquery and ajax not working
    By saad_sinpk in forum JavaScript
    Replies: 0
    Last Post: 11-26-2011, 12:28 PM
  4. Replies: 2
    Last Post: 10-11-2010, 05:26 AM
  5. Ajax pagination & Anchor link?
    By hycsos in forum JavaScript
    Replies: 1
    Last Post: 12-11-2008, 10:41 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •