Comment mettre à jour un spécifique div avec l'ajax et jquery

Je suis en train de travailler sur le site et il a un fram. pensez à la gmail cadre. Et tout comme l'application gmail je ne veux que de l'intérieur de la div à être mis à jour lorsque vous cliquez sur les liens sur la barre de navigation. Je l'ai donc le div changements, mais il n'est certainement pas de me donner les résultats que j'espère. ceci est une ébauche de ce que j'ai

<div id=container>
   <div id=page>
      ... some child divs in here
   </div></div>

Parce que le conteneur a un fixe, barre de défilement, je n'en veux pas changer, je veux seulement remplacer la page div. c'est ce que j'ai réussi à venir sur le jquery côté. Je ne suis qu'un débutant donc je ne sais pas vraiment ce que je fais mais je suis en train d'apprendre.

$(document).ready(function () {
    $.ajaxSetup ({
        cache: false
    });
    var ajax_load = "<img src='bin/pics/loading.gif' alt='loading…' width='32px' height='32px' style='top: 250px; left: 250px;' />";
    var loadUrl = "bin/ajax/load.html";
    $("#mybuton").click(function(){
        $("#page").load(loadUrl);
        location.hash = 'ajax';
    });
});

la charge html contient ce

<link rel="stylesheet" type="text/css" href="bin/main.css" />
<div id="page">
    <div id="child">
        <h1> sometitle </h1>
    </div>
</div>

Des suggestions?

  • Quels résultats obtenez-vous? Est le contenu de votre load.html fichier inséré à tous? Pensez-vous que la feuille de style pour faire quelque chose dans le corps de votre document?
  • ouais je reçois quelque chose, mais le css ne fonctionne pas correctement et je ne suis pas sûr si je devrais créer de nouvelles id pour le code html à insérer. Comme "#pageajax" ou quelque chose. mais oui mon principal problème est de ne pas savoir comment le style de ce que j'ai insérer ou de ce que les divs sont à remplacer et à ce que les divs ne le sont pas. J'ai assez bien connaître les bases de comment ça fonctionne mais je ne sais pas sur quoi que ce soit.
  • (Si je comprends bien), Personnellement, je voudrais éviter de charger dynamiquement une feuille de style comme ça. Je ne suis pas sûr que tous les navigateurs obéir. C'est plus classique à la coder en dur tous les styles possibles sur la page, en une ou plusieurs feuilles de style, puis effectuez l'une restylage en changeant les noms de classe et/ou .style... / .css(...).
  • ah, ok merci, je vais essayer de le faire. cela fait plus de sens. Je n'étais pas vraiment sûr de savoir comment aller à ce sujet.
InformationsquelleAutor Wilfred | 2012-04-12
  1. 1

    Voici l'ajax de Jquery lien http://api.jquery.com/jQuery.ajax/

    Par Exemple Code :

    ajax_control = jQuery.ajax({
    url: "target.php",
    type: "POST",
    data: {variable_name: variable_value}
});
ajax_control.always(function(){
    $('#content').html(ajax_control.responseText);
});

    Par l'affectation de l'appel à une variable ("ajax_control" dans l'exemple ci-dessus), vous pouvez annuler quand vous le souhaitez, en utilisant :

    ajax_control.abort();

    http://api.jquery.com/jQuery.post/
    http://api.jquery.com/jQuery.get/

    InformationsquelleAutor KBN
  2. 1

    Je n'aime pas à répondre avec des liens, pas plus qu'avec du texte, voici donc un exemple de la façon dont pouvez-vous faire un div/table ou de presque n'importe quel conteneur html de modifier son contenu.

    Si vous êtes en utilisant MVC avec Rasoir ça ressemble à ce

    TestView.cshtml

    @using (Ajax.BeginForm("Test",
                       "TestController", 
                       new AjaxOptions {
                           HttpMethod = "GET",
                           InsertionMode = InsertionMode.Replace,
                           UpdateTargetId = "searchResults" }))
{
    Search User by ID: <input type="text" name="id" />
    <input type="submit" value="Search" />
}

<table id="searchResults">
</table>

    TestController.cs

    public class TestController : Controller
{
    public PartialViewResult Test(int id)
    {
        var model = myDbContext.Users.Single(q => q.UserID == id);

        return PartialView("_PartialViewTest", model);
    }
}

    _PartialViewTest.cshtml

    @model IEnumerable<MyApp.Models.User>

<table id="searchResults">
    <tr>
        <th>Name</th>
        <th>Email</th>
    </tr>

    @foreach(var item in Model) {
        <tr>
            <td>@item.Name</td>
            <td>@item.Email</td>
        </tr>
    }
</table>

    ...et si vous voulez le faire à l'aide de classique ASP.NET il serait comme ceci:

    TestPage.aspx

    <body>
    <form id="form1" runat="server">
        <div>
            <button type="button" onclick='testCall()'>Test!</button>
            <hr />
            <div id="ajaxResult">
            </div>
        </div>
    </form>
</body>

    Scripts.js /TestPage.aspx

    function testCall() {
    $.ajax({
        url: "TestHandler.ashx",
        dataType: 'json',
        success: callbackTestCall
    });
};

function callbackTestCall(payload) {
    document.getElementById("ajaxResult").innerHTML = payload;
};

    TestHandler.ashx

    public class TestHandler : IHttpHandler
{
    public void ProcessRequest(HttpContext context)
    {
        JavaScriptSerializer jss = new JavaScriptSerializer();
        Random random = new Random();

        string actualData = random.Next(2001).ToString();

        context.Response.ContentType = "text/plain";
        context.Response.CacheControl = "no-cache";

        context.Response.Write(jss.Serialize(actualData));
    }

    public bool IsReusable
    {
        //Whether or not the instance can be used for another request
        get { return true; }
    }
}

    Si vous avez besoin de plus amples informations s'il vous plaît, laissez-moi savoir.

    • le code que j'ai écrit va travailler pour asp.net c#, mais vous pouvez l'adapter à la langue que vous utilisez, j'ai essayé de vous fournir un son clair/moyen facile de mettre à jour un div. Quelle langue utilisez-vous?
    • j'utilise jquery et php. je n'ai jamais rien fait avec asp.net ou c#. j'étais à la recherche par le biais de votre code et aussi complète et détaillée que ça ressemble (je vous remercie), je n'avais pas vraiment comprendre ce qui se passait
    InformationsquelleAutor Esteban