I have to refresh view page without clicking on refresh button.
Javascript code:--
<script type="text/javascript">
$(function () {
var metaId = $("#ID").val();
var img = $("##name input[type=hidden]").val();
if ("#found" == "False") {
$.post(rootURL + "Picture/AddThumb", { guidOrName: img, meta: metaId, id: contentId }, function (data) {
//arrangePoster([data]);
});
}
});
</script>
Post sometimes doesn't work.
It is better to use ajax jquery method.
http://api.jquery.com/jquery.ajax/
Then on Picture/AddThumb add printing parameters.
Use done to show data resulted ( to test also if it works correctly )
Related
I'have and AJAX post request:
$(document).ready(function() {
$("span").click(function(e) {
e.preventDefault();
e.stopPropagation();
var URL = "someURL";
$.post(URL, this.id, function(data, status) {
var val = parseInt(document.getElementById(this.data).innerHTML)
document.getElementById(id).innerHTML = val + 1 ;
document.getElementById(id).disabled=true;
});
});
});
Read
<span id="${book.id}">
This script is working as expected; a button with number in it increase by one.
The problems are:
A refresh of the page occurs. On button click it reloads all on the page.
I'm not able to disable the button after the change
In short I need a count button which increase by 1 and can be changed once per user.
Update It seems that reload it's related to another function defined as
$(document).ready(function() {
So i have one in the body and one in the head.
Of course it refreshes the page, you're sending it a link to go to via href. Instead, remove the href, and put an onclick event and handler. Replace your anchor tag, with this:
<a onclick="runFunction()">Read</a>
And replace your script, with this.
<script>
function runFunction(){
$(document).ready(function(){
$("span").click(function(e){
e.preventDefault();
e.stopPropagation();
var URL="someURL";
$.post(URL,
this.id,
function(data,status){
var val = parseInt(document.getElementById(this.data).innerHTML)
document.getElementById(id).innerHTML = val + 1 ;
document.getElementById(id).disabled=true;
});
});
});
}
</script>
This is ASP.NET MVC project, I have placed a div at specific position in the page and added id dealProductAnchor. When this page loads or reloads normally it behaves as normal, but when a specific button is clicked I want that page after completing all postback progress when page loads done, it comes to the position of that div.
with java script I tried this, but did nothing any solution from server side or client side will be appreciable.
$(".button-1").click(function () {
if (localStorage && !localStorage.getItem('click')) {
localStorage.setItem('click', true);
}
});
$(document).ready(function () {
if (localStorage.getItem('click') == true) {
window.location = window.location.href + "#dealProductAnchor";
//click = false;
}
});
If you want to Achieve this via BackEnd you Can set a value into ViewBag and check it on .cshtml page like below:
Controller Code :
public ActionResult TextAction() {
// Do your Logic here
ViewBag.testValue = "test";
return View();
}
JavaScript Code:
$(document).ready(function () {
#if (ViewBag.testValue == "test") {
<text>$('html,body').animate({
scrollTop: ($("#dealProductAnchor").offset().top) - 200
}, 'slow');</text>
}
});
hope it helps you :)
Can you try this??
$(".button-1").click(function () {
$('html, body').animate({
scrollTop: $("#dealProductAnchor").offset().top
}, 2000);
});
Instead of setting:
window.location = window.location.href + "#dealProductAnchor";
In your $(document).ready callback, set the scrolltop using Javascript:
$(document).ready(function () {
if (localStorage.getItem('click') == true) {
$('body').scrollTop($("#dealProductAnchor").offset().top)
localStorage.removeItem('click');
}
});
If that doesn't work, you may need to add a window.setTimeout() wrapper to allow the browser to finish rendering:
$(document).ready(function () {
if (localStorage.getItem('click') == true) {
window.setTimeout(function() {
$('body').scrollTop($("#dealProductAnchor").offset().top);
});
localStorage.removeItem('click');
}
});
I'd try changing the form action attribute to include the hash
$(".button-1").click(function () {
//Change $("form") to use the form ID if you have one
$("form").attr("action", $("form").attr("action") + "#dealProductAnchor" );
}
If the button is submitting the form you may need to change the button from submit to button then submit the form in the click handler.
I have two page, the index.html and print.html
on my index.html page there is a calculator and i have a button called print that is located on index.html
when you click PRINT button, it would go to print.html. My problem is does not send the input value I made on index.html.
Note: This work if I dont go to print.html. the value shows up, but if set it on another page, the value does show up
PRINT.HTML
$(document).ready(function() {
$('#print_modal').click(function() {
e.preventDefault();
var rec_product = $('#rec_product').val();
var calc_height = $('#calc_height').val();
var calc_width = $('#calc_width').val();
var calc_depth = $('#calc_depth').val();
$('#srec_product').text(rec_product);
$('#sheight').text(calc_height);
$('#swidth').text(calc_width);
$('#sdepth').text(calc_depth);
window.print();
return false;
window.location.href = "print.html";
window.open(url, '_blank');
});
$("#print_modal").click(function(e) {
e.preventDefault();
var value = //get input value
$.get( "print.html", {"value":value});
});
this jQuery code will direct you to print.html?value=12(where 12 is your value).
You can then use PHP in print.html to retrieve the value ($_GET['value'])
You can use
window.location = '/print.html?rec_product='+$("#rec_product").val()+'&calc_height='+$("#calc_height").val();
for loading your print.html in same window tab.
If you are sending multiple parameter use following code to get value on print.html:
<script type="text/javascript">
load();
function load()
{
window.location.search.replace ( "?", "" ).split("&")
.forEach(function (item) {
var tmp = item.split("=");
document.getElementById(""+tmp[0]).value=tmp[1];
});
}
</script>
If you want to do it via jquery then use
$("#"+tmp[0]).val(tmp[1]);
insted of:
document.getElementById(""+tmp[0]).value=tmp[1];
You must have same name input type fields as send in parameter.
You can also use load function code in your
$( document ).ready(function() {
});
on print.html.
I'm trying to insert a form field into a popup page. For some reason the form field doesn't get inserted. Any pointers. Pasted below is the code:
$(".ddlAddListinTo li").click(function () {
var urlstring = "../ActionTypes";
var ddlselectedVal = $(this).attr('id');
var $form = $("#frmPostToEmailReports");
var AgentId = $form.find("#AgentId").val();
var ReportName = $form.find("#ReportName").val();
var Params = $form.find("#Params").val();
if (ddlselectedVal != "None" && ddlselectedVal != "select") {
$.post(urlstring, { AgentId: AgentId, ReportName: ReportName, Params: Params },
function (data) {
window.open(urlstring);
$("#divfrmInfo").append($form);
});
} });
HTML for my popup window :
<html>
<head></head>
<body>
<h2>AddToCart</h2>
<form name="frmContact">
<div>
<div class="CartHeader">
<ul>
<li>
<span class="CartImage"></span>
<span class="Title">To Add Listing(s) to Cart</span>
<span class="SubTitle">Select your personal cart or add listings to a contact</span>
</li>
</ul>
</div>
**<div id="divfrmInfo"></div>**
</div>
</form>
</body></html>
Looking at it some more you could do something like this, in opener document.
$(".ddlAddListinTo li").click(function () {
...
function (data) {
$(window.open(urlstring)).load ( function() {
// Here "this" will be the window.
$(this.document).find("#divfrmInfo").append($form.clone())
});
}
This way you attach to load event for popup by jQuery.
Have a look at .clone() for the append part. If it is not cloned it will be "ripped" from your main document and placed inside the popup.
Old answer:
...
Here is a fiddle (With fixed typo/formatting).
Next problem is in your script you say:
$(".ddlAddListinTo li").click
However, there are no elements in DOM with class ddlAddListinTo.
OK, by comment:
after window.open(urlstring); you are still in DOM of document from where you opened the window. As such:
$("#divfrmInfo")
will look for an element in original document with that ID, not in the popup.
If you add something like this in the popup document*:
$(window).load(function() {
// Call function "fill()" in opener.
window.opener.fill(document);
});
And this in your opener document:
function fill(what) {
// Here "what" is document of popup.
what.getElementById("divfrmInfo").innerHTML = "TEST";
}
I think the selector in your AJAX callback is unable to get DOM elements in the popup. Try this:
var tmpWin = window.open(urlstring);
$(tmpWin.document).find("#divfrmInfo").append($form);
THe problem is you are tring to aceess the DOM of the spawned page before it is there. The window is loaded but the HTML is still being loaded at the time you are trying to access it. You will need to change the parent and popup page. On the parent page you will need a function to return what you want to populate the pop up with. On the popup page you will want to call the function on the parent page when the DOM is ready.
Something like:
Parent Page
//Add this OUTSIDE your document ready
function getContent(){
return $("#frmPostToEmailReports");
}
Popup
//Include Jquery in your prefered way
<script>
$(document).ready(function () {
$("#divfrmInfo").append(window.opener.getContent());
});
</script>
Alos make sure to remove where you attempt to pupulate in the success function. Also see: How to get element and html from window.open js function with jquery
Previous Useless Answer Below
See this answer to get you started.
Instance you will want something like:
$(".ddlAddListinTo li").click(function () {
var urlstring = "../ActionTypes";
var ddlselectedVal = $(this).attr('id');
var $form = $("#frmPostToEmailReports");
var AgentId = $form.find("#AgentId").val();
var ReportName = $form.find("#ReportName").val();
var Params = $form.find("#Params").val();
if (ddlselectedVal != "None" && ddlselectedVal != "select") {
$.post(urlstring, { AgentId: AgentId, ReportName: ReportName, Params: Params },
function (data) {
var popup = window.open(urlstring);
popup.document.$("#divfrmInfo").append($form);
});
} });
Hi I asked before on how to load a div's content (A url) by clicking a button and not on page load before and I got this code as an answer:
<script type="text/javascript">
function toggleDiv(id){
if ($('#' + id).html() == '') {
$.ajax({
url: 'api.microsofttranslator.com/V2/Ajax.svc/Translate?appId=SOMETHING&from=en&to=de&text=Hello', // your url to microsoft translator
success: function(data) {
$('#' + id).html(data);
},
error: function() {
$('#' + id).html('The resource could not be loaded');
}
});
}
$('#' + id).toggle(); // Toggle div visibility
}
</script>
Show/Hide Value
<div id="a" style="display:none"></div>
First of all it doesn't work correctly and always show "The resource could not be loaded" if you put a txt link like (http://knowpersia.com/a.txt) it doesn't work either.
Secondly the Show/Hide Value link uses a href=# and onclick system to work. When I use it on my website it gets back to the homepage when I click it. Is there a way to change it to something like:
Show/Hide Value
Thanks
You have to pass an id to the toggleDiv() function, and you're passing a collection of objects -> toggleDiv('a') // Nop.
Also, if you're using jQuery, I suggest you get rid of that ugly inline code. Then, you can pass jQuery objects into your function:
Show/Hide Value
<div id="content"></div>
.
var toggleDiv = function($el) {
if ($el.empty()) { // You can just use `empty()`
$.ajax({
url : 'api.microsofttranslator.com/V2/Ajax.svc/Translate?appId=SOMETHING&from=en&to=de&text=Hello', // your url to microsoft translator
success : function (data) {
$el.html(data);
},
error : function () {
$el.html('The resource could not be loaded');
}
});
}
$el.toggle(); // Toggle div visibility
};
$('#link').click(function(){ toggleDiv($('#content')); });