יום שלישי, 26 בפברואר 2013

קבלת פרטי סרטון YouTube

המשתמש מוסיף כתובת של YouTube ואנחנו רוצים לוודא שבכלל המשתמש הזין כתובת ראויה, ושנית פרטים אודות הסרטון להציג למשתמש.


 var idYouTube = document.getElementById(.....).value;
     idYouTube = idYouTube.trim();

           

$.ajax({ //check if is real id youtube
       url: "http://gdata.youtube.com/feeds/api/videos/" + idYouTube + "?alt=json",
       dataType: "jsonp",
       success: function (data) {InsertYoutube(data, idYouTube)}, 
        error:function (){ alert("קוד מזהה הסרטון אינו תקין, אנא נסה שוב");} 
});
function (data, idYouTube){}

במידה ומספר מזהה של הסרט אמיתי נקבל מחרוזת בפורמט jsonp שנוכל להמיר לאובייקט.

לשם קבלת דוגמא למחרוזת שאנחנו מקבלים, ננסה להכניס מספר מזהה אמיתי של סרטון:
http://gdata.youtube.com/feeds/api/videos/v1uyQZNg2vE?alt=json

פורסם על ידי ב- אין תגובות:
תוויות: ,

כפתור מייצר כפתור בJS

בפוסט הקודם למדנו להטמיע אלמנטים בתוך הדף, כעת נלמד עוד פקודות שמבצעות אותו דבר, רק היתרון שבכזו שיטה אם נייצר אלמנט כפתור - הוא יעבוד. בדוגמה נראה כפתור שמייצר כפתורים:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>

<script type="text/javascript">
    function addLevel1() {

        var element = document.createElement("input");

        element.setAttribute("type", "button");
        element.setAttribute("value", "button");
        element.setAttribute("name", "button");
        element.setAttribute("onclick", "javascript:addLevel2()"); //work
        // element.onclick = "javascript:addLevel2()";  // not work

        var foo = document.getElementById("fooBar");
        foo.appendChild(element);
    }

    function addLevel2() { alert("YES!"); }
</script>

<body>
<input type="button" value="click" onclick="javascript:addLevel1()" />
<div id="fooBar"> The text </div>
</body>
</html>
פורסם על ידי ב- אין תגובות:
תוויות:

יום רביעי, 20 בפברואר 2013

מתי FORM מבאס?

עד כמה שאני מבין את הקטע של winForn, שבדף HTML רגיל אם נרצה לשלוח מידע לשרת בצורה הבסיסית ביותר נשתמש בתגית <from>.
אמרו החברה ממיקרוסופט בא ניקח צעד קדימה את הקטע של צד לקוח ושרת, ונהפוך גם את הצד לקוח כמעט לצד שרת.
לכן כדי שהשרת יכיר את האלמנטים שנמצאים בדפדפן נוסיף הרבה תגויות ותוויות, לכן לדוג' אם הDIV שלכם יהיה כתוב כך:
<div id="select">
לאחר רינדור של הדף דפדפן בשרת הוא יראה כך:
<div id="MainContent_select">

מתי זה מבאס?
כשנרצה להוסיף אלמנטים בדף, ושהשרת יכיר אותם. הדוגמא הפשוטה, נרצה להוסיף תיבת טקסט והשרת יכיר אותה. מכיוון שהרינדור נעשה בהתחלה - לא נוכל להוסיף לאלמנט את המאפיין החשוב runat=server.
לא ניסיתי לבצע פתרון באמצעות רינדור של הדף מחדש (postBack), אלא מצאתי פתרון אחר שאשמח לספר:
בלחיצה על הכפתור ששולח את הטופס עם כל הנתונים, אני מבצע שליחה לשתי פונקציות:
הראשונה לJS בדף שמטפלת בכל האלמנטים שנוספו ואוספת מהם את המידה. ואז את המידע מעבירה לHiddenField בדף.
השנייה שחוזרת אל השרת, ולוקחת מהHiddenField את כל הטקסט שנאסף.
בדף יהיה:
<div id="p1">בלה בלה בלה</div>
<asp:HiddenField ID="AllText" runat="server"/>

כפתור השליחה (בעל 2 הפונקציות) יראה כך:
 <asp:Button  ID="buttonCreate" runat="server" Text="צור"   OnClientClick="javascript:getAllValues();" OnClick="buttonCreate_Click"/>

והJS יראה כך:

function getAllValues() {
            var AllText = document.getElementById("MainContent_p1").innerText;
            document.getElementById("MainContent_AllText").value = AllText;
        }
פורסם על ידי ב- אין תגובות:
תוויות:

הוספת אלמנטים בדף בצד הclient

כולנו אוהבים להזריק (רק מחרוזות) לתוך הדף HTML טקסט באמצעות הפקודה הנפלאה innerText, ועוד יותר כיף להזריק ממש אלמנטים עם innerHTML.

 אשמח לשתף אתכם באפשרות נוספת להוסיף אלמנטים בצד הקליינט, פקודה חביבה בשם createElement (עם כזה שם אי אפשר לצפות למשהו אחר...)

 נבנה אלמנט מאחת התגיות של HTML ונוסיף אותו איפשהו בDOM, לדוג' אחרי לחיצה על אייקון של טקסט.

 אני השתמשתי בהוספת אלמנט TEXTARA לאחר לחיצה על כפתור:

var moneP = 1;

 function addText(idDiv) {

 var newTextarea = document.createElement("textarea");

            newTextarea.rows = 10;
            newTextarea.className = "textHide"; //name of class
            newTextarea.id = "p" + moneP;
            newTextarea.name = "p" + moneP;
            newTextarea.value = " פיסקה" + moneP;
כעת נבחר אחרי איזה אלמנט בDOM הקיים:            
            var my_div = document.getElementById("idDiv");
            
(בשביל לבחור היכן הוא יצוץ שלחתי בהתחלה את הID של האלמנט שבו הוא נמצא בדף, כדי להוסיף אותו אחריו)

ואז נצרף אותו לדף:
            my_div.appendChild(newTextarea);

 אפשרות נוספות להוסיף, אם נרצה את האלמנט אחרי הDIV


            my_div.insertBefore(newTextarea, my_div.firstChild)
 }

כמובן בדף נוסיף אלמנט שמבצע שליחה, ששולח בתוכו גם את ID שלו:
<img src=".." id="img" onclick="addText("img")"/>

פורסם על ידי ב- אין תגובות:
תוויות:

אופס שכחנו את הfrom

אם יש לכם בדף אלמנטים של ASPNET, וקיבלתם את השגיאה הבאה:
Control 'MainContent_buttonCreate' of type 'Button' must be placed inside a form tag with runat=server.

כנראה שכחתם והורדתם בטעות את התגית <from>

 אז קדימה להוסיף:
 <form id="Form1" runat="server">
 </form>
פורסם על ידי ב- אין תגובות:
תוויות:

> הפושע, JS שונא אותו

לא יודע למה, אבל בהזרקה של INNERHEML לתוך אלמנט בדף, אם נרשום כך:

document.getElementById("add").innerHTML = "<li>"
                + "</li>"

נקבל את השגיאה הבאה:
The server tag is not well formed.

הפתרון הפשוט הוא פשוט לשים תו &lt;

  + "&lt;/li"
פורסם על ידי ב- אין תגובות:
תוויות:
הירשם ל- רשומות (Atom)