jquery,ajax,json,laravel,laravel-5 , laravel file uploading using json

laravel file uploading using json


Tag: jquery,ajax,json,laravel,laravel-5

I am using laravel 5. I have did the following code to post data using json to my controller. But I cannot make file uploading by this manner.

    type: 'POST',
    cache: false,
    dataType: 'JSON',
    url: 'tasks',
    data: $('#my_form').serialize(),
    success: function(data) {

I have the following html code to upload files.

<input type="text" name="name" value="" />
<input type="text" name="name" value="" />
<input type="file" class="form-control" name="documents[]" multiple>

How can I send file using json in laravel? I have did many search but I cant get proper solution


Use this as your code:

var mydata = new FormData($('#my_form')[0]);
    type: 'POST',
    cache: false,
    dataType: 'JSON',
    url: 'tasks',
    data: mydata,
    processData: false,
    contentType: flase
    success: function(data) {

Note that this doesn't work on some older browsers such as IE 9 or older so you might need to disabled this feature to prevent your errorlogs from overloading, I give my users a custom message that the feature is disabled in older browsers by using

if(typeof FormData !== 'undefined'){
   var formdata = new FormData($("#documentform")[0]);
   $("#errormsg").val("upload feature is disabled in this browser version");
   return false;


Set default value for struts 2 autocompleter

I have implemented a struts 2 autocompleter in which i have used a list of String like this - <sj:autocompleter id="cityId" cssClass="txtfield8" name="outlet.cityName" list="cityList" autoComplete="true" forceValidOption="false" /> How can I set a default value for this, so that every time it loads, a default value will be shown ?...

How to find the days b/w two long date values

I have two long dates value. For Ex: 1433097000000 1434479400000 Here i have to find the days between these two by jquery For Ex: 15/06/2015 - 22/06/2015 If it is more than 5 days, I want to get from is 15/06/2016, to is 19/06/2015. It is based on long values...

jQuery click open one dropdown

In a site I have several 'dropdown' which become visible when you press a plus sign. I did this with jQuery (see code below), but when pressing the button every dorpdown opens. How can I only open the dropdown where the button is pressed (Without writing this code for every...

Automatically calling server side class without

I have an anchor which calls a server side class when clicked, but I want to modify it so that the class is called as soon as the page loads, without having to click an anchor. <a href="#" class="_repLikeMore" data-id="1234" data-type="pid" data-app="forums"> ...

Datatable event on page change not working

This is what I want when the page is changed: $('#resultTable').on('page.dt', function() { if (document.getElementByID('r_tab').checked()) { $('.r_tab').show(); console.log('page changed on r'); } else { console.log('page changed on p'); $('.p_tab').show(); } }); When I run this code, I am not able to change the page anymore. Clicking on any page number/next...

Converting “i+=n” for-loop to $.each

I have the below html structure: <div class="thumbnail"></div> <div class="thumbnail"></div> <div class="thumbnail"></div> <div class="thumbnail"></div> <div class="thumbnail"></div> <div class="thumbnail"></div> <div class="thumbnail"></div> <div class="thumbnail"></div> Now to group/wrap each 4 items in a separate div I did as below: var div=$('.thumbnail'); for(var i = 0; i < div.length; i+=4) { div.slice(i, i+4).wrapAll("<div...

Identifier starts immediately after numeric literal

I'm trying to get the current logged in usersID in my jquery function var userID = @User.Identity.GetUserId(); Many answers on this page say that I have to do something like \"@User.Identity.GetUserId()\" But it dont seem to work, can someone tell me how to fix it. Its for my ajax post....

bootstrap - dynamically changing jumbotron background image

I'm trying to change the background image of the jumbotron div with jQuery when a new tab is clicked, like this: $(".about").click(function(){ $('.active').toggleClass('active'); $('.about').toggleClass('active'); $('.jumbotron').fadeOut(500); //change background image $('.jumbotron').fadeIn(500); }); I tried using $('.jumbotron').css('background-image',url('/path/to/new/image')); but when I include that line, the jumbotron background image doesn't display at all even before...

How do I retain search engine accessibility when loading external file into html

I plan to: $('#main.sidecontent').load('/sidecontent.html'); and insert: <div class="sidecontent" id="main"></div> a div on several html pages since the content of this div is the same and I try to straighten my workflow, basically avoiding editing every single html page when this content div changes. My questions: Is this method recommended for...

Background-image style with JS not working in ie9

I'm working on a site and im having some issues with my slider in IE9. What I've done is that I've made a div that gets the background image changed every few seconds depending on the img tags within. You can see it in function here: http://diakondk.quine.pil.dk/ It works wonders...

copy last column of one table to another table based on some condition

I have two tables. I want to take last column of table3 and put in to table4 eg:- table3 Names Process_id total construction 1 1111 construction_1 1 0000 engineering 1 2222 permitting 1 3333 eg:- table4 Names Process_id construction 1005 engineering 1005 permitting 1005 final result of table4 output will...

slideToggle state not working with multiple boxes

I'm trying to save the toggle state of collapsable boxes using cookies. Here's my code: HTML: <div class="box_container"> <div class="box_handle"> Title </div> <div class="box" data-title="admin_actions"> Content </div> </div> Javascript: $('div.box_container div.box_handle').click(function() { $(this).next('.box').slideToggle('fast'); }); $.each($('div.box_container div.box_handle'), function(index,value){ if ($.cookie('show_box_' + $(value).next('.box').attr('data-title')) != 'closed'){...

Javascript change the souce of all images present inside a string

I have a message or string which contain both text as well as images as below. var text = '<span class="user_message">hiiiiiii <img title=":benztip" src="path../files/stickers/1427956613.gif"> <img src="path../files/stickers/416397278.gif" title=":happy"></span>'; Before appending this to the the chat div i want to replace the src of the images to a default image. How can...

How to remove all the borders of a selectbox?

How can I remove the all the borders of the selectbox using css or Jquery ? My code, <select id="doctor_ch"> <option value="1" selected>One</option> <option value="2">Two</option> </select> CSS #doctor_ch{ background-color: #88AFF2; color:#fff; margin-top: 15px; } When I use this code it only changes the arrow style. I want to remove the...

why i don't get return value javascript

When i debug my code i can see i have value but i don't get value to createCheckBoxPlatform FN function createCheckBoxPlatform(data) { var platform = ""; $.each(data, function (i, item) { platform += '<label><input type="checkbox" name="' + item.PlatformName + ' value="' + item.PlatformSK + '">' + item.PlatformName + '</label>' +...

how to use geocoder class to retrieve latitude and longitude through ajax

the json array which contains the list of addresses [ { "id": 0, "title": "Coop.Sociale Prassi e Ricerca Onlus", "latitude": 0, "longitude": 0, "address": "Viale Eleonora D'Arborea 12, Roma, IT" }, { "id": 0, "title": "San Lorenzo", "latitude": 0, "longitude": 0, "address": "Viale della Primavera 330, Roma, IT" },...

Jquery parsley validate not working

if($("#dataform").parsley().isValid()){ $.ajax({ url : '<?php echo base_url();?>index.php/company/final_review?id=<?php echo $this->input->get('id'); ?>', type : 'POST', data : $("#dataform").serialize(), dataType:"json", beforeSend: function(){ $('#remarks').parsley( 'addConstraint', { minlength: 5 }); }, success : function(data){ console.log(data); } }); } This is my ajax part. The plugin is not validating the field it's submitting the form. The...

change css dynamically by selecting dropdown list item

I have the following Dropdownlist with yes or no options-:` <asp:DropDownList ID="ddlchangecss" runat="server"> <asp:ListItem Text="yes">yes</asp:ListItem> <asp:ListItem Text="no"></asp:ListItem> </asp:DropDownList> i want to add a css dynamically like that-: .imgFullWidth { width: 100%; height: auto; float: left; margin: 0px 0px 20px 0px; } when I select yes option in Dropdownlist. How can...

Setting radio button checked true on button click

I have a table cell that lights up when selected. There will be many buttons on the page but only one choice can be made at a time. How can I make them mutually exclusive using hidden input radio tags? (in order to handle the group later) <td class="choice-option"> <input...

Target next instance of an element/div

I have the following HTML structure and JavaScript file: .html <li> <button class="show-more"></button> some more elements <div class="hidden"></div> </li> JavaScript $( ".show-more" ).click(function() { event.preventDefault(); $( this ).next().slideToggle( "fast", function() { }); }); I need the click event to toggle the next first instance of .hidden, however the click event...

Redraw text over clearRect HTML5 Canvas

I'm trying to draw text (HTML5 canvas) depending on what option is selected in a select element. It works correctly until there's 2 set of text that appears at the same place. It seems like the clearRect function is the issue. The text won't be redrawn over that cleared space....

want to show and hide text using “this” jquery

I want to achieve this effect with this because I have several paragraphs like this so I don't wanna use id for each paragraph <p class="desc_services_subheading"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,...

Rerendering Handlebars template upon data change

I have a template that shows a button based on some boolean in a JSON-object. There are two different buttons it can show. The code for compiling the template: source = $('#some-template').html(); // Get the HTML source of the template template = Handlebars.compile(source); // Compile it $('#some-div-container').html(template(someJsonObject)); Let's say the...

Response 200 OK but Jquery shows error?

I am stuck in kind of a weird problem where I am trying to make a JSONP request to the Open Weather history API to get the weather information for the previous years on the a particular date. fetchHistoryUrl = ''; $.ajax({ method: 'get', url: fetchHistoryUrl, success: function(response){ console.log(response); },...

Detect when the jQuery UI slider is being moved?

I have this custom video time UI slider to change the time of the YouTube video when scrubbed. My problem is that when the video is trying to load when the user is moving the slider, it causes the handle to jerk around and flip around. What I'm trying to...

How to remove legend from bottom of chart - amcharts

Can you please help me out to remove the legend (of y-axis data) from the below the line-chart. This is the icon that helps to remove the corresponding line from the line-chart. See inline image...

jqgrid paging on server side

I'm trying to add server side paging to my grid. In adittion, I have a filter by 'license', 'number' and 'group'. When I press the next page button the controller is called and I obtain the data but my grid is reload on page 1 and I cant view the...

How to send current page number in Ajax request

I am using jQuery DataTable to display huge amount of data in a table. I am getting data page wise on Ajax request like this: var pageNo = 1; $('#propertyTable').dataTable( { "processing": true, "serverSide": true, "ajax": "${contextPath}/admin/getNextPageData/"+pageNo+"/"+10, "columns": [ { "data": "propertyId" }, { "data": "propertyname" }, { "data": "propertyType"...

JQuery .width() for this element

How can I get width of element which I css. My code: $('a').css({'left':-$(this).width()/2}) ...

Confused by JQuery Docs about .submit() event

I saw a example describe in Official Document https://api.jquery.com/submit/ $( "#target" ).submit(function( event ) { alert( "Handler for .submit() called." ); event.preventDefault(); }); Now when the form is submitted, the message is alerted. This happens prior to the actual submission, so we can cancel the submit action by calling .preventDefault()...

Get info from dynamic/growing form

Have a form to create a contract, where that contract can have one or more users associated. The area to input the users info, starts with only one field of one user, and one button to add more fields if needed. <div id="utilizadores" class="row"> <div id="utilizador1" class="container-fluid"> <div class="row"> <div...

writing jQuery instead of $ to access controls in a page

Can I write jQuery( "body" ).append('Hello') instead of $( "body" ).append('Hello') in jQuery

Bootstrap toggle doesn't display well when added dynamically

I'm trying to add bootstrap toggle switch dynamically but it does not display well after adding it. Thanks for your help! <input id="TheCheckBox" type="checkbox" data-off-text="Yes" data-on-text="No" checked="false" class="BSswitch"> <p> <a class="btn btn-lg btn-primary" href="#">Display another Toggle</a></p> $('.btn').on('click', function () { $('p').after( '<input id="TheCheckBox" type="checkbox" data-off-text="Male" data-on-text="Female" checked="false" class="BSswitch">' ); });...

show/hide an overflow div on anchor

I'm trying to make a div appear (if not already visible) and be scrolled to a specific anchor. I found this answer and try to use it but it looks like it doesn't work well... http://stackoverflow.com/a/7513110/3703099 My code : http://jsfiddle.net/0sq2rfcx/9/ As you can see, when you click on button it...

How to remove unmatched row in html table using jquery

I have two tables. I want to delete unmatching rows. Compare with first column in Table1 and compare with first column in Table2. Table1 111 aaa 222 bbb 333 ccc Table2 333 xxx 444 zzz 111 vvv result of Table2 333 xxx 111 vvv I tried some thing here Please...

Dynamically increasing radio button validation

I have some radio buttons that dynamically increase based on data. What I want is to check if all radio button are selected or not. If they're not, I want to show an error message on that particular row as I am using form substitution to send data to ajax....

WooCommerce seems to only orderby date and not price

I am loading in variable products via a custom WP_Query $args = array( 'post_type' => 'product', 'posts_per_page' => 100, 'product_cat' => 'beast-balls', 'orderby' => 'date', 'order' => 'desc' ); $loop = new WP_Query( $args ); if ( $loop->have_posts() ) { while ( $loop->have_posts() ) : $loop->the_post(); ?> <div class="product-node cat-beast-balls">...

access the json encoded object returned by php in jquery

I want to post some data to php function by ajax, then get the encoded json object that the php function will return, then I want to get the information (keys and values) from this object, but I don't know how, here is my code: $.ajax({ url: "functions.php", dataType: "JSON",...

Adding horizontal space between 2 buttons using javascript

I am dynamically creating submit buttons using javascript. I wanted to know how to introduce horizontal spacing between every other button in the process. My code is var allFields = commonButtons.concat(extraFields); for (var i = 0; i < allFields.length; i++) { var node = document.createElement("input"); var btName = document.getElementById("submit-buttons"); node.setAttribute('data-value',...

Javscript Replace Text in tags without changing children element HTML and Content

I have a script where I'd like to replace the text anywhere in the body visible to the user like so: $("body").html($("body").html().replace(/replaced word/g,'HELLO')); This works but it works to well. Whenever "replaced word" is within a tag, like a href, or span, or div, or anything it throws off all...

change icon on collapse in Bootstrap 2.3 not in bootstrap 3

I am using bootstrap 2.3 collapse in my project. I need to change icons on collapse means on show and hide I need to change icons. with bootstrap 3 some shown and hidden functions are showing in internet but I need with Bootstrap 2.3. Please let me know how to...

Onclick add html content and remove it by clicking “delete” link

I have some issue, help me please to find where is the mistake. $(document).ready(function(){ $(function() { var scntDiv = $('#p_scents'); var i = $('#p_scents .row-wrap').size() + 1; $('body').on('click', '.add-item', function() { $('<div class="row-wrap cf"><div class="col-md-3 col-sm-3 col-xs-12"><input type="text" placeholder="Наименование" name="item_name' + i +'"></div><div class="col-md-2 col-sm-2 col-xs-12"><input type="text" placeholder="Количество" name="item_count' +...

Why is JQuery index() returning 1 for the first element?

In the following line of code, a call to the index() function for the first element in a set returns 1. Why does it not return 0? var firstBlockIndex = $( '.block' ).first().index(); ...

Parsing XML array using Jquery

I have stuck up with an issue of passing XML using Jquery. I am getting empty array while traversing to jquery.Please help me how to get datas from XML array. I have mentioned my code below. XML <?xml version="1.0" encoding="UTF-8"?> <json> <json> <CustomerName>999GIZA MID INSURANCEAND SERVICES PVT LTD</CustomerName> <mobiLastReceiptDate>null</mobiLastReceiptDate> </json>...

Click on link next link should be display on same page

I have a single page website and need to link the navigation to IDs in the page. I have three links: "About us", "Our Project", "contact". So if user clicks on "About ", the About section will be displayed, same with other links. Inside Our project there is Two buttons...

Get elements containing text from array

I want to search all the elements containing any string in the array. For example I have following list of items <ul> <li>cricket bat</li> <li>tennis ball</li> <li>golf ball</li> <li>hockey stick</li> </ul> and this array var arr = ['bat', 'ball']; It should select all the elements having text bat and ball....