I try to make ajax with polymer iron-ajax.
My problem is that when Is their is some elements that can be render only after I received response, otherwise their is not data to render.
How can I "stop" the render of the element until their is response?
Thanks
Just:
<template is="dom-if" if="[[response]]">
Two options:
Add a conditional hiddenattribute to the div or elements you want hidden before the ajax call is completed:
<div hidden$="[[!response]]"></div>
or handle visibility using a computed binding
<div hidden$="[[_computeIsHidden(response)]]"
Wrap your content in a dom-if template:
<template is="dom-if" if="[[_computeIsHidden(response)]]">
Related
I am making a simple put request to my app backend using axios.put();
This all works, I have a button that is binded to vue like #click="submitForm"
However looking around I see that some people still wrap their input fields in forms like those:
<form method="POST" #submit.prevent="onSubmit" action="{{ route('someRoute') }}" id="form-submit">
{{ method_field('PUT') }}
{{ csrf_field() }}
Even if I dont use a form like the one above I get the same result when calling my ajax put request.
Laravel allready adds csfr headers to axios by default in resources/assets/js/bootstrap.js
So is there any reason I still should wrap my inputs in a form like above?
Thanks
Your ajax request doesn't matter if you do your inputs in form tags or not, because the request still sends and receives data from a server.
I would use a form tag because everybody can read the markup much easier and it could be usefull for writing less code in javascript - one example
<form action="" method="">
<div class="form-group">
<label class="control-label">Input</label>
<input type="text" name="input" />
</div>
</form>
$(document).ready(function() {
$('#some-form').on('submit', function() {
var data = $(this).serialize();
... do whatever you want (like ajax call) ...
return false;
});
);
You're using an Ajax request, in which case a standard "form submit" would get prevented. Putting a form around it is not obligatory, especially if you use a button element, which is not a classic form element anyway.
I have called scripts on _Layout.cshtml page and my Index.cshtml page has partial view into it. So on page load, SignalR scripts working perfect on partial view, on page end I make another ajax request and load the partial view with another data filled in that and embed under already displayed data, and then the SignalR does not work on the newly embedded record.
This is my index page code:
<div class="col-md-6">
<div class="profile-body">
<div class="row infinite-scroll">
#Html.Partial("_AlbumRow", Model)
</div>
</div>
</div>
This is my partial View Code:
#model IEnumerable<SmartKids.Lib.Core.ViewModels.FileMediaAlbumsVM>
#foreach (var item in Model)
{
<div class="widget">
<div class="block rounded">
<img src="#Url.Content(item.ImageUrl)" alt="#item.Title">
<input type="button" data-image-id="#item.imageId" class="btn btn-sm btn-default">Like</input>
</div>
</div>
}
Kindly help me how to resolve this issue that after making an ajax request I am not able to get those SignalR working. Here is more to say when I put the SignalR scripts on PartialView that works but it also sucks that on each ajax request there is again SignalR loaded on the page and when I click on LIke button it makes many calls to the function behind it.
Kindly help me to resolve this issue, I am stuck at this point since 1 week.
Here is signalR Code:
$(".btn.btn-sm.btn-default").on("click", function () {
var imageId = $(this).attr("data-image-id");
albumClient.server.like(imageId);
});
Problem: You are binding event to elements directly, So when you remove this element and replace it with a different one the events are also removed along with that element, This is something like strongly coupled.
Solution: Use Jquery event delegation. This will make sure the events will be triggered on the current elements and also all the elements that can come in future.
syntax is as below.
$(document).on("click", ".btn.btn-sm.btn-default",function () {
var imageId = $(this).attr("data-image-id");
albumClient.server.like(iamgeId);
});
NOTE: This was never a singlaR issue, it was Jquery issue.
Efficient Way: The problem in using $(document).on("click"... is that when ever there is a click happening on the entire page the Jquery framework will bubble the events from the clicked element upwards(its parent, and its parent and so on..) unless the element specified in the selector arrives, So its kind of performance hit as we don't want this check's to run if we are clicking outside the required area ( button .btn.btn-sm.btn-default in this example).
So best practice is to bind this event delegation to the closest parent possible which will not be removed, <div class="row infinite-scroll"> in this question. So that only when the click happens within this element the event bubbling will happen and also will be stopped once it reaches the parent element,it acts kind of a boundary for event bubbling.
$('.row.infinite-scroll').on("click", ".btn.btn-sm.btn-default",function () {
var imageId = $(this).attr("data-image-id");
albumClient.server.like(iamgeId);
});
jQuery Mobile 1.3.2: I have a listview with the filter enabled. The page that this is on is loaded via jQuery mobile ajax.
My problem is that if I allow it to load via ajax, it detects my keyup event but it does not pull the value of input[data-type="search"]. If I refresh the page using the browser, the script executes perfectly.
How can I get this to work while loading the page with AJAX?
HTML MARKUP:
<ul id="addCompany" style="padding-bottom:10px;" data-role="listview" >
<li>Touch To Add</li>
</ul>
<div id="listwrap">
<ul data-role="listview" data-autodividers="true" data-filter="true" data-inset="true">
<li>Adam Kinkaid</li>
</ul>
</div>
jQuery
<script>
$(document).ready(function(){
var inputVal;
$('body').on("keyup",'input[data-type="search"]', function(){
inputVal = $('input[data-type="search"]').val();
if(inputVal===""){
$('#dynamic').html('<li>Touch To Add</li>');
$('#dynamic').listview("refresh");
}else{
$('#dynamic').html('<li>Touch Again To Add: '+$('input[data-type="search"]').val()+'</li>');
$('#dynamic').listview("refresh");
}
});
});
</script>
EDIT: Note that I can set the value and set the focus on input[data-type="search"] without any hiccups. It is retrieving the value that seems so tricky.
I tried adding a class to so that I wouldn't have to call it by data attribute but still couldn't pull the value unless I refreshed the page. Maybe if I inject a function into the input element I can use that to return the value?
Is it possible to render json data into a javascript variable while making an ajax call in grails?
I am using the submitToRemote inorder to make an ajax call from my grails view to an action in my grails controller. The action returns a json variable/value. I need to to assign this value to a javascript variable for further usage on my web page. Is this possible to achieve? Any leads will be helpful.
submitToRemote have the onSuccess option that you can use to retrieve the json data. From the docs:
onSuccess (optional) - The JavaScript function to call if successful
An example of how doing it can be seen in this blog post.
You could use the onSuccess callback of submitToRemote to read the result of your request and pass them into a javascript variable.
<script type="text/javascript">
function passResult(result) {
yourVariable = result.responseText
}
</script>
<g:form action="show">
Login: <input name="login" type="text" />
<g:submitToRemote update="updateMe" onSuccess="passResult(result)"/>
</g:form>
<div id="updateMe">this div will be updated with the form submit response</div>
The code above is untested but should work.
Is there a JQuery plugin that allows me to 'unhide' a form by after clicking a link? Like I have an invite link that can take me to a one text field form for an email address but I want this form to just drop down (pushing the rest of the content down also) and shows the form to submit the email. If you guys can think of a JQuery plugin that lets me do this, please let me know
Edit:
So I did this
<div class='add-link'>
<div id='invite_link'><a href=''>Invite User</a></div>
<div id='invitation_form'>
<form>
<input type='text'/>
</form>
</div>
</div>
and my jquery looks like
<script type="text/javascript">
$(function()
{
$("table").tablesorter({sortList:[[0,0],[2,1]], widgets: ['zebra']});
$('#invitation_form').hide();
}
);
$('#invite_link').click(function() {
$('#invitation_form').slideDown();
});
Do you guys see any error that causes the form not to slide down. It hides the form when the page loads but when I click the link it is not sliding down.
$('a.mylink').click(function() {
$('#MyForm').slideDown();
});
I don't think you need a jQuery plugin for this. The base jQuery library should be sufficient.
$('#showFormLink').click(function () {
$('#form').slideDown();
});
If you're looking for animation, that's possible as well by passing in a duration argument to slideDown.
Take a look at the jQuery show documentation.