Here's the situation. I have a project where I allow users to upload video. Whenever you click the video a Bootstrap-Modal pops up and the video automatically starts playing. Now I also implemented something where when the video is clicked and that is count as view because when you click the video it automatically starts. Now here is where I messed up, the view is counted when the modal opens up and that's not what I wanted, I wanted the view to be counted when you click the video. I will show you my code below. Can someone kindly help me fix this?
//Video
<video class="video1" id="cx" preload="auto" align="middle" data-
toggle="modal" data-target="#mymodal" data-user-id="{{$usero->id}}"
data-video-src="{{$usero->intro_video}}"
data-video-views="{{$usero->clicks}}" style="
cursor:pointer;"><source src="{{$usero->intro_video}}#t=15" alt="Video
Unavailable" id="" ></source>
//Ajax request
$('#mymodal').on('show.bs.modal show', function (event) {
var button = $(event.relatedTarget);
var user_id = button.data('user-id') ;
var video_src = button.data('video-src');
var video_views = button.data('video-views');
var modal = $(this);
modal.find('#video_source').attr('src', video_src);
modal.find('#video_views').text(video_views);
// send ajax request to increment video count
$.ajax({
method: 'GET',
url: 'getmsg',
dataType: "json",
contentType: "application/json",
data : {
requested_id: user_id
},
success: function(data){
}
});
})
From the code samples you have provided I guess that you have another video tag in your modal, whose src attribute you are updating on show.bs.modal event.
If it the case you should give this video element an id ( video2 for example) and then you can call onplay event on this and you should put you ajax code in this event listner like this
$('#video2').onplay(function(){
$.ajax({
method: 'GET',
url: 'getmsg',
dataType: "json",
contentType: "application/json",
data : {
requested_id: user_id
},
success: function(data){
}
});
});.
In addition you can update the view counts from the success handler of the ajax request if you want.
Hope this will help.
Related
Is it possible multiple submit button without refresh in a single form and pass data to designed page through database? I have a from(section.blade.php) in which I have 3 section one for man scheduled 2nd for women scheduled and 3rd for child scheduled and only one submit button, but I want on 3 submit button on form for each section, so I could post data like for men(1), women(1+) and child(1+) on single design page. Please tell or give any relevant link or example, Many Many thanks.
Have you tried ajax request and response?
For example . When onclick event fired on button , make a function for onclick event .
I have added a code here .
Html
<button type ="button" onclick="licenseDelete(sendIdorAnyOtherValue);">
Click me to get value
</button>
JS
function LicenseDelete(Get the value) {
var img = key;
var d_id = $("#driv_id").val();
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
jQuery.ajax({
url: "{{ url('/vehicle/imgdestroy') }}",
method: 'post',
data: {
img : img,
d_id : d_id,
},
success: function(result){
var vehicle=JSON.parse(result);
console.log(vehicle);
//alert(result);
if(result){
toggleAlert();
}else{
$( "Failed . Try again" ).empty();
$("#send_id").attr("disabled", false);
}
}});
}
I made an ajax request using post method in django..its wokring perfectly..the problem is its calling the complete html page rahter than a div..i want to call only a div..i tried but unable to find the exact solution..
<script>
$(document).ready(function(){
$('#Category').change(function(event){
event.preventDefault();
var e = document.getElementById("Category");
var value = e.options[e.selectedIndex].value;
$.ajax({
url: "/charts/",
type: "post",
dataType: "html",
data: value,
success: function(data) {
$('#div1').html(data);
}});
return false;
});
});
</script>
I want only div content with id #div1..i already tried find and replace method
What is the nature of the event ? Is it a button ? an Input ?
If it is an input as <input type="submit">, the default action is to reload the page like a form.
Did you check if your div id is really div1?
$("#div1").append("your html code"+data+" your html code")
On a page I have an audio file and saved in a PHP variable is the duration of the audio.
I already know how to pass information to another page via ajax by using a code similar to below:
$.ajax({
url: "www.mydomain.com/passtothispage",
data: {"time":"duration"},
type: 'GET',
contentType: 'application/json; charset=utf-8',
success: function (data) {
$('#divid').html(data);
}
});
What I'm stuck on is how to pass the audio duration PHP variable only when 'PLAY' is pressed.
Thanks!
B
You can use the play event of the video/audio. It is fired "when the audio/video has been started or is no longer paused". Source: http://www.w3schools.com/tags/av_event_play.asp
var vid = document.getElementById("myVideo");
vid.onplay = function() {
alert("The video has started to play");
//then you can use your ajax to send the duration here.
};
To get the duration property, vid.duration using the same vid object specified in the code sample above. Source: http://www.w3schools.com/tags/av_prop_duration.asp
I have some strange behaviour going on with the jQuery ajax functionality in my asp.net MVC3 application.
I have several boxes of data each containing a link to open a popup and change the data in each box. To do this I've added a jquery live() click event to process the data via a jQuery ajax call. In the "success" method of the ajax call, i take the return data and open a UI Dialog popup (a partial view) which contains a list of radio buttons. I select a different radio button and press 'close' - the close button fires another live() click event, processes that new data via an ajax call which refreshes the data in the box on the main page.
This works perfectly first time. If you then click to change it again, the popup opens, allows you to select a new value, but this time pressing close on the popup triggers two click events which throws an null error in my MVC controller.
If you repeat this process it triggers 3 click events, so it's clear that live() is appending these events somewhere.
I've tried using on() and click(), but the page itself is made up of panels loaded in via ajax so I used live() to automatically bind the events.
Here is the code I'm using:
HTML
<p><!--Data to update goes here--></p>
Update Data
First Click event calling popup with Partial View
$('a.adjust').live('click', function (e) {
var jsonData = getJsonString(n[1]);
var url = '#Url.Action("ChangeOptions", "Search")';
var dialog = $('<div id="ModalDialog" style="display:none"></div>').appendTo('body');
// load the data via ajax
$.ajax({
url: url,
type: 'POST',
cache: false,
contentType: "application/json; charset=utf-8",
data: jsonData,
success: function (response) {
dialog.html(response);
dialog.dialog({
bgiframe: true,
modal: true
}
});
}
});
e.preventDefault();
});
Second click event the takes the new info to return updated partial view
$('a#close').live('click', function (event) {
var jsonData = getJsonString(n[1]);
var url = '#Url.Action("GetChangeInfo", "Search")';
$.ajax({
url: url,
type: 'POST',
contentType: "application/json; charset=utf-8",
data: jsonData,
success: function (response) {
$('#box-' + #column).html(response); //this refreshes the box on the main page
},
error: function () {
}
});
$('#ModalDialog').dialog('close');
event.preventDefault();
});
Anybody know what might be happening here, and how I could resolve it?
Use namespaces to unbind previous click binds like this:
$('a.adjust').unbind('click.adjustclick');
Then bind the click action to a.adjust:
$('a.adjust').bind('click.adjustclick', function(){
//your code here
//note the return false, this prevents the browser from visiting the URL in the href attribute
return false;
});
If i understand you correctly, you try to run the second click action when the dialog is closed. Therefor I would use the build in close function for the dialog like this:
$('a.adjust').bind('click.adjustclick', function(){
var jsonData = getJsonString(n[1]);
var url = '#Url.Action("ChangeOptions", "Search")';
var dialog = $('<div id="ModalDialog" style="display:none"></div>').appendTo('body');
// load the data via ajax
$.ajax({
url: url,
type: 'POST',
cache: false,
contentType: "application/json; charset=utf-8",
data: jsonData,
success: function (response) {
dialog.html(response);
dialog.dialog({
bgiframe: true,
modal: true,
close: function(){
var jsonData2 = getJsonString(n[1]);
var url2 = '#Url.Action("GetChangeInfo", "Search")';
$.ajax({
url: url2,
type: 'POST',
contentType: "application/json; charset=utf-8",
data: jsonData2,
success: function (response2) {
$('#box-' + #column).html(response2); //this refreshes the box on the main page
},
error: function () {
}
});
}
}
});
}
});
});
If you are using your own button a#close, bind a click event to it to close the dialog, it will automatically fire the close function for the dialog.
$('a#close').unbind('click.closedialog');
$('a#close').bind('click.closedialog', function () {
$('#ModalDialog').dialog('close');
return false;
}
Try this:
$('a#close').unbind('click').bind('click', function (event) {
//Your Code
});
After $.ajax post request to the controllers action I would like to get info from the server and then update my partial view, for example I have a list rendered in my view I delete an item from the list using the $.ajax post request and then i would like my list to update itself asynchronously.
Here is my function that deletes the item from the list:
$(".btnDeleteCurrentFavSong").click(function () {
var songId = $(this).attr('name');
$.ajax({
type: 'POST',
url: "/Home/DeleteCurrentFav/",
data: { id: songId },
success: ShowMsg("Song deleted successfully"),
error: ShowMsg("There was an error therefore song could not be deleted, please try again"),
dataType: "json"
});
});
Should I somehow redirect to the action on ajax success that returns the list of songs to the view?
if your clicked list item looked like this:
<li name="120">Artist - Title</li>
your javascript could look something like this:
$(".btnDeleteCurrentFavSong").click(function () {
var songId = $(this).attr('name');
$.ajax({
type: 'POST',
url: "/Home/DeleteCurrentFav/",
data: { id: songId },
success: function () {
ShowMsg("Song deleted successfully");
$("li[name=" + songId + "]").remove();
},
error: ShowMsg("There was an error therefore song could not be deleted, please try again"),
dataType: "json"
});
});
It depends upon the user experience that you wish to give. Convention dictates that a user should be shown the effect of their action. From your example it appears that you are doing this via the ShowMsg function. As to whether you should redirect or not, I'm afraid there's nothing authororative out there, do whatever is consistent across your site and would feel natural to users.
option A
return deleted item id from action
on success remove deleted item with js
option B
return partial view from action
on success replace container with rendered html