CODEWITHSUNDEEP
jqueryajaxjquery-mobile
Swaroop Nagendra
Swaroop Nagendra

Reputation: 605

Ajax transition in jquery mobile

Can someone please try to answer this question, I have asked it at many place but I am not able to get the answer.

Think of this: Have you noticed in your facebook profile, when you keep scrolling down in your home page, news feed keeps on loading as you scroll, but the top bar which consists of Notification icons message icon and home icon is static. Only your friends news feed gets diplayed without refreshing any of the other page contents.

This is Ajax transition, right?

I mentioned the above example to just to let you know what I want in my page.

I am using jquery mobile to develop a quiz game. There are 2 teams, each assigned with an X and O marker.

The radio buttons: TEAM -X and TEAM -Y are at the top of the page and the radio button code is:

<div style="margin-left:510px;">
    <div data-role="fieldcontain">
        <fieldset data-role="controlgroup" data-type="horizontal">
            <input type="radio" name="players" id="playerx"/>
             <label for="playerx"><b>TEAM - X</b></label>
             <input type="radio" name="players" id="playery"/>
              <label for="playery"><b>TEAM - O</b></label>                                      
        </fieldset>
     </div>            
</div>

Next below that is a series of 9 squares, the code for this is:

    <div id = "box">
      <li><br/>
        <div style = "margin-left: 550px;">
<canvas id = "canvas1"  width="50" height="50"      style="border:3px solid #3B6EA1"  onclick="canvasClicked(1)"></canvas>

    <canvas id = "canvas2"  width="50" height="50" style="border:3px solid #3B6EA1" onclick="canvasClicked(2)"></canvas>

    <!-- Similarly for rest of the 7 boxes -->
        </div>
       </li>
    </div>

Below that is the question and the code is like this. This question is some 500 px below top margin. QUESTION CODE:

<div class = "questionHolder">
            <div class = "questionBorder">
                <h4 style = "color: #58CE2D; font-size: 21px;">Who tirelessly hacked in a garage, to give the world PHP?</h4>
                <div class = "ui-grid-b">
                    <div class = "ui-block-a"><a href = "#anagram1" data-rel = "dialog" style = "text-decoration:none;" ><button data-theme = "b" data-icon = "star">ANAGRAM</button></a></div>
                    <div class = "ui-block-b"><a href = "#answer1" data-rel = "dialog" style = "text-decoration: none;"><button data-theme = "b" data-icon = "check">ANSWER</button></a></div>
                    <div class = "ui-block-c"><a href = "#question2" style = "text-decoration: none;"><button data-theme = "b" data-icon = "forward">NEXT</button></a></div>
                </div>
            </div>

Now consider that I have many questions(html pages) like this. Say ques1.html, quest2.html ques3.html etc.

These ques1.html, ques2.html etc is made up of just QUESTION CODE: and nothing else.

When ever user presses NEXT button in a particular question I want only quest2.html or question3.html to be loaded without refreshing the radio button code or the TIC-TAC_TOE box code. Please guide me in this. I am really having trouble implementing the $get() method. My
pages has ajax-transition set to true.

Upvotes: 0

Views: 208

Answers (1)

Omar
Omar

Reputation: 31732

To load HTML code into a page, use .load('file.html').

$('.target').load('page.html');

.target can be a#id or .class or any jQuery-selector.

Upvotes: 1

Related Questions