Özgür Özvarış

Bir yazılımcının kırık dökük dünyası

Json sourced dinamik anket formu surveyjs

clock Ağustos 9, 2017 11:58 by author OzgurOzvaris

Merhaba,

Kaynak :

http://surveyjs.org/ 

Uygulamamızda bir anket formu yapmamız gerekti. Bizde acaba yeni teknolojileri kullanarak bu anket formunu browserda dinamik oluşturabilimiyiz diyerek angular gibi teknolojileri karıştırıken birden karşıma surveyjs çıktı.

Gayet başarılı bir uygulama. Kendi designer'ını kullanarak web üzerinde statik anket tasararlayabiliyorsunuz. Ayrıca isterseniz tasarladığınız anketleri ona ait olan cloud üzerinde biriktirebiliyorsunuz. Anket tamamlama butonunu tıkladığınızda sonuçları yine oncomplete eventin de kendi servislerini anket sonucunda oluşan json verisi ile çağırabiliyor ve verileri basit te olsa bir havuzda biriktirebiliyorsunuz. Ayrıca localizasyonu seçeniği ile custom çoklu dil desteği de sağlıyor.

Çok hacimli olmasada gayet güncel teknolojileri ve yöntemleri kullanarak güzel bir çalışma olmuş.

En güzelide eğer developer iseniz javascript kütüphanesini veriyor ve kendiniz server tarafında kendi db yapınıza göre surveyjs in istediği tarda bir json oluşturarak anketleriniz tasarlayabiliyorsunuz.

Bir fikir vermesi açısından size kendim için db'den derleyerek oluşturduğum json dizi ile oluşturulmuş anket örneğini jsfiddle.net e kaydettim paylaşıyorum.

https://jsfiddle.net/prog2011/0v9sv881/1/

İyi çalışmalar.

 



css class value reset

clock Ağustos 9, 2017 11:27 by author OzgurOzvaris

Merhaba,

Kaynak :

Reset/remove CSS styles for element only

Bir html nesne ile ilgili örneğin "span" tagı ile ilgili header kısmınızda projede genel  kullanılacak şekilde genel bir css dostayı tanımladığınızı varsayalım.

Daha sonra bu span için farzedelim ki bootstrap tarzı bir css framework içinde görselde sorun yaşadığınızda bu span'ın sizin tanımladığınız önceki özelliklerini silmeniz gerekir.

Çünkü bootstrap span'a class üzerinden değerleri atamıyor. h1,h2,h3 gibi taglara değer atıyor. Bu nedenle sizin master css nin valuları orada görseli bozacaktır.

Bu durumda istediğini tag'ın değerlerini reset etmek için şu paylaştığım "reset-class" css clasını kullanabilirsiniz.

.reset-this {
    animation : none;
    animation-delay : 0;
    animation-direction : normal;
    animation-duration : 0;
    animation-fill-mode : none;
    animation-iteration-count : 1;
    animation-name : none;
    animation-play-state : running;
    animation-timing-function : ease;
    backface-visibility : visible;
    background : 0;
    background-attachment : scroll;
    background-clip : border-box;
    background-color : transparent;
    background-image : none;
    background-origin : padding-box;
    background-position : 0 0;
    background-position-x : 0;
    background-position-y : 0;
    background-repeat : repeat;
    background-size : auto auto;
    border : 0;
    border-style : none;
    border-width : medium;
    border-color : inherit;
    border-bottom : 0;
    border-bottom-color : inherit;
    border-bottom-left-radius : 0;
    border-bottom-right-radius : 0;
    border-bottom-style : none;
    border-bottom-width : medium;
    border-collapse : separate;
    border-image : none;
    border-left : 0;
    border-left-color : inherit;
    border-left-style : none;
    border-left-width : medium;
    border-radius : 0;
    border-right : 0;
    border-right-color : inherit;
    border-right-style : none;
    border-right-width : medium;
    border-spacing : 0;
    border-top : 0;
    border-top-color : inherit;
    border-top-left-radius : 0;
    border-top-right-radius : 0;
    border-top-style : none;
    border-top-width : medium;
    bottom : auto;
    box-shadow : none;
    box-sizing : content-box;
    caption-side : top;
    clear : none;
    clip : auto;
    color : inherit;
    columns : auto;
    column-count : auto;
    column-fill : balance;
    column-gap : normal;
    column-rule : medium none currentColor;
    column-rule-color : currentColor;
    column-rule-style : none;
    column-rule-width : none;
    column-span : 1;
    column-width : auto;
    content : normal;
    counter-increment : none;
    counter-reset : none;
    cursor : auto;
    direction : ltr;
    display : inline;
    empty-cells : show;
    float : none;
    font : normal;
    font-family : inherit;
    font-size : medium;
    font-style : normal;
    font-variant : normal;
    font-weight : normal;
    height : auto;
    hyphens : none;
    left : auto;
    letter-spacing : normal;
    line-height : normal;
    list-style : none;
    list-style-image : none;
    list-style-position : outside;
    list-style-type : disc;
    margin : 0;
    margin-bottom : 0;
    margin-left : 0;
    margin-right : 0;
    margin-top : 0;
    max-height : none;
    max-width : none;
    min-height : 0;
    min-width : 0;
    opacity : 1;
    orphans : 0;
    outline : 0;
    outline-color : invert;
    outline-style : none;
    outline-width : medium;
    overflow : visible;
    overflow-x : visible;
    overflow-y : visible;
    padding : 0;
    padding-bottom : 0;
    padding-left : 0;
    padding-right : 0;
    padding-top : 0;
    page-break-after : auto;
    page-break-before : auto;
    page-break-inside : auto;
    perspective : none;
    perspective-origin : 50% 50%;
    position : static;
    /* May need to alter quotes for different locales (e.g fr) */
    quotes : '\201C' '\201D' '\2018' '\2019';
    right : auto;
    tab-size : 8;
    table-layout : auto;
    text-align : inherit;
    text-align-last : auto;
    text-decoration : none;
    text-decoration-color : inherit;
    text-decoration-line : none;
    text-decoration-style : solid;
    text-indent : 0;
    text-shadow : none;
    text-transform : none;
    top : auto;
    transform : none;
    transform-style : flat;
    transition : none;
    transition-delay : 0s;
    transition-duration : 0s;
    transition-property : none;
    transition-timing-function : ease;
    unicode-bidi : normal;
    vertical-align : baseline;
    visibility : visible;
    white-space : normal;
    widows : 0;
    width : auto;
    word-spacing : normal;
    z-index : auto;
    /* basic modern patch */
    all: initial;
    all: unset;
}

/* basic modern patch */

#reset-this-root {
    all: initial;
    * {
        all: unset;
    }
}

 

java scriptinizde de şimdi paylaşacağım basit bir jquery ile bu span taglarındaki kirli veriyi temizleyebilirsiniz. Tabi bu jquery'i document.ready bloğuna koymayı unutmayın. Aksi taktirde daha nesne derlenmediği için hiç bir iş yapmayacaktır.

$( "span" ).addClass( "reset-this" );

 

İyi çalışmalar.



jquery noconflict

clock Kasım 19, 2013 16:48 by author OzgurOzvaris

Değerli arkadaşlar,

Yaptığım bir uygulamada daha önce kullanmış prototype.js kütüphanesi ile jquery dialog methodunun çakıştığını tecrübe ettim. Bu nedenle bir türlü dialogbox açılmıyordu.

Eğer sizde böyle bir sorunla karşılaşırsanız bana şu kod parçası yardımcı oldu sizede yardımcı olabilir diye paylaşıyorum.

$(document).ready(function () {
    var J = jQuery.noConflict();
	
	J("#dvMove1").dialog({
        autoOpen: true,
        modal: true,
        width: 690,
        show: { effect: "blind", duration: 1000 },
        hide: { effect: "explode", duration: 1000 },
        open: function () {
            //$('.ui-dialog-titlebar').hide();
            jQuery('.ui-widget-overlay').bind('click', function () {
                jQuery('#dvMove1').dialog('close');
            });
            //window.setInterval('$(\'#dvMove1\').dialog(\'close\');', 10000);
        }
    });
});

Herkese Selamlar. 



MVC Excel Export - 2

clock Şubat 18, 2013 10:33 by author OzgurOzvaris

Değerli Arkadaşlar,

Bir önceki yazımızda SpreadsheetModel view oluşturarak excelimizi nasıl form submit işlemi sonucunda mvc üzerinden export edebileceğimizi öğrendik. Bu yazımızda ise eğer formumuzu submit etmek yerine sadece ajax mantığı ile sayfanın sadece ihtiyacımız olan datasını gönderip excel downlad nasıl yapacağımızı öğreneceğiz.

Internete baktığınız zaman ajax.post yöntemi ile gönderilen datalar sonucunda clienta gönderilen excel dosyalarının downlad edilemediğini göreceksiniz. Buna karşılık alternatif olarak kullanılan bir yöntemi çok beğendim sizlerle paylaşmak istedim.

Tabi önce kaynaklar,

http://stackoverflow.com/questions/2186562/post-to-server-receive-pdf-deliver-to-user-w-jquery

http://stackoverflow.com/questions/5742243/submitting-a-form-with-json-data-in-jquery

http://haacked.com/archive/2008/10/23/model-binding-to-a-list.aspx

ve tabiki Kendi harmanlanmış projem

MVCExcelExport.zip (2,36 mb)

Model

public class SpreadsheetModel
    {
        public String fileName { get; set; }
        public String[,] contents { get; set; }
    }
public class PersonSearchModel
    {
        public string FileName { get; set; }

        public string Field1 { get; set; }

        public DateTime Field2 { get; set; }

        public PersonSearchChieldClass ChieldClass { get; set; }
    }

    public class PersonSearchChieldClass
    {
        public string Field1 { get; set; }

        public int Field2 { get; set; }
    }

Controller

public ActionResult Index(string Cell1, string Cell2)
        {

            SpreadsheetModel mySpreadsheet = new SpreadsheetModel();
            mySpreadsheet.contents = new String[3, 2] 
                { 
                    {Cell1,Cell2}, 
                    {"Cell21","Cell22"},
                    {"Celsdfsdl31","Csdfsdell3"} 
                };

            mySpreadsheet.contents[2, 1] = "test";

            mySpreadsheet.fileName = "test.xls";
            return View(mySpreadsheet);

        }
public ActionResult Index2(string filename, string format, string content)
        {
            string[] ContentData = content.Split(';');

            SpreadsheetModel mySpreadsheet = new SpreadsheetModel();
            mySpreadsheet.contents = new String[3, 2] 
                { 
                    {ContentData[0],ContentData[1]}, 
                    {"Cell21","Cell22"},
                    {"Celsdfsdl31","Csdfsdell3"} 
                };

            mySpreadsheet.contents[2, 1] = "test";

            mySpreadsheet.fileName = filename +".xls";
            return View("Index", mySpreadsheet);

        }
public ActionResult Index3(string Paramaters)
        {
            System.Web.Script.Serialization.JavaScriptSerializer serializer = new System.Web.Script.Serialization.JavaScriptSerializer();

            PersonSearchModel PersonSearchModel_ = new PersonSearchModel();

            PersonSearchModel_ = serializer.Deserialize<PersonSearchModel>(Paramaters);




            SpreadsheetModel mySpreadsheet = new SpreadsheetModel();
            mySpreadsheet.contents = new String[3, 2] 
                { 
                    {PersonSearchModel_.Field1,PersonSearchModel_.Field2.ToShortDateString()}, 
                    {PersonSearchModel_.ChieldClass.Field1,PersonSearchModel_.ChieldClass.Field2.ToString()},
                    {"Celsdfsdl31","Csdfsdell3"} 
                };

            mySpreadsheet.contents[2, 1] = "test";

            mySpreadsheet.fileName = PersonSearchModel_.FileName + ".xls";
            return View("Index", mySpreadsheet);

        }

View

jQuery.download = function (url, data, method) {
        //url and data options required
        if (url && data) {
            //data can be string of parameters or array/object
            data = typeof data == 'string' ? data : jQuery.param(data);
            //split params into form inputs
            var inputs = '';
            jQuery.each(data.split('&'), function () {
                var pair = this.split('=');
                inputs += '<input type="hidden" name="' + pair[0] + '" value="' + pair[1] + '" />';
            });
            //send request
            jQuery('<form action="' + url + '" method="' + (method || 'post') + '">' + inputs + '</form>')
		.appendTo('body').submit().remove();
        };
    };

    jQuery.downloadJson = function (url, data, method) {
        //url and data options required
        if (url && data) {
            //send request
            var formTagStr = '<form id="DocPost" action="' + url + '" method="' + (method || 'post') + '"> <input type="hidden" name="Paramaters" id="Paramaters"  /> </form>';

            jQuery(formTagStr).appendTo('body');

            //alert(data);

            $("#DocPost #Paramaters").val(data);

            $("#DocPost").submit().remove();
        };
    };
function test() {
        var ContentData = "5;test";

        ExcelExportAjaxPost('/ExcelExport/Index2', 'filename=mySpreadsheet&format=xls&content=' + ContentData);
    }

    function test2() {

        var PersonSearchChieldClass =
        {
            Field1: "Chield",

            Field2: 15 
        }

        var PersonSearchModel = {

            FileName : "test",

            Field1: "Master",

            Field2:"18.02.2013",

            ChieldClass: PersonSearchChieldClass
        }

        ExcelExportAjaxPost2('/ExcelExport/Index3', JSON.stringify(PersonSearchModel));


    }

    function ExcelExportAjaxPost(path, data) {

        $.download(path, data);
    }

    function ExcelExportAjaxPost2(path, data) {

        $.downloadJson(path, data);
    }
<h2>@ViewBag.Message</h2>
<p>
    Excel Export Yöntemleri
</p>

<a href="./ExcelExport?Cell1=aaa&Cell2=111"> Normal Excel çıktı Al</a>
<br />
<br />
<a  href="#" onclick="test()"> Ajax Excel çıktı Al (form data)</a>
<br />
<br />
<a  href="#" onclick="test2()"> Ajax Excel çıktı Al (json data)</a>

Burada bir inceliği belirtmem lazım. "downloadJson" javascript metoduna dikkat ederseniz dinamik olarak oluşturulan formun içinde json datayı taşıyan hidden parameters html elementinin value değerinin içine string olarak değeri yazmak yerine  $("#DocPost #Paramaters").val(data); şeklinde value değerini set ettiğimi göreceksiniz. Sebebi Gidip gelen data string olduğu için alt classlar için " ' " değeri kullanılıyor ancak direk value ya set ederseni bu tırnaklar çakışmaya neden oluyor.

Herkese iyi çalışmalar dilerim.

 

 



jquery iframe data yönetimi - 2

clock Aralık 18, 2012 09:32 by author OzgurOzvaris

Bir önceki yazımızda iframe içine bir div koyarak içeriğine erişip değiştirmiştik. Şimdi ise daha farklı bir yaklaşım dan bahsedeceğim.

Kaynağına buradan erişebilirsiniz.

<html>
  <head>
    <script type="text/javascript" src="jquery.js"></script>
    <script>
      $(document).ready(function(){
        var locations = ["http://webPage1.com", "http://webPage2.com"];
        var len = locations.length;
        var iframe = $('#frame');
        var i = 0;
        setInterval(function () {
            $(iframe).attr('src', locations[++i % len]);
        }, 30000);
      });
    </script>
  </head>
  <body>
    <iframe id="frame"></iframe>
  </body>
</html>



Örnekte görüldüldüğü üzere

$(iframe).attr('src', '...');.

Komutu ile iframe'in src tagını değiştirebiliyoruz. Örnekte birde setinterval kullanılmış. Sebebi asenkron olarak iframe yüklendikten sonra srcyi değiştirebilmek. Bazen direk olarak bu değişikliği yapmaya çalışırsanız daha iframe derlenmediği için sonuç alınamayabilir.

İyi çalışmalar



jquery iframe data yönetimi

clock Aralık 11, 2012 10:15 by author OzgurOzvaris

iframe içindeki datanın yönetilebilmesi için güzel bir örnek buldum.

http://simple.procoding.net/2008/03/21/how-to-access-iframe-in-jquery/

<iframe id="iframeID" ...></iframe>

iframe içine bir div yerleştirilir.

<div id="someID">Hello world!</div>

sonra dive erişilerek data yönetilir.

$('#iframeID').contents().find('#someID').html();


Hakkımızda  AboneOl 

Blog Yayınımıza Hoşgeldiniz.

Month List

RecentPosts

Sign In