jquery post call not working with slash at end of the url

example url:
Target is not to show .php extension, but content stop working when page/url is open with a slash at the end.
http://ift.tt/1F9Oyt6 - form is working with this url
http://ift.tt/1EnOLSI - form is not working with this url

Folder & files:
|
| /js/custom.js
| /manager/create.php
| /manager/creategetpostdata.php
| /manager/.htaccess

Content on custom.js

$(window).load(function() {
    // get post code data
    $('.contentfinder').on('keyup', function(e){
        var xyz = $(this).closest('.contentRow');
        //alert( "success" );
        $.post("../manager/creategetpostdata.php", xyz.find('.contentfinder').serialize(),  function(response) {
            //alert( "success" );
            xyz.children('.showPostData').html(response);
            xyz.children('.showPostData').show();
        });

    });

});

input form on create.php file:

                    <div class="contentRow">
                        <input type="text" name="inputdata" class="form-control contentfinder" placeholder="" />
                        <div class="showPostData"></div>
                    </div>

content on creategetpostdata.php

<?php echo 'hello, what the hell wrong with you. just show content now!'; ?>

content on .htaccess file

Options +FollowSymLinks -MultiViews
RewriteEngine On

RewriteCond %{THE_REQUEST} \s/+(.+?)\.php\?([^=]+)=([^\s&]+) [NC]
RewriteRule ^ /%1/%2/%3? [R=302,L,NE]

RewriteCond %{THE_REQUEST} \s/+(.+?)\.php\s [NC]
RewriteRule ^ /%1 [R=302,L,NE]

RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]

RewriteCond %{REQUEST_FILENAME}.php -f
RewriteRule ^(.+?)/?$ $1.php [L]

any help? thanks in advance.

Section will be overlapped by header when come from another page

I have the following problem. What I want is when the user clicks in the navigation bar on "Contact" it will link to the contact page. This is a single page. When you are on contact and then clicking at the bottom of the page on, for example "Over ons" it should be redirect to the homepage (single page) and stop at that section. This works, but when you come from another page, the current section is overlapped by the header.

The jQuery code will not use the offset of the header, only when you are navigation inside the index.html.

Is there a way to fix the issue, so the section will not be overlapped by the header?

Live example:

http://ift.tt/1KRmFou

Wiki hosted on Pbworks and jQuery?

I added jquery and another script at the bottom of my wiki page. However, if I can get node contents with regular javascript (getElementBy…), it doesn't work with jQuery ($("selector") where it always return null. Any idea why ?

You can see the console log here : http://ift.tt/1KRmFoq

And here is my code :

<script src="http://ift.tt/1yCEpkO"></script>

<script>
$(window).load(function(){
console.log(document.getElementById("wikicontent").innerHTML);
console.log($("#wikicontent").html());
});
</script>

Remove the Vimeo placeholder from Iframe

Are there any tricks to remove the placeholder/poster from an Iframe when embedding a video from Vimeo?

I have tried unwrapping the ".flideo" div to remove it's parent div, which is the ".cover" div which contains the placeholder image as a background image. I also tried to empty the "background-image" value, but that didn't work either.

Here is the generated source code:

<div class="video cover" data-thumb="http://ift.tt/1KRmE3R" style="background-image: url(http://ift.tt/1KRmE3R);">
<div class="flideo cloaked" style="-webkit-transform: scale(1.00023496240602); transform: scale(1.00023496240602);">
        <video x-webkit-airplay="allow" preload="metadata" src="http://ift.tt/1zR83Vk"></video> 
</div>
</div>

Jquery simple accordian

I have simple Jquery accordian, but i have problem of changing header color when tab is opened

Here is my code

HTML

<dl class="accordion-modal">

    <dt><a href=""><header>FIRST</header></a></dt>
            <dd class="active-accordian">FIRST CONTENT</dd>

<dt><a href=""><header>SECOND</header></a></dt>
<dd>SECOND CONTENT</dd>

</dl>

JS

(function($) {

  var allPanels = $('.accordion-modal > dd').hide();
  $('.accordion-modal > .active-accordian').show();

  $('.accordion-modal > dt > a').click(function() {
      $this = $(this);
      $target =  $this.parent().next();

      if(!$target.hasClass('active')){
         allPanels.removeClass('active').slideUp();
         $target.addClass('active').slideDown();
      }

    return false;
  });

})(jQuery);

CSS

header{
    background-color:green;
}

.active{
    background-color:red;
}

.active-header-color{
    background-color:blue;
}

What i need when some content is show to add class to that header? Here is working fiddle http://ift.tt/1zR82QY

how can I get the date picker to start select from at least 8 previous days back from this days date?

I try to make a date picker where you can only choose dates from 8 days left. If we have the date 09 / 05-2015 you can not select (8,7,6,5,4,3,2) but you can choose the 01 / 05-2015 and go down. How can i make that?

$(document).ready(function() {

$(".date-picker").datepicker({       
    todayHighlight: true,   
});

$(".date-picker").datepicker().datepicker("setDate", new Date()); //sets the todays date in the input field
$(".date-picker").on("change", function () {
var id = $(this).attr("id");
var val = $("label[for='" + id + "']").text();
$("#msg").text(val + " changed");
});

}); // end of document ready

Ajax in .NET for form editing

I have a form where user can create a complex object. When click on "Add action", then an Ajax call is made in JS, and I use a partialview as return, then I show it as accordion in the form and all is OK for that creation form.

Now, I want to make the same form but for editing, so I have my basic form that works well, but I'm like blocked for the edit form, especially for the partiaviews called by pressing the "Add action" button ...

In the Edit Form, I have a List that contains all the data of each "add action", How can I handle/load/show this in the view?

Can I make one include of the partialView (and passing data) by only using C#?

here is what I've did:

Finally, this is my ajax call from Create JS:

    var x = 0; // problem count
    // method called when user click on add problem
    $(".add_action_button").click(function (event) {
        event.preventDefault();

        // ajax call to partial with prefix
        var prefix = "actionList[" + x + "]";
        $.ajax({
            url: "@Url.Action("AddAction", "Home")",
            cache: false,
            type: "GET",
            dataType: "html",
            traditional: true,
            data: { prefix: prefix, accordioncounter: x + 1 },
            success: function (result) {
                // lot of stuff
            }
        });
    });

AddAction Controller:

public ActionResult AddAction(string prefix, int accordioncounter)
        {
            ViewBag.Prefix = prefix;
            ViewBag.accordioncounter = accordioncounter;

            return PartialView("_AddAction", new ActionViewModel());
        }

_AddAction View:

@model MyModel.ActionViewModel

@{
    if (!string.IsNullOrEmpty(ViewBag.Prefix))
    {
        ViewData.TemplateInfo.HtmlFieldPrefix = ViewBag.Prefix;
    }
}
...

And I have this object in my model from my Edit view:

public List<ActionViewModel> actionList { get; set; }

Thanks in advance for your help :-)

Stop or destroy a jQuery plugin

I have a push menu and it has an animated gradient but I only want it to animated/play when the menu is open, obviously for performance reasons.

My gradient plugin code is as follows:

// Animated Gradient
var colors = new Array(
   [62,35,255],
   [60,255,60],
   [255,35,98],
   [45,175,230],
   [255,0,255],
   [255,128,0]);

var step = 0;
var colorIndices = [0,1,2,3];

var gradientSpeed = 0.001;

function updateGradient()
{

if ( $===undefined ) return;

  var c0_0 = colors[colorIndices[0]];
  var c0_1 = colors[colorIndices[1]];
  var c1_0 = colors[colorIndices[2]];
  var c1_1 = colors[colorIndices[3]];

  var istep = 1 - step;
  var r1 = Math.round(istep * c0_0[0] + step * c0_1[0]);
  var g1 = Math.round(istep * c0_0[1] + step * c0_1[1]);
  var b1 = Math.round(istep * c0_0[2] + step * c0_1[2]);
  var color1 = "rgb("+r1+","+g1+","+b1+")";

  var r2 = Math.round(istep * c1_0[0] + step * c1_1[0]);
  var g2 = Math.round(istep * c1_0[1] + step * c1_1[1]);
  var b2 = Math.round(istep * c1_0[2] + step * c1_1[2]);
  var color2 = "rgb("+r2+","+g2+","+b2+")";

  $('#primary-menu').css({
    background: "-webkit-gradient(linear, left top, right bottom, from("+color1+"), to("+color2+"))"}).css({
    background: "-moz-linear-gradient(left, "+color1+" 0%, "+color2+" 100%)"});

step += gradientSpeed;
if ( step >= 1 )
{
    step %= 1;
    colorIndices[0] = colorIndices[1];
    colorIndices[2] = colorIndices[3];

    colorIndices[1] = ( colorIndices[1] + Math.floor( 1 + Math.random() * (colors.length - 1))) % colors.length;
    colorIndices[3] = ( colorIndices[3] + Math.floor( 1 + Math.random() * (colors.length - 1))) % colors.length;

}
}

I have managed to only play the animated gradient when I open the menu but I'm having trouble stopping it when I close the menu, how can I do this?:

showmenu.onclick = function() {

    if ($('nav').hasClass('visible')) {

        // Closed menu code here

    } else {

        // Opened menu code here 

        // Initialise plugin when menu is open
        setInterval(updateGradient,10);

    }

};

How to add a "random" button that applies to two drop down menus

I have created a page with two drop-down menus containing various values. Now I would like to add a "randomize" button. When clicked, this button would select any of the values at random in both fields. (the values are also copied on a box above each menu).

Project idea for drop down menus

So far I've coded the menus and the words display in the boxes above them when the user selects them. But now I'm trying to add a randomise button that would put any of the values in the drop down as selected and of course displayed in the above text box. Ideally, more values in the drop-down menus would be added every once in a while without making the script dysfunctional... and ideally it would all be contained in a HTML file (calling for JQuery or javascript is ok).

I've looked at this but it doesn't apply.

I also looked at this but it's not really a feature that the user activates.

Very grateful if anyone can help! Thanks

Dropdown not sticking when navigating back

Not sure what I am doing wrong but the info that I select does not stick anymore when I navigate to another page and then go back.

This is code that works. It's for a a regular attendee:

 <div class="linegroup">
                                                <label class="notrequired" id="dietaryNeed_g1">Meal Preferences</label>
                                                <select name="dietaryNeedValue_g1" id="dietaryNeedValue_g1" class="lbl-col-right" onclick="mealPrefs();" >                              
                                                    <optgroup label="Please Select Your Meal Preferences" >  
                                                        <%--<%=cache.getValueListHTML("ALL_MEALCODE", addSelect, d)%>--%>
                                                        <option value=""></option>
                                                        <option value="DAIRY" <%if(formFields.getDisplayValue("dietaryConsiderationsOther_g1").equalsIgnoreCase("Dairy-Free")){ %> selected <%}%> >Dairy Free</option>
                                                        <option value="FOODALLE" <%=formFields.getSelectValue("dietaryNeedValue_g1", "FOODALLE")%> >Food Allergy</option>
                                                        <option value="KOSHER" <%=formFields.getSelectValue("dietaryNeedValue_g1", "KOSHER")%>>Kosher</option>
                                                        <option value="HALAL" <%=formFields.getSelectValue("dietaryNeedValue_g1", "HALAL")%>>Halal</option>
                                                        <option value="VEGAN" <%=formFields.getSelectValue("dietaryNeedValue_g1", "VEGAN")%>>Vegan</option>
                                                        <option value="VEGTRIAN" <%=formFields.getSelectValue("dietaryNeedValue_g1", "VEGTRIAN")%>>Vegetarian</option>
                                                        <option value="GLUTFREE" <%=formFields.getSelectValue("dietaryNeedValue_g1", "GLUTFREE")%>>Gluten-Free</option>
                                                        <option value="OTHER" <%=formFields.getSelectValue("dietaryNeedValue_g1", "OTHER")%>>Other</option> 
                                                    </optgroup>
                                                </select>

                                            </div>

This is the code for a guest. For some reason this drop down disappears whenever I go to the next page and then navigate back.

<div class="linegroup">
                        <label class="required" id="dietaryNeed_g<%=i%>">Meal Preferences</label>
                        <select name="dietaryNeedValue_g<%=i%>" id="dietaryNeedValue_g<%=i%>" data-parsley-trigger="focusout" class="firstselect lbl-col-right"  onchange="mealPrefs();" novalidate >
                            <optgroup label="Please Select Your Meal Preferences" >  
                                <%--<%=cache.getValueListHTML("ALL_MEALCODE", addSelect, d)%>--%>
                                <option value=""></option>
                                <option value="DAIRY" <%if(formFields.getDisplayValue("dietaryConsiderationsOther_g"+ i).equalsIgnoreCase("Dairy-Free")){ %> selected <%}%> >Dairy Free</option>
                                <option value="FOODALLE" <%=formFields.getSelectValue("dietaryNeedValue_g" + i, "FOODALLE")%> >Food Allergy</option>
                                <option value="KOSHER" <%=formFields.getSelectValue("dietaryNeedValue_g" + i, "KOSHER")%>>Kosher</option>
                                <option value="HALAL" <%=formFields.getSelectValue("dietaryNeedValue_g" + i, "HALAL")%>>Halal</option>
                                <option value="VEGAN" <%=formFields.getSelectValue("dietaryNeedValue_g" + i, "VEGAN")%>>Vegan</option>
                                <option value="VEGTRIAN" <%=formFields.getSelectValue("dietaryNeedValue_g" + i, "VEGTRIAN")%>>Vegetarian</option>
                                <option value="GLUTFREE" <%=formFields.getSelectValue("dietaryNeedValue_g" + i, "GLUTFREE")%>>Gluten-Free</option>
                                <option value="OTHER" <%=formFields.getSelectValue("dietaryNeedValue_g" + i, "OTHER")%>>Other</option> 
                            </optgroup>                                         
                        </select>
                    </div>

Any ideas on how to make the Guest dropdown stick?

ajax uploading multiple images not showing multiple filenames

I have this code I'm using to upload multiple images via ajax call. In console I can see the combined data being sent but not the multiple file names. Im not sure when sending multiple images what I should see in the network-paramaters view in console.

This is what I'm seeing in console

-----------------------------82392211927416 Content-Disposition: form-data; name="action"

add_photo -----------------------------82392211927416 Content-Disposition: form-data; name="image"; filename="about-vimeo.png" Content-Type: image/png

PNG

My jquery

<script>
function _(el){
    return document.getElementById(el);
}
function uploadFile(){
    var checked_box = $('input:checkbox:checked').val();
    var file = _("image").files[0];
    var imageFile =$("#image").val();
//       alert(file.name+" | "+file.size+" | "+file.type);
    var formdata = new FormData();
    formdata.append( 'action','add_photo');
    formdata.append("image", file);
    jQuery.each($("input[name^='image']")[0].files, function(i, file) {
    formdata.append('photo['+i+']', file);
    }); 
//  formdata.append("video", vidName);
    var ajax = new XMLHttpRequest();
    ajax.upload.addEventListener("progress", progressHandler, false);
    ajax.addEventListener("load", completeHandler, false);
    ajax.addEventListener("error", errorHandler, false);
    ajax.addEventListener("abort", abortHandler, false);
    ajax.open("POST", "includes/add_photo.inc.php?checked_box="+checked_box);
    ajax.send(formdata);
}
function progressHandler(event){
    _("loaded_n_total").innerHTML = "Uploaded "+event.loaded+" bytes of "+event.total;
    var percent = (event.loaded / event.total) * 100;
    _("progressBar").value = Math.round(percent);
    _("status").innerHTML = Math.round(percent)+"% uploaded... please wait";
}
function completeHandler(event){
    _("status").innerHTML = event.target.responseText;
    _("progressBar").value = 0;
}
function errorHandler(event){
    _("status").innerHTML = "Upload Failed";
}
function abortHandler(event){
    _("status").innerHTML = "Upload Aborted";
}
</script>

The html form

<div id="photos">

    <form enctype="multipart/form-data" name="add_photo"  class="add_photo">
     <?php 
            while($row = mysqli_fetch_array($result4)){ ?>  

      <div class="photoAlbum_list">     

      <div id="#photoAlbumId" class="albumPhoto"><?php echo $row['album_name'];?></div>

      <img src="image/mandinga_folder.png" class="folder"/>

      <input type="checkbox" class="photoAlbumId" id="photoAlbumList" value="<?php echo $row['albumid'];?>"/>

      </div>

      <?php } ?>

    </form>

<div id="addPhotoInstruction" style="display:block">Please choose an Album to Upload Photo's to</div>

<input name="image[]" id="image" type="file" multiple style="display:none" value=""/>

<input onClick="uploadFile()" type="button" id="add_photo_but" class="add_photo_but" name="add_photo_but" value="Add Photo" form="add_photo" style="display:none"/> 

<progress id="progressBar" value="0" max="100" style="display:none"></progress>

<h3 id="status" style="display:none"></h3>

<p id="loaded_n_total" style="display:none"></p>

</div>

Can anyone confirm if this is what would be seen in multiple image upload and if not correct how I can show in the formdata the different file names I expected to see

How to make an accept condition for droppable td to accept only the class within the same row?

I have this droppable td.

$('#ScrumTable td').droppable({
    hoverClass: 'ondrop',
    accept: '.card',
    drop: function(event, ui){
        $(this).append($(ui.draggable));
        ui.draggable.css("top",$(this).css("top"))
        ui.draggable.css("left",$(this).css("left"))
        if(  parseInt( $(this).index() ) + 1 == 1){
            ui.draggable.addClass('backlog-card');
            ui.draggable.removeClass('inprogress-card');
            ui.draggable.removeClass('tovalidate-card');
        }
        else if(  parseInt( $(this).index() ) + 1 == 2){
            ui.draggable.addClass('inprogress-card');
            ui.draggable.removeClass('backlog-card');
            ui.draggable.removeClass('tovalidate-card');
        }
        else if(  parseInt( $(this).index() ) + 1 == 3){
            ui.draggable.addClass('tovalidate-card');
            ui.draggable.removeClass('inprogress-card');
            ui.draggable.removeClass('backlog-card');
        }
    }
});

The droppable td above must only accept the class that is within the same row. What condition can I put to the accept attribute of the droppable td?

Uncaught ReferenceError: RSVP is not defined , error while using require.js with rsvp

I am working on a demo showing the error handling in promises using rsvp.js. Everything seemed fine, till I used the CDN url for rsvp.js in a tag. Now since I have require.js for module loading in my application, I tried loading the rsvp.js module via require js syntax. In the Chrome network tab, I see the rsvp.js module getting loaded properly as well, but I get the below error in console,

Uncaught ReferenceError: RSVP is not defined.

require(["bootstrap","js/rsvp"], function(bootstrap,rsvp) { 
$(document).ready(function () {
    function getEmployeeDetails() {
        var radioValue1 = $("input[name='option1']:checked").val();
        var requrl;
        if (radioValue1 == "fail") {
            requrl = "../../../testservice/getEmployeeIdss";
        } else {
            requrl = "../../../testservice/getEmployeeId";
        }
        return new RSVP.Promise(function (resolve, reject) {
            $.ajax({
                url: requrl,
                success: function (response) {
                    try {
                        $('#successBoard').append("<b> <i> Ajax Call 1 Succeeded! </i>  </b><br/>" + "Employee ID:" + response.stuId + "<br/>");
                        resolve(response.stuId);
                    } catch (e) {
                        reject(e);
                    }
                },
                error: function (xhr, ajaxOptions, thrownError) {
                    console.log('Ajax 1 failed : Rejecting Promise 1');
                    $('#errorBoard').append("<b> <i> Ajax 1 failed : Rejecting Promise 1</i>  </b><br/>");
                    reject(thrownError);
                }
            });

        });
    }

typeahead doesnt process all bloodhound results

So I'm using typeahead for suggestions while typing. All is working like a charm except for one thing: It only shows results. I'm using a remote search. When i go directly to the page it displays 10 results like expected (query set to max 10 rsults). If i alert data.length from bloodhound it also shows 10 search results. I have checked via alert on the begining and alert on the ending if there was something wrong but all alerts where ok.

Here is my JQ:

var producten = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    limit: 100,
    remote: {
        'cache': false,
        url: 'ajax/mysite.php?query=%QUERY',
        wildcard: '%QUERY',
        filter: function (data) {
            //alert(data.length); when alert is active it shows that the length is 10
            return data;
        }
    }
});

producten.initialize();
var i=0 //Have this for the loops to check if all the alerts where coming trough
$('.menuTypeahead').typeahead({
    highlight: true
}, {
    name: 'menuZoek',
    source: producten.ttAdapter(),
    displayKey: 'artikelNaam',
    templates: {
        suggestion: function (producten) {
            i++;
            alert(i+".1"); //begin alert
            var resultaat=''
            if(producten.artikelNaam=='geen suggestie'){
                resultaat='<strong>' + producten.artikelNaam + '</strong>';
            } else {
                if(producten.foto==1){
                    imgLink='img/'+producten.barcode+'.jpg';
                } else {
                    imgLink='css/pics/no_image.jpg';
                }
                if(producten.vers==1){
                    $vers='(vers)';
                } else {
                    $vers='';
                }
                $("#menuSearchLink").val("artikel.php?barcode="+producten.barcode);
                resultaat= '<div>'+
                    '<a href="artikel.php?barcode=' + producten.barcode + '&refer='+temp+'">'+
                        '<div class="search-image">'+
                            '<img src="'+imgLink+'" style="height:50px;width:auto">'+
                        '</div>'+
                        '<div style="min-height:50px;">'+
                        '<strong>' + producten.artikelNaam + ' '+$vers+'</strong>' +
                            '<br>' + producten.inhoud + ' ' + producten.type + ' - ' + producten.artikelMerk + 
                        '</div>'+
                    '</a>'+
                '</div>';
            }
            alert(i+".2"); //end alert
            return resultaat;
        }
    }
});

The JSON i get back is as follows:

[{"ID":"266","barcode":"8711577077020","artikelNaam":"(combi)magnetronreiniger","artikelMerk":"HG","inhoud":"500","type":"ml","foto":"0","vers":"0","voorraadID":null},
{"ID":"329","barcode":"8710400307549","artikelNaam":"3 Laags Tissues","artikelMerk":"Albert Heijn","inhoud":"80","type":"stuks","foto":"0","vers":"0","voorraadID":"188"},
{"ID":"261","barcode":"5000204676150","artikelNaam":"5in1 Laminaatreiniger","artikelMerk":"Pledge","inhoud":"750","type":"ml","foto":"0","vers":"0","voorraadID":null},
{"ID":"14","barcode":"8718452111725","artikelNaam":"8 Goudeerlijk Witte Bollen","artikelMerk":"Jumbo","inhoud":"8","type":"stuks","foto":"0","vers":"0","voorraadID":null},
{"ID":"337","barcode":"8710400504498","artikelNaam":"Aardappelschijfjes Voorgekookt","artikelMerk":"Albert Heijn","inhoud":"450","type":"g","foto":"0","vers":"0","voorraadID":"195"},
{"ID":"72","barcode":"8718449034150","artikelNaam":"Acacia Honing","artikelMerk":"Jumbo","inhoud":"350","type":"g","foto":"0","vers":"0","voorraadID":null},
{"ID":"338","barcode":"5410036501726","artikelNaam":"Allesreiniger ","artikelMerk":"Dettol","inhoud":"1","type":"l","foto":"0","vers":"0","voorraadID":null},
{"ID":"283","barcode":"8710400771753","artikelNaam":"Appelsap uit Geconcentreerd Sap","artikelMerk":"Albert Heijn","inhoud":"1","type":"l","foto":"0","vers":"0","voorraadID":null},
{"ID":"315","barcode":"8718449066762","artikelNaam":"Augurken Fijn","artikelMerk":"Jumbo","inhoud":"340","type":"g","foto":"0","vers":"0","voorraadID":null},
{"ID":"40","barcode":"5410231103404","artikelNaam":"Backin Baking Powder","artikelMerk":"Dr. Oetker","inhoud":"5","type":"stuks","foto":"0","vers":"0","voorraadID":null}]

Also when searching other query's it gives back 5 results only in the dropdown. Hope someone has some clue about what is wrong with it.

How do you .unwrap() an element specified number of levels

Is there a way to use Jquery's .unwrap() multiple times without copying and pasting? It'd be nice if it could accept an argument or something like: .unwrap(4) but it doesn't. Is there a more clever solution to achieving the following:?

$(".foo a").unwrap().unwrap().unwrap().unwrap();

<li class="foo">
    <div>
        <ul>
            <li>
                <div>
                    <a href="#">Link</a>
                </div>
            </li>
        </ul>
    </div>
</li>

Second AJAX call data undefined

I have 2 ajax JSON calls with the second URL being a variable (nextURL) passed from the first.

The second ajax function registers the NextURL variable as tested with an Alert(nextURL) but I do not got any data. Error console states that $('#gameBoxleft').html(data.post.title); data is undefined.

I'm not sure if I have done something wrong with the second ajax call?

// -------------- MAIN AJAX CALL FUNCTION  --------------
function call_ajax(url, elem) {

    $.ajax({
        url: url,
        method: "GET",
        data: {json: 1},
        dataType: "JSON"
    })


    // -------------- FUNCTIONS FOR AFTER AJAX DONE --------------
    .done(function (data) {

        // Append the box
        appendBox(elem);

        // LOAD GAMEBOX JSON DATA

        $("#game-name").html(data.post.title);
        $("#game-reels").html(data.post.custom_fields.reels);
        $("#game-paylines").html(data.post.custom_fields.paylines);
        $("#game-minBet").html(data.post.custom_fields.min_bet);
        $("#game-maxBet").html(data.post.custom_fields.max_bet);
        $("#game-jackpot").html(data.post.custom_fields.jackpot);
        $("#game-info").html(data.post.custom_fields.game_info);


    var nextURL = (data.previous_url) + "?json=1";
            var prevURL = (data.next_url);

          processTwo(nextURL);

    });
}


// -------------- NEXT OBJEXT AJAX CALL FUNCTION  --------------
function processTwo(nextURL) {

alert(nextURL);
            $.ajax({
        url: 'nextURL',
        method: "GET",
        data: {json: 1},
        dataType: "JSON"
    })

            .done(function() {

          $('#gameBoxleft').html(data.post.title);
    });
}

I want to display the text on clicking on the input

Okay so I am trying display the text on focus in the input field all i've done so far is this.

HTML

<form>
                <span id="name">
                Name : <input type="text" class="name" name="name" title="lust"/><br />
                <span>ENTER NAME</span>
                </span>
                <span id="mail">
                E-mail : <input type="text" class="mail" name="mail" /><br />
                <span>ENTER NAME</span>
                </span>
                <input type="submit" class="button" />
            </form>

CSS

#forms {
    position: relative;
}

#name span, #mail span {
    display: none;
}

input[type='text']{
    border: 1px solid #008008;
    border-radius: 5px;
    background: #f1f1f1;
    padding: 10px;
    margin-bottom: 10px;
}

input[type='text']:focus {
    background: #fff;
    border: 1px solid #008080;
}

.assistant {
    position: abosolute;
    top: 0px;
}

Can anyone help me achieve this am I doing wrong or I am in correct path? I will be greatful if someone actually help me out.

Flexslider in Drupal 7 breaks JQuery

I've been working with Flexslider in Drupal 7, but when I try to create a page with a slider, the JQuery on the entire page stops working.

flexslider.load.js?no0zdc:41 
Uncaught TypeError: $(...).flexslider is not a function

That's the error message that I receive. I've already uploaded the javascript library files provided by WooThemes and I've checked to make sure that they have been uploaded to the correct folder (/sites/all/libraries/flexslider/).

I'm a bit stuck. My best guess is that there is a conflict in the way JQuery is being called on the page since JQuery works on every other page, so for reference, I have posted some code from my header below:

<script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.min.js"></script><style type="text/css"></style>
<script type="text/javascript">
<!--//--><![CDATA[//><!--
window.jQuery || document.write("<script src='/sites/all/modules/jquery_update/replace/jquery/1.10/jquery.min.js'>\x3C/script>")
//--><!]]>
</script>
<script type="text/javascript" src="/misc/jquery.once.js?v=1.2"></script>
<script type="text/javascript" src="/misc/drupal.js?no0zdc"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.10.2/jquery-ui.min.js"></script>
<script type="text/javascript">
<!--//--><![CDATA[//><!--
window.jQuery.ui || document.write("<script src='/sites/all/modules/jquery_update/replace/ui/ui/minified/jquery-ui.min.js'>\x3C/script>")
//--><!]]>
</script>

I hope I've provided sufficient information. Any help would be greatly appreciated.

EDIT

Full header below:

<head profile="http://ift.tt/SX2Z8m">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta content="Sample content" about="/sample-content" property="dc:title">
<link rel="shortcut icon" href="/misc/favicon.ico" type="image/vnd.microsoft.icon">
<meta name="HandheldFriendly" content="true">
<meta name="MobileOptimized" content="width">
<meta name="Generator" content="Drupal 7 (http://drupal.org)">
<link rel="canonical" href="/sample-content">
<link rel="shortlink" href="/node/114">
  <title>Sample content | ILIAS Solutions</title>
  <link type="text/css" rel="stylesheet" href="/sites/default/files/css/css_pbm0lsQQJ7A7WCCIMgxLho6mI_kBNgznNUWmTWcnfoE.css" media="all">
<link type="text/css" rel="stylesheet" href="/sites/default/files/css/css_IoEPASs8P-5r05g2SNWObjq4Z3L1qnpf6AUHzJOv_Mw.css" media="all">
<link type="text/css" rel="stylesheet" href="/sites/default/files/css/css__OGyo-ZLPb2eWR69kov4bKl5fA7ngglWR1B1kbenDy4.css" media="all">
<link type="text/css" rel="stylesheet" href="/sites/default/files/css/css_MnXiytJtb186Ydycnpwpw34cuUsHaKc80ey5LiQXhSY.css" media="all">
<link type="text/css" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" media="all">
<link type="text/css" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" media="all">
<link type="text/css" rel="stylesheet" href="/sites/default/files/css/css_9vS7KTziVXM6cOtv0jZFlm30ZZXGCzz9d4oZYdJnbf4.css" media="all">
<link type="text/css" rel="stylesheet" href="/sites/default/files/css/css_X2KZyy7-i2nDSO3slgqaJQDJe_rcOgl-_DFA2q0nlLI.css" media="all">
<link type="text/css" rel="stylesheet" href="/sites/all/themes/startupgrowth_lite/fonts/lato-font.css?no15n3" media="all">
<link type="text/css" rel="stylesheet" href="/sites/all/themes/startupgrowth_lite/fonts/sourcecodepro-font.css?no15n3" media="all">
<link type="text/css" rel="stylesheet" href="/sites/all/themes/startupgrowth_lite/fonts/ptserif-blockquote-font.css?no15n3" media="all">

<!--[if (IE 9)&(!IEMobile)]>
<link type="text/css" rel="stylesheet" href="/sites/all/themes/startupgrowth_lite/ie9.css?no15n3" media="all" />
<![endif]-->
<link type="text/css" rel="stylesheet" href="/sites/default/files/css/css_AbpHGcgLb-kRsJGnwFEktk7uzpZOCcBY74-YBdrKVGs.css" media="all">

  <!-- HTML5 element support for IE6-8 -->
  <!--[if lt IE 9]>
    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
  <script type="text/javascript" src="/sites/all/modules/jquery_update/replace/jquery/1.10/jquery.min.js?v=1.10.2"></script><style type="text/css"></style>
<script type="text/javascript" src="/misc/jquery.once.js?v=1.2"></script>
<script type="text/javascript" src="/misc/drupal.js?no15n3"></script>
<script type="text/javascript" src="/sites/all/modules/jquery_update/replace/ui/ui/minified/jquery.ui.core.min.js?v=1.10.2"></script>
<script type="text/javascript" src="/sites/all/modules/jquery_update/replace/misc/1.9/jquery.ba-bbq.min.js?v=1.2.1"></script>
<script type="text/javascript" src="/sites/all/modules/jquery_update/replace/misc/1.9/overlay-parent.js?v=1.0"></script>
<script type="text/javascript" src="/sites/all/modules/admin_menu/admin_menu.js?no15n3"></script>
<script type="text/javascript" src="/sites/all/modules/admin_menu/admin_menu_toolbar/admin_menu_toolbar.js?no15n3"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script type="text/javascript">
<!--//--><![CDATA[//><!--
jQuery(document).ready(function($) { 
        $(window).scroll(function() {
            if($(this).scrollTop() != 0) {
                $("#toTop").addClass("show");   
            } else {
                $("#toTop").removeClass("show");
            }
        });

        $("#toTop").click(function() {
            $("body,html").animate({scrollTop:0},800);
        }); 

        });
//--><!]]>
</script>
<script type="text/javascript" src="/sites/all/themes/startupgrowth_lite/js/jquery.mobilemenu.js?no15n3"></script>
<script type="text/javascript">
<!--//--><![CDATA[//><!--
jQuery(document).ready(function($) { 

        $("#main-navigation ul.main-menu, #main-navigation .content>ul.menu").mobileMenu({
            prependTo: "#main-navigation",
            combine: false,
            nested: 1,
            switchWidth: 760,
            topOptionText: Drupal.settings.startupgrowth_lite['topoptiontext']
        });

        });
//--><!]]>
</script>
<script type="text/javascript">
<!--//--><![CDATA[//><!--
jQuery(document).ready(function($) { 

        var map;
        var myLatlng;
        var myZoom;
        var marker;

        });
//--><!]]>
</script>
<script type="text/javascript" src="http://ift.tt/Ylci2T"></script><script src="http://ift.tt/1dSfelX"></script>
<script type="text/javascript">
<!--//--><![CDATA[//><!--
jQuery(document).ready(function($) { 

        if ($("#map-canvas").length) {

            myLatlng = new google.maps.LatLng(Drupal.settings.startupgrowth['google_map_latitude'], Drupal.settings.startupgrowth['google_map_longitude']);
            myZoom = 13;

            function initialize() {

                var mapOptions = {
                zoom: myZoom,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                center: myLatlng,
                scrollwheel: false
                };

                map = new google.maps.Map(document.getElementById(Drupal.settings.startupgrowth['google_map_canvas']),mapOptions);

                marker = new google.maps.Marker({
                map:map,
                draggable:true,
                position: myLatlng,
                url: "http://ift.tt/1EnM2IT"
                });

                google.maps.event.addListener(marker, "click", function() {     
                window.open(this.url, "_blank");
                });

                google.maps.event.addDomListener(window, "resize", function() {
                map.setCenter(myLatlng);
                });

            }

            google.maps.event.addDomListener(window, "load", initialize);

        }

        });
//--><!]]>
</script>
<script type="text/javascript">
<!--//--><![CDATA[//><!--
jQuery(document).ready(function($) { 

            var headerHeight = $("#header").height();
            $(window).scroll(function() {
            if(($(this).scrollTop() > headerHeight) && ($(window).width() > 767)) {
                $("body").addClass("onscroll"); 
                $("body").css("paddingTop", (headerHeight)+"px");
                if( $(this).scrollTop() > headerHeight+40 ) {
                $("body").addClass("show"); 
                }
            } else {
                $("body").removeClass("onscroll");
                $("body").removeClass("show");
                $("body").css("paddingTop", (0)+"px");
                $("body.logged-in").css("paddingTop", (64)+"px");
            }
            });
        });
//--><!]]>
</script>
<script type="text/javascript" src="/sites/all/themes/startupgrowth_lite/js/meanmenu/jquery.meanmenu.min.js?no15n3"></script>
<script type="text/javascript">
<!--//--><![CDATA[//><!--
jQuery(document).ready(function($) {

            $("#main-navigation .sf-menu, #main-navigation .content>ul.menu, #main-navigation ul.main-menu").wrap("<div class='meanmenu-wrapper'></div>");
            $("#main-navigation .meanmenu-wrapper").meanmenu({
                meanScreenWidth: "767",
                meanRemoveAttrs: true,
                meanMenuContainer: "#header-inside",
                meanMenuClose: ""
            });

        });
//--><!]]>
</script>
<script type="text/javascript">
<!--//--><![CDATA[//><!--
jQuery(document).ready(function($) {

            $(window).load(function() {
                $("#highlighted-bottom-transparent-bg").css("backgroundColor", "rgba(255,255,255,0.8)");
            });

        });
//--><!]]>
</script>
<script type="text/javascript" src="/sites/all/themes/startupgrowth_lite/js/jquery.browser.min.js?no15n3"></script>
<script type="text/javascript">
<!--//--><![CDATA[//><!--
jQuery.extend(Drupal.settings, {"basePath":"\u002F", "pathPrefix":"", "ajaxPageState":{"theme":"startupgrowth_lite", "theme_token":"Cv8zpIqC1NrJFXXv3ef0_APXlwgYfd8ijffT8WgyKoc", "js":{"sites\u002Fall\u002Fmodules\u002Fflexslider\u002Fassets\u002Fjs\u002Fflexslider.load.js":1, "sites\u002Fall\u002Fmodules\u002Fjquery_update\u002Freplace\u002Fjquery\u002F1.10\u002Fjquery.min.js":1, "misc\u002Fjquery.once.js":1, "misc\u002Fdrupal.js":1, "sites\u002Fall\u002Fmodules\u002Fjquery_update\u002Freplace\u002Fui\u002Fui\u002Fminified\u002Fjquery.ui.core.min.js":1, "sites\u002Fall\u002Fmodules\u002Fjquery_update\u002Freplace\u002Fmisc\u002F1.9\u002Fjquery.ba-bbq.min.js":1, "sites\u002Fall\u002Fmodules\u002Fjquery_update\u002Freplace\u002Fmisc\u002F1.9\u002Foverlay-parent.js":1, "sites\u002Fall\u002Fmodules\u002Fadmin_menu\u002Fadmin_menu.js":1, "sites\u002Fall\u002Fmodules\u002Fadmin_menu\u002Fadmin_menu_toolbar\u002Fadmin_menu_toolbar.js":1, "\u002F\u002Fmaxcdn.bootstrapcdn.com\u002Fbootstrap\u002F3.3.2\u002Fjs\u002Fbootstrap.min.js":1, "0":1, "sites\u002Fall\u002Fthemes\u002Fstartupgrowth_lite\u002Fjs\u002Fjquery.mobilemenu.js":1, "1":1, "2":1, "https:\u002F\u002Fmaps.googleapis.com\u002Fmaps\u002Fapi\u002Fjs?v=3.exp\u0026sensor=false":1, "3":1, "4":1, "sites\u002Fall\u002Fthemes\u002Fstartupgrowth_lite\u002Fjs\u002Fmeanmenu\u002Fjquery.meanmenu.min.js":1, "5":1, "6":1, "sites\u002Fall\u002Fthemes\u002Fstartupgrowth_lite\u002Fjs\u002Fjquery.browser.min.js":1}, "css":{"modules\u002Fsystem\u002Fsystem.base.css":1, "modules\u002Fsystem\u002Fsystem.menus.css":1, "modules\u002Fsystem\u002Fsystem.messages.css":1, "modules\u002Fsystem\u002Fsystem.theme.css":1, "misc\u002Fui\u002Fjquery.ui.core.css":1, "misc\u002Fui\u002Fjquery.ui.theme.css":1, "modules\u002Foverlay\u002Foverlay-parent.css":1, "modules\u002Ffield\u002Ftheme\u002Ffield.css":1, "modules\u002Fnode\u002Fnode.css":1, "modules\u002Fsearch\u002Fsearch.css":1, "modules\u002Fuser\u002Fuser.css":1, "sites\u002Fall\u002Fmodules\u002Fviews\u002Fcss\u002Fviews.css":1, "sites\u002Fall\u002Fmodules\u002Fadmin_menu\u002Fadmin_menu.css":1, "sites\u002Fall\u002Fmodules\u002Fadmin_menu\u002Fadmin_menu_toolbar\u002Fadmin_menu_toolbar.css":1, "modules\u002Fshortcut\u002Fshortcut.css":1, "sites\u002Fall\u002Fmodules\u002Fctools\u002Fcss\u002Fctools.css":1, "\u002F\u002Fmaxcdn.bootstrapcdn.com\u002Ffont-awesome\u002F4.2.0\u002Fcss\u002Ffont-awesome.min.css":1, "\u002F\u002Fmaxcdn.bootstrapcdn.com\u002Fbootstrap\u002F3.3.2\u002Fcss\u002Fbootstrap.min.css":1, "sites\u002Fall\u002Fthemes\u002Fstartupgrowth_lite\u002Fjs\u002Fmeanmenu\u002Fmeanmenu.css":1, "sites\u002Fall\u002Fthemes\u002Fstartupgrowth_lite\u002Fstyle.css":1, "sites\u002Fall\u002Fthemes\u002Fstartupgrowth_lite\u002Ffonts\u002Flato-font.css":1, "sites\u002Fall\u002Fthemes\u002Fstartupgrowth_lite\u002Ffonts\u002Fsourcecodepro-font.css":1, "sites\u002Fall\u002Fthemes\u002Fstartupgrowth_lite\u002Ffonts\u002Fptserif-blockquote-font.css":1, "sites\u002Fall\u002Fthemes\u002Fstartupgrowth_lite\u002Fie9.css":1, "sites\u002Fall\u002Fthemes\u002Fstartupgrowth_lite\u002Flocal.css":1}}, "overlay":{"paths":{"admin":"node\u002F*\u002Fedit\u000Anode\u002F*\u002Fdelete\u000Anode\u002F*\u002Frevisions\u000Anode\u002F*\u002Frevisions\u002F*\u002Frevert\u000Anode\u002F*\u002Frevisions\u002F*\u002Fdelete\u000Anode\u002Fadd\u000Anode\u002Fadd\u002F*\u000Aoverlay\u002Fdismiss-message\u000Auser\u002F*\u002Fshortcuts\u000Aadmin\u000Aadmin\u002F*\u000Abatch\u000Ataxonomy\u002Fterm\u002F*\u002Fedit\u000Auser\u002F*\u002Fcancel\u000Auser\u002F*\u002Fedit\u000Auser\u002F*\u002Fedit\u002F*", "non_admin":"admin\u002Fstructure\u002Fblock\u002Fdemo\u002F*\u000Aadmin\u002Freports\u002Fstatus\u002Fphp"}, "pathPrefixes":[  ], "ajaxCallback":"overlay-ajax"}, "flexslider":{"optionsets":{"flexslider_default_thumbnail_slider":{"namespace":"flex-", "selector":".slides \u003E li", "easing":"swing", "direction":"horizontal", "reverse":false, "smoothHeight":true, "startAt":0, "animationSpeed":600, "initDelay":0, "useCSS":true, "touch":true, "video":false, "keyboard":true, "multipleKeyboard":false, "mousewheel":0, "controlsContainer":".flex-control-nav-container", "sync":"", "asNavFor":"#flexslider-1", "itemWidth":210, "itemMargin":5, "minItems":0, "maxItems":0, "move":0, "animation":"slide", "slideshow":false, "slideshowSpeed":"7000", "directionNav":true, "controlNav":false, "prevText":"Previous", "nextText":"Next", "pausePlay":false, "pauseText":"Pause", "playText":"Play", "randomize":false, "animationLoop":false, "pauseOnAction":true, "pauseOnHover":false, "manualControls":""}}, "instances":{"flexslider-1":"flexslider_default_thumbnail_slider"}}, "startupgrowth_lite":{"topoptiontext":"Select a page", "google_map_latitude":"40.726576", "google_map_longitude":"-74.046822", "google_map_canvas":"map-canvas"}, "admin_menu":{"destination":"destination=node\u002F114", "hash":"37d586808ca3270fdd2a560149caab90", "basePath":"\u002Fadmin_menu", "replacements":{".admin-menu-users a":"0 \u002F 1"}, "margin_top":1, "toolbar":[  ]}});
//--><!]]>
</script>
<script type="text/javascript" charset="UTF-8" src="http://ift.tt/1dSfelZ"></script><script type="text/javascript" charset="UTF-8" src="http://ift.tt/1dSfem1"></script><script type="text/javascript" charset="UTF-8" src="http://ift.tt/1EnM0kj"></script></head>

Fix Bootstrap unequal column height

I have a Boostrap row that contains a variable number of columns. This number of columns is controlled by a CMS so it can be a higher number of columns that wouldn't fit on one row.

I need to find a way to nicely display all the columns (f.e. with an equal height).

<div class='row'>
    <div class="col-lg-2"></div>
    <div class="col-lg-2"></div>
    <div class="col-lg-2"></div>
    <div class="col-lg-2"></div>
    <div class="col-lg-2"></div>
    <div class="col-lg-2"></div>
    <div class="col-lg-2"></div>
    <div class="col-lg-2"></div>
    <div class="col-lg-2"></div>
</div>

I already found some solutions to make all columns an equal height, however they don't work whenever you use more then 100% of the row to display columns.

$_POST spaces spaces are converted to \n in array;

Sending form with ajax and php I turn the $_POST in array, and then append do with it, however, the whitespace are converted to \n, where is my mistake?

Updating the page, the \n disappear, but with not append ...

jQuery

$.ajax({
  type: "POST",
  url: "send.php",
  data: dataString,
  dataType: 'json',
  cache: false,
  success: function(mydata) {

  }

PHP

//  array
$my = array(

 'text'=>$text

);

$myJSON = json_encode($my);

echo($myJSON);

HTML OUTPUT

test\n

jQuery animation CSS transform rotate() function doesn't work with .click() event

I have an image which performs a number of animations. I want it to respond to the .click() event which already has CSS transform functions. I included all transform functions just to see how they work so then I can choose a right ones however, rotate() function is not taking effect with .click() event. Here is what I did so far

<img id="pngImg" src="nuts.png"/>  
  <input type="button" value="Click Me">

its script

$(document).ready(function(){
    var imageLogo = $('#pngImg');

        imageLogo.show(4000)
        .animate({easing: 'easeOutBounce' }, 1000)
        .animate({left: '200px'}, 2000)
        .animate({top: '200px'}, 2000)
        .animate({left: '0px'}, 2000)
        .animate({backgroundColor: 'green'})
        .hide(3000);

        $('input').click(function(){
            imageLogo.css('transform', 'translate(50px, 30px) rotate(360deg) scale(2,.5) skew(-35deg)', 5000);
        })
});

I tried to use

$('#pngImg').animate({transform:, 'translate(50px, 30px) rotate(360deg) scale(2,.5) skew(-35deg)', 5000});

method but without success. When I removed all CSS transform functions from the .click() button and leave only rotate() it is obvious that it's not functioning

Here is its style as well

#pngImg {
    position: absolute;
    top: 100px;
    right: 400px;
}
 input[type=button] {
    position: absolute;
    top: 120px;
    right: 420px;
}

SVG Path Line Animation in IE

I have some path animations on a page and they work fine in all browsers except IE10/11. However I have some much more simpler animations doing the same thing on other pages, just with fewer of them, using pretty much the same code and they seem okay.

I think it may well be a performance bottleneck or so associated with IE.

If you view http://ift.tt/1IRIjK2 in IE10/11 you'll see there is quite a noticeable problem where the svgs appear glitchy or not fully rendered. Can't quite figure out what it is.

The relevant JS code from codepen:

    var cfg = {
            easing: [0.165, 0.84, 0.44, 1],
            duration: 1200,
            delay: 500,
            layerDelay: 7000,
            width: 28,
            positioning: true,
            colors: [
                    '#027CA5',
                    '#75B5C6',
                    '#00FFD0',
                    '#00B994',
                    '#BEF5FE'
            ]
    }

    $('.shape-layer').each(function(i) {
            var $this = $(this);

            setTimeout(function() {
                    var $paths = $this.find('path');

                    strokeSetup($paths);
                    strokeOut($paths);

            }, cfg.layerDelay * i);
    });

    function strokeSetup($el) {
            $el.each(function(i) {
                    var $this = $(this),
                            pLen = Math.ceil($this.get(0).getTotalLength());

                    $this.css({
                            'stroke-dasharray': pLen,
                            'stroke-dashoffset': pLen,
                            'stroke-width': cfg.width
                    });
            });
    }

    function strokeOut($el) {
            var pathCount = $el.length,
                    iterationCount = pathCount;

            $el.each(function(i) {
                    var $this = $(this),
                            pLen = Math.ceil($this.get(0).getTotalLength()),
                            color = cfg.colors[getRandom(0, cfg.colors.length)];

                    setTimeout(function() {
                            $this.css({
                                    'stroke': color
                            });

                            if (cfg.positioning) {
                                    var side = ['top', 'bottom', 'left', 'right'],
                                            cssO = {};

                                    $this.parent().css({
                                            top: 'auto',
                                            bottom: 'auto',
                                            left: 'auto',
                                            right: 'auto'
                                    });

                                    cssO[side[getRandom(0, 1)]] = getRandom(0, 40) + '%';

                                    var firstPos = cssO[Object.keys(cssO)[0]],
                                            sideAmount = (parseInt(firstPos) < 20) ? 100 : 20;

                                    cssO[side[getRandom(2, 3)]] = getRandom(0, sideAmount) + '%';

                                    $this.parent().css(cssO);
                            }

                            $this.velocity({
                                    'stroke-dashoffset': 0,
                            }, {
                                    duration: cfg.duration,
                                    easing: cfg.easing
                            });

                            if (!--iterationCount) {
                                    strokeIn($el);
                            }
                    }, cfg.delay * i);
            });

    }

    function strokeIn($el) {
            var pathCount = $el.length,
                    iterationCount = pathCount;

            $el.each(function(i) {
                    var $this = $(this),
                            pLen = Math.ceil($this.get(0).getTotalLength());

                    setTimeout(function() {

                            $this.velocity({
                                    'stroke-dashoffset': pLen
                            }, {
                                    duration: cfg.duration,
                                    easing: cfg.easing
                            });

                            if (!--iterationCount) {
                                    strokeOut($el);
                            }
                    }, cfg.delay * i);
            });
    }

    function getRandom(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min;
    }

Click event canvas/javascript

Hey everyone I was trying to make my rectangles clickable. After it worked i whanted , that when i click on a rectangle that it shows data in the div's. At this moment the data in the canvas div's are manual. Is it possible with the script i have to do what i whant or should I start again but make it completly different ???

for (var i = 0; i < rects.length; i++) {
    if (x > rects[i][0] && x < rects[i][0] + rects[i][2] && y > rects[i][1] && y < rects[i][1] + rects[i][3]) 
    {
        alert('Rectangle ' + i + ' clicked');
    }
}

This is what i had. I don't know how to change the alert into what i whant.

(For the whole html page )

http://ift.tt/1KLBMj8

autocomplete in bootstrap modal

I want to show the last input data filled by user in bootstrap modal, i tried using HTML autocomplete="on" attribute but failed, like done in this fiddle. once user click on submit, on the second time it shows the hints according to previous filled input values.

http://ift.tt/1EnL13D


http://ift.tt/1RknMkY

Now I'm using jquery autocomplete method but in that we have to pass an array as source. See following example

http://ift.tt/1yOgWhm

Suppose i save the text input using ng-model or something and save data in $rootScope or scope and then i refresh the browser, then scope will get vanish.

Plz help me to resolve this.

Jquery script to call Servlet - can't get corret URL of Servlet

Below, there is jquery script which calls Servlet by URL. At first i need to say that i have 2 separate projects. First is Dynamic Web Project which contains servlets etc. Second is simple Ratchet HTML-CSS-JS Project which of course contains some pages, scripts and css.

        <script>
            $(document).ready(function() {                        // When the HTML DOM is ready loading, then execute the following function...
                $('#button').click(function() {               // Locate HTML DOM element with ID "somebutton" and assign the following function to its "click" event...
                    $.get('http://localhost:8080/testuje/text', function(responseText) { // Execute Ajax GET request on URL of "someservlet" and execute the following function with Ajax response text...
                        $('#div').text(responseText);         // Locate HTML DOM element with ID "somediv" and set its text content with the response text.
                    });
                });
            });
        </script>

Here is my Servlet code:

package pl.javastart.servlets;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet("/text")
public class HelloWorldServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String text = "some text";

        response.setContentType("text/plain");  // Set content type of the response so that jQuery knows what it can expect.
        response.setCharacterEncoding("UTF-8"); // You want world domination, huh?
        response.getWriter().write(text);
        // Write response body.
    }
}

The problem is, what should i put in $.get('http://localhost:8080/testuje/text', function(responseText)

to get servlet content after button click.

How to pass data from one page to other page in angular js

I have created a new blog project using angular-js. Here I have one page listing all the blogs and if I click on the edit button or delete button, I want to move to next page and show that data in the form from where I updated the blog.

My blog list page: listblog.html

<!DOCTYPE html>
<html lang="en">

<head>



    <title>My First AngularJs Blog</title>

 <script type="text/javascript" src="http://ift.tt/196KcQm"></script>

    <!-- Bootstrap Core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="css/blog-home.css" rel="stylesheet">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="http://ift.tt/1fK4qT1"></script>
        <script src="http://ift.tt/1knl5gY"></script>
    <![endif]-->

</head>

<body ng-app="blogapp">

    <!-- Navigation -->
   <div ng-include="'includes/header.html'">                    
</div>

    <!-- Page Content -->



       <div class="container">
 <div ng-controller="blogcontroller">
  <h2>Blog List</h2>
  <p>Here is the awsome blog list</p>            
  <table class="table">
    <thead>
      <tr>
        <th>Title</th>
        <th>Blog</th>
        <th>Posted On</th>
        <th>Action</th>
      </tr>
    </thead>
    <tbody>
      <tr  ng-repeat="blg in allblog">
        <td>{{blg.title}}</td>
        <td>{{blg.description}}</td>
        <td>{{blg.created_on }}</td>
        <td><a href="">Edit</a> || <a href="">Delete</a></td>
      </tr>

    </tbody>
  </table>

  </div>
</div>


        <hr>

        <!-- Footer -->

 <div ng-include="'includes/footer.html'">                    
</div>

    <!-- /.container -->

    <!-- jQuery -->
    <script src="js/jquery.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="js/bootstrap.min.js"></script>
<script src="controller.js"></script>
</body>

</html>

---

I want to create a controller for edit. My Controller file: controller.js

var myApp = angular.module("blogapp", []);

  myApp.controller('blogcontroller',function ($scope,$http){

    $http({method: 'GET' , url: 'getallblog.php'}).success(function(data){
        $scope.allblog = data;
    });


    $scope.new_post =function(){



    $http.post("addblog.php" ,{'title' : $scope.title ,'description' : $scope.description }).success(function(data,status,headers,config){
        window.location='index.html';
        console.log("inserted Successfully");
    });
  } ;


  $scope.editpost = function(index){

    $http.post('allscript.php?action=edit_post', { 'id' : index})
    .success(function (data, status, headers, config){


    }) 
    .error(function (data, status, headers, config){
           console.log(status);
        });


  }

  });

---

And my php script page where all operations are performed allscript.php

<?php 

$user ="root";
$pass ="m2n1shlko";

$dbh = new PDO('mysql:host=localhost;dbname=blog_db', $user, $pass);


switch($_GET['action']){

    case 'edit_post':
        edit_post();
    break;





function edit_post(){

  $data = json_decode(file_get_contents("php://input"));     
    $index = $data->id; 

$query = $dbh->prepare("SELECT * FROM blog_list where id='$index'") ;
$da = $query->execute();
$getre = $da->fetch(PDO::FETCH_ASSOC);

print_r(json_encode($getre));
return $getre;


}



}
?>

I am new in angular-js. I don't know how to get the ID of that record and to take to the next page for edit/update/delete.

Any help is appreciated. Thanks.

Drag and paste like excel using jquery?

I want to create a dynamic table that content can be modifiable. I want to add a feature like excel where I could drag and drop a <TD> data that paste in all other <TDs>.

Telerik Kendo UI grid loses custom command event handler after persisting (and restoring) its state

I've isolated the issue, see and try the full source here:

http://ift.tt/1RknM4u

Steps to reproduce:

1. Press Ctrl+Enter to run the snippet

2. Click on 'Say Hello' custom command button, and check if the event handler runs

3. Click on top left 'Save State' button 3) Click on 'Load State' button, and restore the previous state.

4. Now click again on 'Say Hello' button and demonstrate the event handle will not run, instead something weird is happening.

Notes: Please do not search for the solution around the localStorage. The issue can be reproduced by using different server side state persisting solution. (as my original app does)

Any idea where to patch? ... or workaround?

Selecting bootstrap drop down with jquery not working

I have a twitter-bootstrap select that I am trying to iterate with jquery to build a list of google-maps markers(latitude/longitude/building-id is stored with list). on document ready I want to iterate the list and extract the lat/long from each li item and create a marker with that location:

        <select id="buildings" class="selectpicker" data-width="100%" data-live-search="true"><!-- style="border-radius:0px;" -->
            {% for category in buildings %}
                <optgroup label="{{ category.category.asBuildingCategory }}">
                    {% for building in category.buildings %}
                        <option data-content="<span data-latitude='{{building.fLatitude}}' data-longitude='{{building.fLongitude}}' data-build-id='{{building.ixBuilding}}'>{{building.asBuildingName}}</span>"></option>
                    {% endfor %}
                </optgroup>
            {% endfor %}
        </select>

This is what the code generated looks like in the browser:

I can successfully attach an onclick for each menu item, but I can't seem to iterate the select list via jquery.

Thus far I have tried this:

$(document).ready(function () {
    $(".dropdown-menu.inner.selectpicker li").each(function () {
        alert($(this));
    });
});

but it doesn't seem to hit anything. However This code works for adding the click listener:

$(document.body).on('click', '.dropdown-menu.inner.selectpicker li', function () {
    debugger;
    var latitude = $(this).find("span").data('latitude');
    var longitude = $(this).find("span").data('longitude');
    var buildingID = $(this).find("span").data('build-id');
});

EDIT This is what my jquery finds using this code:

var test = $(".dropdown-menu.inner.selectpicker li");

It just gets the entire document instead of the list elements

conversion of json array to javascript array using jquery

How do I convert this JSON array:

[{"date":"01/01/1996","open":913.0,"high":913.0,"low":906.0,"close":908.0,"vol":118.0}] 

to a JavaScript array like this:

[["01/01/1996",913,913,906,908,118]] 

using jQuery?

$ is undefined when loading jQuery through javascript

I am making a chrome extension that will take come content from the current selected tab. I am injecting a script file into the current page and that script communicates with the script from the extension. With the javascript injected in the page I am trying to load jQuery so it is easier to find the content I want.

(function() {

var script = document.createElement('script');
script.setAttribute("src", "http://ift.tt/J5OMPW")
script.setAttribute("type","text/javascript")


script.onload = script.onreadystatechange = function(){ 

    var port = chrome.runtime.connect({name: "ext"});   
    port.postMessage({ images: getImages(document)});
    port.onMessage.addListener(function(msg) {
    if (msg.request == "message")
        port.postMessage({ message: getText(document)});
    });

};
document.body.appendChild( script ); 

function getText(doc) {
    var textString =  $("div[id*='message'],div[class*='message']").filter(function() {
        return /[0-9]/.test( $(this).text() );
    }).html();
    var text = textString.match(/\d+/);
    return text; 
}

function getImages(doc){
    var result = "";
    var images = document.getElementsByTagName("IMG");
    for(var i = 0; i < images.length; i++){
        if(images[i].height > 200 && images[i].width > 200){
            result = result + images[i].src + ",";
        }
    }
    return result;
}

})();

The jQuery library gets loaded (I checked the 'Network' tab in the Developer tools) and the code gets into the getText() function, but '$' is undefined.

EDIT:

script.onload = script.onreadystatechange = ...

is the code that is waiting for the jQuery to be loaded. And it is getting in there. But when it gets to

var textString =  $("div[id*='message'],div[class*='message']")

'$' is undefined

Not able to toggle property check box property using jquery

i want to toggle disable property of a checkbox group based on other checkbox checked property Html code for checkbox group is is :

<div class="checkbox-group">
            <div class="col1">

              <p>
<input type="checkbox" name="backpack" id="backpack" tabindex="170" />
              <label for="backpack">Backpack Cal</label>
</p>
              <p>
<input type="checkbox" name="calm" id="calm" tabindex="180" />
              <label for="calm">California Calm</label>
</p>
              <p>
<input type="checkbox" name="hotsprings" id="hotsprings" tabindex="190" />
              <label for="hotsprings">California Hotsprings</label>
</p>        
            </div>
            <div class="col2">
              <p>
<input type="checkbox" name="cycle" id="cycle" tabindex="210" />
              <label for="cycle">Cycle California</label>
</p>
             <p>
 <input type="checkbox" name="desert" id="desert" tabindex="220" />
              <label for="desert">From Desert to Sea</label>
</p>
             <p>
 <input type="checkbox" name="kids" id="kids" tabindex="230" />
              <label for="kids">Kids California</label>
</p>
            </div>
            <div class="col3">
              <p>
<input type="checkbox" name="nature" id="nature" tabindex="240" />
              <label for="nature">Nature Watch</label>
</p>
              <p>
<input type="checkbox" name="snowboard" id="snowboard" tabindex="250" />
              <label for="snowboard">Snowboard Cali</label>
</p>
             <p>
 <input type="checkbox" name="taste" id="taste" tabindex="260" />
              <label for="taste">Taste of California</label>
</p>
            </div>

            </div>

Html code for toggle button is

<div id="group-toggle">
                <input type="checkbox" name="bike_check" id="bike_check" /> <label for="bike_check">I own, or will otherwise provide, my own bicycle</label>
            </div>

And jquery code is

var $checkbox=  $('.checkbox-group').find('input[type=checkbox]');
$checkbox.prop('disabled',true);
$('#bike_check').click(function() {
var $toggle=$(this);
});

$checkbox.prop('disabled',!$toggle.prop('checked'));

i am able to do it using if-else statement but not by this ,what thing i am doing wrong

Close modal without redirect

I have a modal that is created when I click a button. It's content is php - generated because I need to communicate with the server to do some action. Besides the submit button (which works fine btw) I have another button which should just close the modal without doing any action.

I know I can achieve this by encapsulating the button in

But I don't want to reload the page, so I'm trying to do it using jquery's close() function. However, the result achieved is that the window closes immediately. This is the code of the content:

        <body>
                <?php 
                        echo '<form action="action.php" method="post">';
                        echo '<p >Are you sure you want to do this?</p>';
                        echo '<input type="submit" value="YES"></input>';         
                        echo '</form>'; 
                ?>
                <input type="button" value="NO" id="reject">

                <script type="text/javascript">
                            $(document).ready( function() {         $('#reject').onclick($("#delete_dialog").dialog("close"))});
                </script>
    </body>

delete_dialog is the id of the modal

JQuery: How to callback each loop after completion of ajax call?

How to callback each loop after completion of ajax call.

Please find my code as follows.

Story:

Let us assume I have 3 values X,Y,Z. Firstly, I am taking X value, sending to django views and their using requests module for getting some info and pushing to the div class push_new_info_here, in the next Iteration I have to take Y value. How to do ? please note: Previous ajax call should be succeeded .

Final word: I am collecting all the info of (X,Y,Z), then merging using python and pushing to the div class push_new_info_here

window.onload = function() {

  $.each(["X","Y","Z"], function( index, value ) {

      $.post('/find/'+value+'/',{},function(data){
          $('.push_new_info_here').empty();
          $('.push_new_info_here').html(data);
      });

  });

};

How to check a number inside a span and change its color based on the value?

Here is what I have. It isn't reading the value correctly.

http://ift.tt/1JTDscG

HTML:

<a class="InterestLink">Click me</a>

<div id="InterestExpander">
            <div id="InterestExpanderX">
                &times;
            </div>

            <br><br>

            General Rating: 
            <span class="RatingGeneralNumber">80%</span>
</div>

CSS:

<a class="InterestLink">Click me</a>

<div id="InterestExpander">
            <div id="InterestExpanderX">
                &times;
            </div>

            <br><br>

            General Rating: 
            <span class="RatingGeneralNumber">80%</span>
</div>

jQuery:

$('.InterestLink').click(function() {
    $('#InterestExpander').fadeIn(450);

    if (parseInt($('.RatingGeneralNumber').val()) > 50 ) {
        $('.RatingGeneralNumber').css({"color":"green"});
    }

}); 



$('#InterestExpanderX').click(function() {
    $('#InterestExpander').fadeOut(250);
});

Also, another question while I'm here. This site will have links to multiple different movies. Each time they click on a movie link, the same div will pop up, but with a rating unique to the movie based on what the database says.

Would the span be containing the movie rating be more appropriate as an "ID" or "Class" type, or neither?

Javascript input code

Here is html code.

    <div data-block="true" data-offset-key="7cq06-0-0" class="_209g _2vxa" data-reactid=".c.1:3.0.$right.0.0.0.0.1.0.0.1.0.0.$7cq06">
<span data-offset-key="7cq06-0-0" 
data-reactid=".c.1:3.0.$right.0.0.0.0.1.0.0.1.0.0.$7cq06.0:$7cq06-0-0"><br 
data-reactid=".c.1:3.0.$right.0.0.0.0.1.0.0.1.0.0.$7cq06.0:$7cq06-0-0.0"></span>
</div>

I want to enter a input automaticaly by javascript code. After enter "MESSAGE HERE !!!" the html code changes like this(I entered by hand) :

    <div data-block="true" data-offset-key="2s0n6-0-0" class="_209g _2vxa" data-reactid=".h.1:3.0.$right.0.0.0.0.1.0.0.1.0.0.$2s0n6">
<span data-offset-key="2s0n6-0-0" 
data-reactid=".h.1:3.0.$right.0.0.0.0.1.0.0.1.0.0.$2s0n6.0:$2s0n6-0-0"><span 
data-reactid=".h.1:3.0.$right.0.0.0.0.1.0.0.1.0.0.$2s0n6.0:$2s0n6-0-0.0">MESSAGE HERE !!!</span></span></div>

What is the javascript code that I am looking for ?

Javascript not loading when using HttpContext.Current.Response.WriteFile

I am opening PDF file in my aspx page using HttpContext.Current.Response.WriteFile(). My problem is I have some script in same page and it is not triggering.

<script type="text/javascript">
    $(document).ready(function () {
        alert("in");
    });
</script>

Fetch a data from a string

I have this as a string. I have get this using jquery and parsing it from a web page.

I tried using jQuery.parseJSON and got the error Uncaught SyntaxError: Unexpected token n.

I need to get "surl" and "imgurl" how can I get this?

{
    ns:"images",
    k:"5061",
    mid:"172E23D582B8C2A90F3FE9DC2B04A3ECD1D4F70F",
    surl:"http://ift.tt/1JTDu4d",
    imgurl:"http://ift.tt/1ceVfwD",
    ow:"480",
    docid:"608038082569896450",
    oh:"301",
    tft:"117",
    dls:"images,5487"
}

How to controll Pagedlistpager button in mvc with javascipt

I have a bug about using pagedlistpager in mvc such as:

@Html.PagedListPager(Model, page => Url.Action("Index", new { page = page }), PagedListRenderOptions.OnlyShowFivePagesAtATime)

when I click to the "2" button in the pagedlistpager, it will redirect to controller with method index, but now, I want to it redirect to a function of javascript, how can I do??

Jquery, select all element with a class

someone could tell me why this code works correctly on chorme but not on the other browsers?

  $("#"+grid+" tr:nth-of-type(2) td.table_view_tablet").each(function() {
       id = $(this).attr('aria-describedby');
       id = id.split("_");
       jQuery("#"+grid).jqGrid('hideCol', [""+id[2]+""]);
  });

I'want to select all ceil with class "table_view_tablet" in the second line of table "grid"

How to check an input words against several arrays in Javascript

I need to test all the words entered into an input against 3 objects and determine which array they belong to so I can output a URL to an API. I want to achieve this with Javascript/jQuery.

For example if the input had these words: keyword1 keyword2 keyword3 keyword5

All keyword entries will be added from a autocomplete plugin.

I then need to test them against 3 arrays.

var array1 = ["keyword2", "keyword6"];
var array2 = ["keyword3", "keyword4"];
var array3 = ["keyword1", "keyword5"];

I need to determine what array they came from so I can output a URL and add the values to specific keys in a URL.

Example:

http://ift.tt/1ceVdFc [insert keyword(s)] &array2= [insert keyword(s)] &array3= [insert keyword(s)]

The keywords need to be sent as an array and must have spaces replaced with dashes.

I am using jQuery to perform a GET request with the URL generated.

How to get output from php to typeahead?

I am using twitter typeahead and php as backend for getting data from mysql.But i am not able to see any suggestions when i start typing on the text box. i think because the php output has to be JSON encoded..

how can i encode the output

output:

echo '<a href="results.html" class="searchres" onclick="navigate()" style="color:#696969;text-decoration:none;"><img src='.$iurl.' class="icons" /><div class="results" style="color:#696969;text-decoration:none;">'."$fname".'</div><span style="color:#696969;text-decoration:none;" class="author">'.$caption.'</span></a>'."\n";

html:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example of Twitter Typeahead</title>
<script src="http://ift.tt/13qgtmt"></script>
<script  type="text/javascript" src="../js/typeahead.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('input.typeahead').typeahead({
        name: 'countries',
        prefetch: 'getvalues.php',
        limit: 10
    });
});  
</script>
<style type="text/css">
.bs-example{
    font-family: sans-serif;
    position: relative;
    margin: 100px;
}
.typeahead, .tt-query, .tt-hint {
    border: 2px solid #CCCCCC;
    border-radius: 8px;
    font-size: 24px;
    height: 30px;
    line-height: 30px;
    outline: medium none;
    padding: 8px 12px;
    width: 396px;
}
.typeahead {
    background-color: #FFFFFF;
}
.typeahead:focus {
    border: 2px solid #0097CF;
}
.tt-query {
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
}
.tt-hint {
    color: #999999;
}
.tt-dropdown-menu {
    background-color: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    margin-top: 12px;
    padding: 8px 0;
    width: 422px;
}
.tt-suggestion {
    font-size: 24px;
    line-height: 24px;
    padding: 3px 20px;
}
.tt-suggestion.tt-is-under-cursor {
    background-color: #0097CF;
    color: #FFFFFF;
}
.tt-suggestion p {
    margin: 0;
}
</style>
</head>
<body>
    <div class="bs-example">
        <input type="text" class="typeahead tt-query" autocomplete="off" spellcheck="false">
    </div>
</body>
</html>         

getvalues.php

  <?php
require_once "config.php";
$q = strtolower($_GET["q"]);
if (!$q) return;

$sql = "select file_name,img_url,captions from completer";
$rsd = mysql_query($sql);
while($rs = mysql_fetch_array($rsd)) {
    $fname = $rs['file_name'];
    $iurl = $rs ['img_url'];
    $caption = $rs ['captions'];
    echo '<a href="results.html" class="searchres" onclick="navigate()" style="color:#696969;text-decoration:none;"><img src='.$iurl.' class="icons" /><div class="results" style="color:#696969;text-decoration:none;">'."$fname".'</div><span style="color:#696969;text-decoration:none;" class="author">'.$caption.'</span></a>'."\n";
}
?>

MVC Api Controller confusion with JSON.stringify

I know how to post to Umbraco's Api Controller, that's not the issue.

Question:

Let us say that we have (2) Api methods:

    [HttpPost]
    public string Test1(string time, string activityType)
    {
        return time;
    }

    [HttpPost]
    public string Test2(SomeModel model)
    {
        return model.SomeProperty;
    }

On the first method/ajax call, if I stringify the "time" and "activityType", I get this error:

url: '/Umbraco/api/SomeApi/Test1',
type: 'POST',
dataType: 'json',
data: JSON.stringify({time: '10', activityType: 'test'}),

UmbracoApiController - No HTTP resource was found that matches the request URI

---

Instead, I have to append the (2) parameters as a querystring, and it works. However, in the 2nd Api method, I have a model, and I can use the stringify method for JSON, and it works.

Why? Is this the same with regular MVC as well??

---

We have (2) ajax calls, and these both work:

// you can see that I have to append via querystring in this instance
$.ajax({
        url: '/Umbraco/api/SomeApi/Test1?time=' + time + '&activityType=' + activityType,
        type: 'POST',
        dataType: 'json',
        data: '',
        // doesn't work ****
        // url: '/Umbraco/api/SomeApi/Test1',
        // data: JSON.stringify({time: '10', activityType: 'test'}),
        // **********************
        processData: false,
        async: false,
        contentType: 'application/json; charset=utf-8',
        complete: function (data) {
            var test= $.parseJSON(data.responseText);
            console.log(test);
        },
        error: function (response) {
            console.log(response.responseText);
        }
    });

var post = {
   SomeProperty : 'test',
   AnotherProperty: 'blahblah'
};

$.ajax({
        url: '/Umbraco/api/SomeApi/Test2',
        type: 'POST',
        dataType: 'json',
        data: JSON.stringify(post),
        processData: false,
        async: false,
        contentType: 'application/json; charset=utf-8',
        complete: function (data) {
            var test= $.parseJSON(data.responseText);
            console.log(test);
        },
        error: function (response) {
            console.log(response.responseText);
        }
    });

How to set a cookie based on URL when site visitor manually changes the URL

I am working on a site redesign going from Joomla to MODX, and would like to duplicate something from the current site, but can't find where the code is that manages this. Basically, when a user comes to the site their location is determined by IP, and it sets the URL to something like example.com/dc-metro and sets a cookie called "market" to "dc-metro". There is a dropdown on the site for a visitor to change their location, so if they select "Chicago" for example, the URL becomes example.com/chicago and the market cookie is updated to a value of "chicago". That part works great, the issue I am having is, if a user is on http://ift.tt/1JtUs68, and instead of using the dropdown to change location, they manually change the URL to http://ift.tt/1F7Zqrl, the page refreshes, but the cookie is not updated.

Is there a way to do something like $SERVER['REQUEST_URI'] (or something like that) to pull from the URL and set the cookie when the page reloads. I have several places on the site that show a variable based on the market cookie, and these are not updating (for example, on my dropdown the default value is the current market location).

Thank you very much in advance for any help.

Swap img src, ahref src for gallery. Javascript//Jquery

I am having a real struggle.

This is for a webshop. I have a "Big image" and a few thumb images. When I click the big image I want to open a lightbox gallery with my other images.

What I'm also trying to do is that when I press a thumb image I want to swap place and link with the big image. So that the thumb that is pressed becomes the big image and the big image becomes the thumb image.

I've been trying for hours and don't seem to get it to work.

This is the HTML structure:

<div id="gallery" style="max-width: 400px;">

    <div class="image">
        <a href="http://image/cache/data/50RO160-600x600.jpg" title="50 Speeds Of Play - Gray Steel" class="zoomThis" data-lightbox="bilder">
            <img src="http://image/cache/data/50RO160-388x388.jpg" title="50 Speeds Of Play - Gray Steel" alt="50 Speeds Of Play - Gray Steel" id="main-img" width="388" height="388">
        </a>
    </div>


    <ul>
        <li id="1" style="float: left;">
            <a href="http://image/cache/data/50RO160-03-600x600.jpg" class="thumb-link-1" title="50 Speeds Of Play - Gray Steel" data-lightbox="bilder"></a>
            <img src="http://image/cache/data/50RO160-03-74x74.jpg" class="thumb-img-1" title="50 Speeds Of Play - Gray Steel" alt="50 Speeds Of Play - Gray Steel" height="74" width="74">

        </li>

        <li id="2" style="float: left;">
            <a href="http://image/cache/data/50RO160-02-600x600.jpg" class="thumb-link-2" title="50 Speeds Of Play - Gray Steel" data-lightbox="bilder"></a>
            <img src="http://image/cache/data/50RO160-02-74x74.jpg" class="thumb-img-2" title="50 Speeds Of Play - Gray Steel" alt="50 Speeds Of Play - Gray Steel" height="74" width="74">

        </li>

        <li id="3" style="float: left;">
            <a href="http://image/cache/data/50RO160-04-600x600.jpg" class="thumb-link-3" title="50 Speeds Of Play - Gray Steel" data-lightbox="bilder"></a>
            <img src="http://image/cache/data/50RO160-04-74x74.jpg" class="thumb-img-3" title="50 Speeds Of Play - Gray Steel" alt="50 Speeds Of Play - Gray Steel" height="74" width="74">

        </li>

        <li id="4" style="float: left;">
            <a href="http://image/cache/data/50RO160-05-600x600.jpg" class="thumb-link-4" title="50 Speeds Of Play - Gray Steel" data-lightbox="bilder"></a>
            <img src="http://image/cache/data/50RO160-05-74x74.jpg" class="thumb-img-4" title="50 Speeds Of Play - Gray Steel" alt="50 Speeds Of Play - Gray Steel" height="74" width="74">

        </li>
    </ul>
    <div style="clear: both;"></div>
</div>

This is the javascript I've worked with so far (and alot of others) but I can't get it to work:

<script type="text/javascript">
$("#gallery li").click(function() {
    var id = $(this).attr('id'); //Getting the ID of the LI that is pressed
    var oldBIGIMG = $("#main-img").attr('src'); //Getting the OLD big img link
    var oldBIGLINK = $(".zoomThis").attr('href'); //Getting the OLD big ahref
    var newBIGIMG = $(".thumb-img-" + id).attr('src'); //Getting the OLD thumb img
    var newBIGLINK = $(".thumb-link-" + id).attr('href'); //Getting the OLD link

    $("#main-img").attr('src',newBIGIMG.replace('74x74', '600x600')); //Makeing the OLD thumb img BIG by replaceing 74x74 with 600x600 and adds the "newBIGIMG" value to to #main-img's src
    $(".zoomThis").attr('href',newBIGLINK);  //Giveing the old THUMB link to the big LINK (So correct image opens on lightbox press)
    $(".thumb-img-" + id).attr('src',oldBIGIMG); //Makeing the old big image to take the thumbs place
    $(".thumb-link-" + id).attr('href',oldBIGLINK); //Makeing the olg big link to take the thumbs link place

});

</script>

If I make every variable hardcoded, like var oldBIGIMG("I type the link"); it seems to work pretty ok. So I guess I'm missing something or doing something wrong.

Anyone that could help me in correct direction would be really great.

Thanks!

Create a new regular table from visible and filtered rows of DataTable

I have a DataTable with paging, filtering and ColVis plugin (column visibility). By pressing a button, I need to get the visible and filtered data of all pages, and generate a new regular table below with this data (this one without datatables, pager, ...).

I tried with oTable.rows({search:'applied'}).data() to get the rows, but instead of getting only the data of the visible columns, it gets the hidden ones as well. And anyway I don't know how to generate the new table.

Here's a demo

How could I do this?

Thanks in advance

jquery plugin using base64 image data

I am using Angular Js and getting my images from the server as Base 64 data as follows :-

<li ng-repeat="media in sharedMedia">
    <div class="card-groupinfo--media--wrap">
        <p>{{media.from}}</p>   <span class="media--timestamp">{{media.ts}}</span>

    </div>
    <img ng-src="{{media.d}}">
</li>

I wanted to now use a jquery plugin for slideshow which is as follows :-http://ift.tt/1k8JM0R

But how do i do it with the base 64 data ?

Can I reinitialize Flexslider?

I want to add slides dynamically to the flexslider but flexslider isn't working for dynamically added slides.

$(".clone").click(function() {
    var th = "#sendFeedback";
    $(th).clone(true).appendTo(".slides");
    $('.flexslider').data('flexslider').setup(); 
});

Symfony2 is refreshing a twigs block with ajax possible?

Lets say I have a block in my layout:

{% block sidebar %} {% render url( 'sidebar' ) %} {% endblock %}

Is it possible to refresh the block with ajax without making a div around it? In my example I cant make a div, because it crashes my whole template so I need to know is that even possible?

For example I can refresh a div like this(.test is the class of the table):

$('.test').load(" .test");

Can I make something like this to refresh the block?

$('sidebar').load(" sidebar");

Any ideas?

How can I improve this lazy-loading code?

I am using this code to get images to load only if they are visible. However, it seems to be slow with thousands of images, even if they are not rendered.

function getViewportHeight() {
    if(window.innerHeight) {
        return window.innerHeight;
    }
    else if(document.body && document.body.offsetHeight) {
        return document.body.offsetHeight;
    }
    else {
        return 0;
    }
}
function inView(elem, nearThreshold) {
    var viewportHeight = getViewportHeight();
    var scrollTop = (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
    var elemTop = elem.offset().top;
    var elemHeight = elem.height();
    nearThreshold = nearThreshold || 0;
    if((scrollTop + viewportHeight + nearThreshold) > (elemTop + elemHeight)) {
        return true;
    }
    return false;
}

function loadVisibleImages() {
    jQuery('img[data-src]').each(function() {
        if(jQuery(this).is(':visible')) {
            if(inView(jQuery(this), 100)) {
                this.src = jQuery(this).attr('data-src');
            }
        }
    });
}

jQuery(window).scroll(function() {
    loadVisibleImages();
});

I am using this code to render images:

<img src="" data-src="http://ift.tt/OPjyFQ" alt="" width="400" height="400">

Everything works, but how can I optimize it?