Ajax und Action Urls

Im Entwickler-Forum können Implementierungsdetails sowie Alternativen der Umsetzung diskutiert werden. // Here, developers can discuss implementation details of features of their projects.
Antworten
Benutzeravatar
dave
Beiträge: 903
Registriert: 04.02.2011, 19:03:57
Wohnort: Berlin
Kontaktdaten:

Ajax und Action Urls

Beitrag von dave » 01.07.2015, 18:15:40

Hi zusammen,

ich hätte da mal ne Frage: Wie kann ich eine ActionUrl mit jQuery Ajax verwenden?

Folgendes: In meinem Template mache ich einen Ajax-Aufruf:

Code: Alles auswählen

            $.ajax({
                async: false,
                url: '?DATA_actions_WEB-action:JsonLoadPreiseJqplot',
                type: "GET",
                dataType: "json",
                ....
            });
Darüber macht es sich aber schwierig, weitere Parameter mitzusenden. Ich mache das bisher immer über ein paar versteckte <divs> im Template, die ich dann via jQuery hinzufüge. Allerdings ist das extrem unschön!

Ich möchte nun in meinem Controller eine ActionUrl generieren und diese im Ajax-Aufruf verwenden. Wie lässt sich das komfortabel gestalten?

Benutzeravatar
dr.e.
Administrator
Beiträge: 4555
Registriert: 04.11.2007, 16:13:53

Re: Ajax und Action Urls

Beitrag von dr.e. » 02.07.2015, 13:25:16

Hallo dave,
Darüber macht es sich aber schwierig, weitere Parameter mitzusenden.
Generell kannst du mit data weitere Daten mit dem AJAX-Request mitschicken (siehe https://api.jquery.com/jQuery.ajax/). Diese kannst du entweder dynamisch evaluieren oder aus einem oder mehreren HTML-Knoten (idealerweise data-Attribute) lesen.
Ich mache das bisher immer über ein paar versteckte <divs> im Template, die ich dann via jQuery hinzufüge. Allerdings ist das extrem unschön!
Kannst du mal ein Beispiel geben? Das verstehe ich ehrlich gesagt nicht ganz.
Ich möchte nun in meinem Controller eine ActionUrl generieren und diese im Ajax-Aufruf verwenden. Wie lässt sich das komfortabel gestalten?
Mein Vorschlag ist hierzu an den Rumpf deines Modules/Bereichs (z.B. ein <div />) ein entsprechendes data-Attribut anzuhängen und dieses im Controller zu füllen. Dieses kannst du dann in deinem Java Script Code auslesen und den AJAX-Request zusammen bauen.

Hoffe das hilft dir! :)
Viele Grüße,
Christian

Benutzeravatar
dave
Beiträge: 903
Registriert: 04.02.2011, 19:03:57
Wohnort: Berlin
Kontaktdaten:

Re: Ajax und Action Urls

Beitrag von dave » 02.07.2015, 20:03:16

dr.e. hat geschrieben: Kannst du mal ein Beispiel geben? Das verstehe ich ehrlich gesagt nicht ganz.
Im Template habe ich einen versteckte Div, der über den Controller durch den Platzhalter mit Inhalt gefüllt wird:

Code: Alles auswählen

<div id="BarcodeID" style="display: none">${BarcodeID}</div>
Das Ganze hole ich mir dann via jQuery ins Script:

Code: Alles auswählen

$('#BarcodeID').text()
dr.e. hat geschrieben: Mein Vorschlag ist hierzu an den Rumpf deines Modules/Bereichs (z.B. ein <div />) ein entsprechendes data-Attribut anzuhängen und dieses im Controller zu füllen. Dieses kannst du dann in deinem Java Script Code auslesen und den AJAX-Request zusammen bauen.
So in etwa mache ich es schon, das data-Atttribut ist natürlich die elegante Lösung. Vielen Dank für den Denkanstoss, hat wie immer geholfen.

Benutzeravatar
Paric
Beiträge: 45
Registriert: 25.08.2014, 08:51:04

Re: Ajax und Action Urls

Beitrag von Paric » 03.07.2015, 10:27:24

moin moin,

ich habe das über ein object gelöst, hier die Klasse dazu:

Code: Alles auswählen

/**
 * Object to send Datas to the Server
 * @returns {ajaxAPI}
 */
function ajaxAPI()
{
    var url = "?TELLA_ajaxapi-action:AjaxAPI=cmd:";
    var dataSeparate = "|";
    var keyDataSeparate = ":";
    var cmd = "";
    var sendMethod = "GET";
    var prefix = "data";
    var async = false;
    var loaderPic = false;
    var loaderPicOutput = false;
    var fncBeforeSend;
    var objData = {};
    
    /**
     * setting the AjaxAPICommand-Url (e.g. "RnrPool" -> RnrPoolAjaxAPICommand.php)
     * @param {string} val
     * @returns {ajaxAPI}
     */
    this.setUrl = function(val)
    {
        cmd = val;
        return this;
    };
    
    /**
     * setting the Object.
     * @param {object} val
     * @returns {ajaxAPI}
     */
    this.setDataObj = function(val)
    {
        for (var key in val)
        {
            objData[key] = val[key];
        }
        
        return this;
    };
    
    /**
     * add a value to the Data-object
     * @param {string} key
     * @param {string} val
     * @returns {ajaxAPI}
     */
    this.addToDataObj = function(key, val)
    {
        objData[key] = val;
        return this;
    };
    
    /**
     * delete a key from the Data-object
     * @param {string} key
     * @returns {ajaxAPI}
     */
    this.delFromDataObj = function(key)
    {
        delete objData[key];
        return this;
    };
    
    /**
     * delete the content from the Data-object
     * @returns {ajaxAPI}
     */
    this.delDataObj = function()
    {
        objData = {};
        return this;
    };
    
    /**
     * setting the prefix
     * @param {string} val Standard: "data"
     * @returns {ajaxAPI}
     */
    this.setPrefix = function(val)
    {
        prefix = val;
        return this;
    };
    
    /**
     * add the Data to the Data-object with the prefix
     * @param {object} val
     * @returns {ajaxAPI}
     */
    this.setToDataObjWithPrefix = function(val)
    {
        if (typeof val === "object")
        {
            for (var key in val)
            {
                this.addToDataObj(prefix + "_" + key, val[key]);
            }
        }
        return this;
    };
    
    /**
     * set the send-method
     * @param {"GET" || "POST} val standard: "GET"
     * @returns {ajaxAPI}
     */
    this.setSendMethod = function(val)
    {
        if (val.toUpperCase() === "GET" ||
            val.toUpperCase() === "POST")
        {
            sendMethod = val.toUpperCase();
        }
        
        return this;
    };
    
    /**
     * set to "true" if async
     * @param {true || false} val standard: "false"
     * @returns {ajaxAPI}
     */
    this.setAsync = function(val)
    {
        async = val;
        
        return this;
    };
    
    /**
     * set a function, which will performed before sending
     * @param {function} val
     * @returns {ajaxAPI}
     */
    this.setBeforeSend = function(val)
    {
        if (typeof val === "function")
        {
            fncBeforeSend = function()
            {
                val();
            };
        }
        
        return this;
    };
    
    /**
     * set to "true" if a loaderpic have to show.
     * @param {true ||false} val standard: "false"
     * @returns {ajaxAPI}
     */
    this.setLoaderPic = function(val)
    {
        loaderPic = val;
        return this;
    };
    
    /**
     * setting the outputNode for the loader-picture (e.g. $("#output") )
     * @param {jQuery-Node} val
     * @returns {ajaxAPI}
     */
    this.setLoaderPicOutput = function(val)
    {
        loaderPicOutput = val;
        return this;
    };
    
    var getCompleteUrl = function()
    {
        var cUrl;
        cUrl = url + cmd;
        if (typeof objData === "object" && !$.isEmptyObject(objData))
        {
            for (var key in objData)
            {
                cUrl += dataSeparate + key + keyDataSeparate + objData[key];
            }
        }
        
        return cUrl;
    };
    
    var fncLoaderPic = function(val)
    {
        var objMyConst = new constants();
        var imgDir = objMyConst.getConst("IMG_DIR");
        var img = $("<img />");
        img.prop("src", imgDir + "/ajax-loader.gif");
        val.html(img);
    };
    
    /**
     * sending the Data and pass the JSON-Data-object to the callback-function
     * @param {function} callback
     * @returns {undefined}
     */
    this.getJSONData = function(callback)
    {
        $.ajax(
        {
            url: getCompleteUrl(),
            type: sendMethod,
            dataType: "json",
            async: async,
            beforeSend: function()
            {
                if (loaderPic && typeof loaderPicOutput === "object")
                {
                    fncLoaderPic(loaderPicOutput);
                }
                if (typeof fncBeforeSend === "function")
                {
                    fncBeforeSend();
                }
            },
            success: function (htmlData)
            {
                if (typeof callback === "function")
                {
                    callback(htmlData);
                }
            }
        });
    };
    
    /**
     * sending the Data and pass the HTML-Data to the callback-function
     * @param {function} callback
     * @returns {undefined}
     */
    this.getHTMLData = function(callback)
    {
        $.ajax(
        {
            url: getCompleteUrl(),
            type: sendMethod,
            async: async,
            beforeSend: function()
            {
                if (loaderPic && typeof loaderPicOutput === "object")
                {
                    fncLoaderPic(loaderPicOutput);
                }
                if (typeof fncBeforeSend === "function")
                {
                    fncBeforeSend();
                }
            },
            success: function (htmlData)
            {
                if (typeof callback === "function")
                {
                    callback(htmlData);
                }
            }
        });
    };
}
Funktioniert bei mir ganz kompfortabel. Ein paar Funktionen darin sind eigentlich nur zur Darstellung von einem Ladebildchen, kannst Du mit übernehmen, musst Du aber nicht. Die Anwendung erklärt sich hoffentlich von selbst, wenn nicht frag einfach nochmal.
Entgegen nehme ich das nach dieser vorlage: http://wiki.adventure-php-framework.org ... nd_das_APF

Hoffe das hilft Dir weiter.

Beste Grüße,
Pit

Benutzeravatar
Paric
Beiträge: 45
Registriert: 25.08.2014, 08:51:04

Re: Ajax und Action Urls

Beitrag von Paric » 24.07.2015, 14:13:06

konnte Dir das eigentlich weiterhelfen? Würde mich mal interessieren was eine "außenstehende" Person zu der Klasse sagt...

Benutzeravatar
dave
Beiträge: 903
Registriert: 04.02.2011, 19:03:57
Wohnort: Berlin
Kontaktdaten:

Re: Ajax und Action Urls

Beitrag von dave » 25.07.2015, 14:20:28

Hi Pit,
ich habe es mir angesehen aber noch nicht aktiv im Einsatz. Habe ein Lesezeichen drauf und werde es bei Gelegenheit mal aktiv einsetzen. Dann bekommst du nochmal Rückmeldung :)

Danke für den Code!

Antworten

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 2 Gäste